<!--折线图 -->
<template>
  <div class="line-chart" ref="chartLine"></div>
</template>

<script>
import { getFontSize } from "@/common/js/utils.js";
export default {
  data() {
    return {
      turnObj: {
        u: "掉头",
        l: "左转",
        s: "直行",
        r: "右转",
      },
      dirObj: {
        "1": "北进口",
        "2": "东北进口",
        "3": "东进口",
        "4": "东南进口",
        "5": "南进口",
        "6": "西南进口",
        "7": "西进口",
        "8": "西北进口",
      },
    };
  },
  props: ["indexModel", "tableSelect", "chartData"],
  mounted() {
    this.$nextTick(() => {
      // const data = [
      //   { dir: 1, currentIndex: "1.72", compareIndex: 2 },
      //   { dir: 3, currentIndex: "5.62", compareIndex: 8 },
      //   { dir: 5, currentIndex: "3.71", compareIndex: 5 },
      // ];
      this.initLineData(this.chartData);
    });
  },
  methods: {
    // getColor() {
    //   let randomRgb = [
    //     Math.round(Math.random() * 255),
    //     Math.round(Math.random() * 255),
    //     Math.round(Math.random() * 255),
    //   ];
    //   const lineColor = "rgb(" + randomRgb.join(",") + ")";
    //   const areaColor = "rgba(" + randomRgb.join(",") + ",0.4" + ")";
    //   const areaColor2 = "rgba(" + randomRgb.join(",") + ",0.4" + ")";
    //   return {
    //     lineColor,
    //     areaColor,
    //     areaColor2,
    //   };
    // },
    initLineData(data) {
      const legend = this.tableSelect.map((item) => {
        let str = "";
        if (item.dirCode) {
          str = this.dirObj[item.dirCode] + this.turnObj[item.positionCode];
        } else {
          str = this.dirObj[item.positionCode];
        }
        return str;
      });
      const result = {};
      data.forEach((item) => {
        const key = `${this.dirObj[item.dir]}${this.turnObj[item.turn] || ""}`;

        if (!result[key]) {
          result[key] = [];
        }
        result[key].push(item.metricValue);
      });
      const series = [];
      legend.forEach((item) => {
        series.push({
          name: item,
          type: "line",
          data: result[item],
          symbolSize: 1,
          symbol: "circle",
          smooth: false,
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 2,
          },
        });
      });
      // const xData = [];
      // data.forEach((item) => {
      //   xData.push(item.metricTime);
      // });
      const xData = [...new Set(data.map((item) => item.metricTime))];
      // const colorObj = this.getColor();
      let myChart = this.$echarts.init(this.$refs.chartLine);
      const colorList = [
        "#43CF7C",
        "#0052D9",
        "#029CD4",
        "#D54941",
        "#F5BA18",
        "#E37318",
      ];
      let option = {
        color: colorList,
        backgroundColor: "transparent",
        legend: {
          inactiveColor:'rgba(255,255,255,0.7)',
          icon: "circle",
          top: "0%",
          left: "center",
          itemWidth: getFontSize(6),
          itemGap: getFontSize(20),
          textStyle: {
            fontSize: getFontSize(16),
            color: "rgba(255,255,255,0.9)",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          right: getFontSize(30),
          bottom: getFontSize(20),
          left: getFontSize(40),
          top: getFontSize(40),
          // top: "15%",
          // bottom: "17%",
          // right: "5%",
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            boundaryGap: false,
            axisLabel: {
              fontSize: getFontSize(16),
              color: "#666",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#999",
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#999",
              },
            },
          },
        ],
        yAxis: [
          {
            name: "",
            nameTextStyle: {
              fontSize: getFontSize(16),
            },
            type: "value",
            axisLabel: {
              fontSize: getFontSize(16),
              color: "#666",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(153, 153, 153, 0.6)",
                type: "dashed",
              },
            },
            axisPointer: {
              snap: true,
            },
          },
        ],
        series: series,
        // series: [
        //   {
        //     name: legend[0],
        //     type: "line",
        //     data: currentIndexData,
        //     symbolSize: 1,
        //     symbol: "circle",
        //     smooth: false,
        //     yAxisIndex: 0,
        //     showSymbol: false,
        //     lineStyle: {
        //       width: 2,
        //     },
        //   },
        //   {
        //     name: legend[1],
        //     type: "line",
        //     data: compareIndexData,
        //     symbolSize: 1,
        //     symbol: "circle",
        //     smooth: false,
        //     yAxisIndex: 0,
        //     showSymbol: false,
        //     lineStyle: {
        //       width: 2,
        //       // color: colorList[1],
        //       // shadowColor: "rgba(0, 11, 84, 0.25)",
        //       // shadowBlur: 10,
        //       // shadowOffsetY: 2,
        //     },
        //     // itemStyle: {
        //     //   normal: {
        //     //     color: colorList[1],
        //     //     borderColor: colorList[1],
        //     //   },
        //     // },
        //     // areaStyle: {
        //     //   color: new echarts.graphic.LinearGradient(
        //     //     0,
        //     //     1,
        //     //     0,
        //     //     0,
        //     //     [
        //     //       {
        //     //         offset: 0,
        //     //         color: "rgba(62, 170, 247, 0)", // 100% 处的颜色
        //     //       },
        //     //       {
        //     //         offset: 1,
        //     //         color: "rgba(24, 120, 199, 0.4)", // 0% 处的颜色
        //     //       },
        //     //     ],
        //     //     false
        //     //   ),
        //     // },
        //   },
        // ],
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.line-chart {
  height: 250px;
  padding: 5px;
}
</style>
