<script lang="ts" setup name="SelectCity">
import { onMounted, reactive } from 'vue'
import { getAreaList } from '@/api/external/common/index'
import { areaEnum } 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
})

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

onMounted(async () => {
  selectOptions.provinceOptions = await getAreaLists()
  ;(selectOptions.provinceOptions as never as any).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 onHandleSelectProvince = async (value: number | string) => {
  selectValues.cityValue = null
  selectValues.countyValue = null
  if (value === 'china') return (selectValues.levelStr = areaEnum.COUNTRY)
  selectOptions.cityOptions = await getAreaLists(areaEnum.CITY, value as any)
  selectValues.levelStr = areaEnum.PROVINCE
}

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

const onHandleSubmit = () => {
  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"
      @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>