<!--
 * @Author: your name
 * @Date: 2022-04-21 09:47:01
 * @LastEditTime: 2023-07-20 09:10:00
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/CharBoxE.vue
-->
<template>
  <div class="chars-wrapper">
    <Chars ref="chars" :options="options" />
  </div>
</template>

<script>
import Chars from "@/components/allCharsCom/Chars";
import Infowindow from "./Infowindow";
import { pingshanArr } from "@/utils/echarsMap/pingshan";
import { anpingxianArr} from "@/utils/echarsMap/anpingxian";
import axios from "axios";
const data = [
  // 每个县点击时显示数据格式
  // {
  //   name: "丰登坞镇",
  //   index: 21,
  //   a:21,
  //   b: 21,
  //   c: 7149,
  //   d: 0,
  //   e: 0,
  //   f: 0,
  //   g: "0/0",
  //   h: "0/0",
  //   i: "0/0",
  // }
];

export default {
  name: "",
  components: {
    Chars,
  },
  data() {
    return {
      options: {},
    };
  },
  mounted() {
    this.getPath();

    this.$refs.chars.myChats.on("mousedown", () => {
      // this.closeToolTip();
    });
    this.$refs.chars.myChats.on("georoam", () => {
      // this.closeToolTip();
    });
  },
  methods: {
    async getPath() {
      // const res = await axios(
      //   "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/HK.json"
      // );
      const geoJson = { features: anpingxianArr, type: "FeatureCollection" };
      console.log(geoJson);
      this.$echarts.registerMap("HK", geoJson);
      this.options = {
        roam: true,
        tooltip: {
          trigger: "item",
          triggerOn: "click",
          enterable: true,
          alwaysShowContent: true,
          // transitionDuration:0,
          formatter: (p) => {
            console.log("p", p);
            const dom = this.createDom(p.data, this);
            return dom;
          },
          borderWidth: 0,
          padding: 0,
          className: "echarts-tooltip",
        },
        series: [
          {
            name: "香港18区人口密度",
            type: "map",
            map: "HK",
            label: {
              show: true,
              color: "#fff",
              fontSize: 14,
              fontWeight: 700,
            },
            select: {
              // 地图选中区域样式
              label: {
                // 选中区域的label(文字)样式
                color: "#ffffff",
              },
              itemStyle: {
                // 选中区域的默认样式
                areaColor: "#EEC25B",
              },
            },
            itemStyle: {
              // normal: {
              borderWidth: 3, //边际线大小
              borderColor: "#ffffff",
              //边界线颜色
              areaColor: "#1A91FF", //默认区域颜色
              // areaShadowColor: "rgba(0, 0, 0, 0.5)",
              // areaShadowBlur: 10,
              // areaShadowOffsetY:0,
              // areaShadowOffsetX:0,
              // },
            },
            emphasis: {
              show: true,
              itemStyle: {
                areaColor: "#EEC25B", //鼠标滑过区域颜色
              },

              label: {
                show: true,
                // textStyle: {
                color: "#fff",
                // },
              },
            },
            data,
            // 自定义名称映射
            // nameMap: {
            //   "Central and Western": "中西区",
            //   Eastern: "东区",
            //   Islands: "离岛",
            //   "Kowloon City": "九龙城",
            //   "Kwai Tsing": "葵青",
            //   "Kwun Tong": "观塘",
            //   North: "北区",
            //   "Sai Kung": "西贡",
            //   "Sha Tin": "沙田",
            //   "Sham Shui Po": "深水埗",
            //   Southern: "南区",
            //   "Tai Po": "大埔",
            //   "Tsuen Wan": "荃湾",
            //   "Tuen Mun": "屯门",
            //   "Wan Chai": "湾仔",
            //   "Wong Tai Sin": "黄大仙",
            //   "Yau Tsim Mong": "油尖旺",
            //   "Yuen Long": "元朗",
            // },
          },
        ],
      };
    },
    createDom(data, parent) {
      const Component = this.$Vue.extend(Infowindow);
      const com = new Component();
      // console.log(com.data=data)
      return new Component({
        data() {
          return { data, parent };
        },
      }).$mount().$el;
    },
    closeToolTip() {
      this.$refs.chars.myChats.dispatchAction({
        type: "hideTip",
      });
      // const dom = document.getElementsByClassName('tooltip-box')[0];
      // const parent =dom.parentElement;
      // parent.removeChild(dom);
      console.log("关闭");
    },
  },
};
</script>
<style lang="scss" scoped>
.chars-wrapper {
  width: 100%;
  height: 100%;
}
</style>
