<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;" v-if="listLength>0">
      <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"  @click="previewImage(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 class="queshen" v-else>
    <img src="../assets//index/queshen.png" class="queshen2">
    <div class="queshen3">暂无数据</div>
  </div>
    <div v-if="preview">
      <img-preview :src="src" :onClick="closeImgPreview" :onKeydown="keydownCloseImgPreview"></img-preview>
    </div>
  </div>
</template>

<script>
import imgPreview from "../common/img-preview.vue";
export default {
  name: 'centerButtom',
  data() {
    return {
      studentList:[],//进出人员
      date:'',//当前日期
      yestDay:'',//昨天
      build:'',//楼栋
      token:'',//请求头token
      listLength:0,

      preview: false,
      src:""
    }
  },
  components: {
    "img-preview": imgPreview
  },
  props: {
    msg: String
  },
  created(){
    
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.t5)
  },
  mounted(){
    this.token=sessionStorage.getItem('token')
    this.build=sessionStorage.getItem('build')
    this.getJinchu()
    this.date=new Date().toISOString().slice(0, 10)
    this.t5 = setInterval(function() {
      this.date=new Date().toISOString().slice(0, 10)
      this.getJinchu()
    }, 43200000);
  },
  methods:{
    // 点击图片放大
    previewImage(src) {
      this.preview = true;
      this.src = src;
    },
    keydownCloseImgPreview(e) {
      if (e && e.keyCode == 27) {
        this.preview = false;
      }
    },
    closeImgPreview() {
      this.preview = false;
    },
    //进出人员
    getJinchu(){
      var aData=new Date()
      this.yestDay=aData.getFullYear() + "-" + 
        (aData.getMonth() < 9 ? "0" + (aData.getMonth() + 1) : aData.getMonth() + 1) + "-" + 
        (aData.getDate() <= 9 ? "0" + (aData.getDate()-1) : (aData.getDate()-1))
      this.studentList=[]
      this.$axios.get('/auto/face-recognition/list?build='+this.build.split(",")[0]+'-'+this.build.split(",")[1]+'学生公寓进门&date='+this.yestDay,
      // +this.date,
      {
        headers: {
        "token": this.token,
        },
      }
      ).then(res => {
        if (res.data.success) {
          this.listLength=res.data.data.length
          // 宿舍进出人员数据
          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);
  color: rgba(0, 218, 216, 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;
}

//走马灯指示器样式
::v-deep .el-carousel__indicators--horizontal {
        position: absolute;
        bottom: 0px;
        text-align: right;
        .el-carousel__indicator--horizontal button {
            width: 6px;   // 设置被选中前的样式
            height: 6px;
            background: #ffffff;
            border-radius: 50%;
            opacity: 0.5;
        }
 
        .el-carousel__indicator--horizontal.is-active button {
            width: 0px;      //设置被选中后的样式
            height: 0px;
            background: #ffffff;
            opacity: 1;
            border-radius: 10px;
        }
    }

    // 缺省页
    .queshen{
  // margin: 58px 0 0 11px;
  // height: 480px;
}
.queshen2{
  margin: 88px 0 0 11px;
  width: 210px;
  height: 210px;
}
.queshen3{
  margin: -38px 0 0 11px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
}
</style>
