<template>
  <n-cascader v-bind="getProps" @update:value="handleUpdate" />
</template>

<script>
import { NCascader } from 'naive-ui'
import { computed } from 'vue'
export default {
  name: 'AreaCascader',
  props: {
    ...NCascader.props,
    showCheckbox: {
      type: Boolean,
      default: true
    },
    field: {
      type: Array,
      default: () => {
        return ['province', 'city', 'distance']
      }
    }
  },
  emits: ['selectd'],
  setup(props, { emit }) {
    const getProps = computed(() => {
      return {
        ...props
      }
    })
    function handleUpdate(value, option, pathValues) {
      const field = props.field
      const valueField = props.valueField
      const filedJson = {}
      field.forEach((item, index) => {
        filedJson[item] = pathValues?.[index]?.[valueField] || ''
      })
      emit('selectd', filedJson)
    }
    function clearValue() {
      handleUpdate(null, null, [])
    }

    return {
      getProps,
      handleUpdate,
      clearValue
    }
  }
}

</script>
<style scoped lang='scss'>
</style>
