<template>
  <div>
    <svg id="map" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
      y="0px" viewBox="0 0 1920 1000" style="enable-background: new 0 0 1920 1000" xml:space="preserve">
      <font horiz-adv-x="1000">
        <!-- Copyright 2014 Adobe Systems Incorporated. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. -->
        <font-face font-family="SourceHanSansCN-Bold-GBpc-EUC-H" units-per-em="1000" underline-position="-150"
          underline-thickness="50" />
        <missing-glyph horiz-adv-x="1000"
          d="M100,-120l800,0l0,1000l-800,0M500,421l-318,409l636,0M532,380l318,409l0,-818M182,-70l318,409l318,-409M150,789l318,-409l-318,-409z" />
        <glyph unicode="4" horiz-adv-x="589"
          d="M164,304l115,184C300,528 320,569 338,608l4,0C340,565 336,498 336,455l0,-151M561,304l-88,0l0,436l-176,0l-276,-448l0,-100l315,0l0,-192l137,0l0,192l88,0z" />
      </font>

      <vmap />
      <state :map="map" />
    </svg>
  </div>
</template>

<script setup>
import state from "./state.vue";
import vmap from "./map.vue";
import {
  ref,
  defineEmits,
  onMounted,
  watch,
  computed,
  nextTick,
  defineExpose,
} from "vue";
import { map } from "@/data/map.js";

import { getCityList } from "@/config/api";

const hammer = ref("");

// 给父组件调用的改变地图数据的方法
const changeMap = (id) => {
  if (id === "scene") mapNumChane("exhibition");
  else mapNumChane("museum");
};
defineExpose({
  changeMap,
});

const mapNumChane = async (type) => {
  let res = await getCityList(type);
  res.data.forEach((item) => {
    let idx = map.findIndex((sub) => item.name == sub.name);
    map[idx] = {
      ...map[idx],
      num: item.sum >= 10 ? item.sum : "&nbsp;" + item.sum,
      sum: item.sum,
      rowid: item.id,
    };
  });


  map.forEach((item) => {
    if (item.sum == 0) {
      $("#state").find(`g[id="${item.id}"] rect`).css({
        fill: "#999",
      });

      $("#state").find(`g[id="${item.id}"] .st0`).css({
        fill: "#fff",
      });

      $("#state").find(`g[id="${item.id}"] .st19`).css({
        fill: "#D9D9D9",
      });

      $("#state").find(`g[id="${item.id}"] .st28`).css({
        fill: "#fff",
      });

      $("#state").find(`g[id="${item.id}"] text`).css({
        fill: "#5A5A5A",
      });

      $("#state").find(`g[id="${item.id}"]`).attr("data-rowId", item.rowid);

      //map
      $("#map_1_")
        .find(`g[id="${item.id.replace("id", "tag")}"] rect`)
        .css({
          fill: "#999",
        });

      $("#map_1_")
        .find(`g[id="${item.id.replace("id", "tag")}"] .st0`)
        .css({
          fill: "#fff",
        });

      $("#map_1_")
        .find(`g[id="${item.id.replace("id", "tag")}"] .st19`)
        .css({
          fill: "#D9D9D9",
        });

      $("#map_1_")
        .find(`g[id="${item.id.replace("id", "tag")}"] .st28`)
        .css({
          fill: "#fff",
        });

      $("#map_1_")
        .find(`g[id="${item.id.replace("id", "tag")}"] text`)
        .css({
          fill: "#5A5A5A",
        });

      $("#map_1_")
        .find(`g[id="${item.id.replace("id", "tag")}"] rect`)
        .css({
          fill: "#999",
        });
    } else {
      $("#state").find(`g[id="${item.id}"] rect`).css({
        fill: "#eecc63",
      });

      $("#state").find(`g[id="${item.id}"] .st0`).css({
        fill: "#b61e22",
      });

      $("#state").find(`g[id="${item.id}"] .st19`).css({
        fill: "#eecc63",
      });

      $("#state").find(`g[id="${item.id}"] .st28`).css({
        fill: "#333333",
      });

      $("#state").find(`g[id="${item.id}"] text`).css({
        fill: "#b61e22",
      });

      $("#state").find(`g[id="${item.id}"]`).attr("data-rowId", item.rowid);

      // //map
      $("#map_1_")
        .find(`g[id="${item.id.replace("id", "tag")}"] rect`)
        .css({
          fill: "#b61e22",
        });

      $("#map_1_")
        .find(`g[id="${item.id.replace("id", "tag")}"] .st0`)
        .css({
          fill: "#b61e22",
        });

      $("#map_1_")
        .find(`g[id="${item.id.replace("id", "tag")}"] .st19`)
        .css({
          fill: "#eecc63",
        });

      $("#map_1_")
        .find(`g[id="${item.id.replace("id", "tag")}"] .st28`)
        .css({
          fill: "#333333",
        });

      $("#map_1_")
        .find(`g[id="${item.id.replace("id", "tag")}"] text`)
        .css({
          fill: "#b61e22",
        });

      $("#map_1_")
        .find(`g[id="${item.id.replace("id", "tag")}"] rect`)
        .css({
          fill: "#b61e22",
        });
    }

    $("#map_1_")
      .find(`g[id="${item.id.replace("id", "tag")}"] text`)
      .html(item.num);
    $("#state").find(`g[id="${item.id}"] text`).html(item.num);
  });
};
// museum|exhibition
onMounted(() => {
  nextTick(async () => {
    mapNumChane("museum");

    // --------------
    if (!window.Hammer) {
      return;
    }

    var eventsHandler;

    eventsHandler = {
      haltEventListeners: [
        "touchstart",
        "touchend",
        "touchmove",
        "touchleave",
        "touchcancel",
      ],
      init: function (options) {
        var instance = options.instance,
          initialScale = 1,
          pannedX = 0,
          pannedY = 0;

          instance.zoom(1.3);
          instance.pan({ x: 0, y: 200 })
      
        // Init Hammer
        // Listen only for pointer and touch events
        this.hammer = window.Hammer(options.svgElement, {
          inputClass: window.Hammer.SUPPORT_POINTER_EVENTS
            ? window.Hammer.PointerEventInput
            : window.Hammer.TouchInput,
        });

        // Enable pinch
        this.hammer.get("pinch").set({ enable: true });

        // Handle double tap
        this.hammer.on("doubletap", function () {
          instance.zoomIn();
        });

        // Handle pan
        this.hammer.on("panstart panmove", function (ev) {
          // On pan start reset panned variables
          if (ev.type === "panstart") {
            pannedX = 0;
            pannedY = 0;
          }

          // Pan only the difference
          instance.panBy({ x: ev.deltaX - pannedX, y: ev.deltaY - pannedY });
          pannedX = ev.deltaX;
          pannedY = ev.deltaY;
        });

        // Handle pinch
        this.hammer.on("pinchstart pinchmove", function (ev) {
          // On pinch start remember initial zoom
          if (ev.type === "pinchstart") {
            initialScale = instance.getZoom();
            instance.zoomAtPoint(initialScale * ev.scale, {
              x: ev.center.x,
              y: ev.center.y,
            });
          }

          instance.zoomAtPoint(initialScale * ev.scale, {
            x: ev.center.x,
            y: ev.center.y,
          });
        });

        // Prevent moving the page on some devices when panning over SVG
        options.svgElement.addEventListener("touchmove", function (e) {
          e.preventDefault();
        });
      },

      destroy: function () {
        this.hammer.destroy();
      },
    };

    // Expose to window namespace for testing purposes
    window.panZoom = window.svgPanZoom("#map", {
      zoomEnabled: true,
      controlIconsEnabled: true,
      fit: 1,
      center: 1,
      maxZoom: 5,
      minZoom: 0.5,
      zoomFactor: 0.01,
      // 禁止双击放大
      dblClickZoomEnabled:false,
      customEventsHandler: eventsHandler,
    });
  });
});
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>