<template>
  <div>
    <PageTitle>{{ props.data?.departmentName }}健康分析</PageTitle>

    <SubTitle>部门异常指标情况</SubTitle>
    <div class="bg-white rounded-b mb-4">
      <BarChart :data="total" :colors="['#ffaa25']" class="h-60" />
    </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>
    <!-- <SubTitle>重要异常项目发生原因分析</SubTitle> -->
  </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 BarChart from "./BarChart.vue";
import RingChart from "./RingChart.vue";
const pushData = inject("pushData");

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});
const total = ref(
  props.data?.result.abnormalIndicatorMap
    .map(v => {
      return {
        name: v.indicatorName,
        value: v.total
      };
    })
    // .filter(v => v.value)
    .sort((a, b) => b.value - a.value)
);
const healthLevelMap = ref(
  props.data?.result.healthLevelMap
    .map(v => {
      return {
        name: v.healthLevel,
        value: v.total
      };
    })
    // .filter(v => v.value)
    .sort((a, b) => b.value - a.value)
);
</script>

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