<template>
    <div id="headerData">
        <div>
          <div class="digtal-flop-content">
            <div
              class="digital-flop-item"
              v-for="item in digitalFlopData"
              :key="item.title"
              @click="jump(item)"
            >
            <dv-digital-flop
            style="height:50px"
              :config="item.number"
            />
              <div class="digital-flop-title">{{ item.title }}</div>
            </div>
          </div>
        </div>
    </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.residentials.length)
              break;
              case 1:item.number.number.push(_this.agencyStatistic.buildingCount)
              break;
              case 2:item.number.number.push(_this.agencyStatistic.enterpriseCount)
              break;
              case 3:item.number.number.push(_this.agencyStatistic.staffCount)
              break;
              case 4:item.number.number.push(_this.agencyStatistic.safetyDeviceCount)
              break;
              case 5:item.number.number.push(_this.agencyStatistic.warningDeviceCount)
              break;
            }
        }else{
          switch(index){
            case 0:item.number.number.push(_this.agencyStatistic.residentials.length)
            break;
            case 1:item.number.number.push(_this.agencyStatistic.roomCount)
            break;
            case 2:item.number.number.push(_this.agencyStatistic.buildingCount)
            break;
            case 3:item.number.number.push(_this.agencyStatistic.personCount)
            break;
            case 4:item.number.number.push(_this.agencyStatistic.parkingSpaceCount)
            break;
            case 5:item.number.number.push(_this.agencyStatistic.ownerCount)
            break;
            case 6:item.number.number.push(_this.agencyStatistic.tenantCount)
            break;
            case 7:item.number.number.push(_this.agencyStatistic.keyPersonCount)
            break;
            case 8:item.number.number.push(_this.agencyStatistic.safetyDeviceCount)
            break;
            case 9:item.number.number.push(_this.agencyStatistic.warningDeviceCount)
            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/agency'
            },
            {
              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: '#40faee',
                  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: '/smartapplication/devicelist'
            },
            {
              title: '告警设备',
              number: {
                number: [],
                content: '{nt}',
                textAlign: 'center',
                style: {
                  fill: '#40faee',
                  fontWeight: 'bold',
                  fontSize:20
                }
              },
              path: '/smartapplication/devicelist'
            }
          ]
      }else{
        this.digitalFlopData = [
          {
              title: '小区总数',
              number: {
                number: [],
                content: '{nt}',
                textAlign: 'center',
                style: {
                  fill: '#40faee',
                  fontWeight: 'bold',
                  fontSize:20
                }
              },
              path: '/community/agency'
            },
          {
            title: '社区户数',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/agency'
          },
          {
            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: '#40faee',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/permanentPeople'
          },
          {
            title: '社区车位',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/parkinglot'
          },
          {
            title: '业主人员',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#f46827',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/permanentPeople'
          },
          {
            title: '租客人员',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#f46827',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/floatPeople'
          },
          {
            title: '重点人员',
            number: {
              number: [],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#40faee',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/community/keyPopulation'
          },
          {
            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: '#40faee',
                fontWeight: 'bold',
                fontSize:20
              }
            },
            path: '/smartapplication/devicelist'
          },
        ]
      }
    },

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

<style lang="less">
#headerData {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
   .digtal-flop-content{
     width: 100%;
     position: relative;
     flex-wrap: wrap;
     display: flex;
   }

  .digital-flop-item {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // background-color: rgba(29,73,178,0.1);
    // border: 1px solid #333;
    box-sizing: border-box;
    border-radius: 5px;
    // margin:5px;
    // padding-top: 12px;
    cursor: pointer;
  }
  .digital-flop-title {
    font-size: 12px;
  }
  .unit {
    margin-left: 10px;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    padding-bottom: 13px;
  }
}
</style>
