<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" @selectData="loadData" />
      </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" />
    </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/MapCharts.vue";
import fxyjCont from "./components/fxyjCont.vue";
import {
		formatCityData
	} from '../../utils'

export default {
  name: "RiskPage",
  components: {
    Totality,
    Investigation,
    Rectification,
    Riskdistribution,
    RiskDanger,
    SearchBox,
    MapCharts,
    fxyjCont,
  },
  data() {
    return {
      qx: "重庆市",
      fxyjIdex: 1,
      heatMap:[]
    };
  },
  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(val) {
      this.fxyjIdex = val;
      this.showModal("basicInfoModal");
    },
    loadData(val) {
      this.heatMap = formatCityData(val.map(item => ({
        name: item.qy,
        value: item.sl
      })))
    }
  },
};
</script>

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