<template>
  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
    <div>
      <border-panel
        height="310px"
        style="margin-bottom: 6px; cursor: pointer"
        title="总体展示"
        @click="openBasicModal(1)"
      >
        <Totality :qx="qx" />
      </border-panel>
      <border-panel height="320px" style="margin-bottom: 6px" title="排查统计">
        <Investigation :qx="qx" @open="openBasicModal" />
      </border-panel>
      <border-panel
        height="310px"
        title="整改统计"
        @click="openBasicModal(6)"
        style="cursor: pointer"
      >
        <Rectification :qx="qx" />
      </border-panel>
    </div>
    <div>
      <div
        style="
          width: 950px;
          height: 1000px;
          display: flex;
          padding-top: 150px;
          position: relative;
        "
      >
        <MapCharts
          :mapHeatData="heatMap"
          :formatter="showLabel"
          :qx="qx"
          @selectArea="(area) => (qx = area)"
        />
        <div style="position: absolute; width: 500px; left: 0px; top: 10px">
          <search-box :area.sync="qx" />
        </div>
      </div>
    </div>
    <div>
      <border-panel height="521px" style="margin-bottom: 6px" title="风险分布">
        <Riskdistribution :qx="qx"  />
      </border-panel>
      <border-panel height="421px" style="margin-bottom: 6px" title="风险隐患">
        <RiskDanger :qx="qx" />
      </border-panel>
    </div>

    <!-- 风险隐患信息弹窗 -->
    <basic-modal top="120px" ref="basicInfoModal" name="风险隐患信息">
      <fxyjCont :qx="qx" :idx="fxyjIdex" @switchTo="switchTo" />
    </basic-modal>

    <!-- 一楼一策弹窗 -->
    <basic-modal top="120px" ref="yhModal" >
      <YhModalContent :default="params" />
      <YlycModalHeader slot="title" />
    </basic-modal>

    <!-- 基础信息 -->
    <!-- BasicInfoModalContent -->
    <basic-modal top="120px" ref="baseModal" name="基础信息">
      <BasicInfoModalContent :default="params" />
    </basic-modal>
  </div>
</template>
<script>
import Totality from "./components/Totality.vue";
import Investigation from "./components/Investigation.vue";
import Rectification from "./components/Rectification.vue";
import Riskdistribution from "./components/Riskdistribution.vue";
import RiskDanger from "./components/RiskDanger.vue";
import SearchBox from "@/components/SearchBox.vue";
import MapCharts from "../Home/components/MapChartsCategory.vue";
import fxyjCont from "./components/fxyjCont.vue";
import YhModalContent from "../Detail/components/YhModalContent.vue";
import BasicInfoModalContent from "../Home/components/BasicInfoModalContent.vue";
import { formatCityData, createMapChartWindowInfo } from "../../utils";
import { getDtskgzList } from '@/api/index'
export default {
  name: "RiskPage",
  components: {
    Totality,
    Investigation,
    Rectification,
    Riskdistribution,
    RiskDanger,
    SearchBox,
    MapCharts,
    fxyjCont,
    YhModalContent,
    BasicInfoModalContent,
  },
  data() {
    return {
      qx: "重庆市",
      fxyjIdex: 1,
      heatMap: [],
      params: {},
      mapType: {
        "红色": 90,
        "橙色": 70,
        "黄色": 50,
        "蓝色": 30,
        "绿色": 10
      },
    };
  },
  created() {
    this.loadMapData()
  },
  methods: {
    switchTo(params) {
      this.params = params;
      let page = "yhModal";
      if (params.page) {
        page = params.page;
        delete params.page;
      }
      this.showModal(page);
    },
    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;
        }
      );
    },
    openBasicModal(val) {
      this.fxyjIdex = val;
      this.showModal("basicInfoModal");
    },
    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
          }))
        );
      });
    },
  },
};
</script>

<style scoped lang="less"></style>
