<template>
  <div id="peopleThermometry">
    <div class="content">
      <cmpTitle title="人员测温记录" visitMoreBtn="true" @onMore="clickMore"></cmpTitle>
      <div class="message_scroll_box">
        <div class="item message_scroll" v-for="(item,index) in dataList" :key="index" @click="jump(index)">
          <dv-border-box-8 class="img">
            <img :src="item.faceUrl" class="imgItem" alt="">
          </dv-border-box-8>
          <div class="itemRight">
             <div>体温 : {{item.temperature}}</div>
             <div>设备 : {{item.deviceName}}</div>
             <div>时间 : {{item.recogTime}}</div>
           </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import cmpTitle from "../common/cmpTitle.vue"
  // import {getList} from "@/api/smartapplication/temperaturerecord.js"
  import {getDictKey} from "@/api/system/dictbiz.js"
  export default{
    components:{
      cmpTitle
    },
    data(){
      return{
        dataList:[],
        personType:'',
        T:null
      }
    },
    mounted() {
      this.getData()
    },
    methods:{
      clickMore(){
        this.$router.push({path:'/smartapplication/temperaturerecord'})
      },
      aniScroll(){
        var _this = this
        function TimeControl(){
            $("#peopleThermometry .message_scroll_box").animate({marginTop:'1.5rem'},800,
            function(){
                $("#peopleThermometry .message_scroll_box").css({marginTop:0});    //把顶部的边界清零
                $("#peopleThermometry .message_scroll_box .message_scroll:first").before($("#peopleThermometry .message_scroll_box .message_scroll:last"));    //在第一个新闻后面插入最后一个新闻
            });
        }
        _this.T=setInterval(TimeControl,2300);    //开始定时
        $(".message_scroll_box").mouseenter(function(){
            clearInterval(_this.T);    //停止定时
        })
                .mouseleave(function(){
                    _this.T=setInterval(TimeControl,2500);    //再次定时
                })
      },
      getData(){
        var _this = this;
        getList("1","10").then((res)=>{
          res.data.data.records.map((item)=>{
            _this.dataList.push(item)
          })
          _this.aniScroll()
        })
      },
      getPersionType(val){
        var _this = this;
        let params = {
          'code':'person_type',
          'dictKey':val
        }
        if(val){
          getDictKey(params).then((res)=>{
            _this.personType = res.data.data.dictValue
          })
        }else{
          _this.personType = '无'
        }
        return _this.personType
      },
      jump(index){
        let data = this.dataList[index]
        let params = {
          title:'人员测温记录',
          type:'peopleThermometryInfo'
        }
        this.$emit("onEmit",data,params)
      }
    },
    destroyed() {
      clearInterval(this.T)
    }
  }
</script>

<style lang="less" >
  #peopleThermometry{
    width: 100%;
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: space-between;
    overflow: hidden;
    .border-box-content{
      padding: 0!important;
    }
    .content,.message_scroll_box{
      width: 100%;
      height:100%;
    }
    .item{
      display: flex;
      align-items: center;
      padding: .12rem 0;
      cursor: pointer;
      align-items: space-between;
      box-sizing: border-box;
      height: 1.5rem;
    }
    .img{
      width: 1.2rem;
      height:1.2rem;
      margin-right: 20px;
      box-sizing: border-box;
    }
    .imgItem{
      width: 1.2rem;
      height: 1.2rem;
      display: block;
      padding: .05rem;
      box-sizing: border-box;
    }
    .itemRight{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
</style>
