<template>
  <div
    ref="alarm"
    :class="className"
    :style="{ height: height, width: width }"
  ></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    defaul_tTime: {
      type: Array,
    },
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "27vh",
    },
    perData: {
      type: Array,
      default: () => [
        {
          color: "#01ACFF",
          name: "摄像头",
          value: [39],
          // nAmount: 566557.14,
        },
      ],
    },
  },
  data() {
    return {
      chart: null,
      color_XY: "rgba(0, 244, 253, 0.1)",
    };
  },
  mounted() {},
  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },
  watch: {
    "$store.state.trendIco"() {
      this.initChart();
    },
    "$store.state.trendIco_state"() {
      this.initChart();
    },
  },
  methods: {
    //次数分布折线图
    initChart() {
      var _this = this;
      var dataAxis = [];
      var data = [];
      var chart = echarts.init(this.$refs.alarm);
      var time = _this.$store.state.Time_Data;
      this.$store.commit("getAll", [
        time[0].split(" ")[0],
        time[1].split(" ")[0],
      ]); //将time变量中的开始时间和结束时间传给getAll方法

      var trendIco = _this.$store.state.trendIco;
      var trendIco_state = _this.$store.state.trendIco_state;
      if (trendIco[trendIco_state].list.length <= 0) {
        dataAxis = this.$store.state.timearr; //将getAll已便利好的时间区间数组存入变量timeall
        dataAxis.map(() => {
          return data.push(0);
        });
      } else {
        dataAxis = trendIco[trendIco_state].listDate;
        data = trendIco[trendIco_state].list;
      }

      var option;
      var yMax = 500;
      var dataShadow = [];
      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      option = {
        title: [
          {
            text: `(条)`,
            left: "left",
            padding: [15, 0, 0, "60"],
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        ],
        grid: {
          top: "16%",
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [this.color_XY],
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        tooltip: {
          backgroundColor: "rgba(0, 244, 253, 0.1)",
          borderColor: "rgba(0, 244, 253, 0.3)",
          textStyle: {
            color: "#fff",
          },
          trigger: "axis",
          formatter: function (params) {
            // console.log(params);
            var res = params[0].axisValueLabel;
            for (let i in params) {
              res += `
              <div style="display:flex">
                  <div style="padding:4px 0px 0px 10px;">${trendIco[trendIco_state].name} :</div>
                  <div style="padding:4px 0px 0px 10px;">${params[i].data}</div>
              </div>`; //可以在这个方法中做改变
            }
            return res;
          },
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: false,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
            data: data,
          },
        ],
      };

      chart.setOption(option,true);
      window.addEventListener("resize", () => {
        chart.resize();
      });
      this.chart = chart;
      //   var zoomSize = 6;
      //   chart.on("click", function (params) {
      //     console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
      //     chart.dispatchAction({
      //       type: "dataZoom",
      //       startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
      //       endValue:
      //         dataAxis[
      //           Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
      //         ],
      //     });
      //   });
    },
  },
};
</script>