<template>
  <div ref="barChart" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";
import api from "@/api/Overview/index";
import { ElMessage } from "element-plus";
export default {
  props: {},
  data() {
    return {
      chart: [],
      itemStyle: [
        {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#00FBE0",
              },
              {
                offset: 1,
                color: "#00FBE0",
              },
            ]),
          },
        },
        {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#FF8A0D",
              },
              {
                offset: 1,
                color: "#FF8A0D",
              },
            ]),
          },
        },
        {
          //折线拐点标志的样式
          color: "#fff",
          borderColor: "#44A9FF",
          width: 2,
          shadowColor: "#44A9FF",
          shadowBlur: 2,
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.demandIco();
    });
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },
  watch: {
    "$store.state.siteId"() {
      this.demandIco();
    },
  },
  methods: {
    demandIco() {
      api
        .demandIco({
          siteId: this.$store.state.siteId,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            this.initChart(requset.data);
          } else {
            ElMessage.success({
              message: requset.msg,
              type: "success",
            });
          }
        });
    },
    //次数分布折线图
    initChart(data) {
      var chart = echarts.init(this.$refs.barChart);
      var option;
      var dataAll = [];
      var dataName = [];

      data.map((val, ind) => {
        dataName.push(val.name);
        dataAll.push({
          name: val.name,
          type: ind == 2 ? "line" : "bar",
          barWidth: "4",
          itemStyle: this.itemStyle[ind],
          data: val.list,
          showAllSymbol: ind == 2 ? true : false,
          symbol: ind == 2 ? "circle" : "",
          symbolSize: ind == 2 ? 6 : 0,
          lineStyle:
            ind == 2
              ? {
                  color: "#44A9FF",
                  width: 2,
                  shadowBlur: 2,
                }
              : {},
        });
      });

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        grid: {
          left: "6%",
          top: "18%",
          right: "2%",
          bottom: "22%",
        },
        legend: {
          data: dataName,
          bottom: "0%",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          itemWidth: 12,
          itemHeight: 10,
        },
        xAxis: {
          data: data[0].listDate,
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#3d5269",
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
            alignWithLabel: true,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff", //X轴文字颜色
              fontSize: 10,
            },
            interval: 0,
            // rotate: 30
          },
        },
        yAxis: [
          {
            type: "value",
            name: "kW",
            nameTextStyle: {
              color: "#fff",
              fontSize: 10,
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 10,
              },
            },
          },
          {
            type: "value",
            // name: "平均值",
            nameTextStyle: {
              color: "#fff",
              fontSize: 10,
            },
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#396A87",
                width: 2,
              },
            },
            axisLabel: {
              show: true,
              formatter: "{value} ", //右侧Y轴文字显示
              textStyle: {
                color: "#fff",
                fontSize: 10,
              },
            },
          },
        ],
        series: dataAll,
      };

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