<template>
  <div class="cointan">
    <div class="title1">
      <img src="../assets/index/title_icon.png" style="width:22px;height:22px;float: left;">
      <div style="margin-left:25px;line-height: 22px;">宿舍楼未归人员统计</div>
    </div>
    <!-- 滚动块 -->
    <el-carousel trigger="click" height="260px" style="height: 260px;width: 383px;margin: 29px 0 0 21px;">
      <el-carousel-item v-for="(list,index) in shshe" :key="index">
        <div class="gun">
          <div class="mokuai" v-for="(item,index2) in list" :key="index2">
            <div class="loudong">宿舍楼<br/>{{item.build.split("栋")[0]}}</div>
            <div class="bgtu">{{(parseFloat(item.unreturned/item.totalPeople)*100).toFixed(1)+'%'}}</div>
            <div class="zongtext">总人数</div>
            <div class="zongnum">{{item.totalPeople}}</div>
            <div class="zongline"></div>
            <div class="zongtext" style="margin-left:228px;color:rgba(245, 42, 42, 1)">未归人数</div>
            <div class="zongnum" style="margin-left:212px;color:rgba(245, 42, 42, 1)">{{item.unreturned}}</div>
            <div class="zongline" style="margin-left:297px;"></div>
            <div class="zongtext" style="margin-left:316px;color:rgba(73, 235, 137, 1)">归寝人数</div>
            <div class="zongnum" style="margin-left:299px;color:rgba(73, 235, 137, 1)">{{item.returned}}</div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'rightbuttom',
  data() {
    return {
      shshe:[
      ],
      build:'',//楼栋
      token:'',//请求头token
    }
  },
  props: {
    msg: String
  },
  created(){
    
  },
  mounted(){
    this.token=sessionStorage.getItem('token')
    this.build=sessionStorage.getItem('build')
    this.getAllsushe()
    this.t8 = setInterval(function() {
      this.getAllsushe()
    }, 43200000);
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.t8)
  },
  methods:{
    //宿舍楼未归人员统计
    getAllsushe(){
      this.shshe=[]
      this.$axios.get('/auto/build-total-people/dormitoryBuildingCounted',
      {
        headers: {
        "token": this.token,
        },
      }
      ).then(res => {
        if (res.data.success) {
          // 各楼栋数据
          res.data.data.forEach(data => {
            this.shshe.push(data)
          })
          // console.log(this.qinshi)


          let newDataList = []
          let current = 0
          if(this.shshe && this.shshe.length>0){
            for(let i=0;i<=this.shshe.length-1;i++){
              if(i%3 !== 0 || i === 0 ){
                if(!newDataList[current]){
                  newDataList.push([this.shshe[i]])
                }else{
                  newDataList[current].push(this.shshe[i])
                }
              }else{
                current++
                newDataList.push([this.shshe[i]])
              }
            }
          }
          this.shshe = [...newDataList]
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cointan{
  width: 428px;
  height: 296px;
  background-image: url('../assets/rightBottom/background.png');
  background-size: 100%;
}
.title1{
  position: absolute;
  margin: 9px 0 0 10px;
  font-size: 20px;
  font-family : '优设标题黑';
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
}
// 走马灯滚动
.gun{
  position: absolute;
  margin: 10px 0 0 0px;
  width: 383px;
  height: 230px;
}
.mokuai{
  margin-top: 10px;
  width: 383px;
  height: 70px;
  background: rgba(0, 72, 91, 0.14);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.loudong{
  position: absolute;
  margin: 16px 0 0 15px;
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  font-family : '优设标题黑';
}
.bgtu{
  position: absolute;
  margin: 8px 0 0 69px;
  width: 52px;
  height: 52px;
  background-image: url('../assets/rightBottom/tongji.png');
  background-size: 100%;
  font-size: 12px;
  transform: scale(0.8); //12*0.8
  font-weight: 400;
  color: rgba(254, 219, 101, 1);
  font-family : '优设标题黑';
  line-height: 52px;
}
.zongtext{
  position: absolute;
  margin: 16px 0 0 152px;
  font-weight: 700;
  color: rgba(102, 255, 255, 1);
}
.zongnum{
  position: absolute;
  margin: 33px 0 0 127px;
  width: 85px;
  text-align: center;
  font-size: 20px;
  font-family : '优设标题黑';
  color: rgba(102, 255, 255, 1);
}
.zongline{
  position: absolute;
  margin: 23px 0 0 210px;
  width: 0px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
