<template>
  <el-dialog
    width="90%"
    @open="opened()"
    @closed="closed()"
    :fullscreen="true"
    :show-close="true"
    class="dialogs"
  >
    <template #title>
      <div class="showTitles">
        <div class="titles">AGC监控</div>
      </div>
    </template>
    <div class="bodyy currentScroll">
      <DataDetails
        ref="detailst"
        :allDate="allDate"
        :allChartDate="allChartDate"
        :station="station"
        @handleClick="handleClicks"
      ></DataDetails>
      <DetailsCharts
        v-model="detailsDisplay"
        :showData="showData"
        @closeds="closeds"
      ></DetailsCharts>
    </div>
  </el-dialog>
</template>
<script>
import DataDetails from "./dataDetails";
import DetailsCharts from "./detailsCharts";
import api from "api/index";
import dayjs from "dayjs";
export default {
  components: {
    DataDetails,
    DetailsCharts,
  },
  data() {
    return {
      station: [],
      allDate: {},
      allChartDate: [],
      detailsDisplay: false,
      showData: {},
      intervals: "",
      intervalsChar: "",
    };
  },
  created() {
    this.getAGCStation();
  },
  updated() {},
  methods: {
    getAGCStation() {
      api.getAGCStation().then((res) => {
        this.station = res.data;
      });
    },
    getLatest(index) {
      let dialogData = {};
      let thisKey = this.station[index].tags;
      let array = [];
      thisKey.forEach((item) => {
        item.value ? array.push(item.value) : "";
      });
      let params = array.join(",");
      api.getLatest(params).then((res) => {
        for (let v in res.data) {
          thisKey.forEach((item) => {
            let calc = item.calc ? item.calc : 1;
            if (item.value === v) {
              dialogData[item.tag] = {
                name: item.name,
                value: res.data[v].doubleValue
                  ? res.data[v].doubleValue === 0
                    ? 0
                    : Number((res.data[v].doubleValue * calc).toFixed(2))
                  : Number(res.data[v].booleanValue)
                  ? 1
                  : 0,
                tag: item.value,
                calc: item.calc,
              };
            }
          });
        }
        this.allDate[this.station[index].id] = dialogData;
        this.allDate[this.station[index].id].InstalledCapacity = this.station[
          index
        ].tags.find((ele) => {
          return ele.tag == "InstalledCapacity";
        });
        index++;
        if (index >= this.station.length) {
          this.intervals = setTimeout(() => {
            this.getLatest(0);
          }, 3000);
        } else {
          this.getLatest(index);
        }
      });
    },
    getChartData(index) {
      let thisKey = this.station[index].tags;
      let endTs = new Date().getTime();
      let starTs = new Date(
        new Date(new Date().toLocaleDateString()).getTime()
      ).getTime();
      let chartData = {
        value: [],
      };
      const PowerSet = thisKey.find((ele) => {
        return ele.tag == "PowerSet";
      });
      const ActualPower = thisKey.find((ele) => {
        return ele.tag == "ActualPower";
      });
      let PowerSetData = [],
        ActualPowerData = [];
      api
        .getPower({
          tagName: PowerSet.value,
          startTs: starTs,
          endTs: endTs,
          interval: 60,
        })
        .then((res1) => {
          api
            .getPower({
              tagName: ActualPower.value,
              startTs: starTs,
              endTs: endTs,
              interval: 60,
            })
            .then((res2) => {
              res1.data.forEach((item) => {
                PowerSetData.push({
                  ts: item.ts,
                  doubleValue: item.doubleValue * PowerSet.calc,
                });
              });
              res2.data.forEach((item) => {
                ActualPowerData.push({
                  ts: item.ts,
                  doubleValue: item.doubleValue * ActualPower.calc,
                });
              });
              chartData.value[0] = {
                title: "有功设定限值(MW)",
                yAxisIndex: 0,
                value: [],
              };
              chartData.value[1] = {
                title: "实发有功(MW)",
                yAxisIndex: 0,
                value: [],
              };
              PowerSetData.forEach((item) => {
                chartData.value[0].value.push({
                  text: dayjs(item.ts).format("HH:mm"),
                  value: parseFloat(Number(item.doubleValue).toFixed(2)),
                });
              });
              ActualPowerData.forEach((item) => {
                chartData.value[1].value.push({
                  text: dayjs(item.ts).format("HH:mm"),
                  value: parseFloat(Number(item.doubleValue).toFixed(2)),
                });
              });
              chartData.id = this.station[index].id;
              this.allChartDate.push(chartData);
              index++;
              if (index >= this.station.length) {
                this.$refs.detailst.totleErtcher();
                this.intervalsChar = setTimeout(() => {
                  this.allChartDate = [];
                  this.getChartData(0);
                }, 60000);
              } else {
                this.getChartData(index);
              }
            });
        });
    },
    opened() {
      this.getLatest(0);
      this.getChartData(0);
    },
    closed() {
      clearInterval(this.intervals);
      clearInterval(this.intervalsChar);
      this.intervals = null;
      this.intervalsChar = null;
    },
    handleClicks(id) {
      this.showData = this.allChartDate.find((ele) => {
        return ele.id == id;
      });
      this.showData.name = this.station.find((ele) => {
        return ele.id == id;
      });
      this.detailsDisplay = true;
    },
    closeds() {
      this.detailsDisplay = false;
    },
  },
};
</script>

<style scoped>
.bodyy {
  display: flex;
  flex-direction: row;
  background-color: black;
  width: 100%;
  margin-top: -30px;
  min-height: 90vh;
}
</style>