<template>
  <!-- Echarts 全局设置 -->
  <global-setting :optionData="optionData"></global-setting>
  <CollapseItem name="地图" :expanded="true">
    <SettingItemBox name="开启下钻">
      <SettingItem name="">
        <n-switch @change="handleChangeDrillingIn" v-model:value="optionData.drillingIn" size="small"></n-switch>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="返回图标">
      <SettingItem name="">
        <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="图标颜色">
      <SettingItem name="">
        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.iconColor"></n-color-picker>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="图标距离">
      <SettingItem name="距右">
        <n-input-number
          v-model:value="optionData.iconDistanceRight"
          :min="1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="距上">
        <n-input-number
          v-model:value="optionData.iconDistanceTop"
          :min="1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SelectCity
      ref="SelectCityRef"
      :optionData="optionData"
      :drillingIn="optionData.drillingIn"
      @submit="onHandleSelectValues"
    />
    <div style="height: 30px"></div>
    <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
    <SettingItemBox name="地图配置">
      <SettingItem name="区域颜色">
        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
      </SettingItem>
      <SettingItem name="边框颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[0].itemStyle.borderColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="边框大小">
        <n-input-number
          v-model:value="seriesList[0].itemStyle.borderWidth"
          :min="0"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="透明度">
        <n-input-number
          v-model:value="seriesList[0].itemStyle.opacity"
          :min="0"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="厚度">
        <n-input-number
          v-model:value="seriesList[0].regionHeight"
          :min="0"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="标题配置">
      <SettingItem name="是否显示">
        <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
      </SettingItem>
      <SettingItem name="颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[0].label.textStyle.color"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="大小">
        <n-input-number
          v-model:value="seriesList[0].label.textStyle.fontSize"
          :min="0"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="高亮配置">
      <SettingItem name="标题显示">
        <n-switch v-model:value="seriesList[0].emphasis.label.show" size="small"></n-switch>
      </SettingItem>
      <SettingItem name="颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[0].emphasis.label.textStyle.color"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="大小">
        <n-input-number
          v-model:value="seriesList[0].emphasis.label.textStyle.fontSize"
          :min="0"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="区块颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[0].emphasis.itemStyle.color"
        ></n-color-picker>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="柱状配置">
      <SettingItem name="最小高度">
        <n-input-number
          v-model:value="seriesList[1].minHeight"
          :min="0"
          :step="1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="大小">
        <n-input-number
          v-model:value="seriesList[1].barSize"
          :min="0"
          :step="1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="倒角尺寸">
        <n-input-number
          v-model:value="seriesList[1].bevelSize"
          :min="0"
          :max="1"
          :step="0.1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
  <CollapseItem name="地区配置" :expanded="true">
    <SettingItemBox name="地区配置" :alone="true">
      <template v-for="(item, map3DIndex) in optionData.dataset.map3D" :key="map3DIndex">
        <setting-item name="省份名称"  v-if="mapRegionCache.adcode=='china'">
          <n-select
            @change="(v:number,o:Recordable,w:Recordable,s1:number)=> onHandleSelectProvince(v,o,item, map3DIndex)"
            placeholder="请选择省份"
            v-model:value="item.name"
            :options="item.provinceOptions"
          />
        </setting-item>
        <setting-item name="城市名称">
          <n-select placeholder="请选择城市" v-model:value="item.city_name" :options="item.cityOptions" />
        </setting-item>
        <setting-item name="区块厚度">
          <n-input-number v-model:value="item.height"> </n-input-number>
        </setting-item>
        <setting-item name="区块颜色">
          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
        </setting-item>
        <setting-item name="区块透明度">
          <n-input-number v-model:value="item.itemStyle.opacity"> </n-input-number>
        </setting-item>
        <setting-item></setting-item>
        <setting-item>
          <n-button size="small" @click="optionData.dataset.map3D.splice(map3DIndex, 1)"> - </n-button>
        </setting-item>
      </template>
      <div class="h-space"></div>
      <n-button size="small" @click="handleAddRegion"> + </n-button>
    </SettingItemBox>
  </CollapseItem>
  <CollapseItem name="柱状配置" :expanded="true">
    <SettingItemBox name="柱状配置" :alone="true">
      <template v-for="(item, barIndex) in optionData.dataset.bar3D" :key="barIndex">
        <setting-item name="经度">
          <n-input-number v-model:value="item.value[0]"> </n-input-number>
        </setting-item>
        <setting-item name="纬度">
          <n-input-number v-model:value="item.value[1]"> </n-input-number>
        </setting-item>
        <setting-item name="离地高度">
          <n-input-number v-model:value="item.height"> </n-input-number>
        </setting-item>
        <setting-item name="柱状颜色">
          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
        </setting-item>
        <setting-item name="柱状透明度">
          <n-input-number v-model:value="item.itemStyle.opacity"> </n-input-number>
        </setting-item>
        <setting-item>
          <n-button size="small" @click="optionData.dataset.bar3D.splice(barIndex, 1)"> - </n-button>
        </setting-item>
      </template>
      <div class="h-space"></div>
      <n-button
        style="float: right"
        size="small"
        @click="optionData.dataset.bar3D.push(cloneDeep(STATIC_SCATTER_CONFIG))"
      >
        +
      </n-button>
    </SettingItemBox>
  </CollapseItem>
</template>

<script setup lang="ts">
import { PropType, computed, ref, onMounted } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
import SelectCity from './components/SelectCity.vue'
import { regionInfo } from './config'
import { cloneDeep } from 'lodash'
import { getAreaList } from '@/api/external/common/index'
import { areaEnum } from '../../../Decorates/Mores/Weather/config'
import { unref } from 'vue'

const props = defineProps({
  optionData: {
    type: Object as PropType<GlobalThemeJsonType>,
    required: true
  }
})

const seriesList = computed(() => {
  return props.optionData.series
})

const datasetMap3DList = computed(() => {
  return props.optionData.dataset['map3D']
})

const STATIC_SCATTER_CONFIG = {
  name: null,
  adcode: 510000,
  city_name:null,
  value: [0, 0, 0],
  height: 2,
  itemStyle: {
    color: '#4482B1FF',
    opacity: 1
  }
}

const SelectCityRef = ref<InstanceType<typeof SelectCity>>()

const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
  const resp = await getAreaList({
    level,
    parentId
  })
  if (!resp) return []
  return resp.map((item: Recordable) => ({ label: item.name, value: item.name, adcode: item.code }))
}

onMounted(async () => {
  datasetMap3DList.value.forEach(async (item: Recordable) => {
    item.provinceOptions = await getAreaLists()
    item.cityOptions = await getAreaLists(areaEnum.CITY, !item.adcode ? mapRegionCache.value.adcode : item.adcode)
    item.adcode =  !item.adcode ? mapRegionCache.value.adcode : item.adcode
  })
})

const onHandleSelectProvince = async (value: number, option: Recordable, item: Recordable, mapIndex: number) => {
  const findIndex = datasetMap3DList.value.findIndex((findItem: Recordable) => findItem.name === item.name)
  datasetMap3DList.value[findIndex].city_name = null
  datasetMap3DList.value[findIndex].adcode = option.adcode
  datasetMap3DList.value[findIndex].cityOptions = await getAreaLists(areaEnum.CITY, option.adcode)
}

const handleAddRegion = () => {
  props.optionData.dataset.map3D.push(cloneDeep(STATIC_SCATTER_CONFIG))
  datasetMap3DList.value.forEach(async (item: Recordable) => {
    item.provinceOptions = await getAreaLists()
  })
}

const mapRegionCache = computed(() => {
  return props.optionData.mapRegion
})

const onHandleSelectValues = async (values: regionInfo) => {
  const { cityValue, countyValue, provinceValue, areaName } = values
  mapRegionCache.value.areaName = areaName
  mapRegionCache.value.saveSelect = values
  mapRegionCache.value.adcode = countyValue
    ? countyValue
    : cityValue
    ? cityValue
    : provinceValue === 'china'
    ? 'china'
    : provinceValue
  props.optionData.mapRegion = mapRegionCache.value
  if(mapRegionCache.value.adcode!=='china'){
    const {adcode,areaName} = unref(mapRegionCache) || {}
    const cityOptions =  await getAreaLists(areaEnum.CITY, adcode)
    console.log(cityOptions,'cityOptions')
    datasetMap3DList.value.forEach((item:any)=>{
      item.name=areaName
      item.city_name=areaName?areaName:null
      item.adcode=adcode,
      item.cityOptions = cityOptions && cityOptions.length?cityOptions:[{adcode,label:areaName,value:areaName}]
    })
  }
}

const handleChangeDrillingIn = () => {
  SelectCityRef.value?.resetValue()
  props.optionData.mapRegion.adcode = 'china'
  props.optionData.mapRegion.areaName = ''
  props.optionData.mapRegion.saveSelect.areaName = ''
}
</script>

<style scoped>
.h-space {
  height: 10px;
}
</style>