<template>
  <div style="position: relative; width: 100%; height: 95%;">
    <div class="map-box" ref="map"></div>
    <img class="imgs" src="../../../assets/images/dd_wh.png" alt="" @click="getShoeInfo('whFxModal')">
    <basic-modal top="30px" ref="whFxModal" name="区域高层建筑消防安全风险分色判定标准" width="90%">

        <div style="display: flex; justify-content: center;">
          <img  src="../../../assets/images/map-tip.png" />
        </div>
        <!-- <div v-html="textInfo"></div> -->
    </basic-modal>
  </div>
  <!-- 风险问号弹窗 -->
  
</template>

<script>
import * as echarts from "echarts";
import jsonCq from "@/assets/json/cq.json";
import toolUtils from "@/utils/echartsTooltip";
import { toInt } from '@/utils'


export default {
  name: "MapCharts",
  props: {
    qx: String,
    mapHeatData: {
      type: Array,
      default: () => []
    },
    formatter: {
      type: Function,
      default: function (params) {
        let res = params.name + "<br/>";
        res += `隐患<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
        return res;
      }
    }
  },
  data() {
    return {
      timed: null,
      mapName: "chongqing",
      mapData: {
        北碚: [106.5, 29.81],
        城口: [108.6520475, 31.90676506],
        大足: [105.7692868, 29.65392091],
        垫江: [107.4004904, 30.24903189],
        丰都: [107.7461781, 29.91492542],
        奉节: [109.3758974, 30.98202119],
        合川: [106.2833096, 30.09766756],
        江北: [106.6214893, 29.64821182],
        江津: [106.2647885, 28.98483627],
        开州: [108.1818518, 31.29466521],
        南岸: [106.6379653, 29.47704825],
        南川: [107.1406799, 29.12047319],
        彭水: [108.2573507, 29.36444557],
        綦南: [106.8036647, 28.96872774],
        黔江: [108.7559876, 29.44290625],
        石柱: [108.2438988, 30.07512144],
        市区: [106.4377397, 29.52648606],
        市辖区: [106.4377397, 29.52648606],
        铜梁: [106.0616035, 29.81036286],
        潼南: [105.811692, 30.13795513],
        万州: [108.0828876, 30.73353669],
        巫山: [109.8779184, 31.09568937],
        巫溪: [109.2970739, 31.48090521],
        武隆: [107.6831317, 29.36831708],
        秀山: [108.9997005, 28.49462861],
        永川: [105.8347961, 29.41042605],
        酉阳: [108.7911679, 28.88330557],
        云阳: [108.7533957, 30.96025875],
        长寿: [107.24, 29.95],
        忠县: [107.9279014, 30.33522658],
        川东: [107.3488646, 29.68233099],
      },
      activeMap: jsonCq,
      activeArea: "",
      activeName: "重庆市",
      activeMapData: [],
      // 区块图
      heatData: [
        {
          name: "万州区",
          value: 0
        },
        {
          name: "涪陵区",
          value: 0,
        },
        {
          name: "渝中区",
          value: 0,
        },
        {
          name: "大渡口区",
          value: 0,
        },
        {
          name: "江北区",
          value: 0,
        },
        {
          name: "沙坪坝区",
          value: 0,
        },
        {
          name: "九龙坡区",
          value: 0,
        },
        {
          name: "南岸区",
          value: 0,
        },
        {
          name: "北碚区",
          value: 0,
        },
        {
          name: "綦江区",
          value: 0,
        },
        {
          name: "大足区",
          value: 0,
        },
        {
          name: "渝北区",
          value: 0,
        },
        {
          name: "巴南区",
          value: 0,
        },
        {
          name: "黔江区",
          value: 0,
        },
        {
          name: "长寿区",
          value: 0,
        },
        {
          name: "江津区",
          value: 0,
        },
        {
          name: "合川区",
          value: 0,
        },
        {
          name: "永川区",
          value: 0,
        },
        {
          name: "南川区",
          value: 0,
        },
        {
          name: "璧山区",
          value: 0,
        },
        {
          name: "铜梁区",
          value: 0,
        },
        {
          name: "潼南区",
          value: 0,
        },
        {
          name: "荣昌区",
          value: 0,
        },
        {
          name: "开州区",
          value: 0,
        },
        {
          name: "梁平区",
          value: 0,
        },
        {
          name: "武隆区",
          value: 0,
        },
        {
          name: "城口县",
          value: 0,
        },
        {
          name: "丰都县",
          value: 0,
        },
        {
          name: "垫江县",
          value: 0,
        },
        {
          name: "忠县",
          value: 0,
        },
        {
          name: "云阳县",
          value: 0,
        },
        {
          name: "奉节县",
          value: 0,
        },
        {
          name: "巫山县",
          value: 0,
        },
        {
          name: "巫溪县",
          value: 0,
        },
        {
          name: "石柱土家族自治县",
          value: 0,
        },
        {
          name: "秀山土家族苗族自治县",
          value: 0,
        },
        {
          name: "酉阳土家族苗族自治县",
          value: 0,
        },
        {
          name: "彭水苗族土家族自治县",
          value: 0,
        },
      ],
      mapChart: null,
      mapType: {
        '红色': '#ff0b0b',
        '橙色': '#ff833d',
        '黄色': '#fbff3d',
        '蓝色': '#35c2ff',
        '绿色': '#5aed9f'
      },
      textInfo:`<div style="color: #fff;">
    <h1 style="text-align: center;">
        <span style="color: rgb(255, 255, 255);">区域高层建筑消防安全风险分色判定标准</span>
    </h1>
    <h1 style="text-align: center;">
        <span style="color: rgb(255, 255, 255);">（试行）</span>
    </h1>
    <p style="text-indent: 31.6pt; text-align: center;"></p>
    <p style="text-indent: 31.6pt;">
        <span style=" color: rgb(255, 255, 255);">一、区域高层建筑消防安全风险分色</span>
    </p>
    <p style="text-indent: 31.6pt;">
        <span style="color: rgb(255, 255, 255);">根据辖区高层建筑火灾、隐患情况，将各区县高层建筑消防安全指数分中心城区、主城新区、渝东北、渝东南四个片区分别由高到低进行排序：位于本片区前20%的，为高风险区，展示红色；位于本片区20%至40%的，为较高风险区，展示橙色；位于本片区40%至60%的，为中风险区，展示黄色；位于本片区60%至80%的，为较低风险区，展示蓝色；位于本片区80%至100%的，为低风险区，展示绿色。发生较大以上火灾事故的，展示红色。</span>
    </p>
    <p style="text-indent: 31.6pt;">
        <span style=" color: rgb(255, 255, 255);">二、区域高层建筑消防安全指数计算</span>
    </p>
    <p style="text-indent: 31.6pt;">
        <span style="color: rgb(255, 255, 255);">区域高层建筑消防安全指数，是综合火灾起数、亡人数、直接财产损失数及区域内重大、较大、一般、低风险建筑数等情况，加权计算所得。</span>
    </p>
    <table width="100%" style="color: #fff; padding: 0 40px;" border="1">
        <colgroup>
            <col width="103"/>
            <col width="103"/>
            <col width="103"/>
            <col width="301"/>
        </colgroup>
        <tbody style="text-align: center; line-height: 30px; border: #fff 1px solid;">
            <tr class="firstRow">
                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;"></th>
                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;">
                    <span style="color: rgb(255, 255, 255);">二级指标</span>
                </th>
                <th colspan="1" rowspan="1" style="border-right-width: 3px;">
                    <span style="color: rgb(255, 255, 255);">权重</span>
                </th>
                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;">
                    <span style="color: rgb(255, 255, 255);">描述</span>
                </th>
            </tr>
            <tr>
                <td colspan="1" rowspan="3">
                    <span style="color: rgb(255, 255, 255);">高层建筑火灾指数</span>
                </td>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">火灾起数</span>
                </td>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">0.25</span>
                </td>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">近一年，本区域内火灾总数与最大火灾起数的比值</span>
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">亡人数</span>
                </td>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">0.125</span>
                </td>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">近一年，本区域内火灾亡人总数与最大数的比值</span>
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">直接财产损失</span>
                </td>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">0.125</span>
                </td>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">近一年，本区域内火灾直接财产损失与最大数的比值</span>
                </td>
            </tr>
            <tr>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">高层建筑隐患指数</span>
                </td>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">本区域中不同风险建筑数</span>
                </td>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">0.5</span>
                </td>
                <td colspan="1" rowspan="1">
                    <span style="color: rgb(255, 255, 255);">按建筑火灾风险不同，重大、较大、一般、低风险分别计8、4、2、1，求和得本区域建筑风险数，再与最大数的比值</span>
                </td>
            </tr>
        </tbody>
    </table>
    <p style="text-indent: 31.6pt;">
        <span style="color: rgb(255, 255, 255);">备注：根据《重庆市国土空间总体规划（2021—2035年）》，划分为四个片区。</span>
    </p>
    <p style="text-indent: 31.6pt;">
        <span style="color: rgb(255, 255, 255);">中心城区：渝中、大渡口、江北、沙坪坝、九龙坡、南岸、北碚、渝北、巴南、两江、高新区；</span>
    </p>
    <p style="text-indent: 31.6pt;">
        <span style="color: rgb(255, 255, 255);">主城新区：涪陵、长寿、江津、合川、永川、南川、綦江、大足、璧山、铜梁、潼南、荣昌、万盛、双桥；</span>
    </p>
    <p style="text-indent: 31.6pt;">
        <span style="color: rgb(255, 255, 255);">渝东南∶黔江区、武隆区、石柱县、秀山县、酉阳县、彭水县；</span>
    </p>
    <p style="text-indent: 31.6pt;">
        <span style="color: rgb(255, 255, 255);">渝东北：万州区、开州区、梁平区、城口县、丰都县、垫江县、忠县、云阳县、奉节县、巫山县、巫溪县。</span>
    </p>
    <p style="text-indent: 31.6pt;"></p>
    <p></p>
    <p>
        <br/>
    </p>
</div>`
    };
  },
  watch: {
    qx(val) {
      this.mapChart.dispatchAction({
        type: "select",
        name: val
      })
    },
    mapHeatData: {
      handler(val) {
      if (val.length > 0) {
          this.mapChart.setOption({
            series: [
              {
                data: this.convertMapData(val)
              }
            ],
            visualMap: {
              max: this.calcMaxData(val),
              pieces: (() => {
                const maxData = this.calcMaxData(val)
                const intData = toInt(Math.ceil(maxData / 5))
                return [
                  {min: intData*4, max: intData * 5, label: '高风险'},
                  {min: intData*3, max: intData * 4, label: '较高风险'},
                  {min: intData*2, max: intData * 3, label: '中风险'},
                  {min: intData, max: intData * 2, label: '较低风险'},
                  {min: 0, max: intData, label: '低风险'},
                ]
              })()
            }
          })
        }
      },
      deep: true
    }
  },
  created() {
    const array = [];
    const _data = this.mapData;
    for (const key in _data) {
      array.push({
        name: key,
        value: _data[key],
      });
    }
    this.activeMapData = array;
  },
  mounted() {
    this.drawMap();
  },
  methods: {
    convertMapData(data) {
      // const maxValue = (this.calcMaxData(data) / 5)
      // const intData = toInt(maxValue)
      return data.map(item => ({...item,
          label: {
            color:  '#000'
          }
        }))
    },
    calcMaxData(data) {
      return Math.max(...data.map(item => item.value))
    },
    drawMap() {
      const mapChart = this.$refs.map;
      echarts.registerMap("chongqing", this.activeMap);
      let data = this.heatData

      const { mapName } = this;

      const zoom = 1.27;
      const aspectScale = 1.1;

      const option = {
        title: {
          top: 0,
          subtext: "",
          x: "center",
          textStyle: {
            color: "#ccc",
          },
        },
        geo: [
          {
            map: mapName,
            zlevel: -1,
            zoom,
            aspectScale,
            silent: true,
            layoutCenter: ["50%", "50%"],
            layoutSize: "100%",
            roam: false,
            itemStyle: {
              normal: {
                borderColor: "rgba(192,245,249,.8)",
                borderWidth: 3,
                shadowColor: "#6FFDFF",
                shadowOffsetY: 0,
                shadowBlur: 10,
              },
            },
          },
          {
            show: true,
            map: mapName,
            zoom,
            aspectScale,
            layoutCenter: ["50%", "50%"],
            layoutSize: "100%",
            blur: {
              label: { show: true, color: "#000" },
            },
            roam: false, // 是否开启鼠标滚轮缩放
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                color: "#fff",
                borderColor: "#32CBE0",
                borderWidth: 1.5,
                areaColor: '#aaaaaa88'
              },
            },
          },
          {
            type: "map",
            map: mapName,
            zlevel: -2,
            zoom,
            aspectScale,
            layoutCenter: ["50%", "51.4%"],
            layoutSize: "100%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderColor: "rgba(35, 161, 184,0.5)",
                shadowColor: "rgba(35, 161, 184,0.8)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "#257AB2",
              },
            },
          },
          {
            type: "map",
            map: mapName,
            zlevel: -3,
            zoom,
            aspectScale,
            layoutCenter: ["50%", "52.4%"],
            layoutSize: "100%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderColor: "rgba(7, 65, 117,0.5)",
                shadowColor: "rgba(7, 65, 117,0.8)",
                shadowOffsetY: 15,
                shadowBlur: 8,
                areaColor: "#0A2763",
              },
            },
          },
        ],
        tooltip: {
          trigger: "item",
          position: "top",
          backgroundColor: "rgba(0, 0, 0, 0.82)",
          formatter: this.formatter,
          textStyle: {
            color: "#33F0FF",
          },
          extraCssText: `z-index: 1000;margin:0px;padding:0px;
  border: 1px solid rgba(61, 115, 255, 0.72);`,
          borderWidth: 0,
        },
        visualMap: {
          show: true,
          type: 'piecewise',
          bottom: 20,
          right: 50,
          max: this.calcMaxData(data),
          inRange: {
            color: [
              '#ff0b0b',
              '#ff833d',
              '#fbff3d',
              '#35c2ff',
              '#5aed9f'
            ].reverse(),
          },
          calculable: true,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          pieces: (() => {
            const maxData = this.calcMaxData(data)
            const intData = toInt(Math.ceil(maxData / 5))
            return [
              {min: intData*4, max: intData * 5, label: '高风险'},
              {min: intData*3, max: intData * 4, label: '较高风险'},
              {min: intData*2, max: intData * 3, label: '中风险'},
              {min: intData, max: intData * 2, label: '较低风险'},
              {min: 0, max: intData, label: '低风险'},
            ]
          })()
        },
        series: [
          {
            name: "总览",
            type: "map",
            label: {
              position: [0, 0],
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
              color: "#fff",
            },
            select: {
              label: {
                // 选中区域的label(文字)样式
                color: "#fff",
              },
              itemStyle: {
                areaColor: "#9f5aed",
                borderColor: "#fff",
                shadowColor: "#5a9cdd",
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#fff",
                borderColor: "#75b9da", // 地图边缘线颜色
                borderWidth: 2
              },

              emphasis: {
                label: {
                  fontSize: 24,
                  textBorderColor: "#393523",
                  textBorderWidth: 2,
                },
                borderColor: "#fff",
                shadowColor: "#5a9cdd",
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#06969d", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#1daedc",
                    },
                  ],
                },
              },
            },
            aspectScale, // 长宽比
            zoom,
            layoutCenter: ["50%", "50%"],
            layoutSize: "100%",
            map: mapName, // 使用
            data: this.convertMapData(data),
          },
        ],
      };
      this.mapChart = echarts.init(mapChart, "light");
      this.mapChart.setOption(option);
    toolUtils.autoHover(this.mapChart, option, 24, 10 * 1000);
      // 图表对象响应式设置
      window.addEventListener("resize", () => {
        this.mapChart.resize();
      });
      //
      this.mapChart.on("click", (params) => {
        if(params.seriesType === 'map'){
          if (params.name !== this.activeArea) {
            this.activeArea = params.name
            this.$emit('selectArea', params.name)
          } else {
            if (this.activeArea === "") {
            this.activeArea = params.name
            this.$emit('selectArea', params.name)
            } else {
              this.activeArea = ""
              this.$emit('selectArea', "重庆市")
            }
          }
        }
      });
    },
    getShoeInfo(name){
      this.showModal(name);
    },
  },
};
</script>
<style scoped>
.map-box {
  width: 100%;
  /* height: 98%; */
  height: 632px;
  /* background: blue; */
}
.imgs{
 position: absolute;
 right: 60px;
 bottom: 150px;
 cursor: pointer;
}
</style>
