<template>
  <div class="text-sm">
    <div v-if="resultRawJson?.result" class="mx-auto space-y-8">
      <page-title>
        <template #icon>
          <img
            src="@/assets/riskAnalysis/icon-tumor.png"
            alt=""
            class="h-full"
          />
        </template>
        <span>{{
          resultRawJson.result.reportConfig?.[
            classificationCfg[classification]?.cfgKey
          ]?.sectionName || "风险评估"
        }}</span>
      </page-title>

      <div>
        <sub-title type="danger" class="break-inside-avoid page-break-auto">
          <span>{{
            resultRawJson.result.reportConfig?.[
              classificationCfg[classification]?.cfgKey
            ]?.sectionContent[1]?.title || "疾病风险评估及建议"
          }}</span>
        </sub-title>
        <table
          cellspacing="0"
          v-if="majorDisease.length"
          class="border-collapse border border-gray-300 w-full mb-4"
        >
          <tr
            class="page-break-inside-avoid break-inside-avoid page-break-auto"
          >
            <td
              v-for="(column, columnIndex) in [
                '疾病名称',
                '患病风险',
                '建议检查项目',
                '建议就医时间',
                '对应科室'
              ]"
              :key="columnIndex"
              class="page-break-inside-avoid border border-gray-200 p-4 text-gray-700 bg-gray-50 whitespace-nowrap"
            >
              {{ column }}
            </td>
          </tr>
          <tr
            v-for="(child, childIdx) in majorDisease"
            :key="childIdx"
            class="break-inside-avoid page-break-auto"
          >
            <td class="page-break-inside-avoid border border-gray-200">
              <div class="p-2">
                {{ child.name }}
              </div>
            </td>
            <td
              class="page-break-inside-avoid border border-gray-200 min-w-[6em]"
            >
              <div class="p-2">
                <span :class="riskDegreeLabel[child.riskDegree]?.class">{{
                  child.riskDesc
                }}</span>
              </div>
            </td>
            <td class="page-break-inside-avoid border border-gray-200">
              <div class="p-2">
                {{ (child.recommendItems || []).join("、") || "/" }}
              </div>
            </td>
            <td class="page-break-inside-avoid border border-gray-200">
              <div class="p-2">
                {{ child.followUpTime }}
              </div>
            </td>
            <td class="page-break-inside-avoid border border-gray-200">
              <div class="p-2">
                {{ (child.department || []).join("/") || "/" }}
              </div>
            </td>
          </tr>
        </table>
        <div
          v-else
          class="break-inside-avoid page-break-auto flex flex-col items-center justify-center py-6 mb-4 border border-solid border-gray-200 rounded-b"
        >
          <img src="@/assets/riskAnalysis/empty-img.png" class="w-40" />
          <div class="text-gray-500 text-xs text-center mt-4">暂无分析数据</div>
        </div>
      </div>

      <div>
        <sub-title type="primary" class="break-inside-avoid page-break-auto">
          <span>{{
            resultRawJson.result.reportConfig?.[
              classificationCfg[classification]?.cfgKey
            ]?.sectionContent[3]?.title || "相关数据结果汇总"
          }}</span>
        </sub-title>
        <table
          cellspacing="0"
          v-if="medDatas.length"
          class="border-collapse border border-gray-300 w-full mb-4"
        >
          <thead>
            <tr
              class="page-break-inside-avoid break-inside-avoid page-break-auto"
            >
              <td
                v-for="(column, columnIndex) in [
                  '检查名称',
                  '项目',
                  '结果',
                  '单位',
                  '参考范围',
                  '检查时间'
                ]"
                :key="columnIndex"
                class="page-break-inside-avoid border border-gray-200 p-4 text-gray-700 bg-gray-50 whitespace-nowrap"
              >
                <!-- class="border border-gray-200 px-4 py-2 text-red-500 bg-red-50 whitespace-nowrap" -->
                {{ column }}
              </td>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(child, childIdx) in medDatas"
              :key="childIdx"
              class="break-inside-avoid page-break-auto"
            >
              <td class="page-break-inside-avoid border border-gray-200">
                <div class="p-2">
                  {{ child.checkItemName }}
                </div>
              </td>
              <td class="page-break-inside-avoid border border-gray-200">
                <div class="p-2">
                  {{ child.itermName }}
                </div>
              </td>
              <td class="page-break-inside-avoid border border-gray-200">
                <div class="p-2">
                  {{ child.value }}
                </div>
              </td>
              <td class="page-break-inside-avoid border border-gray-200">
                <div class="p-2">
                  {{ child.unit }}
                </div>
              </td>
              <td class="page-break-inside-avoid border border-gray-200">
                <div class="p-2">
                  {{ child.reference }}
                </div>
              </td>
              <td
                class="page-break-inside-avoid border border-gray-200 whitespace-nowrap"
              >
                <div class="p-2">
                  {{
                    dayjs(new Date(child.checkTime * 1000)).format("YYYY-MM-DD")
                  }}
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          v-else
          class="break-inside-avoid page-break-auto flex flex-col items-center justify-center py-6 mb-4 border border-solid border-gray-200 rounded-b"
        >
          <img src="@/assets/riskAnalysis/empty-img.png" class="w-40" />
          <div class="text-gray-500 text-xs text-center mt-4">暂无分析数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, shallowRef, watch, inject } from "vue";
import { deduplicateArrayByKeys } from "@/utils";
import dayjs from "dayjs";
import PageTitle from "@/components/PageTitle.vue";
import SubTitle from "@/components/SubTitle.vue";
const data = shallowRef();

const props = defineProps({
  classification: {
    type: Number
  },
  latest: {
    type: Boolean,
    default: false
  }
});
const resultRawJson = props.latest
  ? inject("latestResultRawJson")
  : inject("resultRawJson");
console.log("xxxx", resultRawJson);
const riskDegreeLabel = {
  4: {
    label: "已确诊",
    class: "font-bold text-red-500"
  },
  3: {
    label: "有明显风险",
    class: "font-bold text-red-600"
  },
  2: {
    label: "有一定风险",
    class: "font-bold text-yellow-500"
  },
  1: {
    label: "暂未发现风险",
    class: "font-bold text-green-500"
  },
  0: {
    label: "暂未发现风险",
    class: "font-bold text-gray-500"
  }
};
let classification = Number(props.classification || 1);
const classificationCfg = {
  1: {
    cfgKey: "reportCancerCfg"
  },
  2: {
    cfgKey: "reportCardiovascularCfg"
  },
  3: {
    cfgKey: "reportPersonaliseCfg"
  }
};
const majorDisease = ref([]);
const abnormalDatas = ref([]);
const medDatas = ref([]);
const formatList = () => {
  const major = resultRawJson.value.result.majorDisease
    .filter(v2 => v2.classification === classification)
    .sort((a, b) => b.riskDegree - a.riskDegree);
  majorDisease.value = deduplicateArrayByKeys(major, ["nodeId"]);
  const abnormalData = majorDisease.value
    .map(v => v.abnormalDatas)
    .flat()
    .filter(v => v);
  abnormalDatas.value = deduplicateArrayByKeys(abnormalData, ["nodeId"]);
  const medData = majorDisease.value
    .map(v => v.medDatas)
    .flat()
    .filter(v => v);
  medDatas.value = deduplicateArrayByKeys(medData, ["nodeId", "checkItemId"]);
  console.log("xxxx", majorDisease.value, abnormalDatas.value, medDatas.value);
};

watch(
  () => resultRawJson.value,
  () => {
    if (resultRawJson.value && resultRawJson.value.result) {
      formatList();
    }
  },
  {
    immediate: true
  }
);
</script>

<style lang="scss" scoped></style>
