<template>
  <div id="app">
    <div class="header">
      <div class="left">
        <div>{{ time }} &nbsp;&nbsp; &nbsp;&nbsp;{{ week }}</div>
      </div>
      <div class="middle">南京江北新区人民法院智慧运营平台</div>
      <div class="right">
        <div class="quit">
          <!-- <img
            src="./assets/images/quit.png"
            style="width: 3%; height: 37%"
            @click="goPage"
          /> -->
        </div>
        <!-- <div class="storey">
          <div
            class="floor"
            v-for="(item, index) in floorList"
            :key="index"
            @click="floorChange(index)"
            :class="{ floorAct: floorAct == index }"
          >
            <div>{{ item.name }}</div>
          </div>
        </div> -->
      </div>
    </div>
    <div class="menu">
      <div class="menuList">
        <div
          class="menuBtn"
          v-for="(item, index) in menuBtn"
          :key="index"
          @click="menuChange(index, item.name)"
          :class="{ menuAc: menuAc == index }"
        >
          <!-- <img :src="item.icon"  :style="{'wdith':menuAc == index ? '75%':'55%','height':menuAc == index ? '85%':'71%'}"/> -->
          <!-- <img
            :src="item.icon"
            :style="{
              wdith: menuAc == index ? '75%' : '55%',
              height: menuAc == index ? '85%' : '85%',
            }"
          /> -->
          <div :style="{'background-image':'url('+item.icon+')',wdith: menuAc == index ? '75%' : '55%',
              height: menuAc == index ? '85%' : '85%',}" style="width:55%;height:85%;background-size: 100% 100%;"></div>
          <div style="font-size: 0.55rem; margin-top: 5%">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="content">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";
import axios from "axios";
import { getData } from "./api/index.js";
export default {
  data() {
    return {
      screenWidth:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      time: "",
      weekList: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      week: "",
      floorAct: 0,
      floorList: [
        {
          name: "楼顶",
        },
        {
          name: "F5",
        },
        {
          name: "F4",
        },
        {
          name: "F3",
        },
        {
          name: "F2",
        },
        {
          name: "F1",
        },
        {
          name: "B1",
        },
      ],
      menuBtn: [
        {
          name: "首页",
          icon: require("./assets/images/shouYe.png"),
        },
        {
          name: "智慧法庭",
          icon: require("./assets/images/faTing.png"),
        },
        {
          name: "智慧节能",
          icon: require("./assets/images/jieNeng.png"),
        },
        {
          name: "智慧安防",
          icon: require("./assets/images/anFang.png"),
        },
        {
          name: "智慧运维",
          icon: require("./assets/images/yunWei.png"),
        },
        {
          name: "告警管理",
          icon: require("./assets/images/gaoJing.png"),
        },
      ],
      menuAc: 0, //菜单点击
      timer: null,
    };
  },
  created() {
    this.fun();
  },
  mounted() {
    //    window.goPage = function(e) {
    //             console.log(e)
    //         }
    window["goPage"] = (b) => {
      // alert("goPage:"+b);
      console.log("b");
    };
    this.menuChange(0, this.menuBtn[0].name);
    let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay();
    this.week = this.weekList[week];
    setInterval(() => {
      this.time = this.$moment().format("YYYY-MM-DD   HH:mm:ss");
    }, 100);
    //    window.setInterval(() => {
    //   this.time = this.$moment().format("YYYY-MM-DD   HH:mm:ss");
    // }, 100);
    const that = this;
    window.onresize = () => {
      return () => {
        (window.screenWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth),
          (that.screenWidth = window.screenWidth);
        // that.fun();
      };
    };
  },
  methods: {
    goPage: function (name) {
      goPage(name);
    },
    //     goIndex:function(){
    //      goIndex(e)
    //    },
    //菜单选中
    menuChange(index, name) {
      this.menuBtn.forEach((item, i) => {
        if (index != i) {
          if (i == 0) {
            item.icon = require("./assets/images/shouYe.png");
          } else if (i == 1) {
            item.icon = require("./assets/images/faTing.png");
          } else if (i == 2) {
            item.icon = require("./assets/images/jieNeng.png");
          } else if (i == 3) {
            item.icon = require("./assets/images/anFang.png");
          } else if (i == 4) {
            item.icon = require("./assets/images/yunWei.png");
          } else if (i == 5) {
            item.icon = require("./assets/images/gaoJing.png");
          }
        }
      }); 
      if (index == 0) {
        this.menuBtn[index].icon = require("./assets/images/shouYeAc.png");
        this.$router.push("/");
      } else if (index == 1) {
        this.menuBtn[index].icon = require("./assets/images/faTingAc.png");
        this.$router.push("court");
      } else if (index == 2) {
        this.menuBtn[index].icon = require("./assets/images/jieNengAc.png");
        this.$router.push("energySaving");
      } else if (index == 3) {
        this.menuBtn[index].icon = require("./assets/images/anFangAc.png");
        this.$router.push("security");
      } else if (index == 4) {
        this.menuBtn[index].icon = require("./assets/images/yunWeiAc.png");
        this.$router.push("operationMaintenance");
      } else if (index == 5) {
        this.menuBtn[index].icon = require("./assets/images/gaoJingAc.png");
        this.$router.push("alarm");
      }
      this.goPage(name);
      //   if (name!="首页"){
      //     this.goPage(name);
      //   }else{
      //      this.goIndex('进入首页');
      //   }

      this.menuAc = index;
    },

    //选中楼层
    floorChange(index) {
      this.floorAct = index;
    },
    // 设置html标签的字体大小自适应   为了使得rem单位自适应
    fun() {
      const that = this;
      var htmlobj = document.getElementsByTagName("html")[0];
      htmlobj.style.fontSize = (that.screenWidth / 1920) * 20 + "px";
    },
  },
  watch: {
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          that.timer = false;
        }, 400);
      }
    },
  },
  components: {},
};
</script>

<style lang="less">
/*将大屏设置为1920*1080,设置缩放的方向*/
#app {
  font-family: "微软雅黑";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  width: 1920px;
  height: 1080px;
  transition: all 0.2s linear;
  transform-origin: left top;
}
</style>
<style lang="less" scoped>
#app {
  // width: 6144px;
  // height: 1920px;
  background: rgba(1, 1, 7, 1);
  // overflow: hidden;
  .header {
    height: 11%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 5px 0 5px;
    box-sizing: border-box;
    background: url("./assets/images/headerTop.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    .left {
      width: 25%;
      height: 38%;
      display: flex;
      align-items: center;
      font-size: 0.55rem;
    }
    .middle {
      width: 40%;
      height: 64%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.3rem;
      font-weight: 500;
      letter-spacing: 0.5rem;
    }
    .right {
      width: 25%;
      height: 100%;
      .quit {
        height: 38%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-right: 1%;
      }
      .storey {
        height: calc(100% - 38%);
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-around;
        .floor {
          height: 80%;
          width: 35%;
          font-size: 0.55rem;
          background: url("./assets/images/floorBtn.png") no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .floorAct {
          height: 80%;
          width: 35%;
          font-size: 0.55rem;
          background: url("./assets/images/floorBtn.png") no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: yellow;
        }
      }
    }
  }
  .menu {
    width: 100%;
    height: 12%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("./assets/images/bottomKuang.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    .menuList {
      width: 40%;
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      .menuBtn {
        // width: 15%;
        // height: 100%;
        width: 15%;
        height: 61%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        color: white;
      }
      .menuAc {
        color: rgb(0, 229, 189);
        // width: 15%;
        // height: 100%;
        width: 15%;
        height: 61%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
      }
    }
  }
  .content {
    height: calc(100% - 15%);
    width: 100%;
  }
}
</style>
