<template>
  <div
    ref="distion"
    :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: "400px",
    },
    perData: {
      type: Array,
      default: () => [
        {
          color: "#01ACFF",
          name: "摄像头",
          value: [39],
          // nAmount: 566557.14,
        },
      ],
    },
  },
  data() {
    return {
      chart: null,
      color_XY: "rgba(0, 244, 253, 0.1)",
      msgFormSon: null,
      data_time: [],
      data: [],
      dataall: [],
      data_cont: 0,
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart();
    //   // console.log(this.defaul_tTime);
    // });
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },
  watch: {
    "$store.state.run_off_Status"() {
      // this.chart.resize();
      this.initChart();
    },
  },
  methods: {
    //次数分布折线图
    initChart() {
      var _this = this;
      var chart = echarts.init(this.$refs.distion);
      var option;

      var time = _this.$store.state.Time_Data; //将存储在store中的开始时间和结束时间存入变量time

      this.$store.commit("getAll", [
        time[0].split(" ")[0],
        time[1].split(" ")[0],
      ]); //将time变量中的开始时间和结束时间传给getAll方法

      var timeall = this.$store.state.timearr; //将getAll已便利好的时间区间数组存入变量timeall
      timeall.map(() => {
        _this.dataall.push(0);
      });

      var run_off_Status = _this.$store.state.run_off_Status;
      for (let i in run_off_Status) {
        if (run_off_Status[i].name === "offCount") {
          //判断后台返回的数据下标是否为0
          if (run_off_Status[i].list.length <= 0) {
            _this.dataall.map((val, ind) => {
              _this.data.push([timeall[ind], val]);
              _this.data_cont = _this.data_cont + val;
              return;
            });
          } else {
            run_off_Status[i].list.map((val, ind) => {
              _this.data_cont = _this.data_cont + val;
              _this.data.push([run_off_Status[i].listDate[ind], val]);
              return;
            });
          }
        }
      }

      option = {
        title: [
          {
            text: "OFF次数分布",
            left: "center",
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          {
            text: `OFF次数：${_this.data_cont}`,
            left: "right",
            padding: [0, "7", 0, 0],
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
        ],
        tooltip: {
          backgroundColor: "rgba(0, 244, 253, 0.1)",
          borderColor: "rgba(0, 244, 253, 0.3)",
          textStyle: {
            color: "#fff",
          },
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          formatter: function (params) {
            // console.log(params);
            var res = params[0].data[0];
            for (let i in params) {
              res += `
              <div style="display:flex">
                  <div style="width:10px;height:10px;background:${params[i].color};border-radius: 10px;margin:10px 0;"></div>
                  <div style="padding:4px 0px 0px 10px;">${params[i].seriesName}:</div>
                  <div style="padding:4px 0px 0px 10px;">${params[i].data[1]}</div>
              </div>`; //可以在这个方法中做改变
            }
            return res;
          },
        },
        xAxis: {
          type: "time",
          boundaryGap: false,
          nameTextStyle: {
            // 名称样式
            fontSize: 12,
            color: "#fff",
            fontWeight: "bold",
          },
          axisLabel: {
            // showMaxLabel: true,
            textStyle: {
              color: "#fff", //坐标值得具体的颜色
            },
            formatter: {
              year: "{MM}-{dd}\n{yyyy}",
              month: `{MM}-{dd}\n{yyyy}`,
              day: `{MM}-{dd}\n{yyyy}`,
              hour: "{HH}:{mm}\n{MM}-{dd}",
              minute: "{HH}:{mm}\n{MM}-{dd}",
              second: "{HH}:{mm}\n{MM}-{dd}",
              millisecond: "{HH}:{mm}\n{MM}-{dd}",
              none: "{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}",
            },
          },
          axisLine: {
            lineStyle: {
              color: this.color_XY,
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [this.color_XY],
            },
          },
          type: "value",
          // splitNumber: 4,
          // min: 4,
          max: 4,
          axisLabel: {
            textStyle: {
              color: "#fff", //坐标值得具体的颜色
            },
          },
        },
        series: [
          {
            name: `OFF次数`,
            type: "line",
            smooth: true,
            data: this.data,
          },
        ],
      };

      chart.setOption(option);
      window.addEventListener("resize", () => {
        chart.resize();
      });
      this.chart = chart;
    },
  },
};
</script>