import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { AddThreeDimensionalMapConfig } from './index'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataMaps from './data.json'

//省市区枚举
export const enum areaEnum {
  PROVINCE = 'PROVINCE', //省份
  CITY = 'CITY', //城市
  COUNTY = 'COUNTY', //县
  COUNTRY = 'COUNTRY', //国家
  TOWN = 'TOWN', //镇
  DISTRICT = 'DISTRICT' //地区
}

export interface regionInfo {
  provinceValue: string
  cityValue: string | null
  countyValue: string | null
  levelStr: areaEnum
}

type itemOption = {
  label: string
  value: string
}
export interface regionOption {
  provinceOptions: itemOption[]
  cityOptions: itemOption[]
  countryOptions: itemOption[]
}

//父级地区编码和级别接口
export interface historyParentType {
  adcode: number
  level: string
}

export interface backMapLevel {
  (str: string): boolean
  (): void
}

export interface levelFunc {
  (str: string): boolean
}

//数据源接口
export interface dataPointI {
  name: string
  value: number[]
  adcode: number
  height: number
  itemStyle: {
    color: string
    opacity: number
    borderWidth: number
    borderColor: string
  }
}

//地区上级对应配置
export const regionMapParentArea = {
  PROVINCE: areaEnum.COUNTRY, //省份的上一级 中国
  CITY: areaEnum.PROVINCE, //城市的上一级 省份
  COUNTY: areaEnum.CITY, //县或者区的上一级 城市
  TOWN: areaEnum.COUNTY //镇的上一级 县或者区
}

export const includes = []

export const option = {
  iconColor: 'black',
  showIcon: false,
  iconDistanceRight: 20,
  iconDistanceTop: 20,
  drillingIn: false,
  dataset: dataMaps,
  saveClickRegion: {
    level: ''
  },
  mapRegion: {
    adcode: 'china',
    showHainanIsLands: true,
    saveSelect: {
      levelStr: areaEnum.COUNTRY,
      cityValue: null,
      countyValue: null,
      provinceValue: 'china'
    }
  },
  tooltip: {
    show: true
  },
  //三维地图有两种，一种是geo3D，另一种是map3D,但是如果使用geo3D，地图点击获取不到点击区域name
  geo3D: {
    show: false, // 隐藏该层，为true时会导致出现两个地图
    map: 'centerMap',
    roam: true
  },
  series: [
    {
      type: 'map3D',
      map: 'centerMap',
      name: 'centerMap',
      regionHeight: 3,
      label: {
        show: true,
        formatter: function (params: Recordable) {
          return params.data.name ? params.data.name : ' '
        },
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      itemStyle: {
        color: '#4482B1FF', //背景颜色
        opacity: 1,
        borderWidth: 0.8,
        borderColor: '#4482B1FF'
      },
      emphasis: {
        // 鼠标hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
        label: {
          // label高亮时的配置
          show: true,
          textStyle: {
            color: 'green',
            fontSize: 14
          }
        },
        itemStyle: {
          color: 'red'
        }
      },
      data: [],
      viewControl: {
        projection: 'perspective'
      }
    },
    {
      name: 'scatter3D',
      type: 'scatter3D',
      coordinateSystem: 'geo3D',
      symbol: 'circle',
      symbolSize: 20,
      animation: true,
      data: []
    },
    {
      name: 'bar3D',
      type: 'bar3D',
      coordinateSystem: 'geo3D',
      // 倒角尺寸
      bevelSize: 0,
      minHeight: 12,
      shading: 'lambert',
      barSize: 2,
      itemStyle: {
        color: '#4482B1FF'
      },
      data: []
    },
  ]
}

export type optionType = typeof option

export const MapDefaultConfig = { ...option }
export default class Config extends PublicConfigClass implements CreateComponentType {
  public key: string = AddThreeDimensionalMapConfig.key
  public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
  public chartConfig = cloneDeep(AddThreeDimensionalMapConfig)
  public option = echartOptionProfixHandle(option, includes)
}