<script setup lang="ts">
import { Ref, defineProps, watchEffect } from 'vue';
import type { EChartsOption } from 'echarts'
import { useECharts } from '../../../hooks/web/useECharts';
import { colorList, mergeOptions } from '../../../components/chart/options/index'
import { registerMap } from 'echarts';
import { isObject } from '../../../utils/is';
import useEchartsAutoTooltip from '../../../components/chart/logic/useEchartsAutoTooltip';
import { shandongCoords } from '../../../assets/map/shandong';
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);


interface MapChartProps {
  title?: string,
  /**
   * 图表数据
   */
  chartData: any[],
  tooltipFormatter?: string | ((params:any, ticket: any, callback:any) => string);
  /**
   * 是否需要手动设置一些其它的设置，需要结合otherOptions才能起作用
   */
  manual?: boolean,
  /**
   * 手动设置一些其它的设置，需要结合manual才能起作用
   */
  otherOptions?: EChartsOption,
  /**
   * 是否开启自动轮播
   */
  autotip?: boolean,
  makePoint?: boolean,
}


const {
	title = '', 
	chartData = [], 
  tooltipFormatter = '',
	manual = false, 
	otherOptions = {},
  autotip = false,
  makePoint = false,
} = defineProps<MapChartProps>()

const MAP_COLOR = {
  areaColor: '#fff',
  borderColor: 'rgba(38,73,106,0.65)',
  shadowColor: 'rgba(0,149,255,0.08)',
  labelColor: 'rgba(0,0,0,0.4)',
  emphasisLabelColor: '#0095FF',
  emphasisAreaColor: '#c7e8ff',
  emphasisBorderColor: '#0095FF',
}

let options: EChartsOption = {
  tooltip: {
    trigger: 'item',
    position: 'inside',
    confine: true,
    backgroundColor: 'transparent',
    extraCssText: 'z-index: 9;border-radius: 0; border: 0;padding: 0;background: red;margin: 0;min-width: 0;height: 0;',
    formatter: unref(tooltipFormatter) as any
  },

  geo: {
    map: 'ShanDong',
    aspectScale: 1,
    roam: false,
    zoom: 1.2,
    itemStyle: {
      areaColor: MAP_COLOR.areaColor,
      borderColor: MAP_COLOR.borderColor,
      shadowColor: MAP_COLOR.shadowColor,
      shadowOffsetX: 0,
      shadowOffsetY: 10,
      shadowBlur: 1
    }
  },

  series: [
    {
      type: 'map',
      map: 'ShanDong',
      geoIndex: 1,
      aspectScale: 1,
      zoom: 1.2,
      labelLayout(params) {
        return {
          x: params.rect.x + params.rect.width / 2,
          y: params.rect.y + params.rect.height / 2,
          verticalAlign: 'middle',
          align: 'center'
        }
      },
      label: {
        show: true,
        color: MAP_COLOR.labelColor,
        fontSize: 10,
        lineHeight: 15,
        rich: {},
      },

      itemStyle: {
        areaColor: MAP_COLOR.areaColor,
        borderColor: MAP_COLOR.borderColor,
        shadowColor: MAP_COLOR.shadowColor,
      },

      emphasis: {
        itemStyle: {
          areaColor: MAP_COLOR.emphasisAreaColor,
          borderColor: MAP_COLOR.emphasisBorderColor,
          shadowColor: MAP_COLOR.shadowColor,
        },
        label: {
          color: MAP_COLOR.emphasisLabelColor,
        }
      },

      select: {
        itemStyle: {
          areaColor: MAP_COLOR.emphasisAreaColor,
          borderColor: MAP_COLOR.emphasisBorderColor,
          shadowColor: MAP_COLOR.shadowColor,
        },
        label: {
          color: MAP_COLOR.emphasisLabelColor,
        }
      },

      data: [],
    },
  ]
}


const getMakePointData = () => {
  if(unref(chartData).length === 0) return []
  const iconMax = 35
  const maxCount = Math.max(...unref(chartData).map((item: any) => item.value))
  
  const data = unref(chartData).map((item: any) => {
    const city = shandongCoords.find((city: any) => city.name === item.name) as any
    const iconSize = Math.floor(item.value / maxCount * iconMax)
    const _symbolSize = [3, iconSize]
    return {
      name: item.name,
      coord: city.centroid,
      value: item.value,
      symbolSize: _symbolSize,
    }
  })
  return data
}

const getMakePoint = () => {
  let markPoint = {
    show: false,
    symbol: 'roundRect',
    itemStyle: {
      color: '#F18301',
    },
    label: {
      show: false,
    },
    data: []
  } as any
  markPoint.data = getMakePointData()
  if(markPoint.data.length > 0) {
    markPoint.show = true
  }
  return markPoint
}





const initChart = async () => {
  const json = (await (await import('@/assets/map/shandong.json')).default) as any;
  registerMap('ShanDong', json);
  // @ts-ignore
  options.tooltip!.formatter = unref(tooltipFormatter)
  options.series![0].data = unref(chartData)
  if(unref(makePoint)) {
    const makeStyle = getMakePoint()
    console.log(makeStyle)
    options.series![0].markPoint = getMakePoint()
  }
  // 如果是手动设置模式的话
  if (unref(manual) && isObject(unref(otherOptions))) {
    options = mergeOptions(options, unref(otherOptions))
  }
  if(unref(autotip)){
    openAutoTooltip()
  }
 
  setOptions(options);
}

watchEffect(() => {
  if(unref(chartData).length === 0) return;
  initChart()
})


function openAutoTooltip(){
  const instance = getInstance();
  useEchartsAutoTooltip(instance, options);
}

onMounted(() => {
  initChart()
})


</script>

<template>
  <div class="chart" ref="chartRef" :style="{ width: '100%', height: '100%' }"></div>
</template>

<style lang="scss">
.light-map-tip-box {
  min-width: 155px;
  padding: 12px 16px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.light-map-tip-box-name{
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,0.65);
}

.light-map-tip-box-content{
  width: 100%;
  display: flex;
  flex-direction: column;
}

.light-map-tip-box-item{
  display: flex;
  align-items: center;
  font-size: 12px;
  justify-content: space-between;
  width: 100%;
  .light-map-tip-box-item-label{
    font-size: 12px;
    font-weight: 400;
    color: rgba(0,0,0,0.65);
  }

  .light-map-tip-box-value{
    font-size: 12px;
    color: rgba(0,0,0,0.4);
  }
}

.light-map-tip-box-item.mt-12{
  margin-top: 12px;
}

</style>
