<!--  专注力四维柱状图 -->
<template>
  <div :id="id" :class="className" :style="{ height, width }" />
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
  id: {
    type: String,
    default: "FocusBarChart",
    required: true,
  },
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "400px",
  },
  height: {
    type: String,
    default: "400px",
  },
  // dataSets:[[3.8, 4.7, 2.5, 5.0],[7.4, 8.3, 6.5, 9.0]]
  dataSets: {
    type: Array,
    default: [] as Array<number>,
  },
  // star:[1,2,3,4]
  star: {
    type: Array,
    default: [] as Array<number>,
  },
});
const labelFormatter = ({ value, dataIndex }) => {
  const star = props.star?.[dataIndex] * 1;
  const label = [];
  label.push(value);
  if (star === 1) {
    label.push("重度不足");
  }
  if (star === 2) {
    label.push("轻度不足");
  }
  if (star === 3) {
    label.push("中等水平");
  }
  if (star === 4) {
    label.push("良好水平");
  }
  if (star === 5) {
    label.push("优秀水平");
  }
  return label.join(" ");
};
/**
 * 配置项
 */
const options = {
  color: ["#f8b865", "#91cc75"],
  tooltip: {
    show: true,
  },
  grid: {
    left: "21%",
    right: "15%",
    top: "10%",
    bottom: "5%",
  },
  xAxis: [
    {
      type: "value",
      show: false,
      min: 0,
      max: 10,
    },
  ],
  yAxis: [
    {
      type: "category",
      data: ["分配性", "抗干扰性", "接受性", "持续性"],
      axisLabel: {
        fontSize: 14,
        color: "#00449b",
      },
      axisLine: {
        lineStyle: {
          color: "#4284f2",
          width: 2,
        },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "首次检测",
      type: "bar",
      data: props.dataSets?.[0],
      showBackground: true,
      backgroundStyle: {
        color: "#ffffff",
      },
      label: {
        show: true,
        position: "right",
        formatter: labelFormatter,
      },
    },
    {
      name: "最近检测",
      type: "bar",
      data: props.dataSets?.[1],
      showBackground: true,
      backgroundStyle: {
        color: "#ffffff",
      },
      label: {
        show: true,
        position: "right",
        formatter: labelFormatter,
      },
    },
  ],
};

onMounted(() => {
  // 图表初始化
  const chart = echarts.init(
    document.getElementById(<string>props.id) as HTMLDivElement
  );
  chart.setOption(options);
  // 大小自适应
  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>
