<template>
    <el-cascader
        class='tags_cascader_input'
        ref='areaCascader'
        :options='options'
        :props='isMultiple?baseMultipleCascader:baseCascader'
        @change='change'
        clearable
        collapse-tags
        collapse-tags-tooltip
    />
</template>


<script setup lang='ts'>
import { ref } from 'vue'

const areaCascader = ref()
let areaValue = ref()
const change = (e: any) => {
    areaValue = areaCascader.value.getCheckedNodes()
}

const options = [
    {
        value: '海口市',
        label: '海口市',
        children: [
            {
                value: '秀英区',
                label: '秀英区',
                children: [
                    {
                        value: '秀英区',
                        label: '秀英区',
                        children: []
                    },
                    {
                        value: '龙华区',
                        label: '龙华区',
                        children: []
                    },
                    {
                        value: '琼山区',
                        label: '琼山区',
                        children: []
                    }
                ]
            },
            {
                value: '龙华区',
                label: '龙华区',
                children: []
            },
            {
                value: '琼山区',
                label: '琼山区',
                children: []
            }
        ]
    },
    {
        value: '三亚市',
        label: '三亚市',
        children: [
            {
                value: '海棠区',
                label: '海棠区',
                children: []
            },
            {
                value: '吉阳区',
                label: '吉阳区',
                children: []
            },
            {
                value: '天涯区',
                label: '天涯区',
                children: []
            }
        ]
    }
]

// 区域联级下拉框配置,多选
const baseMultipleCascader = {
    expandTrigger: 'hover' as const,
    multiple: true
}


// 区域联级下拉框配置，单选
const baseCascader = {
    expandTrigger: 'hover' as const
}


/*暴露areaValue、areaCascader*/
defineExpose({
    areaCascader,
    areaValue
})
/*定义参数给父组件*/
const props = defineProps({
    //根据父组件传递是否多选，默认单选
    isMultiple: Boolean
})
</script>

<style>
.tags_cascader_input {
    height: 32px !important;
    width: 350px;
}

.tags_cascader_input .el-input--suffix {
    height: 32px !important;
    width: 280px;
}

</style>