<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%"
          />
        </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)" :class="{menuAc : menuAc == index}">
          <img :src="item.icon" style="width: 35%; height: 54%" />
          <div style="font-size: 0.55rem">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="content">
      <router-view />
    </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, //菜单点击
      }
    },
     created() {
    this.lastTime = new Date().getTime();
    this.fun();
  },
    mounted() {
      this.menuChange(0)
      let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
      this.week = this.weekList[week]
      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:{
      //菜单选中
      //菜单选中
    menuChange(index){
      this.menuAc = index
      this.menuBtn.forEach((item,index) => {
        if (index == 0) {
          item.icon = require("./assets/images/shouYe.png")
        }else if (index == 1) {
          item.icon = require("./assets/images/faTing.png")
        }else if (index == 2) {
          item.icon = require("./assets/images/jieNeng.png")
        }else if (index == 3) {
          item.icon = require("./assets/images/anFang.png")
        }else if (index == 4) {
          item.icon = require("./assets/images/yunWei.png")
        }else if (index == 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")
      }else if (index == 3) {
        this.menuBtn[index].icon = require("./assets/images/anFangAc.png")
      }else if (index == 4) {
        this.menuBtn[index].icon = require("./assets/images/yunWeiAc.png")
      }else if (index == 5) {
        this.menuBtn[index].icon = require("./assets/images/gaoJingAc.png")
      }
    },
      //选中楼层
      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: Avenir, Helvetica, Arial, sans-serif;
  -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, 0);
  // overflow: hidden;
  .header {
    height: 15%;
    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: 26%;
      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: 26%;
      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%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        color: white;
      }
      .menuAc{
        color: rgb(0,229,189);
        width: 15%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
      }
    }
  }
  .content {
    height: calc(100% - 15%);
    width: 100%;
  }
}
</style>