<template>
  <div class="map-box" ref="map"></div>
</template>

<script>
import * as echarts from "echarts";
import jsonCq from "@/assets/json/cq.json";

export default {
  name: "MapCharts",
  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,
      // mapIcon: require("@/assets/images/map-icon.png"),
      activeName: "重庆市",
      activeMapData: [],
      heatData: [
        {
          name: "万州区",
          value: 320,
        },
        {
          name: "涪陵区",
          value: 21,
        },
        {
          name: "渝中区",
          value: 121,
        },
        {
          name: "大渡口区",
          value: 21,
        },
        {
          name: "江北区",
          value: 32,
        },
        {
          name: "沙坪坝区",
          value: 32,
        },
        {
          name: "九龙坡区",
          value: 12,
        },
        {
          name: "南岸区",
          value: 134,
        },
        {
          name: "北碚区",
          value: 11,
        },
        {
          name: "綦江区",
          value: 323,
        },
        {
          name: "大足区",
          value: 23,
        },
        {
          name: "渝北区",
          value: 123,
        },
        {
          name: "巴南区",
          value: 89,
        },
        {
          name: "黔江区",
          value: 111,
        },
        {
          name: "长寿区",
          value: 150,
        },
        {
          name: "江津区",
          value: 111,
        },
        {
          name: "合川区",
          value: 19,
        },
        {
          name: "永川区",
          value: 16,
        },
        {
          name: "南川区",
          value: 21,
        },
        {
          name: "璧山区",
          value: 32,
        },
        {
          name: "铜梁区",
          value: 45,
        },
        {
          name: "潼南区",
          value: 121,
        },
        {
          name: "荣昌区",
          value: 111,
        },
        {
          name: "开州区",
          value: 34,
        },
        {
          name: "梁平区",
          value: 56,
        },
        {
          name: "武隆区",
          value: 12,
        },
        {
          name: "城口县",
          value: 15,
        },
        {
          name: "丰都县",
          value: 45,
        },
        {
          name: "垫江县",
          value: 32,
        },
        {
          name: "忠县",
          value: 40,
        },
        {
          name: "云阳县",
          value: 1,
        },
        {
          name: "奉节县",
          value: 12,
        },
        {
          name: "巫山县",
          value: 65,
        },
        {
          name: "巫溪县",
          value: 145,
        },
        {
          name: "石柱土家族自治县",
          value: 67,
        },
        {
          name: "秀山土家族苗族自治县",
          value: 87,
        },
        {
          name: "酉阳土家族苗族自治县",
          value: 100,
        },
        {
          name: "彭水苗族土家族自治县",
          value: 123,
        },
      ],
    };
  },
  // props: {
  //   isChangeMap: {
  //     type: Boolean,
  //     required: false,
  //   },
  //   heatDataList: {
  //     type: Array,
  //     required: false,
  //   },
  // },
  watch: {
    heatDataList(val, oldVal) {
      let heatDataList = [
        {
          requiredid: 5001090000,
          areaTitle: "沙坪坝",
          value: 1,
          longitude: 0,
          latitude: 0,
        },
        {
          requiredid: 5001090000,
          areaTitle: "江北",
          value: 5000,
          longitude: 0,
          latitude: 0,
        },
        {
          requiredid: 5001090000,
          areaTitle: "渝中",
          value: 100000,
          longitude: 0,
          latitude: 0,
        },
        {
          requiredid: 5001090000,
          areaTitle: "大渡口",
          value: 100000,
          longitude: 0,
          latitude: 0,
        },
        {
          requiredid: 5001090000,
          areaTitle: "九龙",
          value: 100000,
          longitude: 0,
          latitude: 0,
        },
        {
          requiredid: 5001090000,
          areaTitle: "市辖区",
          value: 1000000,
          longitude: 0,
          latitude: 0,
        },
      ];
      // this.heatData = this.heatDataList.map((e) => {
      //   // this.heatData = heatDataList.map((e) => {
      //   return {
      //     name: e.areaTitle,
      //     // value: e.value ? e.value * 1000000 : 0,
      //     value: e.value ? e.value : 0,
      //   };
      // });

      this.drawMap();
    },
    isChangeMap(val, oldVal) {
      if (val == false) {
        this.heatData = [];
        this.drawMap();
      }
    },
  },
  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: {
    convertData(data) {
      let res = [];

      data.forEach((e, i) => {
        let geoCoord;

        for (let k in this.mapData) {
          if (e.name.indexOf(k) > -1) {
            geoCoord = this.mapData[k];
            if (geoCoord) {
              res.push({
                name: e.name,
                value: geoCoord.concat(e.value),
              });
            }
          }
        }
      });

      return res;
    },
    drawMap() {
      const mapChart = this.$refs.map;
      echarts.registerMap("chongqing", this.activeMap);

      let data = this.heatData;

      let convertedData = [
        this.convertData(data),
        this.convertData(
          data.sort(function (a, b) {
            return b.value - a.value;
          })
        ),
      ];

      let maxMap = Math.max(...convertedData[0].map((item) => item.value[2]));

      // console.log("convertedData---", convertedData);
      // console.log("maxMap---", maxMap);

      const { mapName, mapIcon } = this;

      // const zoom = 1.27;
      // const aspectScale = 1.2;
      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,
                // areaColor: 'rgba(29,85,139,.6)',
              },
            },
          },
          {
            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: {
                  type: "linear-gradient",
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0.5,
                      color: "#0D59C1", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#53C9C7", // 100% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
            },
          },
          {
            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: "inside",
          position: "top",
          backgroundColor: "rgba(51,204,204,0)",
          // backgroundColor: "rgba(51,204,204,0.3)",
          // formatter: function (params) {
          //   // let res = params.name + "<br/>";
          //   // let res = 666 + "<br/>";
          //   let res = "";
          //   // res +=
          //   //   "<img style='width:85px;height:100px; margin-top:-50px' src='" +
          //   //   mapIcon +
          //   //   "'/>";
          //   res +=
          //     "<img style='width:85px;height:100px;margin-bottom:-50px' src='" +
          //     mapIcon +
          //     "'/>";
          //   return res;
          // },
          textStyle: {
            color: "#fff",
          },
        },
        // visualMap: {
        //   show: false,
        //   min: 0,
        //   max: 10,
        //   pieces: [
        //     {
        //       min: 10,
        //     },
        //     {
        //       min: 5,
        //       max: 10,
        //     },
        //     {
        //       min: 1,
        //       max: 5,
        //     },
        //     {
        //       max: 1,
        //     },
        //   ],
        //   inRange: {
        //     color: ["#ffff00", "#ff0000"],
        //   },

        //   textStyle: {
        //     color: "#fff",
        //   },
        // },
        visualMap: {
          show: true,
          bottom: 20,
          left: 10,
          // color: ["#b5f8ff", "#235d99"],
          // min: 1000,
          // max: 38000000,
          inRange: {
            color: [
              // '#313695',
              // '#4575b4',
              // '#74add1',
              // '#abd9e9',
              // '#e0f3f8',
              // '#ffffbf',
              // '#fee090',
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
          // min: 0,
          // max: maxMap > 0 ? maxMap : 1,
          calculable: true,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        series: [
          {
            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: "#75b9da",
                borderColor: "#0f417f",
                shadowColor: "#5a9cdd",
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#fff",
                // borderColor: '#a6eeff',
                borderColor: "#75b9da", // 地图边缘线颜色
                borderWidth: 2,
                // areaColor: "#0f417f",
              },

              emphasis: {
                label: {
                  fontSize: 24,
                  textBorderColor: "#393523",
                  textBorderWidth: 2,
                },
                borderColor: "#0f417f",
                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: data,
          },
        ],
      };
      const chart = echarts.init(mapChart, "light");
      chart.setOption(option);
      // chart.on('click',res=>{
      //     return fn(res);
      // });
      // 图表对象响应式设置
      window.addEventListener("resize", () => {
        chart.resize();
      });

      // const myChart = this.$initCharts(mapChart, option);
      // this.charts.setOption(option);
      // myChart.on("click", (params) => {});

      // let _this = this;
      // let current = 0;
      // clearInterval(_this.timed);

      // _this.timed = setInterval(() => {
      //   current++;
      //   if (current == _this.activeMapData.length) {
      //     current = 0;
      //   }

      //   // 取消高亮
      //   myChart.dispatchAction({
      //     type: "downplay",
      //     seriesIndex: 0,
      //   });
      //   myChart.dispatchAction({
      //     type: "hideTip",
      //     seriesIndex: 0,
      //   });
      //   // 高亮
      //   myChart.dispatchAction({
      //     type: "highlight",
      //     seriesIndex: 0,
      //     dataIndex: current,
      //   });
      //   myChart.dispatchAction({
      //     type: "showTip",
      //     seriesIndex: 0,
      //     dataIndex: current,
      //   });
      // }, 2000);

      // myChart.on("mouseover", function () {
      //   clearInterval(_this.timed);
      // });
      // myChart.on("mouseout", function () {
      //   clearInterval(_this.timed);
      //   _this.timed = setInterval(() => {
      //     current++;
      //     if (current == _this.activeMapData.length) {
      //       current = 0;
      //     }

      //     // 取消高亮
      //     myChart.dispatchAction({
      //       type: "downplay",
      //       seriesIndex: 0,
      //     });
      //     myChart.dispatchAction({
      //       type: "hideTip",
      //       seriesIndex: 0,
      //     });
      //     // 高亮
      //     myChart.dispatchAction({
      //       type: "highlight",
      //       seriesIndex: 0,
      //       dataIndex: current,
      //     });
      //     myChart.dispatchAction({
      //       type: "showTip",
      //       seriesIndex: 0,
      //       dataIndex: current,
      //     });
      //   }, 2000);
      // });
    },
  },
};
</script>
<style scoped>
.map-box {
  width: 100%;
  /* height: 98%; */
  height: 632px;
  /* background: blue; */
}
</style>
