<template>
    <el-cascader
        v-model="cascaderValue"
        :options="options"
        :props="cascaderProps"
        :placeholder="placeholder"
        :clearable="clearable"
        :disabled="disabled"
        :size="size"
        :style="style"
        filterable
        v-bind="$attrs"
    />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    modelValue: {
        // 支持返回整条路径数组或单个值（配合 emitPath 使用）
        type: [String, Number, Array],
        default: '',
    },
    options: {
        type: Array,
        default: () => [],
    },
    props: {
        type: Object,
        default: () => ({
            value: 'value',
            label: 'label',
            children: 'children',
            // 默认单选 + 任意节点可选，且只返回当前节点值
            multiple: false,
            checkStrictly: true,
            emitPath: false,
        }),
    },
    placeholder: {
        type: String,
        default: '请选择',
    },
    clearable: {
        type: Boolean,
        default: true,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    size: {
        type: String,
        default: 'default',
    },
    style: {
        type: Object,
        default: () => ({ width: '200px' }),
    },
})

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

const cascaderValue = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val),
})

const cascaderProps = computed(() => props.props)
</script>
