<template>
  <div id="deviceUnions">
    <div class="devices">
      <dv-border-box-12 class="item"
      v-for="(item,index) in digitalFlopData"
      :key="index"
      @click.native="jump(index)"
      background-color="rgba(16,42,117,.3)">
          <div class="title">{{item.title}}</div>
          <div class="bottom">
            <div class="bottom-number">
              <div class="bottom-title">{{item.normalTit}}</div>
              <dv-digital-flop class="digital" :config="item.number1" />
            </div>
            <div class="bottom-number">
              <div class="bottom-title">{{item.exceptionTit}}</div>
              <dv-digital-flop class="digital" :config="item.number2" />
            </div>
          </div>
          <div :class="filterIndex.includes(index)?'hide':'show'">{{filterIndex.includes(index)?'显示':'隐藏'}}</div>
      </dv-border-box-12>
    </div>
  </div>
</template>

<script>
  import {getUserInfo} from "../../../util/util.js"
export default {
  data () {
    return {
      digitalFlopData: [],
      filterArr:[],
      filterIndex:[]
    }
  },
  props:['smartDevicesData'],
  watch:{
    smartDevicesData(){
      let data = this.smartDevicesData.singleDeviceStatisticsList
      data.map((item)=>{
        let obj = {
          title:'',
          normalTit:'正常',
          exceptionTit:'异常',
          path:'',
          number1: {
            number: [],
            content: '{nt}',
            textAlign: 'left',
            style: {
              fill: '#3de7c9',
              fontSize:22,
              fontWeight:'bold'
            }
          },
          number2: {
            number: [],
            content: '{nt}',
            textAlign: 'left',
            style: {
              fill: '#ff4300',
              fontSize:22,
              fontWeight:'bold'
            }
          }
        }
      obj['title'] = item.deviceTypeName
      obj.number1.number.push(item.normalCount)
      obj.number2.number.push(item.alertCount)
      this.digitalFlopData.push(obj)
    })
    }
  },
  created() {
    this.agencies = JSON.parse(localStorage.getItem('agencies2'))
  },
  methods: {
    jump(idx){
      let item = this.smartDevicesData.singleDeviceStatisticsList[idx]
      if(item.normalCount=="0"&&item.alertCount=="0"){
        return
      }
      let filterArr = this.filterArr
      let filterIndex  = this.filterIndex
      if(filterArr.includes(item.deviceType)){
        let index = filterArr.indexOf(item.deviceType)
        let fIndex = filterIndex.indexOf(idx)
        filterArr.splice(index,1)
        filterIndex.splice(fIndex,1)
      }else{
        filterArr.push(item.deviceType)
        filterIndex.push(idx)
      }
      this.$emit("onEmit",filterArr)
    }
  }

}
</script>

<style lang="less">
  #deviceUnions{
    width: 100%;
    height: 100%;
    .show{
      color: #999;
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;
    }
    .hide{
      color: #fff;
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;
    }
    .devices{
      width: 100%;
      height: 100%;
      align-content: flex-start;
      display: flex;
      flex-wrap: wrap;
      overflow: auto;
    }
    .rose-chart-title {
        height: 30px;
        font-weight: bold;
        font-size: 16px;
        display: flex;
        align-items: center;
      }
    .border-box-content{
        padding: 0!important;
        display: flex;
        align-content: space-between;
        justify-content: space-between;
      }
    .item{
      width: 50%;
      height:14.2%;
      box-sizing: border-box;
      padding: 20px;
      color: #fff;
    }
    .item:hover{
      cursor: pointer;
      .title{
        text-shadow:
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
      }
    }
    .title{
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
      font-size: 16px;
      font-weight: bold;
    }
    .bottom{
      width: 100%;
      display: flex;
    }

    .bottom-number{
      width: 50%;
      display: flex;
      box-sizing: border-box;
    }
    .bottom-title{
      width: 30%;
      font-size: 12px;
    }
    .digital{
      width: 70%;
      height:20px;
      box-sizing: border-box;
      padding-left: 10px;
    }
  }
</style>
