<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: "lineChat",
    },
    height: {
      type: String,
      default: "280px",
    },
    lineData: {
      type: Array,
      default: () => [],
    },
    colorList: {
      type: Array,
      default: () => [],
    },
    series: {
      type: Array,
      default: () => [
        {
          data: this.lineDataY,
          type: "line",
        },
      ],
    },
    xAxis: {
      type: Object,
      default() {
        return {
          type: "category",
          data: [],
          axisTick: {
            show: false,
          },
        };
      },
    },
    yAxis: {
      type: Object,
      default() {
        return {
          type: "value",
        };
      },
    },
    grid: {
      type: Object,
      default() {
        return {};
      },
    },
    legend: {
      type: Object,
      default() {
        return {
          right: "10",
          tooltip: {
            show: true,
          },
        };
      },
    },
    tooltip: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      myChart: null,
      interval: 1,
      maxNum: 5,
    };
  },
  watch: {
    series: {
      handler(newName, oldName) {
        this.drawLine();
      },
      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;
        }
      }
      /* 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 = {
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#D6D6D6",
          },
        },
        interval: this.interval,
        max: this.maxNum,
        ...vm.yAxis,
      };
      const option = {
        tooltip: {
          show: true, // 是否显示
          trigger: "item",
          axisPointer: {
            // 坐标轴指示器配置项。
            type: "shadow", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: "auto", // 指示器的坐标轴。
            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 === "oee" ? "%" : ""
          //     } <br/>`;
          //   }
          //   return showStr;
          // },
          ...this.tooltip,
        },
        xAxis: xAxis,
        yAxis: yAxis,
        series: this.series,
        grid: this.grid,
        legend: this.legend,
      };
      vm.myChart.setOption(option, true);
      vm.myChart.off("click"); //防止触发两次点击事件
      vm.myChart.getZr().on("click", (params) => {
        let pointInPixel = [params.offsetX, params.offsetY];
        if (vm.myChart.containPixel("grid", pointInPixel)) {
          let pointInGrid = vm.myChart.convertFromPixel(
            {
              seriesIndex: 0,
            },
            pointInPixel
          );
          let xIndex = pointInGrid[0]; //索引
          let handleIndex = Number(xIndex);
          let seriesObj = vm.myChart.getOption(); //图表object对象
          var op = vm.myChart.getOption();
          //获得图表中点击的列
          var month = op.xAxis[0].data[handleIndex]; //获取点击的列名
          this.$emit("click", month);
        }
      });
      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>
