<template>
  <IxCascader
      :dataSource="DistrictTree"
      :searchable="true"
      :value="value"
      get-key="id" label-key="name"
      @change="valueChangeHandle"/>
</template>

<script lang="ts" setup>
import DistrictTree from '@/components/district/district-tree.ts'
import District from '@/components/district/district.ts'
import Colls from '@/common/utils/colls.ts'

defineProps<{
  'model:value': {
    provinceCode: number
    // 省 (名称); sys_district.name
    provinceName: string
    // 市 (编码); sys_district.id
    cityCode: number
    // 市 (名称); sys_district.name
    cityName: string
    // 区 (编码); sys_district.id
    countyCode: number
    // 区 (名称); sys_district.name
    countyName: string
  }
}>()

const emits = defineEmits([ 'update:modelValue' ])

const value = reactive<string[]>([])

const map: {
  [p: string]: {
    id: string
    pid: string
    name: string
  }[]
} = Colls.keyArr(District, it => it.id)

function valueChangeHandle(data: string[]) {
  value.splice(0, 3, ...data)
  const d0 = map[data[0]][0]
  const d1 = map[data[1]][0]
  const d2 = map[data[2]][0]
  const districtValue = {
    provinceCode: +d0.id,
    provinceName: d0.name,
    cityCode: +d1.id,
    cityName: d1.name,
    countyCode: +d2.id,
    countyName: d2.name,
  }
  emits('update:modelValue', districtValue)
}

</script>

<style lang="stylus" scoped>

</style>
