<script setup lang="ts">
import { defineProps } from "vue";
import Echart from "./Echarts.vue";
import { IDataType } from "./types";
import { computed } from "@vue/reactivity";
import { convertData } from "../utils";
interface IProps {
  data: IDataType[];
}

const props = defineProps<IProps>();

const option = computed<any>(() => ({
  backgroundColor: {
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#0f378f" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#00091a" // 100% 处的颜色
      }
    ],
    globalCoord: false // 缺省为 false
  },
  tooltip: {
    trigger: "item",
    formatter: function (params: any) {
      if (typeof params.value[2] == "undefined") {
        return params.name + " : " + params.value;
      } else {
        return params.name + " : " + params.value[2];
      }
    }
  },
  visualMap: {
    show: false,
    min: 0,
    max: 500,
    left: "left",
    top: "bottom",
    text: ["高", "低"], // 文本，默认为数值文本
    calculable: true,
    seriesIndex: [1],
    inRange: {}
  },
  geo: {
    map: "china",
    show: true,
    roam: true,
    label: {
      show: false
    },
    itemStyle: {
      areaColor: "#3a7fd5",
      borderColor: "#0a53e9", //线
      shadowColor: "#092f8f", //外发光
      shadowBlur: 20
    }
  },
  series: [
    {
      symbolSize: 5,
      label: {
        formatter: "{b}",
        position: "right",
        show: true
      },
      name: "light",
      type: "scatter",
      coordinateSystem: "geo",
      data: convertData(props.data)
    },
    {
      type: "map",
      map: "china",
      geoIndex: 0,
      aspectScale: 0.75, //长宽比
      showLegendSymbol: false, // 存在legend时显示
      label: {
        show: false
      },
      roam: true,
      itemStyle: {
        areaColor: "#031525",
        borderColor: "#FFFFFF"
      },
      animation: false,
      data: props.data
    },
    {
      name: "Top 5",
      type: "scatter",
      coordinateSystem: "geo",
      symbol: "pin",
      symbolSize: [50, 50],
      label: {
        show: true,
        color: "#fff",
        fontSize: 9,
        formatter(value: any) {
          return value.data.value[2];
        }
      },
      itemStyle: {
        color: "#D8BC37" //标志颜色
      },
      data: convertData(props.data),
      showEffectOn: "render",
      rippleEffect: {
        brushType: "stroke"
      },
      zlevel: 1
    }
  ]
}));
</script>

<template>
  <Echart :option="option" />
</template>
