<template>
  <div class="p-4">
    <PageTitle>异常指标情况分析</PageTitle>
    <SubTitle>整体异常指标情况</SubTitle>
    <div>
      <BarChart v-if="total?.length" :data="total" :colors="['#ffaa25']" class="h-60" />
    </div>
    <SubTitle>男性异常指标情况</SubTitle>
    <div>
      <BarChart v-if="maleTotal?.length" :data="maleTotal" :colors="['#1890ff']" class="h-60" />
    </div>
    <SubTitle>女性异常指标情况</SubTitle>
    <div>
      <BarChart v-if="femaleTotal.length" :data="femaleTotal" :colors="['#ff8c9b']" class="h-60" />
    </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 BarChart from "./BarChart.vue";

const pushData = inject("pushData");
const total = ref(pushData.value?.analyzeResult.abnormalIndicatorMap.map(v => {
  return {
    name: v.indicatorName,
    value: v.total
  }
}))
const maleTotal = ref(pushData.value?.analyzeResult.abnormalIndicatorMaleMap.map(v => {
  return {
    name: v.indicatorName,
    value: v.total
  }
}))
const femaleTotal = ref(pushData.value?.analyzeResult.abnormalIndicatorFemaleMap.map(v => {
  return {
    name: v.indicatorName,
    value: v.total
  }
}))
</script>

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