<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: () => [],
    },
    axisPointer: {
      type: String,
      default: "auto",
    },
    xAxis: {
      type: Object,
      default() {
        return {
          type: "category",
          data: this.barDataX,
          axisTick: {
            show: false,
          },
        };
      },
    },
    yAxis: {
      type: Array,
      default() {
        return [];
      },
    },
    grid: {
      type: Object,
      default() {
        return {
          left: 60,
          right: 10,
        };
      },
    },
    legend: {
      type: Object,
      default() {
        return {
          right: "10",
          tooltip: {
            show: true,
          },
        };
      },
    },
    option: {
      type: Object,
      default() {
        return null;
      },
    },
  },
  data() {
    return {
      myChart: null,
      interval: 1,
      maxNum: 5,
    };
  },
  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() {
      if (this.series.length > 0 && this.series[0].data.length > 0) {
        const maxValue = Math.max.apply(null, this.series[0].data);
        if (maxValue < 6) {
          this.interval = 1;
        } else {
          this.maxNum = (parseInt(maxValue / 5, 10) + 1) * 5;
          this.interval = this.maxNum / 5;
        }
        if (this.yAxis && this.yAxis.length > 0) {
          this.yAxis[0].max = this.maxNum;
          this.yAxis[0].interval = this.interval;
        }
      }
      /* eslint-disable */
      const vm = this;
      if (!document.getElementById(vm.id)) return;
      vm.myChart = echarts.init(document.getElementById(vm.id));
      const xAxis = {
        axisLine: {
          show: true,
          lineStyle: {
            color: "#D6D6D6",
          },
        },
        ...vm.xAxis,
      };
      const yAxis = [...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: {
          show: true, // 是否显示
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器配置项。
            type: "shadow", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: this.axisPointer, // 指示器的坐标轴。
            snap: true, // 坐标轴指示器是否自动吸附到点上
          },
          // showContent: true, //是否显示提示框浮层，默认显示。
          // triggerOn: 'mouseover', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。
          // enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
          renderMode: "html", // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。
          borderColor: "#333", // 提示框浮层的边框颜色。
          borderWidth: 0, // 提示框浮层的边框宽。
          padding: 5, // 提示框浮层内边距，
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontFamily: "sans-serif",
            fontSize: 14,
          },
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);", // 额外附加到浮层的 css 样式
          confine: false, // 是否将 tooltip 框限制在图表的区域内。
          formatter(params) {
            let showStr = "";
            for (var i = 0; i < params.length; i++) {
              showStr += `${params[i].seriesName} : ${params[i].value} ${
                params[i].seriesName === "达成率" ? "%" : ""
              } <br/>`;
            }
            return showStr;
          },
        },
        graphic: {
          type: "text",
          top: "10",
          left: "0",
          style: {
            fontSize: 16,
            fontFamily: "AppleSystemUIFont",
            fontWeight: "normal",
            fontStyle: "normal",
            color: "rgba(51,51,51,1)",
          },
        },
        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, ...vm.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>
