<template>
  <div class="energy_content">
    <div class="sys_charts" ref="sys_charts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getDay, getMonth, getYear } from "@/utils/datetime";
import { systemTrend } from "@/api/bigScreen";
import { eventBus } from "@/utils/evenBus";
export default {
  data() {
    return {
      chartInstance: null,
      option: {},
      queryType: "day", //默认页面为day
      dataTime: "",
      energyMes: {},
    };
  },
  created() {
    eventBus.$on("data-sent-queryType", (data) => {
      this.queryType = data;
      console.log("得到的queryType为", this.queryType);
      this.getChartsData();
    });
  },
  mounted() {
    this.initChart();
    this.screenAdapter();
    window.addEventListener("resize", this.screenAdapter);
    this.getChartsData();
  },
  destroyed() {
    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
    screenAdapter() {
      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
      const titleFontSize = this.$refs.sys_charts.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.sys_charts);
      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,
            //折线颜色
            itemStyle: {
              color: "#00CED1", //折线的颜色
            },
            lineStyle: {
              color: "#00CED1", //折线点的颜色
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      //把配置项给实例对象
      this.chartInstance.setOption(this.option, true);
    },
    // 请求的数据
    getChartsData() {
      if (this.queryType === "day") {
        this.dataTime = getDay(0);
      } else if (this.queryType === "month") {
        this.dataTime = getMonth(0);
      } else if (this.queryType === "year") {
        this.dataTime = getYear(0);
      }
      let data = {
        timeType: this.queryType,
        startTime: this.dataTime,
        endTime: this.dataTime,
      };
      systemTrend(data).then((res) => {
        console.log("用电趋势返回", res);
        if (res.code == 200) {
          const titleFontSize = this.$refs.sys_charts.offsetWidth / 40;
          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 返回不同的单位
                  res +=
                    marker +
                    seriesName +
                    ":" +
                    '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                    value +
                    "</span><br>";
                }
                return res;
              },
            },
            xAxis: {
              data: res.rows[0].timeStr,
              axisLabel: {
                fontSize: titleFontSize,
              },
            },
            yAxis: {
              axisLabel: {
                fontSize: titleFontSize,
              },
            },
            series: [
              {
                data: res.rows[0].data,
              },
            ],
          };
          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
          this.chartInstance.setOption(adapterOption);
          //手动的调用图标对象的resize才能产生效果
          this.chartInstance.resize();
        } else {
          let adapterOption = {};
          // 添加折线的配置
          adapterOption = {
            xAxis: {
              data: [],
            },
            series: [
              {
                data: [],
              },
            ],
          };
          //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
          this.chartInstance.setOption(adapterOption);
          //手动的调用图标对象的resize才能产生效果
          this.chartInstance.resize();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.energy_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100%;

  .sys_charts {
    width: 100%;
    height: 230px;
  }
  .eer {
    font-size: 18px;
    margin-top: 25px;
  }
}
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
  .energy_content {
    .sys_charts {
      height: 2.4rem !important;
    }
    .eer {
      font-size: 0.18rem !important;
      margin-top: 0.25rem !important;
    }
  }
}
</style>
