<template>
    <div id="headerData2">
        <dv-decoration-6 style="width:60%;height:30px;" />
        <div>
          <div class="digtal-flop-content">
            <div
              class="digital-flop-item"
              v-for="item in digitalFlopData"
              :key="item.title"
              @click="jump(item)"
            >
              <div class="digital-flop-title">{{ item.title }}</div>
                <dv-digital-flop
                  :config="item.number"
                />
            </div>
          </div>
        </div>
        <!-- <dv-decoration-2 dur="15"	style="width:100%;height:5px;" /> -->
    </div>
</template>

<script>
  import {getUserInfo} from "../../../util/util.js"
export default {
  name: 'headerData',
  data () {
    return {
      digitalFlopData: []
    }
  },
  props:['agencyStatistic'],
  watch:{
    agencyStatistic(){
      var _this = this;
      _this.digitalFlopData.map((item,index)=>{
        if(getUserInfo()){
          switch(index){
            case 0:item.number.number.push(_this.agencyStatistic.enterpriseCount)
            break;
            case 1:item.number.number.push(_this.agencyStatistic.enterpriseStaffCount)
            break;
            case 2:item.number.number.push(_this.agencyStatistic.carCount)
            break;
            case 3:item.number.number.push(_this.agencyStatistic.parkingLotCount)
            break;
            case 4:item.number.number.push(_this.agencyStatistic.devicesCount)
            break;
            case 5:item.number.number.push(_this.agencyStatistic.buildingCount)
            break;
          }
        }else{
          switch(index){
            case 0:item.number.number.push(_this.agencyStatistic.buildingCount)
            break;
            case 1:item.number.number.push(_this.agencyStatistic.roomCount)
            break;
            case 2:item.number.number.push(_this.agencyStatistic.personCount)
            break;
            case 3:item.number.number.push(_this.agencyStatistic.parkingLotCount)
            break;
            case 4:item.number.number.push(_this.agencyStatistic.ownerCount)
            break;
            case 5:item.number.number.push(_this.agencyStatistic.tenantCount)
            break;
          }
        }
        _this.$set(item.number)
      })
      // this.digitalFlopData[7].number.munber.push("0")
      // this.agencyStatistic.map((item)=>{
      //   let obj = {
      //         title: '',
      //         number: {
      //           number: [],
      //           content: '{nt}',
      //           textAlign: 'center',
      //           style: {
      //             fill: '#4d99fc',
      //             fontWeight: 'bold',
      //             fontSize:20
      //           }
      //         },
      //         path: ''
      //       }
      //   obj['title'] = item.name
      //   obj['number'].number.push(item.count)
      //   _this.digitalFlopData.push(obj)
      // })
    }
  },
  created() {
    this.createData()
  },
  methods: {
    createData () {
      if(getUserInfo()){
        this.digitalFlopData = [
          {
            title: '企业数',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/enterprise'
          },
          {
            title: '员工数',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/enterprisestaff'
          },{
            title: '车辆数',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/car'
          },
          {
            title: '园区车位',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/parkingspace'
          },
          {
            title: '园区设备',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/smartapplication/devicelist'
          },
          {
            title: '楼宇总数',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/building'
          },
        ]
      }else{
        this.digitalFlopData = [
          {
            title: '楼宇总数',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#f46827',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/building'
          },
          {
            title: '房间总数',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/room'
          },
          {
            title: '小区人口',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#40faee',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/permanentPeople'
          },
          {
            title: '小区车位',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/parkingspace'
          },

          {
            title: '业主人员',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#40faee',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/permanentPeople'
          },
          {
            title: '租客人员',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/floatPeople'
          }
        ]
      }

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

<style lang="less">
#headerData2 {
    height: 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  .rose-chart-title {
      height: 30px;
      font-weight: bold;
      font-size: 18px;
      display: flex;
      align-items: center;
    }
   .digtal-flop-content{
     position: relative;
     flex-wrap: wrap;
     flex-shrink: 0;
     flex-grow: 1;
     display: flex;
     // justify-content: center;
     // align-items: center;
   }

  .digital-flop-item {
    width: calc(~"100% / 3 - 10px");
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #36a2e1;
    box-sizing: border-box;
    border-radius: 5px;
    margin:5px;
    padding-top: 12px;
    cursor: pointer;
  }
  .digital-flop-title {
    font-size: 16px;
    color:#fff;
    font-weight: bold;
  }
  .unit {
    margin-left: 10px;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    padding-bottom: 13px;
  }
}
</style>
