<script lang="ts" setup name="SelectCity">
import { onMounted, reactive, nextTick, ref } from 'vue'
import { getAreaList } from '@/api/external/common/index'
import { areaEnum, ifSpecialCity } from '../config'

const props = defineProps({
  drillingIn: {
    type: Boolean,
    default: false
  },
  optionData: {
    type: Object
  }
})

const emits = defineEmits(['submit'])

const selectOptions = reactive({
  provinceOptions: [],
  cityOptions: [],
  countryOptions: []
})

const selectValues = reactive({
  provinceValue: 'china',
  cityValue: null,
  countyValue: null,
  levelStr: areaEnum.COUNTRY,
  areaName: ''
})

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

onMounted(async () => {
  selectOptions.provinceOptions = await getAreaLists()
  ;(selectOptions.provinceOptions as never as Recordable[]).unshift({
    label: '中国',
    value: 'china'
  })
  onHandleSelectProvince(props.optionData?.mapRegion.saveSelect['provinceValue'], {})
  for (let i in selectValues) Reflect.set(selectValues, i, props.optionData?.mapRegion.saveSelect[i])
})



const disabledCity = ref<boolean>(false)//直辖市禁用下面省份选择
const onHandleSelectProvince = async (value: number | string, options: Recordable) => {
   selectValues.cityValue = null
  selectValues.countyValue = null
  if (value === 'china') {
    disabledCity.value = false
    selectValues.provinceValue = 'china'
    selectOptions.cityOptions = []
    selectValues.areaName = ''
    selectValues.levelStr= areaEnum.COUNTRY
    return 
  }
  const cityOptions = await getAreaLists(areaEnum.CITY, value as number)
  selectOptions.cityOptions = cityOptions
  selectValues.levelStr = areaEnum.PROVINCE
  selectValues.areaName = options.label
  if(ifSpecialCity(value)){//直辖市的话就不能跟省份的逻辑一样了
    selectOptions.cityOptions = cityOptions.map((item:any)=>({...item,value:item.parentId}))
    disabledCity.value = true
    return
  }
  disabledCity.value = false
}

const onHandleSelectCity = async (value: number, options: Recordable) => {
  selectValues.countyValue = null
  selectOptions.countryOptions = await getAreaLists(areaEnum.COUNTY, value)
  selectValues.levelStr = areaEnum.CITY
  selectValues.areaName = options.label
}

const onHandleSubmit = async () => {
  await nextTick()
  emits('submit', selectValues)
}

const resetValue = () => {
  selectValues.provinceValue = 'china'
  selectValues.cityValue = null
  selectValues.countyValue = null
  selectValues.levelStr = areaEnum.COUNTRY
  selectOptions.cityOptions = []
  selectOptions.countryOptions = []
}

defineExpose({
  resetValue
})
</script>

<template>
  <div class="select-city-content">
    <n-select
      @change="onHandleSelectProvince"
      placeholder="请选择省份"
      v-model:value="selectValues.provinceValue"
      :options="selectOptions.provinceOptions"
    />
    <n-select
      v-if="!props.drillingIn"
      :disabled="disabledCity"
      @change="onHandleSelectCity"
      placeholder="请选择城市"
      v-model:value="selectValues.cityValue"
      :options="selectOptions.cityOptions"
    />
    <!-- 保留待用（下钻到区以下） -->
    <!-- <n-select
      v-if="!drillingIn"
      placeholder="请选择区域"
      v-model:value="selectValues.countyValue"
      :options="selectOptions.countryOptions"
    /> -->
    <n-button type="primary" @click="onHandleSubmit">确定</n-button>
  </div>
</template>

<style lang="scss" scoped>
.select-city-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
</style>