<template>
  <div id="carCapture">
    <div class="content" v-if="showType==1">
      <cmpTitle title="车辆进车抓拍" visitMoreBtn="true" @onMore="clickMore"></cmpTitle>
      <div class="message_scroll_box">
        <div class="item message_scroll" v-for="(item,index) in carocrDatas" :key="index" @click="jump(carocrDatas,index,'inCarInfo')">
          <dv-border-box-8 class="img">
            <img :src="item.image" class="imgItem" alt="">
          </dv-border-box-8>
          <div class="itemRight">
             <div>车牌 : {{item.vplNumber}}</div>
             <div>位置 : {{item.parkName}}</div>
             <div>时间 : {{item.updateTime}}</div>
           </div>
        </div>
      </div>
    </div>
    <div class="content" v-if="showType==2">
      <cmpTitle title="车辆出车抓拍" visitMoreBtn="true" @onMore="clickMore"></cmpTitle>
      <div class="message_scroll_box">
        <div class="item message_scroll" v-for="(item,index) in carocroutDatas" :key="index" @click="jump(carocroutDatas,index,'outCarInfo')">
          <dv-border-box-8 class="img">
            <img :src="item.image" class="imgItem" alt="">
          </dv-border-box-8>
          <div class="itemRight">
             <div>车牌 : {{item.vplNumber}}</div>
             <div>位置 : {{item.parkName}}</div>
             <div>时间 : {{item.updateTime}}</div>
           </div>
        </div>
      </div>
    </div>
    <div class="content" v-if="showType==3">
      <cmpTitle title="车辆进车抓拍" visitMoreBtn="true" @onMore="clickMore"></cmpTitle>
      <div class="message_scroll_box">
        <div class="item message_scroll" v-for="(item,index) in carenterrecord" :key="index" @click="jump(carenterrecord,index,'parkInCar')">
          <dv-border-box-8 class="img">
            <img :src="item.enterImgPath" class="imgItem" alt="">
          </dv-border-box-8>
          <div class="itemRight">
             <div>车牌 : {{item.carNo}}</div>
             <div>位置 : {{item.enterGateName}}</div>
             <div>时间 : {{item.updateTime}}</div>
           </div>
        </div>
      </div>
    </div>
    <div class="content" v-if="showType==4">
      <cmpTitle title="车辆出车抓拍" visitMoreBtn="true" @onMore="clickMore"></cmpTitle>
      <div class="message_scroll_box">
        <div class="item message_scroll " v-for="(item,index) in caroutrecord" :key="index" @click="jump(caroutrecord,index,'parkOutCar')">
          <dv-border-box-8 class="img">
            <img :src="item.outImgPath" class="imgItem" alt="">
          </dv-border-box-8>
          <div class="itemRight">
             <div>车牌 : {{item.carNo}}</div>
             <div>位置 : {{item.enterGateName}}</div>
             <div>时间 : {{item.updateTime}}</div>
           </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import cmpTitle from "../common/cmpTitle.vue"
  // import {getList as carocroutGetList} from "@/api/smartapplication/carocrout.js"
  // import {getList as carocrGetList} from "@/api/smartapplication/carocr.js"
  import {getList as carenterrecord} from "@/api/estate/carenterrecord.js"
  import {getList as caroutrecord} from "@/api/estate/caroutrecord.js"
  export default{
    components:{
      cmpTitle
    },
    data(){
      return{
        carocroutDatas:[],
        carocrDatas:[],
        carenterrecord:[],
        caroutrecord:[],
        T:null
      }
    },
    props:{
      showType:{
        type:'String',
        default:'1'
      }
    },
    mounted() {
      if(this.showType==1){
        this.getCarocr()
      }else if(this.showType==2){
        this.getCarocrout()
      }else if(this.showType==3){
        this.getCarenterrecord()
      }else{
        this.getCaroutrecord()
      }
    },
    methods:{
      clickMore(){
        this.$router.push({path:'/community/carenterrecord'})
      },
      aniScroll(){
        var _this = this
        function TimeControl(){
            $("#carCapture .message_scroll_box").animate({marginTop:'1.5rem'},800,
            function(){
                $("#carCapture .message_scroll_box").css({marginTop:0});    //把顶部的边界清零
                $("#carCapture .message_scroll_box .message_scroll:first").before($("#carCapture .message_scroll_box .message_scroll:last"));    //在第一个新闻后面插入最后一个新闻
            });
        }
        if(_this.T){
          clearInterval(_this.T)
        }
        _this.T=setInterval(TimeControl,2300);    //开始定时
        $(".message_scroll_box").mouseenter(function(){
            clearInterval(_this.T);    //停止定时
        }).mouseleave(function(){
            _this.T=setInterval(TimeControl,2500);    //再次定时
        })
      },
      getCarocrout(){
        var _this = this;
        carocroutGetList().then((res)=>{
          res.data.data.records.map((item)=>{
            _this.carocroutDatas.push(item)
          })
          _this.aniScroll()
        })
      },
      getCarocr(){
        var _this = this;
        carocrGetList().then((res)=>{
          res.data.data.records.map((item)=>{
            _this.carocrDatas.push(item)
          })
          _this.aniScroll()
        })
      },
      getCarenterrecord(){
        var _this = this
        carenterrecord().then((res)=>{
          res.data.data.records.map((item)=>{
            _this.carenterrecord.push(item)
          })
          _this.aniScroll()
        })
      },
      getCaroutrecord(){
        var _this = this
        caroutrecord().then((res)=>{
          res.data.data.records.map((item)=>{
            _this.caroutrecord.push(item)
          })
          _this.aniScroll()
        })
      },
      jump(val,index,type){
        let data = val[index]
        let params = {
          title:'车辆出入记录',
          type:type
        }
        this.$emit("onEmit",data,params)
      }
    },
    destroyed() {
      clearInterval(this.T)
    }
  }
</script>

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