<!--
 * @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 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",
  },
  {
    name: "丰润镇",
    index: 32,
    a: 31,
    b: 2,
    c: 21595,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "欢喜庄乡",
    index: 4,
    a: 4,
    b: 3,
    c: 2744,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "姜家营乡",
    index: 8,
    a: 8,
    b: 4,
    c: 3611,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "刘家营乡",
    index: 10,
    a: 10,
    b: 5,
    c: 4960,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "七树庄镇",
    index: 10,
    a: 10,
    b: 6,
    c: 6094,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "任各庄镇",
    index: 21,
    a: 19,
    b: 7,
    c: 12244,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "石各庄镇",
    index: 12,
    a: 7,
    b: 8,
    c: 5569,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "小张各庄镇",
    index: 10,
    a: 0,
    b: 90,
    c: 6861,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "新军屯镇",
    index: 30,
    a: 29,
    b: 0,
    c: 14451,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "银城铺镇",
    index: 11,
    a: 11,
    b: 0,
    c: 8517,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "火石营镇",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "黄昏峪乡",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "左家坞镇",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "王官营镇",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "泉河头镇",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "杨官林镇",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "丰润区城区",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "银城铺乡",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "常庄乡",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "白官屯镇",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "新庄子乡",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "燕子河乡",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "三女河乡",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "老庄子镇",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "李钊庄镇",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  },
  {
    name: "沙流河镇",
    index: 0,
    a: 0,
    b: 0,
    c: 0,
    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: pingshanArr, 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>
