<script setup>
import * as echarts from "echarts";
import { onMounted, ref, markRaw } from "vue";
import axios from "axios";

const props = defineProps({
  option: Object,
  className: String,
  id: String,
  svg: Object,
  getCoordinate: {
    type: Function,
    default: null
  },
});

let chart = ref(null);
let dom = ref(null);
let currentClickPosition = ref([]);

async function updateSvg(svg, option) {
  if (!chart.value && dom.value && svg) {
    init();
  }
  axios.get(svg.path).then(({ data }) => {
    echarts.registerMap(svg.full_name, { svg: data });
    chart.value.setOption(option);
    if (props.getCoordinate) {
      chart.value.getZr().on("click", function (params) {
        var pixelPoint = [params.offsetX, params.offsetY];
        var dataPoint = chart.value.convertFromPixel({ geoIndex: 0 }, pixelPoint);
        currentClickPosition.value = dataPoint;
        props.getCoordinate(dataPoint);
        chart.value.setOption({
          series: {
            data: [dataPoint],
          },
        });

      });
    }

  });
  console.log("updateSvg", svg.path);
}

function init() {
  const curChart = echarts.init(dom.value);
  chart.value = markRaw(curChart);
}

onMounted(() => {
  if (!chart.value && dom.value && props.svg) {
    init();
  }
});

defineExpose({
  chart,
  currentClickPosition,
  updateSvg,
});
</script>
<template>
  <div :id="id" class="min-h-[70vh] max-h-fit w-full bg-white" ref="dom"></div>
</template>

<style lang="scss" scoped></style>
