<template>
  <div v-if="pushData?.analyzeResult">
    <PageTitle>重大疾病风险分析</PageTitle>
    <div class="bg-white rounded">
      <StackBarChart
        :data="diseaseRiskMap"
        :legendData="legendData"
        class="h-[70vh]"
      />
      <div class="text-sm text-gray-600 indent-[2em] p-4">
        重大疾病评估结果分为5个等级。<span class="font-bold text-gray-800"
          >已确诊</span
        >：代表已经过医生确诊的疾病；<span class="font-bold text-gray-800"
          >有明显风险</span
        >：代表在某个疾病上有非常高的患病风险；<span
          class="font-bold text-gray-800"
          >有一定风险</span
        >：代表在某个疾病上有一定的风险，需要及时调整生活习惯。<span
          class="font-bold text-gray-800"
          >暂无风险</span
        >：代表在某个疾病上暂时没有发现风险；<span
          class="font-bold text-gray-800"
          >缺乏评估数据</span
        >：代表在某个疾病上上传的数据不足，无法进行评估。
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  shallowRef,
  watch,
  ref,
  nextTick,
  reactive,
  onMounted,
  provide,
  defineAsyncComponent,
  inject
} from "vue";

import { ElMessage, ElMessageBox } from "element-plus";

import PageTitle from "../PageTitle.vue";
import SubTitle from "../SubTitle.vue";
import StackBarChart from "./StackBarChart.vue";

const pushData = inject("pushData");
const legendData = ref([
  "已确诊",
  "有明显风险",
  "有一定风险",
  "暂无风险",
  "缺乏评估数据"
]);
const legendKeys = [
  "confirmed",
  "apparentRisk",
  "partRisk",
  "normal",
  "unknown"
];
const sortHealthData = data => {
  data.sort((a, b) => {
    // Compare based on "已确诊" (confirmed) field
    if (a.confirmed > b.confirmed) {
      return -1;
    } else if (a.confirmed < b.confirmed) {
      return 1;
    } else {
      // If "已确诊" is equal, compare based on "有明显风险" (apparentRisk) field
      if (a.apparentRisk > b.apparentRisk) {
        return -1;
      } else if (a.apparentRisk < b.apparentRisk) {
        return 1;
      } else {
        // If "有明显风险" is equal, compare based on "有一定风险" (partRisk) field
        if (a.partRisk > b.partRisk) {
          return -1;
        } else if (a.partRisk < b.partRisk) {
          return 1;
        } else {
          if (a.normal > b.normal) {
            return -1;
          } else if (a.normal < b.normal) {
            return 1;
          } else {
            // If all fields are equal, maintain the original order
            return 0;
          }
        }
      }
    }
  });

  return data;
};
pushData.value.analyzeResult.diseaseRiskMap = sortHealthData(
  pushData.value?.analyzeResult?.diseaseRiskMap
).reverse();
const diseaseRiskMap = ref({
  name: pushData.value?.analyzeResult?.diseaseRiskMap.map(v => v.name),
  data: legendKeys.map(key => {
    return pushData.value?.analyzeResult?.diseaseRiskMap.map(v => v[key]);
  })
});
</script>

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