<template>
  <el-dialog width="70%" @open="opened" @closed="closed" :fullscreen="true" :show-close="true" class="dialogs">
    <template #title>
      <div class="showTitles currentShowTitles">
        <div class="titles">风机矩阵</div>
      </div>
    </template>
    <div class="body" @contextmenu="contextmenu">
      <div class="title">
        <div :class="current === item.id ? 'title-onItem' : 'title-item'" v-for="(item, index) in stationList"
          :key="index" @click="handleChange(item.id)">
          {{ item.address }}
        </div>
      </div>
      <div class="content">
        <box-select node=".box" @selectList="selectList">
          <div class="windStation" v-for="(item, index) in dataArr" :key="index">
            <div class="stationTitle">
              <div class="stationName">
                {{
                    stationList.filter((val) => item[0].stationId === val.id)[0]
                      ?.address
                }}
              </div>
              <div class="num">
                <div class="jrts">接入台数</div>
                <div class="jrts_num">{{ item.length }}</div>
              </div>
              <div class="num">
                <div class="djts">待机台数</div>
                <div class="djts_num">
                  {{ item.filter((val) => val.status === 2 || val.status === 3)?.length }}
                </div>
              </div>
              <div class="num">
                <div class="bwts">并网台数</div>
                <div class="bwts_num">
                  {{ item.filter((val) => val.status === 4)?.length }}
                </div>
              </div>
              <div class="num">
                <div class="gzts">故障台数</div>
                <div class="gzts_num">
                  {{ item.filter((val) => val.status === 5)?.length }}
                </div>
              </div>
              <div class="num">
                <div class="jxts">检修台数</div>
                <div class="jxts_num">
                  {{ item.filter((val) => val.status === 6)?.length }}
                </div>
              </div>
              <div class="num">
                <div class="lxts">离线台数</div>
                <div class="lxts_num">
                  {{ item.filter((val) => val.status === 7)?.length }}
                </div>
              </div>

              <div class="stationInfo">
                <div class="name">实时功率</div>
                <div class="nums">
                  {{
                      $store.state.titleInfo.stationOverviewInfos[
                        item[0].stationId
                      ]?.realTimePower?.value.toFixed(2)
                  }}MW
                </div>
              </div>
              <div class="stationInfo">
                <div class="name">平均风速</div>
                <div class="nums">
                  {{
                      $store.state.titleInfo.stationOverviewInfos[
                        item[0].stationId
                      ]?.averageWindSpeed?.value.toFixed(2)
                  }}m/s
                </div>
              </div>
            </div>
            <div class="block">
              <UnpaidMatrixBlock @on-click="handleDetial" @choose-click="handleClick" :dataList="item">
              </UnpaidMatrixBlock>
            </div>
          </div>
        </box-select>
      </div>
    </div>
    <WindturbineDetailPages v-model="dialogVisible" @close="handleClose" :windturbine="currentWindturbine">
    </WindturbineDetailPages>
    <ParametersContrast :chooseList="chooseList" v-model="parametersDisplay"></ParametersContrast>
  </el-dialog>
</template>
<script>
import BackgroundData from "utils/BackgroundData";
import UnpaidMatrixBlock from "components/unpaidMatrixBlock.vue";
import WindturbineDetailPages from "components/WindturbineDetailPages.vue";
import boxSelect from "components/boxSelect.vue";
import ParametersContrast from "./control/parametersContrast.vue";
import api from "api/index";
export default {
  components: {
    UnpaidMatrixBlock,
    WindturbineDetailPages,
    boxSelect,
    ParametersContrast,
  },
  data() {
    return {
      current: "all",
      windterbin: {},
      stationObj: {
        CL_FDC: [],
        DX_FDC: [],
        KB_FDC: [],
        SY_FDC: [],
      },
      cache: {},
      dataArr: {},
      dialogVisible: false,
      currentWindturbine: {},
      chooseList: [],
      parametersDisplay: false,
      intervals: null,
    };
  },
  created() {
    this.getLocks();
  },
  mounted() { },
  methods: {
    opened() {
      let stationList = [
        {
          id: "all",
          address: "全部风机",
        },
        { address: "崇礼", fullName: "崇礼风电场", id: "CL_FDC", type: 1 },
        { address: "康保", fullName: "康保风电场", id: "KB_FDC", type: 1 },
        { address: "代县", fullName: "代县风电场", id: "DX_FDC", type: 1 },
        { address: "寿阳", fullName: "寿阳风电场", id: "SY_FDC", type: 1 },
      ];;
      this.stationList = stationList;
      this.handleWindturbineChange();
      this.intervals = setInterval(this.handleWindturbineChange, 3000);
    },
    closed() {
      this.chooseList = [];
      this.current = "all",
        clearInterval(this.intervals);
      this.intervals = null;
    },
    handleChange(val) {
      let dataArr = {}
      this.current = val;
      if (val === 'all') {
        dataArr = this.stationObj
      } else {
        let obj = {}
        obj[val] = this.stationObj[val]
        dataArr = obj
      }
      this.dataArr = dataArr
    },
    handleDetial(itm) {
      this.dialogVisible = true;
      this.currentWindturbine = itm;
    },
    handleWindturbineChange() {
      api.getWindturbine().then((res) => {
        if (res.data) {
          let stationObj = {
            CL_FDC: [],
            DX_FDC: [],
            KB_FDC: [],
            SY_FDC: [],
          }
          let dataArr = {}
          this.windterbin = res.data;
          let arr = Object.keys(res.data).sort();
          for (const v of arr) {
            let val = res.data[v]
            this.chooseList.forEach((item) => {
              if (item.windturbineId === val.windturbineId) {
                val.active = true;
              }
            });
            stationObj[val.stationId].push(val)
          }
          if (this.current === 'all') {
            dataArr = stationObj
          } else {
            let obj = {}
            obj[this.current] = stationObj[this.current]
            dataArr = obj
          }
          this.stationObj = stationObj
          this.dataArr = dataArr
        }
      });
    },
    handleClick(values) {
      if (values.active) {
        let showIndex = null;
        this.chooseList.forEach((item, index) => {
          if (item.windturbineId === values.windturbineId) {
            showIndex = index;
          }
        });
        this.chooseList.splice(showIndex, 1);
      } else {
        this.chooseList.push(values);
      }
      for (const key in this.dataArr) {
        this.dataArr[key].forEach(item => {
          if (item.windturbineId === values.windturbineId) {
            item.active = !item.active;
          }
        })
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.getLocks();
    },
    selectList(val) {
      val.forEach((item) => {
        this.handleClick(this.windterbin[item.id]);
      });
    },
    getLocks() {
      api.getCustomerLock().then((res) => {
        if (res) {
          this.lockValues = res.data;
        }
      });
    },

    /* 右键菜单 */
    contextmenu() {
      const remote = require("electron").remote;
      let that = this;
      let menuTemplate = [];
      menuTemplate = [
        // {
        //   label: "启动",
        //   click() {
        //     that.sendCommand({ controlType: "1", deviceType: "Manual" });
        //   },
        // },
        // {
        //   label: "停机",
        //   click() {
        //     that.sendCommand({ controlType: "2", deviceType: "Manual" });
        //   },
        // },
        // {
        //   label: "复位",
        //   click() {
        //     that.sendCommand({ controlType: "5", deviceType: "Manual" });
        //   },
        // },
        // {
        //   label: "维护",
        //   click() {
        //     that.sendCommand({ controlType: "6", deviceType: "Manual" });
        //   },
        // },
        // {
        //   label: "取消维护",
        //   click() {
        //     that.sendCommand({ controlType: "8", deviceType: "Manual" });
        //   },
        // },
        {
          label: "挂牌",
          submenu: [
            {
              label: "检修",
              click() {
                that.sendLock({ value: "CheckLock" });
              },
            },
            {
              label: "故障维修",
              click() {
                that.sendLock({ value: "FaultLock" });
              },
            },
            {
              label: "场内受累检修",
              click() {
                that.sendLock({ value: "StationCheckLock" });
              },
            },
            {
              label: "场内受累故障",
              click() {
                that.sendLock({ value: "StationFaulLock" });
              },
            },
            {
              label: "场外受累电网",
              click() {
                that.sendLock({ value: "StationPowerLineLock" });
              },
            },
            {
              label: "场外受累天气",
              click() {
                that.sendLock({ value: "StationWeatherLock" });
              },
            },
          ],
        },
        {
          label: "取消挂牌",
          click() {
            that.sendLock({ value: "UnLock" });
          },
        },
        {
          label: "参数对比",
          click() {
            that.parametersContrast();
          },
        },
        {
          label: "取消选择",
          click() {
            that.chooseList = [];
          },
        },
      ];

      const menu = remote.Menu.buildFromTemplate(menuTemplate);

      menu.popup(remote.getCurrentWindow());
    },
    // sendCommand(msg, windturbine) {
    //   let bd = BackgroundData.getInstance();
    //   if (!bd.LoginUser) {
    //     this.$notify({
    //       title: "请登录",
    //       message: "控制风机需要先登录！",
    //       type: "warning",
    //       position: "bottom-right",
    //       offset: 60,
    //       duration: 3000,
    //     });
    //     return;
    //   }
    //   let sendList = [];
    //   if (windturbine) {
    //     sendList = windturbine;
    //   } else {
    //     this.chooseList.forEach((item) => {
    //       item.controlType = Number(msg.controlType);
    //     });
    //     sendList = this.chooseList;
    //   }

    //   if (sendList.length > 0) {
    //     bd.checkout(sendList);
    //     this.chooseList = [];
    //     let pairs = {};
    //     sendList.forEach((item) => {
    //       let ct = {
    //         windturbineId: item.windturbineId,
    //         stationId: item.stationId,
    //         projectId: item.projectId,
    //         modelId: item.modelId,
    //         controlType: item.controlType,
    //         lockType: item.lockType,
    //         userName: `system_${bd.LoginUser.name}`,
    //         userId: 0,
    //         auto: false,
    //         deviceType: msg.deviceType,
    //       };
    //       pairs[ct.windturbineId] = ct;
    //     });
    //     api.windturbControl(pairs).then((res) => {
    //       if (res) {
    //         this.controlSuccess(res);
    //       }
    //     });
    //   }
    // },
    sendLock(msg, windturbine) {
      let bd = BackgroundData.getInstance();
      if (!bd.LoginUser) {
        this.$notify({
          title: "请登录",
          message: "控制风机需要先登录！",
          type: "warning",
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
        return;
      }
      let sendList = [];
      if (windturbine) {
        windturbine.lockType = msg.value;
        sendList.push(windturbine);
      } else {
        this.chooseList.forEach((item) => {
          item.lockType = msg.value;
        });
        sendList = this.chooseList;
      }
      if (sendList.length > 0) {
        this.chooseList = [];
        let pairs = {};
        sendList.forEach((item) => {
          let ct = {
            windturbineId: item.windturbineId,
            stationId: item.stationId,
            projectId: item.projectId,
            modelId: item.modelId,
            controlType: item.controlType,
            lockType: item.lockType,
            userName: `system_${bd.LoginUser.name}`,
            userId: 0,
          };
          pairs[ct.windturbineId] = ct;
        });
        api.windturbControlLock(pairs).then((res) => {
          if (res) {
            this.controlSuccess(res);
          }
        });
      }
    },

    /* 控制成功 */
    controlSuccess(msg) {
      let bd = BackgroundData.getInstance();
      for (let id in msg.data) {
        let val = msg.data[id];
        if (val.errorCode !== "0") {
          bd.removeCheckouts(val);
        }
      }
      let mss = ""; // 信息
      let iserror = false; // 是否有控制错误的风机
      for (let v in msg.data) {
        let val = msg.data[v];
        if (val.errorCode > 0) {
          iserror = true;
          mss += `${val.windturbineId}  ${this.controlErorCodes[val.errorCode]
            }\n`;
        }
      }
      let tp = iserror ? "warning" : "success";
      // if (!iserror) {
      //   mss = "控制成功";
      // }

      this.$notify({
        title: "控制",
        message: mss,
        type: tp,
        position: "bottom-right",
        offset: 60,
        duration: 3000,
      });
    },

    /* 控制失败 */
    controlError(err) {
      this.$notify({
        title: "控制出现错误",
        message: err.message,
        type: "warning",
        position: "bottom-right",
        offset: 60,
        duration: 3000,
      });
    },
    parametersContrast() {
      if (this.chooseList.length > 0) {
        this.parametersDisplay = true;
      }
    },

  },
};
</script>
<style lang="less" scoped>
.body {
  display: flex;
  flex-direction: column;
  background-color: #000000;
  height: 90vh;
  width: 102%;
  margin-left: -1%;
  margin-top: -40px;
  overflow-y: auto;
}

.body::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}

.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 3vw;
  padding-top: 8px;
  position: absolute;
  width: 100%;
  background-color: #000000;
  padding-bottom: 10px;

  .title-item {
    background-color: #242424;
    border-radius: 4px;
    padding: 8px 27px 7px 25px;
    font-size: 14px;
    color: #b4bdc0;
    margin-right: 10px;
  }

  .title-onItem {
    background-color: rgba(37, 116, 219, 1);
    border-radius: 4px;
    padding: 8px 27px 7px 25px;
    font-size: 14px;
    color: #b4bdc0;
    margin-right: 10px;
  }
}

.content {
  display: flex;
  flex-direction: column;
  margin-top: 65px;
}

.block {
  padding-left: 10px;
}

.windStation {
  display: flex;
  flex-direction: column;
  background-color: #242424;
  border-radius: 4px;
  width: 95%;
  margin-left: 3vw;
  padding-bottom: 20px;
  padding-left: 10px;
  margin-bottom: 20px;

  .stationTitle {
    display: flex;
    flex-direction: row;
    // align-items: center;
    margin-top: 10px;

    .stationName {
      font-size: 14px;
      margin-left: 10px;
      color: #b4bdc0;
    }

    .num {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 25px;
      width: 90px;

      .jrts {
        font-size: 12px;
        color: #606769;
      }

      .jrts_num {
        font-size: 16px;
        color: #ffffff;
      }

      .djts {
        font-size: 12px;
        color: #05bb4c;
      }

      .djts_num {
        font-size: 16px;
        color: #05bb4c;
      }

      .bwts {
        font-size: 12px;
        color: #4b55ae;
      }

      .bwts_num {
        font-size: 16px;
        color: #4b55ae;
      }

      .gzts {
        font-size: 12px;
        color: #ba3237;
      }

      .gzts_num {
        font-size: 16px;
        color: #ba3237;
      }

      .jxts {
        font-size: 12px;
        color: #e17d24;
      }

      .jxts_num {
        font-size: 16px;
        color: #e17d24;
      }

      .lxts {
        font-size: 12px;
        color: #606769;
      }

      .lxts_num {
        font-size: 16px;
        color: #606769;
      }
    }
  }

  .stationInfo {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 30px;
    font-size: 16px;

    .name {
      color: #ffffff;
      margin-right: 25px;
    }

    .nums {
      color: #05bb4c;
    }
  }
}
</style>
