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


<script setup lang='ts'>
import { ref } from 'vue'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const areaCascader = ref()
let areaValue = ref()
const change = (e: any) => {
    areaValue = areaCascader.value.getCheckedNodes()
}

const options = dictData.state.area
// 区域联级下拉框配置,多选
const baseMultipleCascader = {
    label: 'name',
    value: 'name',
    expandTrigger: 'hover' as const,
    multiple: true
}


// 区域联级下拉框配置，单选
const baseCascader = {
    label: 'name',
    value: 'name',
    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>