<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" @showTc="showTc" @UnitType="UnitType" />
      </border-panel>
      <border-panel height="346px" style="margin-bottom: 6px" title="隐患排查">
        <HiddenDangerDetection :qy="qy" />
      </border-panel>
      <border-panel
        height="293px"
        header-cursor="pointer"
        title="自主管理"
        @click-header="openAutoManageModal"
      >
        <AutonomousManagement
          @click-item="onClickAutonomousManagementItemHandler"
          :qy="qy"
        />
      </border-panel>
    </div>
    <div class="display: flex;">
      <div class="map" style="position: relative">
        <MapChartsCategory
          :mapHeatData="heatMap"
          :formatter="showLabel"
          :qx="qy"
          @selectArea="(area) => (qy = area)"
        />
        <div style="position: absolute; top: 10px; width: 500px">
          <SearchBox :area.sync="qy" />
        </div>
        <div class="tips" @click="getShoeInfo('smsMsgModal')">提示</div>
      </div>
      <div>
        <border-panel height="321px" width="938px" title="火灾指数" :header-type="1">
          <FireIndex :type="fireIndexType" :qx="qy" />
          <template #ext-header>
            <button-block
              :items="['月', '年']"
              @select-item="selectItemHandler"
            />
          </template>
        </border-panel>
      </div>
    </div>
    <div>
      <border-panel
        height="311px"
        style="margin-bottom: 6px; cursor: pointer"
        header-cursor="pointer"
        title="预警预测"
        @click-header="openBasicModal"
      >
        <RiskWarning :riskList="riskList" @showFxyj="showFxyj" :qy="qy" />
        <template #ext-header>
          <img
            src="../../assets/images/dd_wh.png"
            alt=""
            @click="getShoeInfo('whFxModal')"
          />
        </template>
      </border-panel>
      <border-panel
        height="331px"
        style="margin-bottom: 6px; cursor: pointer"
        title="物联感知"
      >
        <WisdomFire :frieList="frieList" :iotList="iotList" :qy="qy" />
        <ZhxfModalHeader slot="title" />
      </border-panel>
      <border-panel title="警情动态" height="298px" :header-type="1">
        <AlarmingSituationDynamics :qx="qy" :PoliceList="PoliceList" />
      </border-panel>
    </div>
    <basic-modal top="120px" ref="basicInfoModal" name="基础信息">
      <BasicInfoModalContent :qy="qy" :default="defaultModel" />
    </basic-modal>
    <basic-modal top="120px" ref="autoManageModal" name="自主管理">
      <zzglModul ref="zzglModul" :queryParams="queryParams" :qy="qy" />
    </basic-modal>
    <!-- 风险问号弹窗 -->
    <basic-modal
      top="30px"
      ref="whFxModal"
      name="高层建筑消防安全风险分级分色判定标准"
      width="90%"
    >
      <div
        style="display: flex; flex-direction: column; justify-content: center"
      >
        <img class="imgs" src="../../assets/images/zl-fxyj.png" />
      </div>
    </basic-modal>
    <!-- 短信提示弹窗 -->
    <basic-modal top="120px" ref="smsMsgModal" name="信息提示" width="800px">
      <MessageTipModalContent :qy="qy" @close="onCloseModal" />
    </basic-modal>
  </div>
</template>
<script>
import BasicInfo from "./components/BasicInfo.vue";
import AlarmingSituationDynamics from "./components/AlarmingSituationDynamics/index.vue";
import AutonomousManagement from "./components/AutonomousManagement/index.vue";
import HiddenDangerDetection from "./components/HiddenDangerDetection/index.vue";
import MapChartsCategory from "./components/MapChartsCategory.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 zzglModul from "./components/zzglModul.vue";
import {
  totaldata,
  getJqdt,
  getZxgjtj,
  getJrjzsbs,
  getDtskgzList,
} from "@/api/index.js";
import { fxfb } from "@/api/risk";
import { formatCityData, createMapChartWindowInfo } from "@/utils";
import MessageTipModalContent from "@/components/MessageTipModalContent.vue";

export default {
  name: "HomePage",
  components: {
    BasicInfo,
    WisdomFire,
    AlarmingSituationDynamics,
    MapChartsCategory,
    RiskWarning,
    AutonomousManagement,
    HiddenDangerDetection,
    FireIndex,
    BasicInfoModalContent,
    SearchBox,
    zzglModul,
    MessageTipModalContent,
  },
  data() {
    return {
      riskList: [],
      // 传参
      qy: "重庆市",
      params: {
        pageSize: 100,
        pageNum: 1,
      },
      PoliceList: [],
      frieList: {},
      iotList: {},
      fireIndexType: 0,
      heatMap: [],
      defaultModel: {},
      mapType: {
        红色: 90,
        橙色: 70,
        黄色: 50,
        蓝色: 30,
        绿色: 10,
      },
      queryParams: {
        glxs: "", //管理形式
        wbxs: "", //维保形式
        dxjj: "", //大修基金
      },
    };
  },
  watch: {
    qy() {
      this.getList();
      this.getFireList();
      this.getIotList();
    },
  },
  methods: {
    onCloseModal() {
      this.closeModal("smsMsgModal");
    },
    onClickAutonomousManagementItemHandler(data) {
      const temp = {
        glxs: "",
        wbxs: "",
        dxjj: "",
      };
      switch (data.index) {
        case 0:
          temp.glxs = data.value;
          break;
        case 1:
          temp.wbxs = data.value;
          break;
        case 2:
          temp.dxjj = data.value;
          break;
      }
      this.queryParams = temp;
      this.showModal("autoManageModal");
    },
    showLabel(params) {
      return createMapChartWindowInfo(
        {
          title: params.name,
        },
        () => {
          const item = params.data.meta;
          let res = `
          <table>
            <tr >
              <td style="padding-bottom:8px;">${
                item.区域
              } 第<span style="font-size: 24px;color:red;font-weight:bold;">${
            item.区域排名 || 0
          }</span>名</td>
              <td></td>
            </tr>
            <tr>
              <td>直接财产损失 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${Math.ceil(
                (item.直接财产损失 || 0) / 10000
              )}</span>万元</td>
              <td></td>
            </tr>
            <tr>
              <td>火灾起数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${
                item.火灾起数 || 0
              }</span>起</td>
              <td>亡人数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${
                item.亡人数 || 0
              }</span>人</td>
            </tr>
            <tr>
              <td>重大风险 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${
                item.重大风险 || 0
              }</span>栋</td>
              <td>较大风险 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${
                item.较大风险 || 0
              }</span>栋</td>
            </tr>
            <tr>
              <td>一般风险 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${
                item.一般风险 || 0
              }</span>栋</td>
              <td>低风险 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${
                item.低风险 || 0
              }</span>栋</td>
            </tr>
          </table>
          `;
          return res;
        }
      );
    },
    showTc(val) {
      if (val) {
        this.defaultModel = {
          qy: this.qy,
          dl: val,
        };
        this.showModal("basicInfoModal");
      }
    },
    showFxyj(val) {
      this.defaultModel = {
        qy: this.qy,
        fxdjYs: val,
      };
      this.showModal("basicInfoModal");
    },
    openBasicModal() {
      this.showModal("basicInfoModal");
    },
    UnitType(name) {
      const params = {
        qy: this.qy,
      };
      if (name == "超高层建筑总数（栋）") {
        params.gd = "100米以上";
      }
      if (name == "2000年底前老旧住宅建筑总数（栋）") {
        params.jcnd = "2000年前";
        params.dl = "住宅建筑";
      }
      if (name == "2000年底前老旧商业混合体建筑总数（栋）") {
        params.jcnd = "2000年前";
        params.dl = "公共建筑";
      }
      this.defaultModel = params;
      this.showModal("basicInfoModal");
    },
    getShoeInfo(name) {
      this.showModal(name);
    },
    // 风险预警
    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];
      });
    },

    openAutoManageModal() {
      this.showModal("autoManageModal");
    },
    loadMapData() {
      getDtskgzList({
        pageNum: 1,
        pageSize: 42,
      }).then((res) => {
        let tempData = res.data.rows;
        this.heatMap = formatCityData(
          tempData.map((item) => ({
            name: item.qx,
            value: this.mapType[item.分区颜色],
            meta: item,
          }))
        );
      });
    },
  },
  created() {
    this.getList();
    this.getStaic();
    this.getFireList();
    this.getIotList();
    this.loadMapData();
  },
  mounted(){
    setInterval(() => {
      // 获取通知
      getJqdt(this.params).then((res) => {
        // console.log("通知", res);
        this.PoliceList = res.data.rows;
      });
    }, 6000 );

  }
  
};
</script>
<style scoped>
.map {
  flex: 1;
}
.imgs {
  display: inline-block;
  /* width: 100%;
  height: 700px; */
}

.tips {
  color: #9bc3ff;
  background: url("../../assets/images/border.png") no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
  position: absolute;
  bottom: 20px;
  left: 5px;
  box-sizing: border-box;
  padding: 10px 20px;
  cursor: pointer;
}
</style>
