<template>
  <div class="loginD">
    <img
      src="../../assets/images/index_img_top.png"
      class="loginD_img_top"
      alt=""
    />
    <img
      src="../../assets/images/index_img_down.png"
      class="loginD_img_down"
      alt=""
    />
    <div class="sys-title" @click="goSys">楼宇智慧管理系统平台</div>
    <!-- <div class="day">已监测100天</div> -->
    <div class="set">
      <img src="../../assets/images/icon_time.png" class="icon_time" alt="" />
      <div>{{ nowTime }}</div>
      <img
        src="../../assets/images/icon_home.png"
        class="icon_home"
        alt=""
        title="进入系统"
        @click="goSys"
      />
      <img
        src="../../assets/images/icon_dianyuan.png"
        class="icon_dianyuan"
        alt=""
        title="退出系统"
        @click="logout"
      />
    </div>
    <div class="screen-page">
      <div class="screen-left" :class="{ collapsed: !isLeftPanelOpen }">
        <div class="showLeftConent">
          <div class="special-div">
            <div class="special-top">
              <div class="special-title">
                <div class="title-left">
                  <div>能耗总览</div>
                  <time-data
                    v-model="sharedIndex"
                    :currentIndex="sharedIndex"
                    @update-message="handleUpdateMessage"
                  ></time-data>
                </div>
              </div>
            </div>
            <all-energy :viewMes="viewMes"></all-energy>
          </div>
          <div class="special-div">
            <div class="special-top">
              <div class="special-title">
                <div class="title-left">
                  <div>冷源系统能效</div>
                  <time-data
                    v-model="sharedIndex"
                    :currentIndex="sharedIndex"
                    @update-message="handleUpdateMessage"
                  ></time-data>
                </div>
              </div>
            </div>
            <cold-sys-energy :viewMes="viewMes"></cold-sys-energy>
          </div>
          <div class="special-div">
            <div class="special-top">
              <div class="special-title">
                <div class="title-left">
                  <div>生活热水系统</div>
                  <time-data
                    v-model="sharedIndex"
                    :currentIndex="sharedIndex"
                    @update-message="handleUpdateMessage"
                  ></time-data>
                </div>
              </div>
            </div>
            <water-sys-energy :viewMes="viewMes"></water-sys-energy>
          </div>
        </div>
        <img
          :src="leftIndicatorSrc"
          class="left-Indicator"
          @click="togglePanel('left')"
          alt=""
        />
      </div>
      <div class="screen-right" :class="{ collapsed: !isRightPanelOpen }">
        <div class="showRightConent">
          <div class="special-div">
            <div class="special-top">
              <div class="special-title">
                <div class="title-left">
                  <div>基本信息</div>
                  <time-data
                    v-model="sharedIndex"
                    :currentIndex="sharedIndex"
                    @update-message="handleUpdateMessage"
                  ></time-data>
                </div>
              </div>
            </div>
            <div class="message">
              <div class="message-li">
                <img
                  class="message-img"
                  src="../../assets/images/message-img1.png"
                  alt=""
                />
                <div class="message-data">{{ viewMes.buildingArea }}m²</div>
                <div>建筑面积</div>
              </div>
              <div class="message-li">
                <img
                  class="message-img"
                  src="../../assets/images/message-img3.png"
                  alt=""
                />
                <div class="message-data">{{ viewMes.totalEle }}kwh</div>
                <div>总电耗</div>
              </div>
              <div class="message-li">
                <img
                  class="message-img"
                  src="../../assets/images/message-img4.png"
                  alt=""
                />
                <div class="message-data">{{ viewMes.totalWater }}t</div>
                <div>总水耗</div>
              </div>
              <div class="message-li">
                <img
                  class="message-img"
                  src="../../assets/images/message-img2.png"
                  alt=""
                />
                <div class="message-data">{{ viewMes.totalCold }}kw</div>
                <div>总产冷量</div>
              </div>
              <div class="message-li">
                <img
                  class="message-img"
                  src="../../assets/images/message-img6.png"
                  alt=""
                />
                <div class="message-data">{{ viewMes.totalGas }}t</div>
                <div>总蒸汽量</div>
              </div>
              <div class="message-li">
                <img
                  class="message-img"
                  src="../../assets/images/message-img5.png"
                  alt=""
                />
                <div class="message-data">{{ viewMes.eleUnitArea }}kwh/m²</div>
                <div>面积电耗</div>
              </div>
              <div class="message-li">
                <img
                  class="message-img"
                  src="../../assets/images/message-img7.png"
                  alt=""
                />
                <div class="message-data">{{ viewMes.waterUnitArea }}t/m²</div>
                <div>面积水耗</div>
              </div>
              <div class="message-li">
                <img
                  class="message-img"
                  src="../../assets/images/message-img8.png"
                  alt=""
                />
                <div class="message-data">{{ viewMes.coldUnitArea }}kw/m²</div>
                <div>面积冷耗</div>
              </div>
              <div class="message-li">
                <img
                  class="message-img"
                  src="../../assets/images/message-img9.png"
                  alt=""
                />
                <div class="message-data">{{ viewMes.gasUnitArea }}t/m²</div>
                <div>面积汽耗</div>
              </div>
            </div>
          </div>
          <div class="special-div">
            <div class="special-top">
              <div class="special-title">
                <div class="title-left">
                  <div>用电趋势</div>
                  <time-data
                    v-model="sharedIndex"
                    :currentIndex="sharedIndex"
                    @update-message="handleUpdateMessage"
                  ></time-data>
                </div>
              </div>
            </div>
            <use-elect></use-elect>
          </div>
        </div>
        <img
          :src="rightIndicatorSrc"
          class="right-Indicator"
          @click="togglePanel('right')"
          alt=""
        />
      </div>
    </div>
    <div></div>
  </div>
</template>

<script>
import AllEnergy from "./components/allEnergy.vue";
import ColdSysEnergy from "./components/coldSysEnergy.vue";
import waterSysEnergy from "./components/waterSysEnergy.vue";
import useElect from "./components/useElect.vue";
import timeData from "./components/timeData.vue";
import { overView, getWeatherData, getRunTime } from "@/api/bigScreen";
import { getDay, getMonth, getYear } from "@/utils/datetime";
export default {
  name: "screen",
  components: { timeData, AllEnergy, ColdSysEnergy, waterSysEnergy, useElect },
  data() {
    return {
      nowTime: "",
      sharedIndex: "0", //默认为0
      queryType: "day", //默认为day
      isLeftPanelOpen: true, // 默认显示左边内容
      isRightPanelOpen: true, // 默认显示右边内容
      leftIndicatorSrc: require("@/assets/images/left-arrow.png"),
      rightIndicatorSrc: require("@/assets/images/right-arrow.png"),
      viewMes: {},
      dataTime: getDay(0), //默认为今天
    };
  },
  created() {
    this.nowTimes();
  },
  mounted() {
    this.getMessage();
    // this.getWeather();
    // this.getRunData();
  },
  methods: {
    //显示当前时间（年月日时分秒）
    timeFormate(timeStamp) {
      let hh =
        new Date(timeStamp).getHours() < 10
          ? "0" + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours();
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? "0" + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes();
      let ss =
        new Date(timeStamp).getSeconds() < 10
          ? "0" + new Date(timeStamp).getSeconds()
          : new Date(timeStamp).getSeconds();
      this.nowTime = hh + ":" + mm + ":" + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear();
    },
    clear() {
      clearInterval(this.nowTimes);
      this.nowTimes = null;
    },
    // 进入系统
    goSys() {
      this.$router.push("/");
    },
    // 退出系统
    logout() {
      // 清除缓存
      this.$store.dispatch("LogOut").then(() => {
        location.href = "/index";
      });
    },
    // 父子组件传值
    handleUpdateMessage(message) {
      console.log("父组件接收的值", message);
      this.sharedIndex = message;
      if (this.sharedIndex === 0) {
        this.queryType = "day";
        this.dataTime = getDay(0);
      } else if (this.sharedIndex === 1) {
        this.queryType = "month";
        this.dataTime = getMonth(0);
      } else if (this.sharedIndex === 2) {
        this.queryType = "year";
        this.dataTime = getYear(0);
      }
      this.getMessage();
    },
    togglePanel(val) {
      if (val === "left") {
        console.log("左边伸缩");
        this.isLeftPanelOpen = !this.isLeftPanelOpen;
        // 切换图片路径，从左箭头切换到右箭头
        if (this.isLeftPanelOpen) {
          this.leftIndicatorSrc = require("@/assets/images/left-arrow.png"); // 左
        } else {
          this.leftIndicatorSrc = require("@/assets/images/right-arrow.png"); // 右
        }
      } else if (val === "right") {
        console.log("右边伸缩");
        this.indicatorSrc = require("@/assets/images/right-arrow.png");
        this.isRightPanelOpen = !this.isRightPanelOpen;
        // 切换图片路径，从左箭头切换到右箭头
        if (this.isRightPanelOpen) {
          this.rightIndicatorSrc = require("@/assets/images/right-arrow.png"); // 右
        } else {
          this.rightIndicatorSrc = require("@/assets/images/left-arrow.png"); // 左
        }
      }
    },
    // 请求基本信息、冷源、热水系统数据
    getMessage() {
      let data = {
        timeType: this.queryType,
        startTime: this.dataTime,
        endTime: this.dataTime,
      };
      overView(data).then((res) => {
        console.log("基本信返回", res);
        if (res.code == 200) {
          let viewData = res.rows[0];
          if (viewData.buildingArea > 10000) {
            let result = (viewData.buildingArea / 10000).toFixed(4);
            // 将结果转换为浮点数再转回字符串
            result = parseFloat(result).toString();
            viewData.buildingArea = result + "万";
          }
          this.viewMes = viewData;
        }
      });
    },
    // 获取天气数据
    getWeather() {
      getWeatherData().then((res) => {
        console.log("天气返回", res);
      });
    },
    // 获取运行时间
    getRunData() {
      getRunTime().then((res) => {
        console.log("运行时间返回", res);
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
/* 定义呼吸灯动画 */
@keyframes blink {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
.loginD {
  background-color: #062140;
  background-image: url("../../assets/images/bigscreen.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-bottom: 20px;
  .sys-title {
    position: absolute;
    top: 0.13rem;
    font-family: YouSheBiaoTiHei;
    font-size: 0.4rem;
    letter-spacing: 0.03rem;
    text-shadow: 0px 2px 1px rgba(255, 255, 255, 0.3);
    background-image: linear-gradient(to bottom, #ffffff, #b0dbff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    cursor: pointer;
  }
  .day {
    position: absolute;
    top: 0.43rem;
    left: 5rem;
    color: #ffffff;
    font-size: 0.18rem;
  }
  .set {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: SourceHanSansCN-Regular;
    font-size: 0.24rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0.03rem;
    color: #ffffff;
    position: absolute;
    top: 0.44rem;
    right: 0.7rem;
    .icon_time {
      width: 0.22rem;
      height: 0.22rem;
      margin-right: 0.08rem;
    }
    .icon_home {
      width: 0.3rem;
      height: 0.27rem;
      margin: 0 0.25rem 0 0.27rem;
      cursor: pointer;
    }
    .icon_dianyuan {
      width: 0.24rem;
      height: 0.26rem;
      cursor: pointer;
    }
  }
  .loginD_img_top {
    position: absolute;
    top: 0;
    width: 18.27rem;
    height: 1.13rem;
  }
  .loginD_img_down {
    position: absolute;
    bottom: 0;
    width: 18.66rem;
  }
  .title-left {
    width: calc(100% - 30px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .special-div {
    margin-bottom: 17px;
  }
  .screen-page {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: calc(100% - 122px);
    margin-top: 86px;
    .screen-left {
      display: flex;
      flex-direction: column;
      width: 433px;
      position: relative;
      .left-Indicator {
        position: absolute;
        right: -90px;
        width: 60px;
        height: 40px;
        cursor: pointer;
        top: 50%; /* 垂直居中对齐 */
        transform: translateY(-50%); /* 调整垂直对齐 */
        transition: transform 1s ease;
      }
      .left-Indicator:hover {
        animation: blink 1s infinite;
      }
    }
    .screen-right {
      display: flex;
      flex-direction: column;
      width: 433px;
      position: relative;
      .message {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 29px;
        font-family: SourceHanSansCN-Regular;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        .message-li {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: calc(33.33% - 32px);
          margin: 0 16px;
          //   margin-bottom: 22px;
          .message-data {
            font-family: DIN-Bold;
            font-size: 20px;
            letter-spacing: 0px;
            color: #ffffff;
            margin-bottom: 3px;
          }
          .message-img {
            width: 100px;
            height: 99px;
          }
        }
      }
      .right-Indicator {
        position: absolute;
        left: -90px;
        width: 60px;
        height: 40px;
        cursor: pointer;
        top: 50%; /* 垂直居中对齐 */
        transform: translateY(-50%); /* 调整垂直对齐 */
        transition: transform 1s ease;
      }
      .right-Indicator:hover {
        animation: blink 1s infinite;
      }
    }
  }
}
.screen-left {
  transition: width 0.3s ease;
}

.screen-left.collapsed .showLeftConent {
  // width: 0 !important;
  // overflow: hidden;
  display: none;
}
.screen-right.collapsed .showRightConent {
  // width: 0 !important;
  // overflow: hidden;
  display: none;
}
.screen-left.collapsed .left-Indicator {
  right: auto !important;
  left: 0px !important;
}
.screen-right.collapsed .right-Indicator {
  left: auto !important;
  right: 0px !important;
}
@media (max-width: 1170px) {
  .screen-page {
    width: calc(100% - 60px) !important;
    .screen-left {
      transform: scale(0.9);
      transform-origin: top left;
    }
    .screen-right {
      transform: scale(0.9);
      transform-origin: top right;
    }
  }
}
@media (max-width: 1060px) {
  .screen-page {
    width: calc(100% - 40px) !important;
    .screen-left {
      transform: scale(0.8);
      transform-origin: top left;
    }
    .screen-right {
      transform: scale(0.8);
      transform-origin: top right;
    }
  }
}
// 媒体查询，适配大于2000px分辨率的大屏样式-element样式
@media (min-width: 2000px) {
  .loginD {
    padding-bottom: 0.2rem !important;
    .title-left {
      width: calc(100% - 0.3rem) !important;
    }
    .special-div {
      margin-bottom: 0.17rem !important;
    }
    .screen-page {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: stretch;
      width: calc(100% - 1.22rem) !important;
      margin-top: 0.86rem !important;
      .screen-left {
        width: 30% !important;
        .left-Indicator {
          position: absolute;
          right: -0.9rem !important;
          width: 0.6rem !important;
          height: 0.4rem !important;
        }
      }
      .screen-right {
        width: 30% !important;
        .message {
          margin-top: 0.29rem !important;
          font-size: 0.16rem !important;
          .message-li {
            width: calc(33.33% - 0.32rem) !important;
            margin: 0 0.16rem !important;
            .message-data {
              font-size: 0.2rem !important;
              margin-bottom: 0.3rem !important;
            }
            .message-img {
              width: 1rem !important;
              height: 0.99rem !important;
            }
          }
        }
        .right-Indicator {
          position: absolute;
          left: -0.9rem !important;
          width: 0.6rem !important;
          height: 0.4rem !important;
        }
      }
    }
  }
}
</style>
