<template>
  <lay-container fluid="true" style="padding: 20px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <lay-form style="margin-top: 20px">
            <lay-row>
              <lay-col :md="5">
                <lay-form-item label="年度：" label-width="50">
                  <lay-date-picker type="year" :max="dayjs().format('YYYY')" v-model="searchAccount" placeholder="请选择" allow-clear></lay-date-picker>
                </lay-form-item>
              </lay-col>
              <lay-col :md="4">
                <lay-form-item label-width="0">
                  <lay-button type="primary" @click="toSearch">查询</lay-button>
                  <lay-button @click="toReset">重置</lay-button>
                </lay-form-item>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-card>
      </lay-col>
      <lay-col :md="24">
        <lay-card>
          <div style="padding: 10px">
            <span style="font-size: 18px;vertical-align: center;margin-right: 20px">月度自评列表</span>
            <!-- <lay-button type="primary" size="sm">导出Excel</lay-button> -->
          </div>
          <lay-tab v-model="current1" @change="openTab">
            <lay-tab-item v-for="item in tabList" :title="item.title" :id="item.id">
              <lay-table :columns="columns" :dataSource="dataSource" :even="true" height="500px" size="lg">
                <template v-slot:id="{ data }">
                  {{ data.id }}
                </template>
                <template v-slot:username="{ data }">
                  {{ data.username }}
                </template>
                <template v-slot:password="{ data }">
                  {{ data.password }}
                </template>
                <template v-slot:operator="{ data }">
                  <span style="color: #00A394;cursor: pointer" v-if="data.if_month == 1"
                    @click="getMonthlyInfo(data)">详情</span>
                  <span style="color: #00A394;cursor: pointer" v-if="data.if_month == 2" @click="openZp(data)">开始自评</span>
                </template>
              </lay-table>
            </lay-tab-item>
          </lay-tab>

        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
  <lay-layer v-model="visible11" title="月度自评详情" :type="4" :shade="true" :area="['950px', '100%']"
    :btn="addIsInfo == 1 ? addButton : ''">
    <lay-container fluid="true" style="padding: 20px">
      <lay-table :default-expand-all="true" ref="tableRef6" children-column-name="children" :columns="columns6"
        :data-source="dataSource6">
        <template v-slot:base_score="{ data }">
          <div v-if="data.pid == 0">题目总分：{{ data.base_score }}</div>
          <div v-if="data.pid != 0">{{ data.base_score }}</div>
        </template>
        <template v-slot:content_score="{ row, column, rowIndex }">
          <div v-if="row.pid == 0">已评总分：{{ row.avg_score?row.avg_score:0 }}</div>
          <lay-input-number @change="inputChange(row, rowIndex, column)" v-if="row.pid != 0" :disabled="addIsInfo == 2"
            :min="0" :max="row.base_score" v-model="row.content_score" position="right"></lay-input-number>
        </template>
      </lay-table>
    </lay-container>
  </lay-layer>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { layer } from '@layui/layer-vue'
import {
  MonthlyList,
  MonthlyContent, MonthlyCreate, MonthlyInfo, userEvaluationData
} from '../../api/module/home'
import { useUserStore } from "@/store/user";
import dayjs from "dayjs";
const current1 = ref(1);
const tabList = ref([]);
const userStore = useUserStore()
const visible11 = ref(false);


const dataSource = ref([]);

const addIsInfo = ref(1);

onMounted(() => {
  //getMonthlyList();
  //getMonthlyContent();
  getUserEvaluationData();
})
const inputChange = (row) => {
  //计算出dataSource6里分数在children下所有的已评总分 
  let total = 0;
  const index = dataSource6.value.findIndex(item => item.id === row.pid);
  dataSource6.value[index].children.forEach(item => {
    total += parseInt(item.content_score);
  });
  //找到row的index
  dataSource6.value[index].avg_score = total;
  dataSource6.value[index].content_score = total;
}
//自评列表总分
const inputListZpShow = () => {
  //计算出dataSource6里分数在children下所有的已评总分 

  dataSource6.value.forEach((item, index) => {
    let total = 0;
    item.children.forEach(item2 => {
      total += parseInt(item2.content_score);
    });
    dataSource6.value[index].avg_score = total;
    dataSource6.value[index].content_score = total;
  });
}
const openZp = () => {
  visible11.value = true;
  addIsInfo.value = 1
  getMonthlyContent();
}
const openTab = (d) => {
  console.log(d)
  current1.value = d;
  dataSource.value = [];
  getMonthlyList();
}
const getUserEvaluationData = () => {
  userEvaluationData({}).then((res) => {
    console.log(res)
    if (res.code == 1) {
      tabList.value = res.data;
      current1.value = res.data[0].id;
      getMonthlyList();
    } else {
      layer.msg(res.msg, { icon: 2 })
    }
  })
}
const getMonthlyInfo = (item) => {
  visible11.value = true;
  addIsInfo.value = 2;
  MonthlyInfo({ 'evaluation_schedule_id': current1.value, 'user_id': userStore.userInfo.id, 'month': item.month }).then((res) => {
    console.log(res)
    if (res.code == 1) {
      dataSource6.value = res.data;
      inputListZpShow();
    } else {
      layer.msg(res.msg, { icon: 2 })
    }
  })
}
function toSearch() {
  console.log(searchAccount.value)
  //layer.load(2, {time: 3000})
  getMonthlyList();
}

const searchAccount = ref(dayjs().year())

function toReset() {
  searchAccount.value = dayjs().year()
}
const getMonthlyList = () => {
  MonthlyList({ 'id': current1.value, time: searchAccount.value }).then((res) => {
    console.log(res)
    if (res.code == 1) {
      dataSource.value = res.data;
    } else {
      layer.msg(res.msg, { icon: 2 })
    }
  })
}
const dataSource6 = ref([]);
const getMonthlyContent = () => {
  MonthlyContent({ 'id': current1.value }).then((res) => {
    console.log(res)
    if (res.code == 1) {
      dataSource6.value = res.data;
    } else {
      layer.msg(res.msg, { icon: 2 })
    }
  })
}
const columns6 = [
  {
    title: "考评项目",
    width: "300px",
    key: "project_name"
  },
  {
    title: "分值",
    width: "100px",
    align: 'center',
    key: "base_score",
    customSlot: 'base_score',
    totalRow: true
  },
  {
    title: "自评分",
    width: "100px",
    align: 'center',
    customSlot: 'content_score',
    key: "content_score",
    totalRow: true
  }
]

const columns = [
  {
    title: '月度',
    width: '120px',
    align: 'center',
    key: 'month'
  },
  {
    title: '考评对象',
    width: '150px',
    align: 'center',
    key: 'user'
  },
  {
    title: '参评时间',
    width: '250px',
    align: 'center',
    key: 'createtime',
    customSlot: ({row})=>{
      return row.createtime==''||row.createtime==null?'未参评':row.createtime;
    },
  },
  {
    title: '自评总分',
    key: 'self_score',
    align: 'center',
    customSlot: ({row})=>{
      return row.self_score==''?'未评分':row.self_score;
    },
  }, {
    title: '科室评分',
    key: 'department_score',
    align: 'center',
    customSlot: ({row})=>{
      return row.department_score==''?'未评分':row.department_score;
    },
  },
  // {
  //   title: '医院评分',
  //   key: 'hospital_score',
  //   align: 'center',
  //   customSlot: ({row})=>{
  //     return row.hospital_score==''||row.hospital_score==0?'未评分':row.hospital_score;
  //   },
  // },
  {
    title: '操作',
    width: '180px',
    customSlot: 'operator',
    key: 'operator',
    align: 'center',
    fixed: 'right'
  }
]



const addButton = ref([
  {
    text: "确认",
    callback: async () => {
      var json = JSON.stringify(dataSource6.value);
      var res = await MonthlyCreate({ 'json': json, 'user_id': userStore.userInfo.id, evaluation_schedule_id: current1.value });
      console.log(res)
      if (res.code == 1) {
        layer.msg('提交成功！', { icon: 1 })
        visible11.value = false;
        getMonthlyList();
        //getMonthlyContent();
      } else {
        layer.msg(res.msg, { icon: 2 })
      }
    }
  },
  {
    text: "取消",
    callback: () => {
      visible11.value = false;
    }
  }
])
</script>
<style>
.layui-table-header .layui-table-cell {
  background-color: #ECF8FA !important;
}
</style>
