<template>
  <div id="index">
    <dv-full-screen-container style="height:100%">
      <topHeader :title="indexTitle" :index="1"></topHeader>
      <dv-border-box-1 class="main-container">
       <div style="width: 100%;">
         <div style="display: flex;position: relative;height: 10%;justify-content: center;align-items: center;">
            <headerData3 :data="communityData"></headerData3>
          </div>
          <div style="display: flex;width:100%;height: 90%;">
            <div class="rmctc-left-container">
              <div class="visual_box">
              	<div class="visual_title">
              		<span>紧急事件告警处理</span>
              		<img src="./images/ksh33.png">
              	</div>
              	<div class="visual_chart">

              	</div>
              </div>
              <div class="visual_box">
              	<div class="visual_title">
              		<span>历史事件告警处理</span>
              		<img src="./images/ksh33.png">
              	</div>
              	<div class="visual_chart">

              	</div>
              </div>
              <div class="visual_box">
              	<div class="visual_title">
              		<span>实时监控数</span>
              		<img src="./images/ksh33.png">
              	</div>
              	<div class="visual_chart" >

              	</div>
              </div>
            </div>
                <div class="rmctc-center-container" >
                  <div class="visual_conBot">
                        <img class="visual_conBot_l" src="./images/ksh42.png">
                        <img class="visual_conBot_2" src="./images/ksh43.png">
                        <img class="visual_conBot_3" src="./images/ksh44.png">
                        <img class="visual_conBot_4" src="./images/ksh45.png">
                        <div class="visual_chart">
                          <mapCmp :data="mapData" @onRequest="onRequest"></mapCmp>
                          <mapDeviceMenu :smartDeviceData="smartDeviceData.data" @reqDeviceCount="reqDeviceCount"></mapDeviceMenu>
                        </div>
                  </div>
                </div>
                <div class="rmctc-right-container">
                  <div class="visual_box">
                  	<div class="visual_title">
                  		<span>事件统计分析</span>
                  		<img src="./images/ksh33.png">
                  	</div>
                  	<div class="visual_chart">
                  	</div>
                  </div>
                  <div class="visual_box">
                  	<div class="visual_title">
                  		<span>社区查询</span>
                  		<img src="./images/ksh33.png">
                  	</div>
                  	<div class="visual_chart">
                  	</div>
                  </div>
                  <div class="visual_box">
                  	<div class="visual_title">
                  		<span>查询列表</span>
                  		<img src="./images/ksh33.png">
                  	</div>
                  	<div class="visual_chart">
                  	</div>
                  </div>
                </div>
          </div>
       </div>
      </dv-border-box-1>
    </dv-full-screen-container>
    <loadCmp v-if="loadFinish"></loadCmp>
  </div>
</template>
<script>
import topHeader from './components/topHeader.vue'
import mapCmp from './components/geoMap.vue'
import headerData3 from "./components/headerData3.vue"
import loadCmp from "./components/loadCmp.vue"
import {getCommunityList} from "../../api/grid/index"
import {getByTenantId} from "../../api/system/setting.js"
export default {
  name: 'index',
  components: {
    topHeader,
    mapCmp,
    headerData3,
    loadCmp
  },
  data () {
    return {
      alarmTit:'',
      communityData:null,
      adCode:'',
      deviceType:'',
      mapData:[],
      deviceList:[]
    }
  },
  created() {

  },
  mounted() {
    this.onRequest()
  },
  methods:{
    onRequest(adCode){
      if(adCode){
        this.adCode = adCode
      }else{
        this.adCode = "/640000"
      }
      let collect  = [];
      var _this = this;
      collect.push(this.getCommunityDataList(this.adCode))
      collect.push(this.getByTenantId())
      collect.push(this.reqDeviceCount(this.deviceType,this.adCode))
        axios.all(collect)
            .then(
              axios.spread(() => {
                _this.mapData.length=0
                console.log(_this.deviceList,111)
                console.log(_this.communityData,11)
                _this.mapData.push(_this.deviceList)
                _this.mapData.push(_this.communityData)
                _this.loadFinish = false;
              })
            )
            .catch(err => {
              // _this.loadFinish = false;
            });
    },
    getByTenantId(){
      // return getByTenantId("000000").then((res)=>{
      //   this.indexTitle = res.data.data.indexTitle
      // })
	  let data = JSON.parse(localStorage.getItem("saber-userInfo"))
	  if(data){
	  		  return getByTenantId(data.content.tenant_id).then((res)=>{
	  		    this.indexTitle = res.data.data.indexTitle
	  		  })
	  }
    },
    getCommunityDataList(params){
      var _this = this;
      return getCommunityList(params).then((res)=>{
        _this.communityData = res.data.data;
      }).catch((err)=>{
        console.log(err)
      })
    },
    reqDeviceCount(type,params){
      var _this = this;
      this.deviceType = type;
      return getDeviceCount(type,_this.adCode).then((res)=>{
        let data = res.data.data;
         _this.smartDeviceData.data.length = 0;
       if(data.singleTypeSmartDeviceVOList.length>0){
         data.singleTypeSmartDeviceVOList.map((item)=>{
           let obj = {}
           obj["name"] = item.deviceTypeName
           obj['value'] = item.deviceCount
           obj['deviceType'] = item.deviceType
           _this.smartDeviceData.data.push(obj)
           _this.$set(_this.smartDeviceData)
         })
       }
       _this.deviceList.length = 0;
       if(data.smartDeviceList.length>0){
         _this.deviceList = data.smartDeviceList;
       }
      })
    },
  }
}
</script>

<style lang="less">
  @import url("./css/default.css");
  @import url("./css/mobile.css");
#index {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
  #dv-full-screen-container {
    background-image: url('./images/bg01warp.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
    background-color: #030409;
  }

  .main-container {
    height: calc(~"100% - 80px");
    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .rmctc-center-container {
    width: 50%;
    display: flex;
    flex-direction: column;
  }
   .rmctc-left-container,.rmctc-right-container {
    width: 25%;
    .border-box-content {
      flex-direction: column;
    }
  }


}
</style>
