<template>
    <Card :title="title" :icon="icon" class="user">
      <div class="content">
        <div v-for="item in userData" :key="item.title" class="user-item flex-1">
          <div class="icon">
            <img :src="item.icon" alt="" class="img">
          </div>
          <div class="text">{{ item.title }}</div>
          <div class="value">{{ item.value | formatNumber }}</div>
        </div>
      </div>
    </Card>
  </template>
<script>
import { huiJiaApi } from '@/api'

import Card from '@/views/hui-jia/components/card'
import icon from './images/icon-title.png'
import iconPark from './images/icon-park.png'
import iconCommunity from './images/icon-community.png'
import iconResident from './images/icon-resident.png'
import iconCar from './images/icon-car.png'
import iconUser from './images/icon-user.png'
import iconHouse from './images/icon-house.png'

export default {
  name: 'User',
  components: {
    Card
  },
  data () {
    return {
      title: '客户数量',
      icon: icon,
      userData: [
        {
          title: '客户数',
          key: 'customersCount',
          value: 1000,
          icon: iconUser
        },
        {
          title: '项目数',
          value: 1000,
          key: 'communityCount',
          icon: iconCommunity
        },
        {
          title: '房屋数',
          value: 1000,
          key: 'houseCount',
          icon: iconHouse
        },
        {
          title: '住户数',
          value: 1000,
          key: 'residentCount',
          icon: iconResident
        },
        {
          title: '车位数',
          value: 1000,
          key: 'parkingSpaceCount',
          icon: iconPark
        },
        {
          title: '车辆数',
          value: 1000,
          key: 'carCount',
          icon: iconCar
        }

      ]
    }
  },
  mounted () {
    this.getCustomerStatistics()
  },
  methods: {
    getCustomerStatistics () {
      huiJiaApi.getCustomerStatistics().then(res => {
        if(res && res.data){
          this.userData.forEach(item => {
            item.value = res.data.data[item.key]
          })
        }
       
      })
    }
  },
}
</script>
<style lang="scss">
@import '@/assets/css/function.scss';
@import '@/assets/css/screen.scss';

.user{
  .content{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .user-item{
    text-align: center;
    // line-height: halfH(50);
  }
  .img{
    width: halfW(34);
    height: halfW(34);
    object-fit: cover;
  }
  .text{
    font-size: halfW(16);
    color: #9BDAFF;
    margin: halfH(16) 0;
  }
  .value{
    font-size: halfW(20);
    color: #fff;
  }
}

</style>
