<template>
  <div class="app-container" v-loading="loading">
    <!-- 状态统计 -->
    <div class="status-statistics">
      <div class="status-card">
        <div class="status-label">运行设备</div>
        <div class="status-value-running">
          {{ statistics.running }}/{{ total }}
        </div>
      </div>
      <div class="status-card">
        <div class="status-label">手动模式</div>
        <div class="status-value-auto">{{ statistics.manual }}/{{ total }}</div>
      </div>
      <div class="status-card">
        <div class="status-label">自动模式</div>
        <div class="status-value-maintenance">
          {{ statistics.auto }}/{{ total }}
        </div>
      </div>
      <div class="status-card">
        <div class="status-label">故障设备</div>
        <div class="status-value-error">{{ statistics.warn }}/{{ total }}</div>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="主机" name="host"> </el-tab-pane>
      <el-tab-pane label="冷却塔" name="second"> </el-tab-pane>
      <el-tab-pane label="冷却泵" name="three"> </el-tab-pane>
      <el-tab-pane label="冷冻泵" name="three"> </el-tab-pane>
      <el-tab-pane label="冷冻蝶阀" name="three"> </el-tab-pane>
      <el-tab-pane label="冷却蝶阀" name="three"> </el-tab-pane>
      <el-tab-pane label="冷却塔出水阀" name="three"> </el-tab-pane>
    </el-tabs>
    <!-- 非蝶阀控制列表 -->
    <div class="device-container">
      <list-header
        :deviceList="hostList"
        @operationControl="hadleOperationConrol"
      ></list-header>
    </div>
    <div class="device-container">
      <list-header
        :deviceList="coolingTowerFanList"
        @operationControl="hadleOperationConrol"
      ></list-header>
    </div>
    <div class="device-container">
      <list-header
        :deviceList="coolingPump"
        @operationControl="hadleOperationConrol"
      ></list-header>
    </div>
    <div class="device-container">
      <list-header
        :deviceList="freezingPump"
        @operationControl="hadleOperationConrol"
      ></list-header>
    </div>
    <!-- 蝶阀控制列表 -->
    <div class="device-container">
      <vavleheader
        :valveList="freezingValve"
        @operationControl="hadleOperationConrol"
      ></vavleheader>
    </div>
    <div class="device-container">
      <vavleheader
        :valveList="coolingValve"
        @operationControl="hadleOperationConrol"
      ></vavleheader>
    </div>
    <div class="device-container">
      <vavleheader
        :valveList="coolingTowerOutValve"
        @operationControl="hadleOperationConrol"
      ></vavleheader>
    </div>
  </div>
</template>

<script>
import { operationList, operationConrol } from "@/api/centerairC/sysMonitor";
import listHeader from "./listHeader.vue";
import Vavleheader from "./vavleheader.vue";
export default {
  components: { listHeader, Vavleheader },
  name: "sysMonitor",
  data() {
    return {
      loading: false,
      deviceList: [], //全部
      hostList: [], //主机
      coolingTowerFanList: [], //冷却塔风机
      coolingPump: [], //冷却泵
      freezingPump: [], //冷冻泵
      valveList: [], //阀
      total: null,
      freezingValve: [], //冷冻蝶阀
      coolingValve: [], //冷却蝶阀
      coolingTowerOutValve: [], //冷却塔出水阀
      activeName: "host", //设备管理
    };
  },
  computed: {
    statistics() {
      const deviceManual = this.deviceList.filter(
        (d) => d.automaticText === false
      ).length;
      const deviceAuto = this.deviceList.filter(
        (d) => d.automaticText === true
      ).length;
      const valveManual = this.valveList.filter(
        (v) => v.automaticText === false
      ).length;
      const valveAuto = this.valveList.filter(
        (v) => v.automaticText === true
      ).length;

      return {
        running: this.deviceList.filter((d) => d.runStatus === "运行").length,
        manual: deviceManual + valveManual,
        auto: deviceAuto + valveAuto,
        warn: this.deviceList.filter((d) => d.warnText === "故障").length,
      };
    },
  },
  mounted() {
    this.getOperationList();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 系统控制列表
    getOperationList() {
      return new Promise((resolve, reject) => {
        operationList({ systemType: 0 })
          .then((res) => {
            console.log("列表返回res", res);
            if (res.code === 200) {
              let handleList = res.rows;
              this.deviceList = [];
              this.valveList = [];
              handleList.forEach((element) => {
                if (element.children && element.children.length > 0) {
                  // 初始化一个空对象来存储非蝶阀处理后的结果
                  let deviceItem = {
                    name: element.name,
                  };
                  // 初始化一个空对象来存储阀门处理后的结果
                  let valveItem = {
                    name: element.name,
                  };

                  const limitedChildren = element.children;
                  let valveClosed = false;
                  let valveOpened = false;

                  limitedChildren.forEach((child) => {
                    if (child.name) {
                      // 运行状态
                      if (
                        child.paramType === "1" &&
                        !child.name.includes("阀")
                      ) {
                        deviceItem.runStatus =
                          Number(child.value) == 0 ? "不运行" : "运行";
                      }
                      // 手动控制
                      else if (
                        child.paramType === "2" &&
                        !child.name.includes("阀")
                      ) {
                        deviceItem.controlText =
                          Number(child.value) == 0 ? false : true;
                        deviceItem.controlId = child.id;
                      }
                      // 手自动切换    0自动1手动
                      else if (
                        child.paramType === "6" &&
                        !child.name.includes("阀")
                      ) {
                        deviceItem.automaticText =
                          Number(child.value) == 0 ? true : false;
                        deviceItem.automaticId = child.id;
                      }
                      // 故障报警
                      else if (
                        child.paramType === "5" &&
                        !child.name.includes("阀")
                      ) {
                        deviceItem.warnText =
                          Number(child.value) == 0 ? "未故障" : "故障";
                        // 本地远程
                      } else if (
                        child.paramType === "22" &&
                        !child.name.includes("阀")
                      ) {
                        deviceItem.localRemote =
                          Number(child.value) == 0 ? "本地" : "远程";
                      }
                      // 频率调节
                      else if (
                        child.paramType === "3" &&
                        !child.name.includes("阀")
                      ) {
                        deviceItem.frequencySet =
                          Number(child.value) == 0 ? "0" : child.value;
                        deviceItem.frequencyId = child.id;
                      }
                      // 频率反馈
                      else if (child.paramType === "4") {
                        deviceItem.frequency = child.value;
                      }

                      // 阀门的-手自动切换
                      else if (
                        child.paramType === "6" &&
                        child.name.includes("阀")
                      ) {
                        valveItem.automaticText =
                          Number(child.value) == 0 ? true : false;
                        valveItem.automaticId = child.id;
                      }
                      // 阀门的-手动控制
                      else if (
                        child.paramType === "2" &&
                        child.name.includes("阀")
                      ) {
                        valveItem.controlText =
                          Number(child.value) == 0 ? false : true;
                        valveItem.controlId = child.id;
                      }

                      // 记录阀关到位状态
                      if (
                        child.name.includes("阀关到位") &&
                        Number(child.value) == 0
                      ) {
                        valveClosed = false;
                      } else if (
                        child.name.includes("阀关到位") &&
                        Number(child.value) == 1
                      ) {
                        valveClosed = true;
                      }
                      // 记录阀开到位的状态
                      if (
                        child.name.includes("阀开到位") &&
                        Number(child.value) == 0
                      ) {
                        valveOpened = false;
                      } else if (
                        child.name.includes("阀开到位") &&
                        Number(child.value) == 1
                      ) {
                        valveOpened = true;
                      }
                    }
                  });

                  // 根据阀关到位和阀开到位的状态设置阀门状态
                  if (valveClosed && !valveOpened) {
                    valveItem.closeStatus = "开启";
                    valveItem.openStauts = "关闭";
                  } else if (!valveClosed && valveOpened) {
                    valveItem.closeStatus = "关闭";
                    valveItem.openStauts = "开启";
                  } else if (!valveClosed && !valveOpened) {
                    valveItem.closeStatus = "关闭";
                    valveItem.openStauts = "关闭";
                  }

                  // 将处理后的对象添加到 deviceList 中
                  if (Object.keys(deviceItem).length > 1) {
                    this.deviceList.push(deviceItem);
                  }
                  // 将处理后的对象添加到 valveList 中
                  if (Object.keys(valveItem).length > 1) {
                    this.valveList.push(valveItem);
                  }
                }
              });
              this.valveList = this.valveList.filter(
                (item) => item.name && item.name.includes("阀")
              );
              console.log("处理过的this.deviceList", this.deviceList);
              console.log("处理过的this.valveList", this.valveList);
              this.total = this.deviceList.length + this.valveList.length;

              // 再分类不同的设备列表
              this.hostList = [];
              this.coolingTowerFanList = [];
              this.coolingPump = [];
              this.freezingPump = [];
              this.freezingValve = [];
              this.coolingValve = [];
              this.coolingTowerOutValve = [];
              this.deviceList.forEach((list) => {
                if (list.name.includes("机") && !list.name.includes("风")) {
                  this.hostList.push(list);
                }
                if (list.name.includes("风机")) {
                  this.coolingTowerFanList.push(list);
                }
                if (list.name.includes("冷却泵")) {
                  this.coolingPump.push(list);
                }
                if (list.name.includes("冷冻泵")) {
                  this.freezingPump.push(list);
                }
              });
              this.valveList.forEach((list) => {
                if (list.name.includes("冷冻蝶阀")) {
                  this.freezingValve.push(list);
                }
                if (list.name.includes("冷却蝶阀")) {
                  this.coolingValve.push(list);
                }
                if (list.name.includes("冷却塔出水阀")) {
                  this.coolingTowerOutValve.push(list);
                }
              });
              console.log("处理过后的主机列表", this.hostList);
            } else {
              this.deviceList = [];
              this.valveList = [];
              this.total = 0;
            }
            // 成功时解析 Promise
            resolve(res);
          })
          .catch((error) => {
            // 失败时拒绝 Promise
            reject(error);
          });
      });
    },
    // 操作
    hadleOperationConrol(id, param) {
      let data = {
        id: id,
        param: param,
      };
      console.log("操作参数", data);
      operationConrol([data])
        .then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("指令下发成功!");
            // 开启 loading 效果
            this.loading = true;
            // 更新所有设备状态;
            setTimeout(() => {
              this.getOperationList().finally(() => {
                // 关闭 loading 效果
                this.loading = false;
              });
            }, 6000);
          } else {
            // this.$modal.msgError("操作失败");
            console.log("应该更新状态的");
            // 更新所有设备状态;
            this.getOperationList();
          }
        })
        .catch((error) => {
          console.log("请求发生错误，更新设备状态", error);
          // 更新所有设备状态;
          this.getOperationList();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 设备控制列表样式 */
.device-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #142c4e;
  padding: 10px 10px 30px 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
/* 状态统计样式 */
.status-statistics {
  margin-bottom: 25px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.status-card {
  background-color: #142c4e;
  border-radius: 10px;
  padding: 10px;
  width: 24%;
}

.status-label {
  color: #9ca3af;
  margin-bottom: 20px;
}

.status-value-running {
  font-size: 24px;
  font-weight: bold;
  color: #22c55e;
}

.status-value-auto {
  font-size: 24px;
  font-weight: bold;
  color: #60a5fa;
}

.status-value-error {
  font-size: 24px;
  font-weight: bold;
  color: #ef4444;
}

.status-value-maintenance {
  font-size: 24px;
  font-weight: bold;
  color: #f59e0b;
}
</style>
