<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>
    <!-- 选择选项 -->
    <div class="xuanchu">出</div>
    <div class="xuanru">入</div>
    <!-- 展示时间 -->
    <div class="sushe_san"></div>
    <div class="sushe">{{date}}</div>
    <!-- 滚动 -->
    <el-carousel trigger="click" height="240px" style="height: 240px;width: 830px;margin: 67px 0 0 19px;">
      <el-carousel-item v-for="(list,index) in studentList" :key="index">
        <div class="gun"> 
          <div class="mokuai" v-for="(item,index2) in list" :key="index2">
            <img class="moimg" :src="item.pictureUrl">
            <div class="moyuan">入</div>
            <div class="moname">{{item.name}}</div>
            <div class="motime">15:25:26</div>
            <div class="mobanji">电子信息23届（1）班</div>
            <div class="modidian">{{item.address}}</div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'centerButtom',
  data() {
    return {
      studentList:[],//进出人员
      date:new Date().toISOString().slice(0, 10),//当前日期
      build:'',//楼栋
      token:'',//请求头token
    }
  },
  props: {
    msg: String
  },
  created(){
    
  },
  mounted(){
    this.token=sessionStorage.getItem('token')
    this.build=sessionStorage.getItem('build')
    this.getJinchu()
  },
  methods:{
    //进出人员
    getJinchu(){
      this.studentList=[]
      this.$axios.get('/auto/face-recognition/list?build='+this.build.split(",")[0]+'-'+this.build.split(",")[1]+'学生公寓进门&date=2023-06-15',
      // +this.date,
      {
        headers: {
        "token": this.token,
        },
      }
      ).then(res => {
        if (res.data.success) {
          // 宿舍进出人员数据
          res.data.data.forEach(data => {
            this.studentList.push(data)
          })
          console.log(this.studentList)

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cointan{
  width: 885px;
  height: 309px;
  background-image: url('../assets/centerBottom/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;
}
// 选择选项
.xuanchu{
  position: absolute;
  margin: 44px 0 0 643px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.xuanru{
  position: absolute;
  margin: 44px 0 0 685px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
// 展示时间
.sushe_san{
	position: absolute;
	margin: 46px 0 0 745px;
	border:6px solid transparent;
	border-left-color: rgba(0, 218, 216, 1);
}
.sushe{
  position: absolute;
	margin: 44px 0 0 759px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 218, 216, 1);
}
// 走马灯滚动
.gun{
  position: absolute;
  margin: 10px 0 0 0px;
  width: 815px;
  height: 225px;
  display: flex;
}
.mokuai{
  margin-left: 20px;
  width: 145px;
  height: 205px;
  border: 1px solid rgba(56, 105, 110, 1);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.moimg{
  position: absolute;
  width: 141px;
  height: 112px;
  margin-left: -70px;
}
.moyuan{
  position: absolute;
	margin: -10px 0 0 133px;
  width: 20px;
  background: rgba(0, 218, 216, 1);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
.moname{
  position: absolute;
	margin: 120px 0 0 0px;
  width: 145px;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  color: rgba(0, 218, 216, 1);
}
.motime{
  position: absolute;
	margin: 148px 0 0 0px;
  width: 145px;
  text-align: center;
}
.mobanji{
  position: absolute;
	margin: 165px 0 0 0px;
  width: 145px;
  text-align: center;
}
.modidian{
  position: absolute;
	margin: 182px 0 0 0px;
  width: 145px;
  text-align: center;
}
</style>
