<template>
  <div class="chartBox" :id="id"></div>
</template>
<script setup name="pieChartGszl">
import { guid } from "@/utils/ruoyi";
const { proxy } = getCurrentInstance();
import { nowSize } from "@/utils/index.js";
const emit = defineEmits(["updateKey"]);
import bus from "@/bus";
const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  echartData: {
    type: Object,
    default: {},
  },
  ClickData: String,
  TypeID: String,
});

const id = guid();
const myChart = shallowRef("");
let activeName = ref(null);

watch(
  () => props.refresh,
  (value) => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    intChart();
  }
);
//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
//初始化
function intChart() {
  myChart.value = proxy.echarts.init(document.getElementById(id));
  myChart.value.clear();
  // 绘制图表
  myChart.value.setOption(
    {
      legend: {
        top: nowSize(2, 1920),
        itemHeight: nowSize(10, 1920),
        itemWidth: nowSize(10, 1920),
        x: "40%",
        itemGap: nowSize(50, 1920),
        textStyle: {
          color: "#FFFFFF",
          fontSize: 12,
        },
        orient: "horizontal",
        icon: "circle",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        backgroundColor: "#004284",
        borderColor: "#0B9BFF",
        borderRadius: 6, // 设置圆角大小
        // 自定义提示框文本样
        textStyle: {
          // 字体颜色
          color: "white",
          // 字体大小
          fontSize: 14,
        },
        formatter: function (params) {
          return params[0].seriesName + " : " + params[0].value + "h";
        },
      },
      grid: [
        {
          show: false,
          left: "20%",
          top: nowSize(30, 1920),
          bottom: nowSize(6, 1920),
          containLabel: true,
          width: "38%",
        },
        {
          show: false,
          left: "15%",
          top: nowSize(30, 1920),
          bottom: nowSize(6, 1920),
          width: "0",
          containLabel: false,
        },
        {
          show: false,
          right: "4%",
          top: nowSize(30, 1920),
          bottom: nowSize(6, 1920),
          containLabel: true,
          width: "38%",
        },
      ],
      xAxis: [
        {
          type: "value",
          inverse: true,
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
            color: "#EBFEFF",
            fontSize: nowSize(12, 1920),
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed",
              color: "rgba(255, 255, 255, 0.2)", //设置网格线类型 dotted：虚线   solid:实线
            },
            show: false, //隐藏或显示
          },
        },
        {
          gridIndex: 1,
          show: false,
        },
        {
          gridIndex: 2,
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
            color: "#D8F1FF",
            fontSize: nowSize(12, 1920),
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed",
              color: "rgba(255, 255, 255, 0.2)", //设置网格线类型 dotted：虚线   solid:实线
            },
            show: false, //隐藏或显示
          },
        },
      ],
      yAxis: [
        {
          type: "category",
          inverse: true,
          position: "right",
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(77, 149, 217, 0.15)", "rgba(77, 149, 217,0)"],
            },
          },
          axisLine: {
            show: false,
          },

          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: props.echartData.xData,
        },
        {
          gridIndex: 1,
          type: "category",
          inverse: true,
          position: "left",
          triggerEvent: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            // color: "rgba(255, 255, 255, 1)",
            fontSize: nowSize(12, 1920),
            color: (value, index) => {
              if (activeName.value == index) {
                return "#2CBBB6";
              } else {
                return "rgba(255, 255, 255, 1)";
              }
            },
          },
          data: props.echartData.xData,
        },
        {
          gridIndex: 2,
          type: "category",
          inverse: true,
          position: "left",
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(77, 149, 217, 0.15)", "rgba(77, 149, 217,0)"],
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: props.echartData.xData,
        },
      ],
      series: [
        {
          name: "夜间",
          type: "bar",
          barWidth: 16,
          stack: "1",
          label: {
            show: true,
            formatter: "{c} h",
            color: "white",
          },
          itemStyle: {
            borderRadius: [10, 0, 0, 10],
            color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
              {
                offset: 0,
                color: "RGBA(0, 0, 0, 0.6)",
              },
              {
                offset: 1,
                color: "RGBA(0, 0, 0, 1)",
              },
            ]),
          },
          data: props.echartData.data1,
        },
        {
          name: "白天",
          type: "bar",
          stack: "2",
          barWidth: 15,
          xAxisIndex: 2,
          yAxisIndex: 2,
          label: {
            show: true,
            formatter: "{c} h",
            color: "black",
          },
          itemStyle: {
            borderRadius: [0, 10, 10, 0],
            color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
              {
                offset: 0,
                color: "rgba(255, 255, 255, 1)",
              },
              {
                offset: 1,
                color: "rgba(255, 255, 255, 0.6)",
              },
            ]),
          },
          data: props.echartData.data2,
        },
      ],
    },
    true
  );

  myChart.value.off("click");
  // 监听点击事件
  myChart.value.on("click", function (params) {
    // params.value 是点击的X轴标签的值
    console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
    // 在这里可以执行相应的逻辑
    bus.emit("openJXFXDialog", {
      name: params.name,
      ClickData: props.ClickData,
    });
  });
}
onMounted(() => {
  intChart();
  window.addEventListener("resize", resizeTheChart);
});
onBeforeUnmount(() => {
  myChart.value && myChart.value.dispose();
});
</script>

<style lang="scss" scoped>
.chartBox {
  width: 100%;
  height: 100%;
}
</style>