<script lang="ts" setup>
import { useCascaderAreaData } from '@vant/area-data'
import type { CascaderOption } from 'vant'
 
const props = defineProps<{
  modelValue: string
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', v: string): void
}>()
 
const show = ref(false)
 
interface OptionWithParents {
  option: CascaderOption | null
  parent: CascaderOption | null
  grandparent: CascaderOption | null
}
 
function findOptionWithParents(options: CascaderOption[], targetValue: string, parent: CascaderOption | null, grandparent: CascaderOption | null): OptionWithParents | null {
  for (const option of options) {
    if (option.value === targetValue)
      return { option, parent, grandparent }
 
    if (option.children && option.children.length > 0) {
      const result = findOptionWithParents(option.children, targetValue, option, parent)
      if (result)
        return result
    }
  }
  return null
}
 
function getLabelByValue(options: CascaderOption[], targetValue: string) {
  const { option, parent, grandparent } = findOptionWithParents(options, targetValue, null, null)
  if (option && parent && grandparent)
    return [grandparent.text, parent.text, option.text].join('/')
  return ''
}
 
const fieldValue = ref(props.modelValue)
const options = useCascaderAreaData()
 
function onFinish({ selectedOptions, value }: { selectedOptions: CascaderOption[]; value: string }) {
  show.value = false
  fieldValue.value = selectedOptions.map(option => option.text).join('/')
  emit('update:modelValue', value)
}
nextTick(() => {
  fieldValue.value = getLabelByValue(options, props.modelValue)
})
</script>

<template>
  <van-field
    :model-value="fieldValue"
    is-link
    readonly
    label="所在地區(qū)"
    placeholder="選擇地區(qū)"
    @click="show = true"
  />
  <van-popup v-model:show="show" round position="bottom">
    <van-cascader
      :model-value="modelValue"
      title="請選擇所在地區(qū)"
      :options="options"
      @close="show = false"
      @finish="onFinish"
    />
  </van-popup>
</template>