<template>
    <van-row class="recordList" v-loading="loading">
      <van-row class="titleWrap">
        <span class="line"></span>
        <span class="title">今日人流量统计</span>
      </van-row>
      <van-row class="type3">
        <van-row class="data">
          <van-row>今日人流量统计:
            <van-row class="list">
              <van-row v-for="(item,index) in data.total" :key="index">
                <el-image
                class="img"
                :src="img"
                ></el-image>
                <van-row class="num color3">{{item}}</van-row>
              </van-row>
            </van-row>
          </van-row>
        </van-row>
        <lineT v-if="status" :resData="data.data"/>
      </van-row>
    </van-row>
</template>
<script>
import axios from 'axios'
import lineT from "@/components/record/flow/line";
export default {
  components: {
  	lineT,
  },
  data() {
    return {
      img:require('@/assets/image/矩形5@3x.png'),
      data: {
        //今日流量
          total: undefined,
          data: [
            [],[]
          ],
      },
      loading:true,
      status:false,
    };
  },
  created(){
    this.init()
    this.timing()
  },
  methods: {
    init(){
      axios({
        method: 'get',
        url: 'https://smartpark.caih.com/ykt/api/thirdparty/v1/openInterface/yunUserRequest',
        timeout: 100000,
      }).then(res =>{
          let total = 0
          if(res.data){
            this.data.data.total = 0
            this.data.data[0] = []
            this.data.data[1] = []
            for(let i = 0; i<res.data.length; i++){
              this.data.data[0].push(res.data[i].access_time)
              this.data.data[1].push(res.data[i].card_number)
              total += res.data[i].card_number
            }
            this.data.total = (total.toString()).split("")
            setTimeout(()=>{
              this.status = true
              this.loading = false
            },20)
          }
      }).catch(err =>{
      })
    },
    timing(){
      setInterval(() =>{
        this.init()
      },1000 * 60 * 5)
    }
    
  },
};
</script>
<style lang="scss" scopet>
.type3{
  margin-top:10px !important;
  text-align: right;
  .data{
    margin-top:0px !important;
    font-size: 14px;
    color:#000;
    .van-row{
      display: inline-block;
      vertical-align: middle;
      .list{
        .van-row{
          position: relative;
          width:26px;
          margin-left:8px;
          .num{
            font-size: 24px;
            text-align: center;
            line-height: 32px;
            position: absolute;
            left:-8px;

          }
        }
      }
      
      
    }
  }
}

</style>
