<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() {
  nextTick(() => {
    if (myChart.value) {
      myChart.value.resize();
    }
  });
}
//初始化
function intChart() {
  var data = [
    {
      name: "泵站指令",
      value: 0,
    },
    {
      name: "视频调度",
      value: 60,
    },
    {
      name: "语音调度",
      value: 80,
    },
    {
      name: "车辆调度",
      value: 100,
    },
  ].sort(function (a, b) {
    return b.value - a.value;
  });
  var max = Math.max(...data.map((item) => item.value)) + 100;
  function array2obj(array, key) {
    let resObj = {};
    for (let i = 0; i < array.length; i++) {
      resObj[array[i][key]] = array[i];
    }
    return resObj;
  }

  function getData(data) {
    let res = {
      series: [],
      yAxis: [],
    };
    for (let i = 0; i < data.length; i++) {
      res.series.push({
        name: i,
        type: "pie",
        clockwise: false,
        emphasis: {
          scale: false,
        },
        radius: [63 - i * 8 + "%", 58 - i * 8 + "%"],
        center: ["25%", "50%"],
        label: {
          show: false,
        },
        itemStyle: {
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            show: false,
          },
          borderWidth: 5,
        },
        data: [
          {
            value: data[i].value,
            name: data[i].name,
          },
          {
            value: max - data[i].value,
            name: "",
            itemStyle: {
              color: "#27689594",
              borderWidth: 0,
            },
            tooltip: {
              show: true,
            },
            emphasis: {
              scale: false,
            },
          },
        ],
      });
    }
    return res;
  }

  var objData = array2obj(data, "name");
  var optionData = getData(data);

  myChart.value = proxy.echarts.init(document.getElementById(id));
  myChart.value.clear();
  // 绘制图表
  myChart.value.setOption({
    tooltip: {
      show: true,
      // formatter: "{a}：{d}%"
    },
    legend: {
      // x: 'lefr',
      left: 220,
      y: "center",
      itemGap: 10,
      itemWidth: 10,
      itemHeight: 10,
      icon: "rect",

      formatter: function (name) {
        return "{title|" + name + "}{value|" + objData[name].value + "次" + "}";
      },
      textStyle: {
        rich: {
          title: {
            width: 10,
            fontSize: 16,
            color: "#fff",
            padding: [0, 0, 0, 10],
          },
          value: {
            fontSize: 16,
            color: "rgb(0, 222, 255)",
            padding: [0, 100],
          },
        },
      },
    },
    color: ["#0E8CFDFF", "#08DA80FF", "#2ECAFFFF", "#FF915BFF", "#F5BA45FF"],
    grid: {
      top: "0",
      left: "50%",
      containLabel: false,
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          inside: true,
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
          show: true,
        },
        data: optionData.yAxis,
      },
    ],
    xAxis: [
      {
        show: false,
      },
    ],
    series: optionData.series,
  });
  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>