<template>
  <div class="p-4" style="height: 80vh">
    <el-card shadow="never">
      <div class="text-center" v-if="!state.list.length">
        <el-empty />
        <Auth value="healthManage">
          <el-button type="primary" plain class="mb-10" @click="handleAdd"
            >添加管理计划</el-button
          >
        </Auth>
      </div>
      <div v-else>
        <ComponentManagementPlanDetail
          :list="state?.list"
          @onChangeStatus="onChangeStatus"
          @onEdit="onEdit"
          @onEvaluate="onEvaluate"
          @onDelete="onDelete"
        />
      </div>
    </el-card>
    <ComponentDialogSelectIllness v-model:show="state.visible" />
  </div>
</template>
<script setup>
import { request } from "@/utils";
import { reactive, computed } from "vue";

import { useRouter, useRoute } from "vue-router";
const [route, router] = [useRoute(), useRouter()];

import { useManageProjectStoreHook } from "@/store/modules/manageProject";
const useManageProject = useManageProjectStoreHook();

import ComponentDialogSelectIllness from "./DialogSelectIllness.vue";
import ComponentManagementPlanDetail from "./ManagementPlanDetail.vue";
import { ElMessage } from "element-plus";
const state = reactive({
  visible: false,
  list: []
});

const currentArchiveId = computed(() => {
  return useManageProjectStoreHook()?.currentArchiveId;
});
const getDetail = () => {
  request
    .get("/platformApi/dataService/diseaseManage/detail", {
      params: {
        archiveId: currentArchiveId.value
      }
    })
    .then(resp => {
      const response = resp.data;
      response?.forEach(item => {
        item.indicator = (item.indicator || []).map(v => {
          v.expand = true;
          v.list = v.list.map(v2 => {
            const dateList = {};
            v2.list.forEach(v3 => {
              if (dateList[v3.date]) {
                dateList[v3.date].push(v3);
              } else {
                dateList[v3.date] = [v3];
              }
              v2.list = Object.values(dateList);
            });
            return v2;
          });
          return v;
        });
      });
      state.list = response;
      console.log("state.list", state.list);
    });
};
const handleAdd = () => {
  state.visible = true;
};
const onEdit = index => {
  router.push(
    `/healthManagement/evaluate?illnessId=${state.list[index]?.diseaseId}&name=${state.list[index]?.disease}&id=${state.list[index]?.id}&archivesId=${currentArchiveId.value}&type=edit&level=${state.list[index]?.level}`
  );
};
const onEvaluate = index => {
  router.push(
    `/healthManagement/evaluate?illnessId=${state.list[index]?.diseaseId}&name=${state.list[index]?.disease}&id=${state.list[index]?.id}&archivesId=${currentArchiveId.value}&type=evaluate&level=${state.list[index]?.level}`
  );
};
const onDelete = index => {
  request
    .post("/platformApi/dataService/diseaseManage/delete", {
      id: state.list[index]?.id
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getDetail();
    });
};
const onChangeStatus = row => {
  request
    .post("/platformApi/dataService/diseaseManage/update/status", {
      id: row.id,
      status: row.status ? 0 : 1
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getDetail();
    });
};
getDetail();
</script>
