<template>
  <div class="e-project-energy-load">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="设备号：" prop="deviceId">
        <el-input
          style="width: 150px"
          v-model="queryParams.deviceId"
          placeholder="输入设备号"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="init"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <div class="load-center">
      <div class="left">
        <e-echarts-line
          ref="echartsLineTwoDaysLoad"
          :styles="echartsOption.styles"
          :colorList="echartsOption.colorList"
          eId="echartsLineTwoDaysLoad"
          :option="twoDaysLoadOption"
        ></e-echarts-line>
      </div>

      <div class="right">
        <e-echarts-line
          ref="echartsLineTwoWeeksLoad"
          :styles="echartsOption.styles"
          :colorList="echartsOption.colorList"
          eId="echartsLineTwoWeeksLoad"
          :option="twoWeeksLoadOption"
        ></e-echarts-line>
      </div>
    </div>
    <div class="load-footer">
      <e-echarts-bar
        ref="echartsLineTwoYearsLoad"
        :styles="echartsOption.styles"
        :colorList="echartsOption.colorList"
        eId="echartsLineTwoYearsLoad"
        :option="twoYearsLoadOption"
      ></e-echarts-bar>
    </div>
  </div>
</template>
<script>
import EEchartsLine from "@/components/Echarts/EEchartsLine";
import EEchartsBar from "@/components/Echarts/EEchartsBar";
import * as echarts from "echarts";
import { projectElectricityStatChart, projectElectricityStatChartYear } from "@/api/iot/project_new";
export default {
  name: "EEnergyLoad",
  props: {
    projectInfo: {
      type: Object,
      require: true,
    },
    sourceId: {
      type: [Number, String],
      require: true,
    },
    tempType: {
      type: String,
      require: true,
    },
  },
  components: {
    EEchartsLine,
    EEchartsBar
  },
  data() {
    return {
      echartsOption: {
        styles: "width: 100%; height: calc(100% - 35px);",
        colorList: ["#1890FF", "#EE6666", "#FFCC00"],
        eId: "safetytTemplateIdx",
      },
      twoDaysLoadOption: {
        color: ["#1890FF", "#EE6666", "#FFCC00"],
        title: {
          text: "近两天的负载情况",
          show: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 0,
          right: 10,
          data: [],
          // icon: "circle",
          textStyle: {
            color: "#38486a",
            fontSize: 12,
            fontWeight: 400,
          },
        },
        grid: {
          left: "20",
          right: "20",
          bottom: "10",
          top: 50,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: true,
          data: [],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#606266",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#606266",
            },
          },
        },
        series: [],
      },
      twoWeeksLoadOption: {
        color: ["#1890FF", "#EE6666", "#FFCC00"],
        title: {
          text: "近两周的负载情况",
          show: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 0,
          right: 10,
          data: [],
          // icon: "circle",
          textStyle: {
            color: "#38486a",
            fontSize: 12,
            fontWeight: 400,
          },
        },
        grid: {
          left: "20",
          right: "20",
          bottom: "10",
          top: 50,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: true,
          data: [],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#606266",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#606266",
            },
          },
        },
        series: [],
      },
      twoYearsLoadOption: {
        title: {
          text: "近两年的负载情况",
          show: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: '今年',
            type: 'bar',
            barWidth: "30%",
            data: [],
            markPoint: {
              symbolSize: 35,
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
          },
          {
            name: '去年',
            type: 'bar',
            barWidth: "30%",
            data: [],
            markPoint: {
              symbolSize: 35,
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            }
          }
        ],
      },
      queryTime: [],
      queryParams: {
        deviceId: "",
      },
    };
  },
  watch: {
    sourceId(val) {
      if (val !== null && val !== undefined) {
        this.init();
      }
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.queryTwoDaysLoad();
      this.queryTwoWeeksLoad();
      this.queryTwoYearsLoad();
    },
    // 查询 最近两年负载
    queryTwoYearsLoad() {
      this.twoYearsLoadOption.xAxis[0].data = [];
      this.twoYearsLoadOption.series[0].data = [];
      this.twoYearsLoadOption.series[1].data = [];
      var queryParams = JSON.parse(JSON.stringify(this.queryParams));
      projectElectricityStatChartYear(
        Object.assign(queryParams, {
          projectId: this.sourceId,
          time: this.parseTime(new Date(), "{y}-01-01 00:00:00"),
          timeType: 'year'
        })
      ).then((res) => {
        this.twoYearsLoadOption.xAxis[0].data = res.data["readTime"];
        this.twoYearsLoadOption.series[0].data = res.data["yearReadSum"];
        this.twoYearsLoadOption.series[1].data = res.data["lastYearReadSum"];
        if(this.$refs.echartsLineTwoYearsLoad) {
          this.$refs.echartsLineTwoYearsLoad.updateEchart()
        }
        this.$forceUpdate();
      });
    },
    // 查询 最近两周的负载情况
    queryTwoWeeksLoad() {
      var now = new Date();
      var nowTime = now.getTime();
      var day = now.getDay();
      var oneDayTime = 24*60*60*1000;
      //显示周一
      var MondayTime = nowTime - (day-1)*oneDayTime;
      var queryParams = JSON.parse(JSON.stringify(this.queryParams));
      this.twoWeeksLoadOption.series = [];
      projectElectricityStatChart(Object.assign({
        projectId: this.sourceId,
        time: this.parseTime(new Date(MondayTime), "{y}-{m}-{d} 00:00:00"),
        timeType: 'week'
      }, queryParams)).then((res) => {
        this.twoWeeksLoadOption.xAxis.data = [...res.data["name"]];
        let keys = Object.keys(res.data);
        this.twoWeeksLoadOption.legend.data = keys.filter((v) => {
          if (v !== "name") {
            return v;
          }
        });
        var list = this.handleLineOption(keys, res.data, "name");
        this.twoWeeksLoadOption.series = list.filter(
          (v) => v !== undefined && v !== null
        );
        if (this.$refs.echartsLineTwoWeeksLoad) {
          this.$refs.echartsLineTwoWeeksLoad.updateEchart();
        }
        this.$forceUpdate();
      });
    },
    // 查询 最近两天的负载情况
    queryTwoDaysLoad() {
      let newDate = this.parseTime(new Date(), "{y}-{m}-{d} 00:00:00");
      var queryParams = JSON.parse(JSON.stringify(this.queryParams));
      this.twoDaysLoadOption.series = [];
      projectElectricityStatChart(Object.assign({
        projectId: this.sourceId,
        time: newDate,
        timeType: 'day'
      }, queryParams)).then((res) => {
        this.twoDaysLoadOption.xAxis.data = [...res.data["name"]];
        let keys = Object.keys(res.data);
        this.twoDaysLoadOption.legend.data = keys.filter((v) => {
          if (v !== "name") {
            return v;
          }
        });
        var list = this.handleLineOption(keys, res.data, "name");
        this.twoDaysLoadOption.series = list.filter(
          (v) => v !== undefined && v !== null
        );
        if (this.$refs.echartsLineTwoDaysLoad) {
          this.$refs.echartsLineTwoDaysLoad.updateEchart();
        }
        this.$forceUpdate();
      });
    },
    // 折线图表数据 折线 处理
    handleLineOption(keys, data ,exclude) {
      var list = keys.map((v) => {
        if (v !== (exclude || "name")) {
          return {
            name: v,
            type: "line",
            smooth: false,
            symbolSize: 2,
            markPoint: {
              symbolSize: 35,
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            label: {
              show: false,
              formatter: function (params) {
                return echarts.format.formatTime("yyyy-MM-dd", params.value);
              },
              backgroundColor: "#7581BD",
            },
            data: data[v],
          };
        }
      });
      return [...list];
    },
  },
};
</script>
<style lang="scss">
.e-project-energy-load {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .load-center {
    width: 100%;
    height: 300px;
    display: flex;
    .left {
      width: 50%;
      height: 100%;
    }
    .right {
      width: 50%;
      height: 100%;
    }
  }
  .load-footer {
    height: 300px;
    width: 100%;
  }
}
</style>
