<template>
  <div class="body">
    <div class="control">
      <div :class="current === 0 ? 'smart_on' : 'smart'" @click="ChangeBar(0)">
        智能
      </div>
      <div
        :class="current === 1 ? 'recommend_on' : 'recommend'"
        @click="ChangeBar(1)"
      >
        推荐
      </div>
      <div
        :class="current === 2 ? 'manual_on' : 'manual'"
        @click="ChangeBar(2)"
      >
        手动
      </div>
    </div>
    <div style="display: flex; flex-direction: row; z-index: 2">
      <div class="showData">
        <!-- allHealthIndex:0,
                allResourceIndex:0,
                healthIndex:0,
                resourceIndex:0, -->
        <!-- <div
          class="dataBox"
          @dblclick="
            dbClicks(
              $store.state.currentStation
                ? showDate?.stationOverviewInfos[$store.state.currentStation]
                    ?.healthIndex
                : showDate.healthIndex,
              '健康指数'
            )
          "
        >
          <div class="dataTitle">健康指数</div>
          <div class="datas">
            {{
              $store.state.currentStation
                ? healthIndex.toFixed(0)
                : allHealthIndex.toFixed(0)
            }}%
          </div>
        </div>
        <div
          class="dataBox-right"
          @dblclick="
            dbClicks(
              $store.state.currentStation
                ? showDate?.stationOverviewInfos[$store.state.currentStation]
                    ?.windEnergyRate
                : showDate.windEnergyRate,
              '风能利用率'
            )
          "
        >
          <div class="dataTitle">风能利用率</div>
          <div class="datas" v-if="showDate.windEnergyRate?.value <= 100">
            {{
              $store.state.currentStation
                ? showDate?.stationOverviewInfos[
                    $store.state.currentStation
                  ]?.windEnergyRate?.value.toFixed(2)
                : showDate.windEnergyRate?.value.toFixed(2)
            }}%
          </div>
        </div> -->
        <div
          class="dataBox"
          @dblclick="
            dbClicks(
              $store.state.currentStation
                ? showDate?.stationOverviewInfos[$store.state.currentStation]
                    ?.windEnergyRate
                : showDate.windEnergyRate,
              '风能利用率'
            )
          "
        >
          <div class="dataTitle">风能利用率</div>
          <div class="datas">
            {{
              $store.state.currentStation
                ? showDate?.stationOverviewInfos[
                    $store.state.currentStation
                  ]?.windEnergyRate?.value.toFixed(2)
                : showDate.windEnergyRate?.value.toFixed(2)
            }}%
          </div>
        </div>
      </div>
      <div>
        <div id="mainEcharts" @dblclick="dbClick()" class="echarts"></div>
        <div class="powerContent">
          <div
            class="power"
            @dblclick="
              dbClicks(
                $store.state.currentStation
                  ? showDate?.stationOverviewInfos[$store.state.currentStation]
                      ?.realTimePower
                  : showDate.realTimePower,
                '实际功率'
              )
            "
          >
            <div class="powerTitle">实际功率</div>
            <div
              class="powerDatas"
              style="background-color: rgba(75, 85, 174, 1)"
            >
              {{
                $store.state.currentStation
                  ? showDate?.stationOverviewInfos[
                      $store.state.currentStation
                    ]?.realTimePower?.value.toFixed(2)
                  : showDate.realTimePower?.value.toFixed(2)
              }}
            </div>
          </div>
          <div
            class="power1"
            @dblclick="
              dbClicks(
                $store.state.currentStation
                  ? showDate?.stationOverviewInfos[$store.state.currentStation]
                      ?.theoreticalPower
                  : showDate.theoreticalPower,
                '理论功率'
              )
            "
          >
            <div class="powerTitle">理论功率</div>
            <div
              class="powerDatas"
              style="background-color: rgba(05, 187, 76, 1)"
            >
              {{
                $store.state.currentStation
                  ? showDate?.stationOverviewInfos[
                      $store.state.currentStation
                    ]?.theoreticalPower?.value.toFixed(2)
                  : showDate.theoreticalPower?.value.toFixed(2)
              }}
            </div>
          </div>
          <div
            class="power2"
            @dblclick="
              dbClicks(
                $store.state.currentStation
                  ? showDate?.stationOverviewInfos[$store.state.currentStation]
                      ?.agcPowerSet
                  : showDate.agcPowerSet,
                'AGC有功设定'
              )
            "
          >
            <div class="powerTitle">AGC有功设定</div>
            <div
              class="powerDatas"
              style="background-color: rgba(186, 50, 55, 1)"
            >
              {{
                $store.state.currentStation
                  ? showDate?.stationOverviewInfos[
                      $store.state.currentStation
                    ]?.agcPowerSet?.value.toFixed(2)
                  : showDate.agcPowerSet?.value.toFixed(2)
              }}
            </div>
          </div>
        </div>
      </div>
      <div class="showData">
        
        <div
          class="dataBox-right"
          @dblclick="
            dbClicks(
              $store.state.currentStation
                ? showDate?.stationOverviewInfos[$store.state.currentStation]
                    ?.curveFollowingRate
                : showDate.curveFollowingRate,
              '曲线跟随率'
            )
          "
        >
          <div class="dataTitle">曲线跟随率</div>
          <div class="datas" v-if="showDate.curveFollowingRate?.value <= 100">
            {{
              $store.state.currentStation
                ? showDate?.stationOverviewInfos[
                    $store.state.currentStation
                  ]?.curveFollowingRate?.value.toFixed(2)
                : showDate.curveFollowingRate?.value.toFixed(2)
            }}%
          </div>
        </div>
      </div>
    </div>
  </div>
  <DetailPages ref="detials" @closed="closed()" v-model="dialogVisible">
  </DetailPages>
  <Details
    @closed="closeds()"
    v-model="display"
    :partsName="partsName"
    echartsId="modelEcharts"
    :datas="modelDetails"
    @search-data="search"
    @original-data="originalData"
  ></Details>
</template>
<script>
import BackgroundData from "utils/BackgroundData";
import api from "api/index";
import MessageBridge from "utils/MessageBridge";
import * as echarts from "echarts";
import DetailPages from "./detailPages.vue";
import Details from "../basicDataDetails.vue";
export default {
  props: {
    // current: {
    //     type: Number,
    // },
  },
  components: {
    DetailPages,
    Details,
  },
  data() {
    return {
      current: 1,
      datas: {},
      list: {},
      showDate: {},
      winFlag: 0,
      curveFlag: 0,
      fieldFlag: 0,
      dialogVisible: false,
      display: false,
      modelDetails: [],
      partsName: "",
      modelData: {},
      interval: 60,
      allHealthIndex: 0,
      allResourceIndex: 0,
      healthIndex: 0,
      resourceIndex: 0,
      intervals: null,
    };
  },
  created() {
    this.getEchartss();
    this.intervals = setInterval(this.getEchartss, 10000);
  },
  computed: {},
  mounted() {
    this.$nextTick(() => {
      if (document.getElementById("mainEcharts")) {
        this.getEcharts();
      }
    });
  },
  methods: {
    getEchartss() {
      api.stationOverview().then((res) => {
        this.showDate = res.data;
        this.getEcharts();
        this.allHealthIndex =
          (this.showDate.healthIndex?.value / this.showDate.healthIndexMax) *
          100;
        this.allResourceIndex =
          (this.showDate.resourceIndex?.value /
            this.showDate.resourceIndexMax) *
          100;
        this.healthIndex = this.$store.state.currentStation
          ? (this.showDate.stationOverviewInfos[
              this.$store.state.currentStation
            ].healthIndex?.value /
              this.showDate.stationOverviewInfos[
                this.$store.state.currentStation
              ].healthIndexMax) *
            100
          : 0;
        this.resourceIndex = this.$store.state.currentStation
          ? (this.showDate.stationOverviewInfos[
              this.$store.state.currentStation
            ].resourceIndex?.value /
              this.showDate.stationOverviewInfos[
                this.$store.state.currentStation
              ].resourceIndexMax) *
            100
          : 0;
      });
    },
    getEcharts() {
      let chartDom = document.getElementById("mainEcharts");
      let myChart = echarts.init(chartDom, "#000000");
      let option;
      option = {
        series: [
          {
            type: "gauge",
            max: 600,
            splitNumber: 8,
            anchor: {
              show: true,
              showAbove: true,
              size: 9,
              width: 5,
              itemStyle: {
                color: "#FAC858",
              },
            },
            pointer: {
              icon: "",
              width: 3,
              length: "80%",
              offsetCenter: [0, "8%"],
            },

            progress: {
              show: true,
              overlap: true,
              roundCap: true,
            },
            axisLine: {
              lineStyle: {
                //仪表盘轴线相关配置。
                width: 2,
                color: [[1, "rgba(83, 92, 93, 0.5)"]],
              },
            },
            axisLabel: {
              // textStyle: {//数字刻度样式
              //     color: '#000000',
              //     fontSize: 12,
              // }
            },
            splitLine: {
              //分隔线样式相关
              length: 0, //分割线的长度
              lineStyle: {
                width: 1,
                color: "#000000",
              },
            },
            data: [
              {
                value: 125.85,
                // name: '实际功率',
                itemStyle: {
                  color: "rgba(75, 85, 174, 1)",
                },
              },
              {
                value: 137.63,
                // name: '理论功率',
                itemStyle: {
                  color: "rgba(05, 187, 76, 1)",
                },
              },
              {
                value: 132.04,
                // name: 'AGC有功设定',
                itemStyle: {
                  color: "rgba(186, 50, 55, 1)",
                },
              },
            ],
            title: false,
            detail: false,
            //     title: {
            //         fontSize: 12
            //     },
            //     detail: {
            //         width: 20,
            //         height: 7,
            //         fontSize: 12,
            //         color: '#fff',
            //         backgroundColor: 'auto',
            //         borderRadius: 3,
            //         formatter: ''
            //     }
          },
        ],
      };
      option.series[0].data[0].value = this.$store.state.currentStation
        ? Number(
            this.showDate?.stationOverviewInfos[
              this.$store.state.currentStation
            ]?.realTimePower?.value
          )
        : Number(this.showDate.realTimePower?.value);
      option.series[0].data[1].value = this.$store.state.currentStation
        ? Number(
            this.showDate?.stationOverviewInfos[
              this.$store.state.currentStation
            ]?.theoreticalPower?.value
          )
        : Number(this.showDate.theoreticalPower?.value);
      option.series[0].data[2].value = this.$store.state.currentStation
        ? Number(
            this.showDate?.stationOverviewInfos[
              this.$store.state.currentStation
            ]?.agcPowerSet?.value
          )
        : Number(this.showDate.agcPowerSet?.value);
      myChart.setOption(option, true);
    },
    ChangeBar(values) {
      let bd = BackgroundData.getInstance();
      this.$router.push(`/?current=${values}`);
      if (!bd.LoginUser) {
        this.$notify({
          title: "请登录",
          message: "切换模式需要先登录！",
          type: "warning",
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
        return;
      }
      if (this.current !== values) {
        this.$store.commit("current", Number(values));
        if (values === 2) {
          this.current = values;
          this.$router.push(`/ManualPage?current=${values}`);
        } else if (values === 1) {
          this.$store.commit("currentStation", "");
          this.$store.commit("current", values);
          if (this.current === 0) {
            this.current = values;
          } else {
            this.current = values;
            this.$router.push(`/?current=${values}`);
          }
        } else if (values === 0) {
          this.$store.commit("currentStation", "");
          this.$store.commit("current", values);
          if (this.current === 2) {
            this.current = values;
            this.$router.push(`/?current=${values}`);
          } else {
            this.current = values;
          }
        }
      } else if (values === 2) {
        this.$router.push(`/ManualPage?current=${values}`);
      }
    },
    dbClick() {
      this.dialogVisible = true;
      this.$refs.detials.getDate();
    },
    dbClicks(data, partsName, timeValues) {
      this.modelData = data;
      let date = new Date();
      let endTs = timeValues
        ? timeValues[1] > date.getTime()
          ? date.getTime()
          : timeValues[1]
        : date.getTime();
      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
      data.tag &&
        api
          .getPower({
            tagName: data.tag,
            startTs: startTs,
            endTs: endTs,
            interval: this.interval,
          })
          .then((res) => {
            if (res.data.length > 0) {
              this.partsName = partsName;
              this.display = true;
              this.modelDetails = res.data;
            } else {
              this.modelDetails = [];
            }
          });
    },
    original(data, partsName, timeValues) {
      this.modelData = data;
      let date = new Date();
      let endTs = timeValues
        ? timeValues[1] > date.getTime()
          ? date.getTime()
          : timeValues[1]
        : date.getTime();
      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
      api
        .getOriginalPower({
          tagName: data.tag,
          startTs: startTs,
          endTs: endTs,
        })
        .then((res) => {
          if (res.data.length > 0) {
            this.partsName = partsName;
            this.display = true;
            this.modelDetails = res.data;
          } else {
            this.modelDetails = [];
          }
        });
    },
    search(values, interval) {
      this.interval = interval;
      this.dbClicks(this.modelData, this.partsName, values);
    },
    originalData(values) {
      this.original(this.modelData, this.partsName, values);
    },
    closed() {
      this.dialogVisible = false;
    },
    closeds() {
      this.display = false;
      this.interval = 60;
    },
  },
  unmounted() {
    clearInterval(this.intervals);
    this.intervals = null;
  },
};
</script>
<style scoped>
.body {
  width: 100%;
  height: 28.5vh;
  /* background-color: #ffffff; */
  margin-left: 15px;
  margin-top: 20px;
  border-left: 1px solid #373737;
  border-right: 1px solid #373737;
  border-bottom: 1px solid #373737;
  /* background-image: url('../../assets/img/type/background.png'); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.control {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  font-size: 14px;
  color: #ffffff;
  /* margin-right: 5px; */
  position: absolute;
  right: 10px;
  z-index: 99;
}

.manual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  width: 86px;
  border-left: 1px solid rgba(51, 51, 51, 1);
  border-top: 1px solid rgba(51, 51, 51, 1);
  border-bottom: 1px solid rgba(51, 51, 51, 1);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.manual_on {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  width: 86px;
  border-left: 1px solid rgba(37, 116, 219, 1);
  border-top: 1px solid rgba(37, 116, 219, 1);
  border-bottom: 1px solid rgba(37, 116, 219, 1);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: rgba(37, 116, 219, 1);
}

.recommend {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  width: 86px;
  border-top: 1px solid rgba(51, 51, 51, 1);
  border-bottom: 1px solid rgba(51, 51, 51, 1);
}

.recommend_on {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  width: 86px;
  border-top: 1px solid rgba(37, 116, 219, 1);
  border-bottom: 1px solid rgba(37, 116, 219, 1);
  background-color: rgba(37, 116, 219, 1);
}

.smart {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  width: 86px;
  border-right: 1px solid rgba(51, 51, 51, 1);
  border-top: 1px solid rgba(51, 51, 51, 1);
  border-bottom: 1px solid rgba(51, 51, 51, 1);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.smart_on {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  width: 86px;
  border-right: 1px solid rgba(37, 116, 219, 1);
  border-top: 1px solid rgba(37, 116, 219, 1);
  border-bottom: 1px solid rgba(37, 116, 219, 1);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: rgba(37, 116, 219, 1);
}
.echarts {
  width: 300px;
  height: 280px;
  margin-top: 10px;
  /* background-color: #000000; */
  margin-left: 10px;
}

.showData {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dataBox {
  display: flex;
  flex-direction: column;
  width: 120px;
  height: 60px;
  border: 1px solid rgba(83, 92, 93, 1);
  margin-bottom: 15px;
  /* margin-top: 15px; */
  margin-left: 30px;
}

.dataBox-right {
  display: flex;
  flex-direction: column;
  width: 120px;
  height: 60px;
  border: 1px solid rgba(83, 92, 93, 1);
  margin-bottom: 15px;
  /* margin-top: 15px; */
  margin-right: 30px;
}

.dataTitle {
  height: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  color: rgba(153, 162, 163, 1);
  margin-left: 5px;
}

.datas {
  height: 50%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  font-size: 16px;
  color: rgba(05, 187, 76, 1);
  margin-right: 5px;
}

.powerContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #ffffff;
  position: relative;
  bottom: 18%;
  left: 11%;
}

.power {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 5px 10px;
}

.power1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 5px 3px 5px 10px;
}

.power2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 5px 3px;
}

.powerTitle {
  margin-bottom: 3px;
}

.powerDatas {
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  padding: 2px 5px;
}
</style>