<template>
  <div class="monitor" v-loading="loading">
    <div class="monitor-top">
      <img
        class="title-left"
        src="../../../assets/images/title-left.png"
        alt=""
      />
      <img
        class="title-center"
        src="../../../assets/images/title-center.png"
        alt=""
      />
      <img
        class="title-right"
        src="../../../assets/images/title-right.png"
        alt=""
      />
      <div class="sys-title">空调风柜监控系统</div>
      <!-- logo -->
      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
      <div class="nowTime">{{ formattedDate }}</div>
      <div class="monitor-time">已监测时长:{{ dayData }}天</div>
      <img
        class="icon_warning"
        src="../../../assets/images/warning.png"
        title="报警记录"
        @click="goWarning"
        v-if="isShowWarning"
        alt=""
      />
      <img
        class="icon_home"
        src="../../../assets/images/icon_home.png"
        title="首页"
        @click="goSys"
        alt=""
      />
      <img
        class="back-icon"
        src="../../../assets/images/back-icon.png"
        title="返回"
        @click="goBack"
        alt=""
      />
    </div>
    <div class="app-container">
      <div class="left-tree">
        <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
        <div class="tree-div">
          <el-tree
            ref="tree"
            :data="treeData"
            node-key="id"
            :default-expand-all="false"
            :default-expanded-keys="expandedKeys"
            :auto-expand-parent="true"
            icon-class="none"
            @node-expand="handleNodeExpand"
            @node-collapse="handleNodeCollapse"
            :highlight-current="true"
            @node-click="handleNodeClick"
          >
            <template #default="{ node }">
              <span class="custom-tree-node">
                <!-- 根据节点状态动态设置图标类名 -->
                <div class="tree-left">
                  <i :class="getIconClass(node)" class="custom-tree-icon"></i>
                  <span class="tree-label">{{ node.label }}</span>
                </div>
              </span>
            </template>
          </el-tree>
        </div>
      </div>
      <damper-monitor
        :currentId="currentId"
        :currentName="currentName"
        ref="damperMonitorRef"
        v-if="isShowdamper"
      ></damper-monitor>
      <normal-monitor
        :currentId="currentId"
        :currentName="currentName"
        ref="normalMonitorRef"
        v-else
      ></normal-monitor>
    </div>
  </div>
</template>

<script>
import { runTime } from "@/api/centerairC/sysMonitor";
import { alarmRecordList } from "@/api/alarm/alarmRecord";
import { getDay } from "@/utils/datetime";
import { spaceTree } from "@/api/region";
import damperMonitor from "./components/damperMonitor.vue";
import normalMonitor from "./components/normalMonitor.vue";
export default {
  components: { damperMonitor, normalMonitor },
  name: "asSysMonitorDetails",
  data() {
    return {
      loading: false,
      currentDate: new Date(),
      nowTimer: null,
      isShowWarning: false, //是否有报警
      dayData: "", //监测天数
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      deviceList: [],
      expandedKeys: [],
      currentId: "", //当前选中高亮的id
      currentName: "", //当前选中的名称
      currentLevel: "", //当前节点的层级
      currentParentId: "", //当前节点的上级的id

      backwaterObj: {}, //回水温度
      airValveObj: {}, //风阀调节
      airValveBackObj: {}, //风阀反馈
      waterValveObj: {}, //水阀调节
      startControlObj: {}, //启停控制
      runStatusObj: {}, //运行状态
      airSupplyObj: {}, //送风温度
      pressureObj: {}, //压差
      automaticObj: {}, //手自动状态
      backAirObj: {}, //回风温度
      faultAlarmObj: {}, //故障报警
      waterSupplyObj: {}, //供水温度

      tableData: [], //系统状态表格数据
      temValue: "℃", //回风温度
      valvePercent: "%", //阀比例
      runStatus: false, //运行状态
      autoStatus: false, //手自动状态
      startStatus: false, //启停控制
      frequency: "v",
      isOpenTimeSwitch: false,
      delayList: [],
      currentWeekday: "",

      isShowdamper: false,
    };
  },
  computed: {
    formattedDate() {
      const year = this.currentDate.getFullYear();
      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0");
      const day = String(this.currentDate.getDate()).padStart(2, "0");
      const hours = String(this.currentDate.getHours()).padStart(2, "0");
      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0");
      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0");
      const weekDays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const weekDay = weekDays[this.currentDate.getDay()];
      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
    },
  },
  watch: {
    temValue(newVal) {
      let valueWithoutTem = newVal.replace(/℃/g, "");
      if (valueWithoutTem === "") {
        this.temValue = "℃";
      } else {
        this.temValue = valueWithoutTem + "℃";
      }
    },
    valvePercent(newVal) {
      // 去除输入值中的 %
      let valueWithoutPercent = newVal.replace(/%/g, "");
      // 如果输入值为空，保持 %
      if (valueWithoutPercent === "") {
        this.temValue = "%";
      } else {
        // 否则在输入值后面添加 %
        this.temValue = valueWithoutPercent + "%";
      }
    },
    frequency(newVal) {
      let valueWithoutFrequency = newVal.replace(/v/g, "");
      if (valueWithoutFrequency === "") {
        this.temValue = "v";
      } else {
        this.temValue = valueWithoutFrequency + "v";
      }
    },
  },
  created() {
    const weekdays = [
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
    ];
    const date = new Date();
    const dayIndex = date.getDay();
    this.currentWeekday = weekdays[dayIndex];
    console.log("今天是星期几", this.currentWeekday);
  },
  mounted() {
    this.requestFullscreen();
    // 首次进入页面时执行
    this.getSysBuild();
    this.getAlarnStatus();
    this.getDayData();
    // 每秒更新一次时间
    this.nowTimer = setInterval(() => {
      this.currentDate = new Date();
    }, 1000);
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.nowTimer) {
      clearInterval(this.nowTimer);
    }
  },
  methods: {
    // 全屏操作
    requestFullscreen() {
      const element = document.documentElement;
      console.log("全屏了吗");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        // Firefox
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        // Chrome, Safari and Opera
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        // IE/Edge
        element.msRequestFullscreen();
      }
    },
    // 退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        // Firefox
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        // Chrome, Safari and Opera
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        // IE/Edge
        document.msExitFullscreen();
      }
    },
    // 进入系统首页
    goSys() {
      this.exitFullscreen();
      this.$router.push("/");
    },
    // 返回上一页
    goBack() {
      window.history.go(-2);
    },
    // 监测天数
    getDayData() {
      runTime().then((res) => {
        if (res.code == 200) {
          this.dayData = res.data.runTime;
        }
      });
    },
    // 报警列表
    getAlarnStatus() {
      let data = {
        pageNum: 1,
        pageSize: 10,
        status: "0",
      };
      let timeArr = [getDay(0), getDay(0)];
      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
        if (res.code == 200 && res.rows.length > 0) {
          this.isShowWarning = true;
        } else {
          this.isShowWarning = false;
        }
      });
    },
    goWarning() {
      this.exitFullscreen();
      this.$router.push("/alarm/alarmRecord");
    },
    // 判断对象是否有效（不为空且不为 undefined）
    isObjectValid(obj) {
      return obj && Object.keys(obj).length > 0;
    },
    getSysBuild() {
      spaceTree().then((res) => {
        if (res.code == 200) {
          // 只需要保留热水的系统
          console.log("楼栋返回值", res);
          let newRes = { ...res };

          if (newRes.data && newRes.data[0] && newRes.data[0].children) {
            newRes.data[0].children = newRes.data[0].children.filter((item) => {
              // 假设子项有一个 label属性，用于检查是否包含 "热水"
              return item.label && item.label.includes("空调风柜");
            });
          }
          // 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 5 级
          const targetLevel = 5;
          // 从 data[0] 开始处理，当前层级为 1
          if (newRes.data[0]) {
            this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel);
          }
          console.log("筛选后的新结果", newRes);
          this.treeData = newRes.data;
          this.$nextTick(() => {
            // 默认展开节点
            this.getExpandedKeys(this.treeData, 1);
            if (this.treeData.length > 0) {
              // 找到最后一层的第一个子节点
              const lastLevelFirstChild = this.findLastLevelFirstChild(
                this.treeData[0]
              );
              // this.$refs.tree.setCurrentKey(
              //   this.treeData[0].children[0].children[0].children[0].id
              // );
              // 设置当前选中的节点,默认高亮
              this.$refs.tree.setCurrentKey(lastLevelFirstChild.id);
              // 更新当前节点的信息
              this.currentId = lastLevelFirstChild.id;
              this.currentLevel = lastLevelFirstChild.level;
              this.currentName = lastLevelFirstChild.label;
              console.log("当前选中节点ID", this.currentId);
              console.log("当前选中节点层级", this.currentLevel);
              console.log("当前选中节点名称", this.currentName);
              //  传给子组件,触发子组件getWindList()
              if (this.currentName.includes("新风阀")) {
                this.isShowdamper = true;
                this.$nextTick(() => {
                  this.$refs.damperMonitorRef.getWindList();
                });
              } else {
                this.isShowdamper = false;
                this.$nextTick(() => {
                  this.$refs.normalMonitorRef.getWindList();
                });
              }
            }
          });
        }
      });
    },
    // 递归函数，用于去除指定层级往后的 children 数据
    removeChildrenAfterLevel(obj, currentLevel, targetLevel) {
      if (currentLevel >= targetLevel) {
        // 当达到指定层级时，将 children 属性置为空数组
        obj.children = [];
        return;
      }
      if (obj.children && obj.children.length > 0) {
        // 若存在 children 数组，则递归处理每个子项
        for (let i = 0; i < obj.children.length; i++) {
          this.removeChildrenAfterLevel(
            obj.children[i],
            currentLevel + 1,
            targetLevel
          );
        }
      }
    },
    // 递归函数，找到最后一层的第一个子节点
    findLastLevelFirstChild(node, level = 1) {
      if (!node.children || node.children.length === 0) {
        return {
          id: node.id,
          level,
          label: node.label,
        };
      }
      return this.findLastLevelFirstChild(node.children[0], level + 1);
    },
    // 默认只展示一二级菜单
    getExpandedKeys(nodes, level) {
      nodes.forEach((node) => {
        if (level <= this.currentId + 4) {
          this.expandedKeys.push(node.id);
        }
        if (node.children) {
          this.getExpandedKeys(node.children, level + 1);
        }
      });
    },
    // 更换图标
    getIconClass(node) {
      // console.log("当前图标的节点内容", node);
      if (node.level === 5) {
        // 5级菜单时的图标
        if (node.expanded) {
          return "el-icon-document-opened"; // 5级菜单展开时的图标类名
        }
        return "el-icon-document"; // 5级菜单收缩时的图标类名
      }
      if (node.expanded) {
        return "el-icon-folder-opened"; // 非5级菜单展开时的图标类名
      }
      return "el-icon-folder-add"; // 非5级菜单收缩时的图标类名
    },
    handleNodeExpand(node) {
      // 节点展开时触发
    },
    handleNodeCollapse(node) {
      // 节点收缩时触发
    },
    // 点击当前节点，保存节点内容
    handleNodeClick(node, data) {
      console.log("点击的当前节点", node, data);
      if (data.level !== 5) {
        console.log("不是第5层000");
        // 设置当前选中的节点,默认高亮
        this.$refs.tree.setCurrentKey(this.currentId);
        console.log("当前选中节点ID", this.currentId);
        console.log("当前选中节点层级", this.currentLevel);
        console.log("当前选中节点名称", this.currentName);
      } else {
        console.log("第5层111");
        this.currentId = node.id;
        this.currentLevel = data.level;
        this.currentName = node.label;
        // 设置当前选中的节点,默认高亮
        this.$refs.tree.setCurrentKey(this.currentId);
        console.log("当前选中节点ID", this.currentId);
        console.log("当前选中节点层级", this.currentLevel);
        console.log("当前选中节点名称", this.currentName);
        // 传给子组件,触发子组件getWindList()
        if (this.currentName.includes("新风阀")) {
          this.isShowdamper = true;
          this.$nextTick(() => {
            this.$refs.damperMonitorRef.getWindList();
          });
        } else {
          this.isShowdamper = false;
          this.$nextTick(() => {
            this.$refs.normalMonitorRef.getWindList();
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.monitor {
  width: 100%;
  min-height: 100vh;
  background-color: black;
  color: #fff;
  .monitor-top {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0.1rem 0.2rem;
    position: relative;
    .title-left {
      width: 3.41rem;
      height: 0.8rem;
    }
    .title-center {
      width: 9.46rem;
      height: 0.69rem;
    }
    .title-right {
      width: 5.04rem;
      height: 0.61rem;
    }
    .sys-title {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.28rem;
      color: #ffffff;
      font-weight: bold;
      z-index: 100;
    }
    .nowTime {
      position: absolute;
      top: 0.3rem;
      right: 0.6rem;
      font-size: 0.18rem;
      color: #ffffff;
      font-weight: bold;
      z-index: 100;
    }
    .sys-logo {
      width: 1.8rem;
      height: 0.5rem;
      position: absolute;
      top: 0.26rem;
      left: 0.8rem;
      z-index: 10;
    }
    .monitor-time {
      position: absolute;
      top: 0.44rem;
      left: 4.2rem;
      z-index: 10;
      font-size: 0.18rem;
      color: #ffffff;
      font-weight: bold;
    }
    .icon_warning {
      position: absolute;
      top: 0.33rem;
      right: 4.4rem;
      z-index: 10;
      width: 0.3rem;
      height: 0.27rem;
      margin: 0 0.25rem 0 0.27rem;
      cursor: pointer;
      /* 添加闪烁动画 */
      animation: blink 1s infinite;
    }
    @keyframes blink {
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
    }
    .icon_home {
      position: absolute;
      top: 0.33rem;
      right: 4rem;
      z-index: 10;
      width: 0.3rem;
      height: 0.27rem;
      margin: 0 0.2rem 0 0.27rem;
      cursor: pointer;
    }
    .back-icon {
      position: absolute;
      top: 0.33rem;
      right: 3.7rem;
      z-index: 10;
      width: 0.3rem;
      height: 0.27rem;
      cursor: pointer;
    }
  }
}
.app-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
  padding: 0.3rem 0.2rem 0 0.35rem;
  width: 100%;
  .left-tree {
    width: 256px;
    padding: 15px 10px 10px 10px;
    border: 1px solid #004b8c;
    .tree-div {
      height: 7rem;
      overflow-y: auto;
    }
    .status {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 20px;
      .status-li {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
      }
      .status1,
      .status2,
      .status3,
      .status4 {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 5px;
      }
      .status1::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #00d2ff;
        margin-right: 5px;
      }
      .status2::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ff2f2f;
        margin-right: 5px;
      }
      .status3::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ff9908;
        margin-right: 5px;
      }
      .status4::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #7398c7;
        margin-right: 5px;
      }
    }
  }
  .right-monitor {
    width: calc(100% - 280px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
}
.tree-container {
  height: 300px; /* 设置固定高度 */
  overflow-y: auto; /* 启用垂直滚动条 */
}
// 滚动条
:-webkit-scrollbar {
  width: 10px; /* 滚动条宽度 */
}

::-webkit-scrollbar-track {
  background: transparent !important; /* 滚动条轨道背景色 */
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  .tree-left {
    .custom-tree-icon {
      margin-right: 5px;
    }
  }
}
.highlight {
  background-color: #003863 !important; /* 定义高亮的背景颜色 */
  color: #ffffff !important;
  font-weight: bold;
}
// 手机端样式
@media (min-width: 0px) and (max-width: 990px) {
  .app-container {
    padding: 0rem 0.2rem 0 0.35rem !important;
  }
  .app-container .left-tree {
    width: 200px !important;
    min-height: 340px !important;
    padding: 0.15rem 0 !important;
  }
  .app-container .tree-div {
    height: 300px !important;
    width: 100%;
    overflow-x: hidden !important;
  }
  .app-container .right-monitor {
    width: calc(100% - 210px) !important;
  }
  .custom-tree-node {
    font-size: 12px !important;
  }
}
</style>
<style scoped>
/* 自定义高亮颜色 */
.left-tree
  >>> .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #285b9e !important;
  /* color: #f56c6c;  */
  color: #25f1f8;
}
/* 手机端样式 */
@media (min-width: 0px) and (max-width: 990px) {
  .left-tree >>> .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 3px !important;
  }
}
</style>
