<template>
  <div style="width: 100%; height: 100%">
    <div class="right-table">
      <div class="choice">
        <div
          class="mr20"
          v-for="(item, index) in energyTypes"
          :key="index"
          @click="handleEnter(index, item.name)"
          :class="{ timeStyle: sharedIndex == index }"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="charts" ref="chart_ref"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { viewYearEnergy } from "@/api/index";
export default {
  data() {
    return {
      energyTypes: [],
      sharedIndex: 0,
      chartInstance: null,
      option: {},
      colorList: [
        {
          color: "#00CED1",
          offsetColor1: "rgba(0, 206, 209, 0.5)",
          offsetColor2: "rgba(0, 206, 209, 0)",
        },
        {
          color: "#ffe21e",
          offsetColor1: "rgba(255,226,30, 0.5)",
          offsetColor2: "rgba(255,226,30, 0)",
        },
        {
          color: "#1a69f1",
          offsetColor1: "rgba(26, 105, 241, 0.5)",
          offsetColor2: "rgba(26, 105, 241, 0)",
        },
        {
          color: "#2df499",
          offsetColor1: "rgba(45,244,153, 0.5)",
          offsetColor2: "rgba(45,244,153, 0)",
        },
        {
          color: "#e87b4b",
          offsetColor1: "rgba(232, 123, 75, 0.5)",
          offsetColor2: "rgba(232, 123, 75, 0)",
        },
      ],
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
    this.echartsData();
  },
  destroyed() {
    //取消监听器
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 选择日月年
    handleEnter(index, event) {
      console.log("index", index);
      console.log("event", event);
      this.chartInstance.dispose();
      this.initChart();
      this.sharedIndex = index;
      // 使用 find 方法查找符合条件的对象
      const chartsObj = this.energyTypes.find((item) => item.name === event);
      const colorObj = this.colorList.find(
        (_, currentIndex) => currentIndex === index
      );
      console.log("当前要渲染的数据对象", chartsObj);
      console.log("当前要渲染的颜色对象", colorObj);
      let adapterOption = {};
      // 添加折线的配置
      adapterOption = {
        tooltip: {
          trigger: "axis",
          // 自定义 tooltip 内容
          formatter: function (params) {
            var res = params[0].name + "<br/>";
            for (var i = 0, l = params.length; i < l; i++) {
              var seriesName = params[i].seriesName;
              var value = params[i].value;
              var marker =
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                params[i].color +
                '"></span>';
              // 根据不同德seriesName 返回不同的单位
              if (chartsObj.unit) {
                res +=
                  marker +
                  seriesName +
                  ":" +
                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                  value +
                  chartsObj.unit +
                  "</span><br>";
              }  else {
                res +=
                  marker +
                  seriesName +
                  ":" +
                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                  value +
                  "</span><br>";
              }
            }
            return res;
          },
        },
        xAxis: {
          data: chartsObj.timeStr,
        },
        yAxis: {
          name: chartsObj.unit,
        },
        series: [
          {
            data: chartsObj.data,
            name: event,
            //折线颜色
            itemStyle: {
              color: colorObj.color, //折线的颜色
            },
            lineStyle: {
              color: colorObj.color, //折线点的颜色
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: colorObj.offsetColor1, // 渐变起始颜色
                  },
                  {
                    offset: 1,
                    color: colorObj.offsetColor2, // 渐变结束颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
      this.chartInstance.setOption(adapterOption);
      //手动的调用图标对象的resize才能产生效果
      this.chartInstance.resize();
    },
    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
    screenAdapter() {
      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
      const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
      const adapterOption = {};
      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
      this.chartInstance.setOption(adapterOption);
      //手动的调用图标对象的resize才能产生效果
      this.chartInstance.resize();
    },
    //初始化chartInstance对象
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart_ref);
      this.option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
        },
        grid: {
          top: "10%",
          left: "4%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          //设置为true代表离零刻度间隔一段距离
          boundaryGap: true,
          // 修饰刻度标签的颜色即x坐标数据
          axisLabel: {
            // interval: 0, //强制显示所有x轴数据
            // rotate: 30, //x轴坐标字体倾斜30度
            color: "rgba(255, 255, 255, 1)",
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
          // x坐标轴的颜色
          axisLine: {
            show: true,
            lineStyle: {
              color: "#365576",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#e2e6f0",
            },
          }, //x轴分割线
        },
        yAxis: {
          min: 0,
          // max:20,
          // // // min:'dataMin',
          // // // max:'dataMax',
          // name: "kwh", // 第一个 y 轴的单位描述
          // 设置 name 的样式
          nameTextStyle: {
            color: "rgba(255, 255, 255, 1)",
            fontSize: 12,
          },
          miniInterval: 5,
          type: "value",
          // 修饰刻度标签的颜色即y坐标数据
          axisLabel: {
            color: "rgba(255, 255, 255, 1)",
          },
          // 显示y坐标轴
          axisLine: {
            show: true,
            lineStyle: {
              color: "#365576", // 设置 y 轴线的颜色
            },
          },
          //y轴分割线段数
          // splitNumber: 10,
          // 修改y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: "#1a3d62", // 设置分割线的颜色
              type: "dashed", // 设置分割线为虚线
            },
          },
        },
        series: [
          {
            type: "line",
            // 拐点大小
            symbolSize: 8,
          },
        ],
      };
      //把配置项给实例对象
      this.chartInstance.setOption(this.option, true);
    },
    echartsData() {
      viewYearEnergy().then((res) => {
        console.log("折线图返回值", res);
        this.energyTypes = res.rows;
        // 处理值
        // 在组件挂载完成后调用 handleEnter 方法
        if (this.energyTypes.length > 0) {
          this.handleEnter(0, this.energyTypes[0].name);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.right-table {
  padding: 27px 15px 35px 15px;
}
.mr20 {
  width: 92px;
  padding: 2px;
}
.charts {
  margin-top: 20px;
  width: 100%;
  height: 300px;
}
</style>
