<template>
  <div class="cointan">
    <div v-if="listLength>0">
    <!-- 领导 -->
    <div v-if="lingdao">
      <div class="titleimg"></div>
      <div class="lintitle">
        <span class="scroll_span2" v-if="gun">{{ title }}</span>
        <span class="scroll_span1" id="scroll_span1" v-else>{{ title }}</span>
      </div>
      <div class="bigqu2">
        <div class="red_bg2" v-for="(item,index) in 4" :key="index">
          <div class="rentype" style="margin-top:30px">人员类型：<span style="color:rgba(67, 207, 124, 1)">VIP人员</span></div>
          <div class="renzhuang" style="margin-top:66px">正常通行</div>
          <img class="renImg" src="../assets/centerBottom/moimg.png" style="margin-top:129px">
          <div class="renname" style="margin-top:253px">XXX</div>
          <div class="rentime" style="margin-top:291px">2023-05-16<br/>15:20:20</div>
        </div>
      </div>
    </div>
    <!-- 陌生人 -->
    <div class="bigqu" v-else>
      <div class="red_bg" v-for="(item,index) in moList" :key="index">
        <div class="rentype">人员类型：<span style="color:rgba(67, 207, 124, 1)">{{item.personnelType}}</span></div>
        <div class="renzhuang">禁止通行</div>
        <img class="renImg" :src="item.captureImg"  @click="previewImage(item.captureImg)">
        <div class="renname">{{item.name}}</div>
        <div class="rentime" v-if="item.cmpTime!=''">{{item.cmpTime.slice(0,10)}}<br/>{{item.cmpTime.slice(11,19)}}</div>
      </div>
    </div>
  </div>
  <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: 'centerTop',
  data() {
    return {
      lingdao:false,
      title:'欢迎各位领导莅临南昌交通学院参观指导！',
      gun:true,
      moList:[],//陌生人
      build:'',//楼栋
      token:'',//请求头token
      listLength:0,

      preview: false,
      src:""
    }
  },
  components: {
    "img-preview": imgPreview
  },
  props: {
    msg: String
  },
  created(){
    
  },
  mounted(){
    this.token=sessionStorage.getItem('token')
    this.build=sessionStorage.getItem('build')
    if(this.title.length>19){
      this.gun=false
    }else{
      this.gun=true
    }
    if(this.lingdao){

    }else{
      this.getMosheng()
      this.t4 = setInterval(function() {
        this.getMosheng()
      }, 43200000);
    }
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.t4)
  },
  methods:{
    // 点击图片放大
    previewImage(src) {
      this.preview = true;
      this.src = src;
    },
    keydownCloseImgPreview(e) {
      if (e && e.keyCode == 27) {
        this.preview = false;
      }
    },
    closeImgPreview() {
      this.preview = false;
    },
    //陌生人
    getMosheng(){
      this.moList=[]
      this.$axios.get('/auto/contrast-failure/list?build='+this.build.split(",")[0]+'-'+this.build.split(",")[1]+'学生公寓',
      {
        headers: {
        "token": this.token,
        },
      }
      ).then(res => {
        if (res.data.success) {
          this.listLength=res.data.data.records.length
          var shuzu=res.data.data.records
          // 横坐标时间
          shuzu.forEach(data => {
            this.moList.push(data)
          })
          console.log(this.moList)
        }
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cointan{
  width: 885px;
  height: 484px;
  background-image: url('../assets/centerTop/background.png');
  background-size: 100%;
}
// 整体区域  陌生人
.bigqu{
  position: absolute;
  margin: 58px 0 0 11px;
  width: 893px;
  height: 390px;
  display: flex;
}
.red_bg{
  margin-left: 28px;
  width: 180px;
  height: 390px;
  background-image: url('../assets/centerTop/redBg.png');
  background-size: 100%;
}
.rentype{
  position: absolute;
  margin: 40px 0 0 0px;
  width: 180px;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  color: rgba(255, 255, 255, 1);
}
.renzhuang{
  position: absolute;
  margin: 86px 0 0 0px;
  width: 180px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: rgba(242, 36, 36, 1);
}
.renImg{
  position: absolute;
  margin: 153px 0 0 -44px;
  width: 94px;
  height: 94px;
  border-radius: 50%;
}
.renname{
  position: absolute;
  margin: 283px 0 0 50px;
  width: 85px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: rgba(242, 36, 36, 1);
}
.rentime{
  position: absolute;
  margin: 321px 0 0 50px;
  width: 85px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(255, 255, 255, 1);
}
// 领导
.lintitle{
  position: absolute;
  margin: 22px 0 0 98px;
  width: 738px;
  font-size: 42px;
  font-weight: 400;
  line-height: 55px;
  color: rgba(28, 255, 251, 1);
  font-family : '优设标题黑';
  white-space: nowrap; /*文字不折行*/
  overflow: hidden; /*文字溢出隐藏*/
}
.titleimg{
  position: absolute;
  margin: 32px 0 0 43px;
  width: 38px;
  height: 38px;
  background-image: url('../assets/centerTop/titleimg.png');
  background-size: 100%;
}
.lintitle .scroll_span1 {
  display: inline-block;
  white-space: nowrap;
  /*inline样式不能使用动画*/
  animation: scroll 10s linear infinite; /*滚动动画*/
}

@keyframes scroll {
  from {
    transform: translateX(738px); /*div多宽就写多宽*/
  }

  to {
    transform: translateX(-100%);
  }
}
.bigqu2{
  position: absolute;
  margin: 95px 0 0 11px;
  width: 893px;
  height: 360px;
  display: flex;
}
.red_bg2{
  margin-left: 28px;
  width: 180px;
  height: 360px;
  background-image: url('../assets/centerTop/blueBg.png');
  background-size: 100%;
}
// 缺省页
.queshen{
  margin: 58px 0 0 11px;
  // width: 480px;
  height: 480px;
}
.queshen2{
  margin: 58px 0 0 11px;
  width: 310px;
  height: 310px;
}
.queshen3{
  margin: -68px 0 0 11px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
}
</style>
