<template>
  <div id="contentUnion">
    <containerCmp :titHeader="agencies.name" active="contentUnion">
      <div class="centerCmp">
        <mapCmp :agencies="agencies" :devicesData="devicesList" @onEmit="handleClick"></mapCmp>
      </div>
      <div class="leftCmp" style="width: 30%;">
        <deviceUnions :smartDevicesData="smartDevicesData" @onEmit="selectDevices"></deviceUnions>
      </div>
      <div class="rightCmp" style="width: 30%;">
        <dv-border-box-13 class="rightCmp-1">
          <pieCmp4 :smartDevicesData="smartDevicesData"></pieCmp4>
        </dv-border-box-13>
        <dv-border-box-13 class="rightCmp-2">
          <alarmScrollBoard  @onEmit="handleClick"></alarmScrollBoard>
        </dv-border-box-13>
      </div>
    </containerCmp>
  </div>
</template>
<script>
import containerCmp from "./common/containerCmp.vue"
import topHeader from './components/topHeader.vue'
import mapCmp from './components/devicesMap.vue'
import deviceUnions from './components/deviceUnions.vue'
import pieCmp4 from './components/pieCmp4.vue'
import alarmScrollBoard from './components/alarmScrollBoard'
import {getUserInfo} from "../../util/util.js"
import {getResidentialDevices} from "../../api/grid/index.js"
export default {
  name: 'contentUnion',
  components: {
    containerCmp,
    alarmScrollBoard,
    deviceUnions,
    pieCmp4,
    mapCmp,
  },
  data () {
    return {
      smartDevicesData:[],
      devicesList:[],
      devicesListAll:[]
    }
  },
  created() {
    this.agencies = JSON.parse(localStorage.getItem('agencies2'))
    this.reqDevices()
  },
  mounted() {
    if(getUserInfo()){
      this.config = this.config1
    }
  },
  methods:{
    selectDevices(arr){
      this.devicesList.length = 0
        this.devicesListAll.map((item)=>{
          if(!arr.includes(item.deviceType)){
            this.devicesList.push(item)
          }
        })
    },
    reqDevices(){
      var _this = this;
      getResidentialDevices(this.agencies.id).then((res)=>{
        _this.smartDevicesData = res.data;
        _this.devicesList = res.data.smartDeviceList.concat()
        _this.devicesListAll = res.data.smartDeviceList.concat()
      })
    },
    handleClick(row,params){
      this.$datavAlert({
        title:params.title,
        showType:params.type,
        detailData:row
      })
    },
  }
}
</script>
<style lang="less">
#contentUnion {
  .rightCmp-1{
    height:30%;
  }
  .rightCmp-2{
    height:70%;
  }
}
</style>
