<template>
  <div id="pieCmp4">
    <div class="cc-details">
      <div>设备总数</div>
      <div class="card" v-for="item in devicesTotal">{{item}}</div>
    </div>
    <div class="cc-main-container">
      <dv-water-level-pond class="dv-water" v-for="(item,index) in statisDevices" :key="index" :config="item" @click.native="jump(item)" />
    </div>
  </div>
</template>

<script>

export default {
  name: 'pieCmp4',
  components: {
  },
  data () {
    return {
      devicesTotal:[],
      statisDevices:[
        {
          data: [45],
          shape: 'round',
          waveHeight: 25,
          waveNum: 2,
          formatter:'在线'+'0',
          formatter:'',
          path:'/smartapplication/devicelist'
        },
        {
          data: [45],
          shape: 'round',
          waveHeight: 25,
          waveNum: 2,
          formatter:'离线'+'0',
          colors:['#333'],
          path:'/smartapplication/devicelist'
        },
        {
          data: [45],
          shape: 'round',
          waveHeight: 25,
          waveNum: 2,
          formatter:'异常'+'0',
          colors:['#e21c07'],
          path:'/jobs/devicejob'
        },
      ]
    }
  },
    props:['smartDevicesData'],
    watch:{
      smartDevicesData(){
        var _this = this;
        let data = this.smartDevicesData
        let val = this.smartDevicesData.smartDeviceCount + ""
        for(var i =0;i<val.length;i++){
          this.devicesTotal.push(val[i])
        }
        this.statisDevices.map((item,index)=>{
          if(index==0){
            item.formatter = '在线'+data.onlineCount
          }else if(index==1){
            item.formatter = '离线'+data.offlineCount
          }else if(index==2){
            item.formatter = '告警'+data.alertCount
          }
          _this.$set(item)
        })
      }
    },
  methods:{
    jump(item){
      this.$router.push({path:item.path})
    }
  }
}
</script>

<style lang="less">
#pieCmp4 {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;

  .cc-details {
    display: flex;
    justify-content: center;
    font-size: 16px;
    align-items: center;
    .card {
      background-color: rgba(4,49,128,.6);
      color: #08e5ff;
      height: 40px;
      width: 40px;
      font-size: 20px;
      font-weight: bold;
      line-height: 40px;
      text-align: center;
      margin: 10px;
    }
  }

  .cc-main-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }
  .dv-water{
    width: 120px;
    height: 120px;
    cursor: pointer;
  }

}
</style>
