<template>
  <div v-if="pushData?.analyzeResult">
    <PageTitle>主要异常指标情况分析</PageTitle>
    <div v-for="(item, index) in abnormalIndicatorGroupList" :key="index">
      <SubTitle type="warning">{{ item.groupName }}</SubTitle>
      <div class="bg-white rounded mb-4">
        <StackBarChartGender
          :data="item"
          :legendData="['男性', '女性']"
          class="h-60"
        />
      </div>
    </div>
    <!-- <template v-if="total?.length">
      <SubTitle type="warning">整体异常指标情况</SubTitle>
      <div class="bg-white rounded-b mb-4">
        <BarChart :data="total" :colors="['#ffaa25']" class="h-60" />
      </div>
    </template>
    <template v-if="maleTotal?.length">
      <SubTitle>男性异常指标情况</SubTitle>
      <div class="bg-white rounded-b mb-4">
        <BarChart :data="maleTotal" :colors="['#1890ff']" class="h-60" />
      </div>
    </template>
    <template v-if="femaleTotal?.length">
      <SubTitle type="danger">女性异常指标情况</SubTitle>
      <div class="bg-white rounded-b mb-4">
        <BarChart :data="femaleTotal" :colors="['#ff8c9b']" class="h-60" />
      </div>
    </template>
     -->
  </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 BarChart from "./BarChart.vue";
import StackBarChartGender from "./StackBarChartGender.vue";

const pushData = inject("pushData");
// const total = ref(
//   pushData.value?.analyzeResult?.abnormalIndicatorMap
//     .map(v => {
//       return {
//         name: v.indicatorName,
//         value: v.total
//       };
//     })
//     .filter(v => v.value)
//     .sort((a, b) => b.value - a.value)
// );
// const maleTotal = ref(
//   pushData.value?.analyzeResult?.abnormalIndicatorMaleMap
//     .map(v => {
//       return {
//         name: v.indicatorName,
//         value: v.total
//       };
//     })
//     .filter(v => v.value)
//     .sort((a, b) => b.value - a.value)
// );
// const femaleTotal = ref(
//   pushData.value?.analyzeResult?.abnormalIndicatorFemaleMap
//     .map(v => {
//       return {
//         name: v.indicatorName,
//         value: v.total
//       };
//     })
//     .filter(v => v.value)
//     .sort((a, b) => b.value - a.value)
// );
const abnormalIndicatorGroupList = ref(
  pushData.value?.analyzeResult?.abnormalIndicatorGroupList.map(v => {
    v.value = [
      v.list.map(v2 => v2.maleTotal),
      v.list.map(v2 => v2.femaleTotal)
    ];
    return v;
  })
);
</script>

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