<template>
  <div class="contain">
    <!-- 学校logo -->
    <div class="logo"></div>
    <!-- 具体宿舍楼 -->
    <div class="sushe_san"></div>
    <div class="sushe">{{build}}栋宿舍</div>
    <!-- 时间 -->
    <div class="time">
      <span>{{now_date}}</span>
      <span style="margin-left:15px">{{week}}</span>
      <span style="margin-left:15px">{{ time }}</span>
    </div>
    <div class="loginout" @click="loginout()">
      <div class="outtu"></div>退出登录
    </div>
    <!-- 正中间 -->
    <div class="kuang">
      <div class="kuangNum">{{shshe[2]}}</div>
      <div class="kuangtxt">当前在宿人员</div>
    </div>
    <div class="kuang" style="margin-left:745px;color: rgba(245, 42, 42, 1);">
      <div class="kuangNum">{{shshe[3]}}</div>
      <div class="kuangtxt">闭寝未归人员</div>
    </div>
    <div class="kuang" style="margin-left:969px;">
      <div class="kuangNum">{{shshe[0]}}</div>
      <div class="kuangtxt">入住总人数</div>
    </div>
    <div class="kuang" style="margin-left:1193px;">
      <div class="kuangNum">{{shshe[1]}}</div>
      <div class="kuangtxt">房间数量</div>
    </div>
    <!-- 左上 -->
    <leftTop class="lefttop"></leftTop>
    <!-- 左中 -->
    <leftCenter class="leftcenter"></leftCenter>
    <!-- 左下 -->
    <leftButtom class="leftbuttom"></leftButtom>
    <!-- 中间上层 -->
    <centerTop class="centertop"></centerTop>
    <!-- 中间下层 -->
    <centerbuttom class="centerbuttom"></centerbuttom>
    <!-- 右边上层 -->
    <righttop class="righttop"></righttop>
    <!-- 右边中间 -->
    <rightCenter class="rightcenter"></rightCenter>
    <!-- 右边下层 -->
    <rightbuttom class="rightbuttom"></rightbuttom>
  </div>
</template>

<script>
import leftTop from '@/components/leftTop.vue'
import leftCenter from '@/components/leftCenter.vue'
import leftButtom from '@/components/leftButtom.vue'
import centerTop from '@/components/centerTop.vue'
import centerbuttom from '@/components/centerbuttom.vue'
import righttop from '@/components/righttop.vue'
import rightCenter from '@/components/rightCenter.vue'
import rightbuttom from '@/components/rightbuttom.vue'
export default {
  name: 'index',
  components: {
    leftTop,
    leftCenter,
    leftButtom,
    centerTop,
    centerbuttom,
    righttop,
    rightCenter,
    rightbuttom
  },
  data() {
    return {
      shshe:[],//宿舍人数情况
      now_date:'',//当前时间
      week:'',//周几
      time:'',//具体时间
      build:'',//楼栋
      token:'',//请求头token
    }
  },
  mounted(){
    // console.log(sessionStorage.getItem('token'))
    // console.log(sessionStorage.getItem('build'))
    this.token=sessionStorage.getItem('token')
    this.build=sessionStorage.getItem('build')
    this.getNowDate()
    this.getSushe()
    this.t2 = setInterval(function() {
      this.getSushe()
    }, 3600000);
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.t1)
    clearInterval(this.t2)
  },
  methods:{

    //获取当前时间
    getNowDate() {
      var _this = this;
      this.t1 = setInterval(function() {
        var aData = new Date();
        // console.log(aData) //Wed Aug 21 2019 10:00:58 GMT+0800 (中国标准时间)
        // this.value = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
        var month = aData.getMonth() < 9 ? "0" + (aData.getMonth() + 1) : aData.getMonth() + 1;
        var date = aData.getDate() <= 9 ? "0" + aData.getDate() : aData.getDate();
        var Hour = aData.getHours() <= 9 ? "0" + (aData.getHours()) : aData.getHours();
        var Miunte = aData.getMinutes() <= 9 ? "0" + (aData.getMinutes()) : aData.getMinutes();
        var Seconds = aData.getSeconds() <= 9 ? "0" + (aData.getSeconds()) : aData.getSeconds();
        var week = "星期" + "日一二三四五六".charAt(aData.getDay());
        // console.log(aData.getTime())
        _this.now_date = aData.getFullYear() + "-" + month + "-" + date;
        _this.time=Hour+":"+Miunte+":"+Seconds
        _this.week = week
      }, 1000);
    },

    //宿舍人数和归寝情况
    getSushe(){
      this.$axios.get('/auto/build-total-people/peoples?build='+this.build.split(",")[0]+'栋&build='+this.build.split(",")[1]+'栋',
      {
        headers: {
        "token": this.token,
        },
      }
      ).then(res => {
        if (res.data.success) {
          // 横坐标时间
          res.data.data.forEach(data => {
            this.shshe.push(data.people)
          })
          // console.log(this.shshe)
        }
      })
    },
    //退出登录
    loginout(){
      this.$router.replace('/'); //跳转到首页
    }
  }
}
</script>
<style lang="scss" scoped>
.contain{
  width: 1920px;
  height: 1080px;
  background-image: url('../assets/index/background.png');
  background-size: 100%;
  // z-index: 2;
}
// 学校logo
.logo{
  position: absolute;
  margin: 41px 0 0 71px;
  background-image: url('../assets/index/logo.png');
  background-size: 100%;
  width: 155px;
  height: 42px;
}
// 具体宿舍楼
.sushe_san{
	position: absolute;
	margin: 50px 0 0 293px;
	border:13px solid transparent;
	border-left-color: rgba(28, 255, 251, 1);
}
.sushe{
  position: absolute;
	margin: 41px 0 0 315px;
  font-size: 32px;
  font-weight: 400;
  font-family : '优设标题黑';
  line-height: 42px;
  color: rgba(28, 255, 251, 1);
}
// 时间
.time{
  position: absolute;
  margin: 52px 0 0 1508px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: rgba(0, 218, 216, 1);
}
//退出登录
.loginout{
  position: absolute;
  margin: 52px 0 0 1758px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: rgba(0, 218, 216, 1);
  
}
.outtu{
  background-image: url('../assets/index/out.png');
  background-size: 100%;
  width: 22px;
  height: 22px;
  float: left;
}
// 正中间
.kuang{
  position: absolute;
  margin: 101px 0 0 521px;
  background-image: url('../assets/index/juxing.png');
  background-size: 100%;
  width: 214px;
  height: 111px;
  font-size: 28px;
  font-weight: 400;
  color: rgba(102, 255, 255, 1);
  text-align: center;
}
.kuangNum{
  position: absolute;
  margin: 20px 0 0 0px;
  width: 214px;
  font-family : '优设标题黑';
}
.kuangtxt{
  position: absolute;
  margin: 62px 0 0 0px;
  width: 214px;
  font-size: 16px;
  font-weight: 500;
}
// /左上方
.lefttop{
  position: absolute;
  margin: 100px 0 0 70px;
}
// 左中
.leftcenter{
  position: absolute;
  margin: 324px 0 0 70px;
}
// 左下
.leftbuttom{
  position: absolute;
  margin: 693px 0 0 70px;
}
// 中间上层
.centertop{
  position: absolute;
  margin: 231px 0 0 521px;
}
// 中间下层
.centerbuttom{
  position: absolute;
  margin: 734px 0 0 521px;
}
// 右边上层
.righttop{
  position: absolute;
  margin: 102px 0 0 1426px;
}
// 右边中间
.rightcenter{
  position: absolute;
  margin: 423px 0 0 1426px;
}
// 右边下层
.rightbuttom{
  position: absolute;
  margin: 744px 0 0 1426px;
}
</style>
