<script setup lang="tsx">
  import { ref, watch, defineProps, onMounted } from "vue";
  import * as echarts from "echarts";

  // 接收 props
  const props = defineProps<{
    cdata: {
      category: string[];
      rateData: number[];
      barData: number[];
      lineData: number[];
    };
  }>();

  // 图表容器 DOM 引用
  const chartContainerRef = ref<HTMLDivElement | null>(null);
  // echarts 实例
  let chartInstance: echarts.ECharts | null = null;

  // 初始化图表
  const initChart = (options: echarts.EChartsOption) => {
    if (chartContainerRef.value) {
      if (!chartInstance) {
        chartInstance = echarts.init(chartContainerRef.value);
      }
      chartInstance.setOption(options);
    }
  };

  // 构建图表配置项
  const getOptions = (val: typeof props.cdata): echarts.EChartsOption => {
    return {
      tooltip: {
        show: true,
        trigger: "item",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
            backgroundColor: "#7B7DDC",
          },
        },
      },
      legend: { show: true },
      grid: {
        // @ts-ignore
        x: "8%",
        width: "88%",
        top: "5%",
        bottom: "7%",
      },
      xAxis: {
        data: val.category,
        axisLine: { lineStyle: { color: "#B4B4B4" } },
        axisTick: { show: false },
      },
      yAxis: [
        {
          splitLine: { show: false },
          axisLine: { lineStyle: { color: "#B4B4B4" } },
          axisLabel: { formatter: "{value} " },
        },
        {
          splitLine: { show: false },
          axisLine: { lineStyle: { color: "#B4B4B4" } },
          axisLabel: { formatter: "{value} " },
        },
      ],
      series: [
        {
          name: "贯通率",
          type: "line",
          smooth: true,
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 8,
          yAxisIndex: 1,
          itemStyle: {
            // @ts-ignore
            normal: {
              color: "#F02FC2",
            },
          },
          data: val.rateData,
        },
        {
          name: "已贯通",
          type: "bar",
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#956FD4" },
                { offset: 1, color: "#3EACE5" },
              ]),
            },
          },
          data: val.barData,
        },
        {
          name: "计划贯通",
          type: "bar",
          barGap: "-100%",
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(156,107,211,0.8)" },
                { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                { offset: 1, color: "rgba(156,107,211,0.2)" },
              ]),
            },
          },
          z: -12,
          data: val.lineData,
        },
      ],
    };
  };

  // 监听 props 数据变化，更新图表
  watch(
    () => props.cdata,
    (val) => {
      initChart(getOptions(val));
    },
    { immediate: true, deep: true }
  );

  onMounted(() => {
    initChart(getOptions(props.cdata));
  });

  // 渲染
  const height = "450px";
  const width = "100%";
</script>

<template>
  <div
    ref="chartContainerRef"
    :style="{ height, width }"
  />
</template>
