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 {
  (levelStr: string): boolean
  (level: string): boolean
  (): void
  (): void
}

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

export const includes = []

export const option = {
  iconColor: 'black',
  showIcon: false,
  iconDistanceRight: 20,
  iconDistanceTop: 20,
  drillingIn: false,
  dataset: dataMaps,
  dataConfig: {
    map3D: [
      {
        name: '四川省',
        value: [104.10068024609373, 30.580525329665175, 20000],
        adcode: 510000,
        height: 5,
        itemStyle: {
          color: '#E41717FF',
          opacity: 1,
          borderWidth: 0.4,
          borderColor: '#5F9EA0'
        }
      }
    ],
    scatter3D: [
      {
        name: '广东省',
        value: [113.2592945, 23.1301964, 20000],
        adcode: 440000,
        height: 5,
        itemStyle: {
          color: '#E41717FF',
          opacity: 1,
          borderWidth: 0.4,
          borderColor: '#5F9EA0'
        }
      }
    ],
    bar3D: [
      {
        name: '安徽省',
        value: [114.878463, 29.395191, 20000],
        adcode: 340000,
        height: 5,
        itemStyle: {
          color: '#E41717FF',
          opacity: 1,
          borderWidth: 0.4,
          borderColor: '#5F9EA0'
        }
      }
    ]
  },
  saveClickRegion: {
    level: ''
  },
  mapRegion: {
    adcode: 'china',
    showHainanIsLands: true,
    saveSelect: {
      levelStr: areaEnum.COUNTRY,
      cityValue: null,
      countyValue: null,
      provinceValue: 'china'
    }
  },
  tooltip: {
    show: true
  },
  geo3D: {
    show: false, // 隐藏该层，为true时会导致出现两个地图
    map: 'centerMap',
    roam: true,
    regionHeight: 0,
    emphasis: {
      label: {
        show: true,
        formatter: function (params: Recordable) {
          return params.data.name ? params.data.name : ' '
        },
        textStyle: {
          color: '#000',
          fontSize: 14
        }
      },
      itemStyle: {
        color: '#ff0'
      }
    }
  },
  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: 'orange', //背景颜色
        opacity: 1,
        borderWidth: 0.8,
        borderColor: 'rgb(62,215,213)'
      },
      emphasis: {
        // 鼠标hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
        label: {
          // label高亮时的配置
          show: true,
          textStyle: {
            color: 'green',
            fontSize: 14
          }
        },
        itemStyle: {
          color: 'red'
        }
      },
      data: [],
      viewControl: {
        projection: 'perspective', // 先设置为这个perspective
        // distance: 1000             //默认缩放比例
      },
    },
    {
      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: '#51e0f9'
      },
      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)
}