<template>
  <!-- Echarts 全局设置 -->
  <global-setting :optionData="optionData"></global-setting>
  <CollapseItem :name="t('charts.chart.map')" :expanded="true">
    <SettingItemBox :name="t('charts.chart.startDrilling')">
      <SettingItem name="">
        <n-switch @change="handleChangeDrillingIn" v-model:value="optionData.drillingIn" size="small"></n-switch>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :name="t('charts.chart.returnIcon')">
      <SettingItem name="">
        <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :name="t('charts.chart.iconColor')">
      <SettingItem name="">
        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.iconColor"></n-color-picker>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :name="t('charts.chart.iconDistance')">
      <SettingItem :name="t('charts.chart.fromRight')">
        <n-input-number v-model:value="optionData.iconDistanceRight" :min="1" size="small"
          :placeholder="t('common.inputText')"></n-input-number>
      </SettingItem>
      <SettingItem :name="t('charts.chart.fromAbove')">
        <n-input-number v-model:value="optionData.iconDistanceTop" :min="1" size="small"
          :placeholder="t('common.inputText')"></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SelectCity ref="SelectCityRef" :optionData="optionData" :drillingIn="optionData.drillingIn"
      @submit="onHandleSelectValues" />
    <div style="height: 30px"></div>
    <n-tag type="primary">{{t('charts.chart.configNoResponse')}}</n-tag>
    <SettingItemBox :name="t('charts.chart.mapConfig')">
      <SettingItem :name="t('charts.chart.regionColor')">
        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('charts.chart.borderColor')">
        <n-color-picker size="small" :modes="['hex']"
          v-model:value="seriesList[0].itemStyle.borderColor"></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('charts.chart.borderSize')">
        <n-input-number v-model:value="seriesList[0].itemStyle.borderWidth" :min="0" size="small"
          :placeholder="t('common.inputText')"></n-input-number>
      </SettingItem>
      <SettingItem :name="t('common.transparencyText')">
        <n-input-number v-model:value="seriesList[0].itemStyle.opacity" :min="0" size="small"
          :placeholder="t('common.inputText')"></n-input-number>
      </SettingItem>
      <SettingItem :name="t('charts.chart.gauge')">
        <n-input-number v-model:value="seriesList[0].regionHeight" :min="0" size="small"
          :placeholder="t('common.inputText')"></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :name="t('charts.chart.titleConfig')">
      <SettingItem :name="t('common.isDisplayText')">
        <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
      </SettingItem>
      <SettingItem :name="t('common.colorText')">
        <n-color-picker size="small" :modes="['hex']"
          v-model:value="seriesList[0].label.textStyle.color"></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('charts.chart.sizeText')">
        <n-input-number v-model:value="seriesList[0].label.textStyle.fontSize" :min="0" size="small"
          :placeholder="t('common.innputText')"></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :name="t('charts.chart.hightConfig')">
      <SettingItem :name="t('charts.chart.titleShow')">
        <n-switch v-model:value="seriesList[0].emphasis.label.show" size="small"></n-switch>
      </SettingItem>
      <SettingItem :name="t('common.colorText')">
        <n-color-picker size="small" :modes="['hex']"
          v-model:value="seriesList[0].emphasis.label.textStyle.color"></n-color-picker>
      </SettingItem>
      <SettingItem :name="t('charts.chart.sizeText')">
        <n-input-number v-model:value="seriesList[0].emphasis.label.textStyle.fontSize" :min="0" size="small"
          :placeholder="t('common.inputText')"></n-input-number>
      </SettingItem>
      <SettingItem :name="t('charts.chart.blocckColor')">
        <n-color-picker size="small" :modes="['hex']"
          v-model:value="seriesList[0].emphasis.itemStyle.color"></n-color-picker>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox :name="t('charts.chart.columnarConfig')">
      <SettingItem :name="t('charts.chart.minHeight')">
        <n-input-number v-model:value="seriesList[1].minHeight" :min="0" :step="1" size="small"
          :placeholder="t('common.inputText')"></n-input-number>
      </SettingItem>
      <SettingItem :name="t('charts.chart.sizeText')">
        <n-input-number v-model:value="seriesList[1].barSize" :min="0" :step="1" size="small"
          :placeholder="t('common.inputText')"></n-input-number>
      </SettingItem>
      <SettingItem :name="t('charts.chart.chamfer')">
        <n-input-number v-model:value="seriesList[1].bevelSize" :min="0" :max="1" :step="0.1" size="small"
          :placeholder="t('common.inputText')"></n-input-number>
      </SettingItem>
    </SettingItemBox>
  </CollapseItem>
  <CollapseItem :name="t('charts.chart.regionalConfig')" :expanded="true">
    <SettingItemBox :name="t('charts.chart.regionalConfig')" :alone="true">
      <template v-for="(item, map3DIndex) in optionData.dataset.map3D" :key="map3DIndex">
        <setting-item :name="t('charts.chart.provinceName')" v-if="mapRegionCache.adcode == 'china'">
          <n-select
            @change="(v: number, o: Recordable, w: Recordable, s1: number) => onHandleSelectProvince(v, o, item, map3DIndex)"
            :placeholder="t('charts.chart.placeProvince')" v-model:value="item.name" :options="item.provinceOptions" />
        </setting-item>
        <setting-item :name="t('charts.chart.cityDistrictCounty')">
          <n-select :placeholder="t('charts.chart.placeCityCounty')" v-model:value="item.city_name" :options="item.cityOptions" />
        </setting-item>
        <setting-item :name="t('charts.chart.blockThickness')">
          <n-input-number v-model:value="item.height"> </n-input-number>
        </setting-item>
        <setting-item :name="t('charts.chart.blockColor')">
          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
        </setting-item>
        <setting-item :name="t('charts.chart.blockTranspar')">
          <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>
      <div class="h-space"></div>
      <n-button type="primary" @click="handleAreaSubmit">{{t('common.determineText')}}</n-button>
    </SettingItemBox>
  </CollapseItem>
  <CollapseItem :name="t('charts.chart.columnarConfig')" :expanded="true">
    <SettingItemBox :name="t('charts.chart.columnarConfig')" :alone="true">
      <template v-for="(item, barIndex) in optionData.dataset.bar3D" :key="barIndex">
        <setting-item :name="t('common.longText')">
          <n-input-number v-model:value="item.value[0]"> </n-input-number>
        </setting-item>
        <setting-item :name="t('common.latText')">
          <n-input-number v-model:value="item.value[1]"> </n-input-number>
        </setting-item>
        <setting-item :name="t('charts.chart.ground')">
          <n-input-number v-model:value="item.height"> </n-input-number>
        </setting-item>
        <setting-item :name="t('charts.chart.columnarColor')">
          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
        </setting-item>
        <setting-item :name="t('charts.chart.columnarTranspar')">
          <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>
      <div class="h-space"></div>
      <n-button type="primary" @click="handleAreaSubmit">{{t('common.determineText')}}</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 { allFetch, getAreaLists, ifSpecialCity, regionInfo } from './config'
import { cloneDeep } from 'lodash'

import { areaEnum } from '../../../Decorates/Mores/Weather/config'
import { unref } from 'vue'

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

const  t = window['$t']

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>>()



onMounted(async () => {
  const {saveSelect} = unref(mapRegionCache) || {}
  const {levelStr} = saveSelect || {}
  datasetMap3DList.value.forEach(async (item: Recordable) => {
    item.provinceOptions = await getAreaLists()
    const adcode = !item.adcode ? mapRegionCache.value.adcode : item.adcode
    const cityOptions = await getAreaLists(levelStr===areaEnum.CITY?areaEnum.COUNTY:areaEnum.CITY, adcode )
    item.adcode = adcode
    if(ifSpecialCity(adcode)){//直辖市获取区县配置的数据不一样
      const values = await allFetch(cityOptions,'adcode') || []
      item.cityOptions = values.flatMap((obj:any) => Object.values(obj))
      return
    }
    item.cityOptions = cityOptions
  })
})

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 =async () => {
  props.optionData.dataset.map3D.push(cloneDeep(STATIC_SCATTER_CONFIG))
  if (mapRegionCache.value.adcode !== 'china') {
    const { adcode, areaName,saveSelect } = unref(mapRegionCache) || {}
  const {levelStr} = saveSelect || {}
    const cityOptions = await getAreaLists(levelStr===areaEnum.CITY?areaEnum.COUNTY:areaEnum.CITY, adcode)
    // 循环 push 城市数据
    datasetMap3DList.value.forEach((item: any) => {
      item.name = areaName
      item.value = null
      item.cityOptions = cityOptions && cityOptions.length ? cityOptions : [{ adcode, label: areaName, value: areaName }]
    })
    return
  }
  datasetMap3DList.value.forEach(async (item: Recordable) => {
    item.provinceOptions = await getAreaLists()
  })
}

const handleAreaSubmit = () => {
  props.optionData.isShowExecute = !props.optionData?.isShowExecute
}

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') {
    //清空区块配置和柱状配置
    props.optionData.dataset.map3D = [cloneDeep(STATIC_SCATTER_CONFIG)]
    props.optionData.dataset.bar3D = [cloneDeep(STATIC_SCATTER_CONFIG)]
    setDatasetArea()
  // }
}


const mdutcgValues = ref<any>([])//直辖市的区县数据

const setDatasetArea = async () => {
  const { adcode, areaName,saveSelect } = unref(mapRegionCache) || {}
  const {levelStr} = saveSelect || {}
  const cityOptions = await getAreaLists(levelStr===areaEnum.CITY?areaEnum.COUNTY:areaEnum.CITY, adcode)
  let provinceOptions:any = []
  if(adcode==='china'){
    provinceOptions = await getAreaLists()
  }
  mdutcgValues.value = cityOptions
  if(adcode==110000 || adcode==120000 || adcode==500000 || adcode==310000 || adcode==810000 || adcode==820000){//直辖市
    const values = await allFetch(cityOptions,'adcode') || []
    mdutcgValues.value = values.flatMap((obj:any) => Object.values(obj))//讲获取到的多维转换成单一纬度
  }
  // 循环 push 城市数据
  datasetMap3DList.value.forEach((item: any) => {
    item.name = areaName
    item.city_name = null
    item.adcode = null,
    item.value = null
    item.provinceOptions=provinceOptions
    item.cityOptions = unref(mdutcgValues) && unref(mdutcgValues).length ? unref(mdutcgValues) : [{ 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>