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

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(10, 1920),
      itemHeight: nowSize(10, 1920),
      itemWidth: nowSize(10, 1920),
      x: "34%",
      itemGap: nowSize(50, 1920),
      textStyle: {
        color: "#FFFFFF",
        fontSize: 14,
      },
      orient: "horizontal",
      icon: "circle",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        if (params[0].seriesName == "行驶里程") {
          return params[0].seriesName + " : " + params[0].value + "公里";
        } else {
          return params[0].seriesName + " : " + params[0].value + "分钟";
        }
      },
    },
    grid: [
      {
        show: false,
        left: "20%",
        top: nowSize(44, 1920),
        bottom: nowSize(6, 1920),
        containLabel: true,
        width: "38%",
      },
      {
        show: false,
        left: "20%",
        top: nowSize(44, 1920),
        bottom: nowSize(26, 1920),
        width: "0",
        containLabel: false,
      },
      {
        show: false,
        right: "4%",
        top: nowSize(44, 1920),
        bottom: nowSize(6, 1920),
        containLabel: true,
        width: "38%",
      },
    ],
    xAxis: [
      {
        type: "value",
        inverse: true,
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: "#D8F1FF",
          fontSize: nowSize(12, 1920),
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed",
            color: "rgba(255, 255, 255, 0.2)", //设置网格线类型 dotted：虚线   solid:实线
          },
          show: true, //隐藏或显示
        },
      },
      {
        gridIndex: 1,
        show: false,
      },
      {
        gridIndex: 2,
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: "#D8F1FF",
          fontSize: nowSize(12, 1920),
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed",
            color: "rgba(255, 255, 255, 0.2)", //设置网格线类型 dotted：虚线   solid:实线
          },
          show: true, //隐藏或显示
        },
      },
    ],
    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(14, 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: 12,
        stack: "1",
        barWidth: nowSize(10, 1920),
        itemStyle: {
          borderRadius: nowSize(5, 1920),
          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
            {
              offset: 0,
              color: "rgba(0, 238, 253, 1)",
            },
            {
              offset: 1,
              color: "rgba(0, 238, 253, 0)",
            },
          ]),
        },
        data: props.echartData.data1,
      },
      {
        name: "行驶时长",
        type: "bar",
        stack: "2",
        barWidth: 12,
        xAxisIndex: 2,
        yAxisIndex: 2,
        barWidth: nowSize(10, 1920),
        itemStyle: {
          borderRadius: nowSize(5, 1920),
          color: new proxy.echarts.graphic.LinearGradient(0, 0, 1, 1, [
            {
              offset: 0,
              color: "rgba(255, 255, 0, 0)",
            },
            {
              offset: 1,
              color: "rgba(255, 255, 0, 1)",
            },
          ]),
        },
        data: props.echartData.data2,
      },
    ],
  });
  myChart.value.on("click", (params) => {
    activeName.value = params.dataIndex;
    emit("updateKey", activeName.value);
    myChart.value.resize();
  });
}
onMounted(() => {
  intChart();
  window.addEventListener("resize", resizeTheChart);
});
onBeforeUnmount(() => {
  myChart.value && myChart.value.dispose();
});
</script>

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