<template>
  <div :style="{ width: width, height: height }">
    <div
      v-show="!hasError"
      :class="{ handClass: hand === 'true' }"
      class="echarts"
      :id="domID"
      :style="{ width: width, height: height, cursor: 'col-resize' }"
    />
    <div v-show="hasError">{{ err }}</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import guid from "../../public_js/guid";
export default {
  name:'TslCharts',
  data() {
    return {
      hasError: false,
      err: "",
      domID: "tsl_chart_" + guid(),
      chart: null,
      timer1: null,
      timer2: null,
      timer3: null,
    };
  },
  props: {
    width: {
      default: "100%",
      type: String,
    },
    height: {
      default: "100%",
      type: String,
    },
    option: {
      default: null,
      type: Object,
    },
    hand: {
      default: "false",
      type: String,
    },
    echartsData: {
      type: [Array, Object],
      default: () => [{}],
    },
  },
  created() {
   
  },
  mounted() {
    window.addEventListener("resize", this.resizeB);
    try {
      if (this.option == null) {
        this.err = "找不到配置信息";
        this.hasError = true;
      } else {
        this.chart = echarts.init(document.getElementById(this.domID));
        document.getElementById(this.domID).style.height = "100%";
        this.chart.setOption(this.option);
        this.chart.on("click", (params) => {
          if (this.option.selfTitle === "事件统计") {
            if (params.componentType === "xAxis") {
              this.option.xAxis.axisLabel.textStyle.color = (value) => {
                return value === params.value ? "#40F6B9" : "#89ADBF";
              };
              this.option.series[0].itemStyle.normal = {
                barBorderRadius: [5, 5, 0, 0],
                color: (value) => {
                  return value.name === params.value
                    ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "rgba(66,255,190,1)" },
                        { offset: 1, color: "rgba(66,255,190,0.13)" },
                      ])
                    : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "rgba(0,226,255,1)" },
                        { offset: 1, color: "rgba(0,193,255,0.13)" },
                      ]);
                },
              };
            } else {
              this.option.xAxis.axisLabel.textStyle.color = (value) => {
                return value === params.name ? "#40F6B9" : "#89ADBF";
              };
              this.option.series[0].itemStyle.normal = {
                barBorderRadius: [5, 5, 0, 0],
                color: (value) => {
                  return value.name === params.name
                    ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "rgba(66,255,190,1)" },
                        { offset: 1, color: "rgba(66,255,190,0.13)" },
                      ])
                    : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "rgba(0,226,255,1)" },
                        { offset: 1, color: "rgba(0,193,255,0.13)" },
                      ]);
                },
              };
            }
            this.chart.setOption(this.option);
          }
        });
      }
    } catch (e) {
      this.err = e.message;
      this.hasError = true;
    }
  },
  activated() {
    this.timer1 = setTimeout(() => {
      this.raiseSroll();
      clearTimeout(this.timer1);
    }, 400);
    window.addEventListener("resize", this.resizeB);
  },
  deactivated() {
    window.removeEventListener("resize", this.resizeB);
    this.raiseSroll(false);
  },
  methods: {
    refresh: function () {
      this.chart.setOption(this.option);
    },
    dispatchAction(e) {
      this.timer2 = setTimeout(() => {
        this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0,
        });
        this.chart.on("mouseout", () => {
          this.chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: 0,
          });
        });
        this.chart.on("mouseover", (params) => {
          if (params.name === e[0].name) {
            this.chart.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: 0,
            });
          } else {
            this.chart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: 0,
            });
          }
        });
      }, 400);
      this.chart.setOption(this.option);
    },
    resizeB: function () {
      this.timer3 = setTimeout(() => {
        this.chart.resize();
        this.refresh();
        clearTimeout(this.timer3);
      }, 400);
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer1);
    clearTimeout(this.timer2);
    clearTimeout(this.timer3);
    echarts.dispose(this.chart);
    this.chart = null;
    this.option = null;
    window.removeEventListener("resize", this.resizeB);
  },
};
</script>

<style scoped>
.echarts {
  height: 100% !important;
}
.echarts div {
  height: 100% !important;
}
</style>
<style>
.handClass > div > canvas {
  cursor: col-resize !important;
}
</style>
