<template>
  <el-card shadow="never" class="h-full">
    <template #header>
      <div class="flex items-center">
        <!-- <DataLine style="width: 24px; height: 24px; margin-right: 5px" /> -->
        <img
          src="./imgs/fenbu.png"
          style="width: 30px; height: 24px; margin-right: 5px"
          alt=""
        />
        <h3>主要疾病占比</h3>
        <div class="ml-4 flex-1 flex justify-end">
          <el-radio-group v-model="tabType" size="small" @change="typeChange">
            <el-radio-button label="confirmed" value="confirmed"
              >已确诊</el-radio-button
            >
            <el-radio-button label="apparentRisk" value="apparentRisk"
              >有明显风险</el-radio-button
            >
            <el-radio-button label="unknown" value="unknown"
              >缺乏评估数据</el-radio-button
            >
          </el-radio-group>
        </div>
      </div>
    </template>
    <el-row>
      <div style="height: 28vh; width: 100%" class="chart-container relative">
        <ComponentChart ref="chartsRef"></ComponentChart>
      </div>
    </el-row>
  </el-card>
</template>

<script setup>
import { nextTick, ref, computed, onMounted } from "vue";
import ComponentChart from "@/components/Chart.vue";
import { DataLine } from "@element-plus/icons-vue";

import { useLargeScreenStoreHook } from "@/store/modules/largeScreen";
const useLargeScreenHook = useLargeScreenStoreHook();

const largeScreenGlobalData = computed(() => {
  return useLargeScreenHook?.largeScreenGlobalData;
});
const chartsRef = ref();

const tabType = ref("confirmed");

const xAxisData = ref([]);
const seriesData = ref([]);
const seriesMax = ref(0);
const typeChange = () => {
  if (tabType.value == "confirmed") {
    let map = Object.keys(
      largeScreenGlobalData.value?.archivesMedicalHistoryDiseaseMap || {}
    ).map(key => {
      return {
        name: key,
        value:
          largeScreenGlobalData.value?.archivesMedicalHistoryDiseaseMap[key]
      };
    });
    map.sort((a, b) => a.value - b.value);
    xAxisData.value = map.map(v => v.name);
    seriesMax.value = largeScreenGlobalData.value?.total;
    seriesData.value = map.map(v => {
      return {
        value: formatterScale(v.value, seriesMax.value),
        rawVal: v.value
      }
    });
  } else {
    let diseaseRiskMap = [...largeScreenGlobalData.value?.diseaseRiskMap];
    diseaseRiskMap.sort((a, b) => a[tabType.value] - b[tabType.value]);
    xAxisData.value = diseaseRiskMap.map(v => v.name);
    // seriesData.value = diseaseRiskMap.map(v => parseFloat((v[tabType.value] / largeScreenGlobalData.value?.assessedArchivesTotal).toFixed(2)))
    seriesMax.value = largeScreenGlobalData.value?.assessedArchivesTotal;
    seriesData.value = diseaseRiskMap.map(v => {
      return {
        value: formatterScale(v[tabType.value], seriesMax.value),
        rawVal: v[tabType.value]
      }
    });
  }

  console.log(xAxisData.value);
  nextTick(() => {
    initChart();
  });
};

const formatterScale = (value, max) => {
  return parseFloat(((value / max) * 100).toFixed(2));
};
const initChart = () => {
  const option = {
    grid: {
      left: "2%",
      right: "8%",
      bottom: "2%",
      top: "8%",
      containLabel: true
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none"
      },
      formatter: function (params) {
        return params[0].name + " : " + params[0].data.rawVal + '人';
      }
    },
    yAxis: {
      show: true,
      type: "value",
      // max: seriesMax.value,
      max: 100,
      // interval: seriesMax.value / 4,
      splitNumber: 5,
      axisLabel: {
        show: true,
        // interval: 1,
        formatter: val => {
          return val+ "%";
          // const scale = 100 / seriesMax.value; // 计算缩放比例
          // const index = Math.floor((val * scale) / 20) * 20; // 计算当前值对应的刻度
          // return index === 0 ? "0%" : `${(index / scale).toFixed(0)}%`;
        }
      }
    },
    xAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          interval: 0,
          show: true,
          rotate: 320,
          formatter: name => {
            return name.length > 5 ? name.slice(0, 5) + "..." : name;
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
        },
        data: xAxisData.value
      }
    ],
    series: [
      {
        name: "人数",
        type: "bar",
        zlevel: 1,
        barGap: '30%',
        itemStyle: {
          normal: {
            // barBorderRadius: 30,
            color: "#5E8CFB" // 柱体颜色
          }
        },
        label: {
          show: true,
          position: "top",
          // distance: 10,
          textStyle: {
            color: "#648cfa" // 右边百分比数值
          },
          // formatter: params => {
          //   return formatterScale(params.value, seriesMax.value) + "%";
          // }
          formatter: params => {
            return params.value + "%";
          }
        },
        // barWidth: 23,
        data: seriesData.value
      }
    ]
  };

  chartsRef.value.setOption(option);
};
onMounted(() => {
  setTimeout(() => {
    typeChange();
  }, 500);
});
</script>
<style scoped lang="scss"></style>
