import { ref, reactive, defineComponent, onMounted } from 'vue';
import { registerMap, use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { MapChart, EffectScatterChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import GeoJSon from '@/assets/jiang1_su1_su4_qian1';
import { ECBasicOption } from 'echarts/types/dist/shared';

use([
  CanvasRenderer,
  MapChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  EffectScatterChart,
]);

registerMap('SuQian', {
  geoJSON: GeoJSon,
  specialAreas: {},
});

export default defineComponent({
  name: 'HomePage',
  provide: {
    // [THEME_KEY]: 'dark',
  },
  setup() {
    const echart = ref();
    const option = ref<ECBasicOption>({
      // title: {
      //   text: "Traffic Sources",
      //   left: "center",
      // },
      // tooltip: {
      //   trigger: "item",
      //   formatter: "{a} <br/>{b} : {c} ({d}%)",
      // },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
      },
      geo: {
        map: 'SuQian',
        aspectScale: 0.75, //长宽比
        zoom: 1.1,
        roam: false,
        itemStyle: {
          normal: {
            areaColor: '#013C62',
            shadowColor: '#182f68',
            shadowOffsetX: 0,
            shadowOffsetY: 25,
          },
          emphasis: {
            areaColor: '#2AB8FF',
            borderWidth: 0,
            color: 'green',
            label: {
              show: false,
            },
          },
        },
      },
      series: [
        {
          type: 'map',
          map: 'SuQian',
          roam: false,
          label: {
            // show: false,
            normal: {
              show: false,
              textStyle: {
                color: '#fff',
              },
            },
            emphasis: {
              // show: false,
              textStyle: {
                color: '#fff',
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: '#2ab8ff',
              borderWidth: 1.5,
              areaColor: '#12235c',
            },
            emphasis: {
              areaColor: '#12235c',
              // borderWidth: 0,
              color: 'green',
            },
            select: {
              areaColor: '#12235c',
            },
          },
          zoom: 1.2,
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          showEffectOn: 'render',
          rippleEffect: {
            period: 4,
            scale: 4,
            brushType: 'fill',
          },
          hoverAnimation: true,
          itemStyle: {
            normal: {
              color: '#2ab8ff',
              shadowBlur: 10,
              shadowColor: '#333',
            },
          },
          data: [
            {
              name: '宿州学院',
              value: [118.296459, 33.929648],
            },
          ],
          tooltip: {
            position: [10, 10],
            formatter: () => {
              return '<div>123</div>';
            },
          },
        },
      ],
    });

    onMounted(() => {});

    return () => <VChart ref={echart} autoresize option={option.value} />;
  },
});
