<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: "PieChatOnly",
    },
    height: {
      type: String,
      default: "300px",
    },
    barData: {
      type: Array,
      default: () => [],
    },
    barDataX: {
      type: Array,
      default: () => [],
    },
    colorList: {
      type: Array,
      default: () => [],
    },
    series: {
      type: Array,
      default: () => [],
    },
    xAxis: {
      type: Array,
      default() {
        return [
          {
            type: "category",
            data: this.barDataX,
            axisTick: {
              show: false,
            },
          },
        ];
      },
    },
    yAxis: {
      type: Array,
      default() {
        return [
          {
            type: "value",
          },
        ];
      },
    },
    grid: {
      type: Object,
      default() {
        return {
          left: 60,
          right: 60,
        };
      },
    },
    legend: {
      type: Object,
      default() {
        return {
          right: "10",
          tooltip: {
            show: true,
          },
        };
      },
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  watch: {
    series: {
      handler(newName, oldName) {
        setTimeout(() => {
          this.drawLine();
        }, 500);
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // this.drawLine();
  },
  beforeDestroy() {
    const vm = this; // eslint-disable-line
    if (vm.myChart && !vm.myChart.isDisposed()) {
      //  判断图形已初始化,且未销毁
      vm.myChart.clear(); // //释放图形资源
      vm.myChart.dispose(); // //释放图形资源
      window.removeEventListener("resize", vm.resizeFn);
    }
  },
  methods: {
    resizeFn() {
      this.myChart.resize();
    },
    reDrawLine(val) {
      this.drawLine();
    },
    drawLine() {
      /* eslint-disable */
      const vm = this;
      if (!document.getElementById(vm.id)) return;
      vm.myChart = echarts.init(document.getElementById(vm.id));
      const xAxis = [...vm.xAxis];
      // {
      //   axisLine:{
      //     show: true,
      //     lineStyle:{
      //       color: '#D6D6D6'
      //     }
      //   },
      //   ...vm.xAxis,
      // }
      const yAxis = [...vm.yAxis];
      // {
      //   splitLine:{
      //     show:true,
      //     lineStyle:{
      //       type:'dashed'
      //     }
      //   },
      //   ...vm.yAxis,
      // }
      const data = [];
      const { barData } = vm;
      (barData || []).map((item) => {
        const _data = {
          value: item.statusCount,
          name: item.name,
          itemStyle: { color: item.statusColor },
        };
        data.push(_data);
      });
      const option = {
        color: this.colorList,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#000'
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        xAxis: xAxis,
        yAxis: yAxis,
        series: this.series,
        grid: this.grid,
        legend: this.legend,
      };
      if (this.colorList.length === 0) delete option.color;
      vm.myChart.setOption(option);
      window.addEventListener("resize", vm.resizeFn);
      setTimeout(() => {
        vm.myChart.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>
