<template>
  <div
    ref="main"
    :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: "580px",
    },
    perData: {
      type: Array,
      default: () => [
        {
          color: "#01ACFF",
          name: "摄像头",
          value: [39],
          // nAmount: 566557.14,
        },
      ],
    },
  },
  data() {
    return {
      chart: null,
      color_XY: "rgba(0, 244, 253, 0.1)",
      itemStyle: [
        {
          normal: {
            borderColor: "rgba(0,244,253,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(0,244,253,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(253,143,0,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(253,143,0,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(0,255,18,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(0,255,18,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(0,255,230,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(0,255,230,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(142,51,255,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(142,51,255,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(77,200,120,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(77,200,120,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(255,47,47,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(255,47,47,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(70,100,255,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(70,100,255,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(255,143,53,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(255,143,53,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(150,150,50,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(150,150,50,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(70,192,255,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(70,192,255,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(20,99,100,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(20,99,100,1)",
            },
          },
        },
      ],
      msgFormSon: null,
      data: [],
      Data_Name: [],
      series_all: [],
    };
  },
  mounted() {},
  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },
  watch: {
    "$store.state.HistoricalCurve"() {
      // this.chart.resize();
      this.initChart();
    },
  },
  methods: {
    //历史趋势折线图
    initChart() {
      var chart = echarts.init(this.$refs.main);
      var option;
      var time;
      this.series_all = [];
      this.data = [];
      this.Data_Name = [];

      var HistoricalCurve = this.$store.state.HistoricalCurve;
      if (HistoricalCurve.length <= 0) {
        time = this.$store.state.Time_Data; //将存储在store中的开始时间和结束时间存入变量time
        time.map((val, ind) => {
          this.data.push([val, 0]);
          this.Data_Name = ["暂无数据"];
          this.series_all = [
            {
              // smooth: true,  //设置折线为圆滑曲线,false则有转折点
              name: "暂无数据",
              type: "line",
              data: this.data,
              itemStyle: this.itemStyle[ind],
              symbolSize: 5,
              symbol: "circle",
            },
          ];
          return;
        });
      } else {
        HistoricalCurve.map((val, ind) => {
          this.Data_Name.push(val.name);
          this.series_all.push({
            // smooth: true,  //设置折线为圆滑曲线,false则有转折点
            name: val.name,
            type: "line",
            data: val.arr,
            itemStyle: this.itemStyle[ind],
            symbolSize: 5,
            symbol: "circle",
          });
          return;
        });
      }

      
      console.log(JSON.stringify(this.series_all));

      option = {
        tooltip: {
          backgroundColor: "rgba(0, 244, 253, 0.1)",
          borderColor: "rgba(0, 244, 253, 0.3)",
          textStyle: {
            color: "#fff",
          },
          trigger: "axis",
          // item  主要在散点图，饼图等无类目轴的图表中使用。 // axis  坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用 //none   什么都不触发
          axisPointer: {
            // 坐标轴指示器配置项。
            // type: "cross",
            // line   直线指示器 / 'shadow' 阴影指示器 /'none' 无指示器 /'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
          },
          formatter: function (params) {
            // console.log(params);
            var res = params[0].axisValueLabel;

            for (let i in params) {
              res += `
              <div style="display:flex">
                  <div style="width:10px;height:10px;background:${params[i].borderColor};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;
          },
        },
        legend: {
          //   orient: "vertical",
          bottom: 0,
          right: "auto",
          left: "center",
          padding: [5, 10, 18, 10],
          data: this.Data_Name,
          itemGap: 70, // 图例间隔
          itemWidth: 40, // 图例宽度
          itemHeight: 15, //高度
          textStyle: {
            fontSize: "12",
            color: "#fff",
            fontFamily:
              "font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;",
            padding: [5, 10, 18, 10],
          },
          formatter: function (name) {
            return name;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        toolbox: {
          show: false,
        },
        xAxis: {
          type: "time",
          boundaryGap: false,
          nameTextStyle: {
            // 名称样式
            fontSize: 12,
            color: "#fff",
            fontWeight: "bold",
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0, 244, 253, 0.1)",
            },
            // symbol: ["none", "arrow"], //轴线两边的箭头
            symbolSize: [8, 12],
          },
          axisLabel: {
            showMaxLabel: true,
            textStyle: {
              color: "#fff", //坐标值得具体的颜色
            },
            // formatter: '{yyyy}-{MM}-{dd}'
            formatter: {
              year: "{yyyy}",
              month: "{yyyy} {MM}-{dd}",
              day: "{MM}-{dd} {hh}:{mm}",
              hour: "{MM}-{dd} {HH}:{mm}",
              minute: "{HH}:{mm}",
              second: "{HH}:{mm}:{ss}",
              millisecond: "{hh}:{mm}:{ss} {SSS}",
              none: "{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [this.color_XY],
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff", //坐标值得具体的颜色
            },
          },
        },
        series: this.series_all,
      };

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