<template>
  <div>
    <div :id="id" :style="{ height: height }" style="width: 100%"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    id: {
      type: String,
      default: "PieChatOne",
    },
    height: {
      type: String,
      default: "280px",
    },
    legend: {
      type: Object,
      default: () => {},
    },
    pieData: {
      type: Array,
      default: () => [],
    },
    typeList: {
      type: Array,
      default: () => [],
    },
    pieRadius: {
      type: Array,
      default: () => ["50%"],
    },
    colorList: {
      type: Array,
      default: () => [],
    },
    series: {
      type: Object,
      default: () => {},
    },
    seriesLabelShow: {
      type: Boolean,
      default: () => true,
    },
    seriesCenter: {
      type: Array,
      default: () => ["50%", "50%"],
    },
    option: {
      type: Object,
      default() {
        return null;
      },
    },
  },
  data() {
    return {
      myPieChart: null,
    };
  },
  watch: {
    pieData() {
      this.drawLine();
    },
  },
  mounted() {
    this.drawLine();
  },
  beforeDestroy() {
    const vm = this; // eslint-disable-line
    if (vm.myPieChart && !vm.myPieChart.isDisposed()) {
      //  判断图形已初始化,且未销毁
      vm.myPieChart.clear(); // //释放图形资源
      vm.myPieChart.dispose(); // //释放图形资源
      window.removeEventListener("resize", vm.resizeFn);
    }
  },
  methods: {
    resizeFn() {
      this.myPieChart.resize();
    },
    reDrawLine(val) {
      this.drawLine();
    },
    statusCheck(type) {
      return (
        ((this.pieData || []).find((item) => item.name === type) || {}).name ||
        ""
      );
    },
    drawLine() {
      /* eslint-disable */
      const vm = this;
      if (!document.getElementById(vm.id)) return;
      vm.myPieChart = echarts.init(document.getElementById(vm.id));
      const data = [];
      const { pieData, pieRadius } = vm;
      (pieData || []).map((item) => {
        const _data = {
          value: item.value,
          name: item.name,
          itemStyle: { color: item.color },
        };
        data.push(_data);
      });
      const option = {
        color: this.colorList,
        tooltip: {
          trigger: "item",
          formatter(params) {
            return `${params.name}: ${params.value}%`;
          },
        },
        legend: {
          bottom: "3%",
          left: "center",
          data: pieData,
          formatter(name) {
            let total = 0;
            let target;
            for (let i = 0, l = data.length; i < l; i++) {
              total += parseFloat(data[i].value);
              if (data[i].name === name) {
                target = data[i].value;
              }
            }
            const _name = vm.pieData.find((item) => item.name === name) || [];
            const arr = [
              `{a|${_name.name}}`,
              `{b|${(
                (isNaN(target / total) ? 0 : target / total) * 100
              ).toFixed(2)}%}`,
            ];
            return arr.join("");
          },
          textStyle: {
            fontSize: 13,
            rich: {
              a: {
                width: 50,
                fontSize: 12,
                color: "rgba(64,85,103,1)",
                lineHeight: 17,
              },
              b: {
                fontSize: 14,
                color: "rgba(51,51,51,1)",
                padding: [0, 0, 0, 10],
                lineHeight: 17,
              },
            },
          },
          ...this.legend,
        },
        graphic: {
          type: "text",
          top: "10",
          left: "0",
          style: {
            fontSize: 16,
            fontFamily: "AppleSystemUIFont",
            fontWeight: "normal",
            fontStyle: "normal",
            color: "rgba(51,51,51,1)",
          },
        },
        series: [
          {
            name: vm.$t("EQP_STATUS"),
            type: "pie",
            center: this.seriesCenter,
            radius: pieRadius,
            label: {
              show: this.seriesLabelShow,
              formatter: "{a|{b}: {c}%}",
              borderWidth: 1,
              borderRadius: 4,
              color: "#4F4F4F",
              fontFamily: "PingFangSC-Regular",
              fontSize: "12px",
              rich: {
                a: {
                  color: "#4F4F4F",
                  lineHeight: 17,
                  align: "center",
                },
              },
            },
            data,
            ...this.series
          },
        ],
      };
      if (this.colorList.length === 0) delete option.color;
      vm.myPieChart.setOption({...option, ...vm.option});
      window.addEventListener("resize", vm.resizeFn);
      setTimeout(() => {
        vm.myPieChart.resize();
      }, 100);
      /* eslint-enable */
    },
  },
};
</script>
<style lang="less">
.aboutChart {
  padding: 0 10px;
  margin-bottom: 18px;
  .availabilition,
  .utilization {
    display: inline-block;
    width: 49%;
    text-align: center;
    .percentage {
      font-size: 20px;
      color: rgba(51, 51, 51, 1);
      line-height: 23px;
    }
    .utilText {
      height: 18px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(64, 85, 103, 1);
      line-height: 18px;
    }
  }
}
</style>
