<template>
  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
    <div>
      <border-panel
        height="302px"
        style="margin-bottom: 6px; cursor: pointer"
        title="基础信息"
        @click="openBasicModal" 
      >
        <BasicInfo :qy="qy"  />
      </border-panel>
      <border-panel height="346px" style="margin-bottom: 6px" title="隐患排查">
        <HiddenDangerDetection :qy="qy" />
      </border-panel>
      <border-panel height="296px" header-cursor="pointer" title="自主管理" @click-header="openAutoManageModal">
        <AutonomousManagement :qy="qy" />
      </border-panel>
    </div>
    <div class="display: flex;">
      <div class="map" style="position: relative;">
        <MapCharts :mapHeatData="heatMap" :formatter="showLabel" :qx="qy" @selectArea="area => qy = area" />
        <div style="position: absolute; top:10px; width: 500px;">
          <SearchBox :area.sync="qy"/>
        </div>
      </div>
      <div>
        <border-panel
          title="警情动态"
          width="938px"
          height="321px"
          :header-type="1"
        >
          <AlarmingSituationDynamics :qx="qy" :PoliceList="PoliceList" />
        </border-panel>
      </div>
    </div>
    <div>
      <border-panel height="311px" style="margin-bottom: 6px; cursor: pointer;" title="风险预警" @click="openBasicModal">
        <RiskWarning :riskList="riskList"  />
      </border-panel>
      <border-panel height="331px" style="margin-bottom: 6px; cursor: pointer;" title="智慧消防" @click="openFrieModal1" >
        <WisdomFire :frieList="frieList" :iotList="iotList" />
      </border-panel>
      <border-panel height="298px" title="火灾指标">
        <FireIndex :type="fireIndexType" :qx="qy" />
        <template #ext-header>
          <button-block :items="['月', '年']" @select-item="selectItemHandler" />
        </template>
      </border-panel>
    </div>
    <basic-modal top="120px" ref="basicInfoModal" name="基础信息">
      <BasicInfoModalContent :qy="qy" />
    </basic-modal>
    <basic-modal top="120px" ref="feirModal1" name="智慧消防">
      <fxfbCont :qx="qy" />
    </basic-modal>
    <basic-modal top="120px" ref="autoManageModal"  name="自主管理">
      <zzglModul :qx="qy" />
    </basic-modal>
  </div>
</template>
<script>
import BasicInfo from "./components/BasicInfo.vue";
import AlarmingSituationDynamics from "./components/AlarmingSituationDynamics.vue";
import AutonomousManagement from "./components/AutonomousManagement.vue";
import HiddenDangerDetection from "./components/HiddenDangerDetection/index.vue";
import MapCharts from "./components/MapCharts.vue";
import RiskWarning from "./components/RiskWarning.vue";
import WisdomFire from "./components/WisdomFire.vue";
import FireIndex from "./components/FireIndex/index.vue";
import BasicInfoModalContent from "./components/BasicInfoModalContent.vue";
import SearchBox from '@/components/SearchBox.vue';
import fxfbCont from '../Iot/components/fxfbCont.vue'
import zzglModul from "./components/zzglModul.vue";
import { totaldata,getJqdt,getZxgjtj ,getJrjzsbs} from "@/api/index.js";
import { fxfb } from "@/api/risk";
import {
		formatCityData
	} from '../../utils'

export default {
  name: "HomePage",
  components: {
    BasicInfo,
    WisdomFire,
    AlarmingSituationDynamics,
    MapCharts,
    RiskWarning,
    AutonomousManagement,
    HiddenDangerDetection,
    FireIndex,
    BasicInfoModalContent,
    fxfbCont,
    SearchBox,
    zzglModul
  },
  data(){
    return{
      riskList:[],
      // 传参
      qy:'重庆市',
      params:{
        pageSize:100,
        pageNum:1,
      },
      PoliceList:[],
      frieList:{},
      iotList:{},
      fireIndexType: 0,
      heatMap:[]
    }
  },
  watch:{
    qy(){
      this.getList()
      this.getFireList()
      this.getIotList()
    }
  },
  methods: {
    showLabel(params) {
      let res = params.name + "<br/>";
      res += `风险栋数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
      return res;
    },
    openBasicModal() {
      this.showModal("basicInfoModal");
    },
    // 风险预警
    getList(){
      totaldata({...this.params,qy:this.qy==="重庆市"?"":this.qy}).then(res=>{
        if(res.data.code==200){
        this.riskList=res.data.rows
        }
      }).catch(error=>{
        this.$message({
            message: res.data.msg,
            type: "error"
          });
      })
    },
    selectItemHandler(idx) {
      this.fireIndexType = idx
    },
    getStaic(){
      getJqdt(this.params).then(res=>{
        this.PoliceList=res.data.rows
      })
    },
    //智慧消防
    getFireList(){
      getZxgjtj({...this.params,name:this.qy==="重庆市"?"":this.qy}).then(res=>{
       this.frieList=res.data.rows[0]
      })
    },
    // 物联网栋数
    getIotList(){
      getJrjzsbs({...this.params,name:this.qy==="重庆市"?"":this.qy}).then(res=>{
        this.iotList=res.data.rows[0]
      })
    },
    openFrieModal1() {
      this.showModal("feirModal1");
    },
    openAutoManageModal() {
      this.showModal("autoManageModal");
    },
    loadMapData() {
      fxfb({
        pageNum: 1,
        pageSize: 100,
      }).then((res) => {
        let tempData = res.data.rows.filter(
          (item) => item.fxdj === '较大风险'
        );
        console.log(tempData)
        this.heatMap = formatCityData(tempData.map(item => ({
          name: item.qy,
          value: item.sl
        })))
      });
    }
  },
  created(){
    this.getList()
    this.getStaic()
    this.getFireList()
    this.getIotList()
    this.loadMapData();
  }
};
</script>
<style scoped>
.map {
  flex: 1;
}
</style>
