<!--
 * @Author: WangQiBiao
 * @Date: 2019-09-24 18:56:59
 * @LastEditors: MoZhuangRu
 * @LastEditTime: 2019-11-21 15:43:21
 * @Description:
 -->
<template>
  <div class="statistical">
    <TipsCardCom :class="['item', item.cls]" v-for="item in list" :key="item.value">
      <h3 class="item-label">{{item.label}}</h3>
      <p class="item-txt" ref="num">
        <countTo ref="countTo" :startVal='item.start' :endVal='item.value' :duration='3000'></countTo>
      </p>
    </TipsCardCom>
  </div>
</template>
<script>
import TipsCardCom from '@/components/tips-card'
import { api } from '@/api'
import countTo from 'vue-count-to'
export default {
  data () {
    return {
      list: [
        {
          label: '物业面积（㎡）',
          cls: 'mianzhi',
          key: 'propertyArea',
          value: null
        },
        {
          label: '物业项目（个）',
          cls: 'xiangmu',
          key: 'propertyProject',
          value: null
        },
        {
          label: '房屋（套）',
          cls: 'fangwu',
          key: 'house',
          value: null
        },
        {
          label: '住户（人）',
          cls: 'zhuhu',
          key: 'resident',
          value: null
        },
        {
          label: '车辆（辆）',
          cls: 'cheliang',
          key: 'car',
          value: null
        }
      ]
    }
  },
  components: {
    TipsCardCom,
    countTo
  },
  mounted () {
    api.getAssetInfo().then(res => {
      res.data.data.forEach(item => {
        this.list.map(val => {
          if (val.key === item.type) {
            val.value = item.total
            if (String(val.value).length > 6) {
              val.start = parseInt(val.value / 100000) * 100000
            } else {
              val.start = 0
            }
          }
          return val
        })
      })
    })
    setInterval(() => {
      this.onAgain()
    }, 10000)
  },
  methods: {
    onAgain () {
      let countTo = this.$refs.countTo
      countTo.forEach(item => {
        item.start()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
