<template>
  <div id="headerData3">
    <div class="big-index-1">
        <ul>
            <li v-for="item in digitalFlopData"
              :key="item.title"
              @click="jump(item)">
                <b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b>
                <p>{{ item.title }}</p>
                <strong>{{ item.number }}</strong>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        digitalFlopData : [
          {
            title: '总社区数',
            number: 10,
            path: '/community/agency'
          },
          {
            title: '总小区数',
            number: 75,
            path: '/community/residential'
          },
          {
            title: '总楼栋数',
            number: 689,
            path:'/community/building'
          },
          {
            title: '总单元数',
            number: 689,
            path: '/community/unit'
          },
          {
            title: '总房间数',
            number: 10352,
            path: '/community/room'
          },
          // {
          //   title: '车位',
          //   number: 12563,
          //   path: '/community/parkinglot'
          // },
          
          {
            title: '总设备数',
            number: 176,
            path: '/smartapplication/devicelist'
          },
          {
            title: '总人口数',
            number: 37315,
            path: '/community/permanentPeople'
          },
          // {
          //   title: '常住人口数',
          //   number: 30212,
          //   path: '/community/permanentPeople'
          // },
          // {
          //   title: '流动人口数',
          //   number: 7103,
          //   path: '/community/floatPeople'
          // }

        ],
      }
    },
    props:{
      data:{
        type:Object
      }
    },
    watch:{
      data(){
        var data = this.data;
        this.digitalFlopData.map((item,index)=>{
          switch(index){
            case 0:item.number = data.agencyCount;break;
            case 1:item.number = data.residentialCount;break;
            case 2:item.number = data.buildingCount;break;
            case 3:item.number = data.unitCount;break;
            case 4:item.number = data.roomCount;break;
            // case 4:item.number = data.parkingLotCount;break;
            case 5:item.number = data.deviceCount;break;
            case 6:item.number = data.userCount;break;
            // case 7:item.number = data.permanentPeopleCount;break;
            // case 8:item.number = data.floatPeopleCount;break;
          }
        })
        this.digitalFlopData[0].number = this.data.agencyCount
      }
    },
    mounted() {

    },
    methods:{
      jump(item){
        this.$router.push({path:item.path})
      }
    }
  }
</script>

<style lang="less">
 #headerData3{
 }
</style>
