<template>
  <div>
    <template v-if="pushData?.analyzeResult">
      <PageTitle>企业整体健康情况概览</PageTitle>
      <SubTitle>年龄与性别分布情况</SubTitle>
      <div class="bg-white rounded-b mb-4 flex justify-between w-full">
        <div class="w-1/3 p-4">
          <PieChart :data="genderTotal" class="h-60 w-full" />
          <div class="overflow-x-auto mt-4">
            <table class="min-w-full text-sm text-gray-800 text-center">
              <tr class="font-bold">
                <td class="p-2 border border-gray-200">总人数</td>
                <td class="p-2 border border-gray-200">男性</td>
                <td class="p-2 border border-gray-200">女性</td>
              </tr>
              <tr>
                <td class="p-2 border border-gray-200">
                  {{
                    pushData?.analyzeResult.maleTotal +
                    pushData?.analyzeResult.femaleTotal
                  }}
                </td>
                <td class="p-2 border border-gray-200">
                  {{ pushData?.analyzeResult.maleTotal }}
                </td>
                <td class="p-2 border border-gray-200">
                  {{ pushData?.analyzeResult.femaleTotal }}
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="w-2/3 p-4">
          <HorizontalBarChart :data="ageMap" class="h-60 w-full" />
          <div class="overflow-x-auto mt-4">
            <table class="text-sm text-gray-800 text-center min-w-full">
              <tr class="font-bold">
                <td
                  v-for="(item, index) in ageMap"
                  :key="index"
                  class="p-2 border border-gray-200"
                >
                  {{ item.name }}
                </td>
              </tr>
              <tr>
                <td
                  v-for="(item, index) in ageMap"
                  class="p-2 border border-gray-200"
                >
                  {{ item.value }}
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>

      <!-- <SubTitle>体检异常人数情况</SubTitle>
      <div class="bg-white rounded-b mb-4 flex items-center">
        <div class="w-80">
          <GaugeChart :data="anomaliesProportion" class="h-80" />
        </div>
        <div class="">
          <div class="flex space-x-4 p-4 border-b border-gray-200">
            <span></span>
            <div>
              <span class="text-sm text-gray-600">体检总人数：</span>
              <span class="text-lg font-bold">{{
                pushData?.analyzeResult.total
              }}</span>
            </div>
            <div>
              <span class="text-sm text-gray-600">体检异常人数：</span>
              <span class="text-lg font-bold">{{
                pushData?.analyzeResult.abnormalTotal
              }}</span>
            </div>
            <div>
              <span class="text-sm text-gray-600">异常占比：</span>
              <span class="text-lg font-bold"
                >{{
                  pushData?.analyzeResult.total
                    ? pushData?.analyzeResult.abnormalTotal /
                      pushData?.analyzeResult.total * 100
                    : 0
                }}%</span
              >
            </div>
          </div>
          <div class="flex space-x-4 p-4 border-b border-gray-200">
            <span></span>
            <div>
              <span class="text-sm text-gray-600">男性总人数：</span>
              <span class="text-lg font-bold">{{
                pushData?.analyzeResult.maleTotal
              }}</span>
            </div>
            <div>
              <span class="text-sm text-gray-600">男性异常人数：</span>
              <span class="text-lg font-bold">{{
                pushData?.analyzeResult.abnormalMaleTotal
              }}</span>
            </div>
            <div>
              <span class="text-sm text-gray-600">异常占比：</span>
              <span class="text-lg font-bold"
                >{{
                  pushData?.analyzeResult.maleTotal
                    ? pushData?.analyzeResult.abnormalMaleTotal /
                      pushData?.analyzeResult.maleTotal * 100
                    : 0
                }}%</span
              >
            </div>
          </div>
          <div class="flex space-x-4 p-4">
            <span></span>
            <div>
              <span class="text-sm text-gray-600">女性总人数：</span>
              <span class="text-lg font-bold">{{
                pushData?.analyzeResult.femaleTotal
              }}</span>
            </div>
            <div>
              <span class="text-sm text-gray-600">女性异常人数：</span>
              <span class="text-lg font-bold">{{
                pushData?.analyzeResult.abnormalFemaleTotal
              }}</span>
            </div>
            <div>
              <span class="text-sm text-gray-600">异常占比：</span>
              <span class="text-lg font-bold"
                >{{
                  pushData?.analyzeResult.femaleTotal
                    ? pushData?.analyzeResult.abnormalFemaleTotal /
                      pushData?.analyzeResult.femaleTotal * 100
                    : 0
                }}%</span
              >
            </div>
          </div>
        </div>
      </div> -->

      <SubTitle>不同健康人群等级情况</SubTitle>

      <div class="bg-white rounded-b mb-4 p-4 flex items-center">
        <div class="overflow-x-auto w-1/3">
          <table class="min-w-full table-fixed text-sm text-gray-800 text-center">
            <tr
              v-for="(item, index) in healthLevelMap"
              :key="index"
              class=""
            >
              <td class="w-1/2 font-bold p-2 border border-gray-200">
                {{ item.name }}
              </td>
              <td class="w-1/2 p-2 border border-gray-200">{{ item.value }}</td>
            </tr>
          </table>
        </div>
        <div class="w-2/3">
          <RingChart :data="healthLevelMap" class="h-64 w-full" />
        </div>
      </div>
    </template>
    <div class="text-sm bg-white text-gray-600 p-4 rounded mb-4 space-y-2">
      <p class="text-base">健康人群等级划分说明：</p>
      <p><span class="font-bold">重点关爱人群:</span>经人体重大疾病风控管理系统评估后，存在已确诊或具有明显风险疾病的人群。</p>
      <p><span class="font-bold">一般健康人群:</span>经人体重大疾病风控管理系统评估后，无已确诊或具有明显风险疾病但存在具有一定风险疾病的人群。</p>
      <p><span class="font-bold">基本健康人群:</span>经人体重大疾病风控管理系统评估后，无已确诊、无明显风险、无一定风险疾病的人群。</p>
    </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 PieChart from "./PieChart.vue";
import HorizontalBarChart from "./HorizontalBarChart.vue";
import GaugeChart from "./GaugeChart.vue";
import RingChart from "./RingChart.vue";

const pushData = inject("pushData");
const genderTotal = ref([
  { value: pushData.value?.analyzeResult?.maleTotal, name: "男性" },
  { value: pushData.value?.analyzeResult?.femaleTotal, name: "女性" }
]);
const ageMap = pushData.value?.analyzeResult?.ageMap.map(v => {
  return {
    name: v.ageText,
    value: v.total
  };
});

const anomaliesProportion = ref({
  value:
    parseFloat((pushData.value?.analyzeResult?.abnormalTotal /
    pushData.value?.analyzeResult?.total * 100).toFixed(2)),
  name: "异常占比"
});
const healthLevelMap = ref(pushData.value?.analyzeResult?.healthLevelMap.map(v => {
  return {
    name: v.healthLevel,
    value: v.total
  };
}));
</script>

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