<template>
    <el-cascader ref="cascader" v-bind="$attrs" :options="options" :props="cascaderProps" @change="change" />
</template>

<script lang="ts" setup>
import { defineComponent, ref, watch } from 'vue'

defineOptions({
    name: 'Area'
})
import { useDictData } from '@/stores/dictData'
const emit = defineEmits(["changeValue"])
const cascaderProps = {
    label: 'name',
    value: 'id',
    checkStrictly: true,
    emitPath: false
}
const cascader = ref()
const dictData = useDictData()
const options:any = dictData.state.area
const areaName = ref(dictData.state.area[0].name)
const jbName = ref(dictData.state.area[0].name)
const change = (e: any) => {
    if (cascader.value.getCheckedNodes()[0]?.pathLabels.length == 1) {
        areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[0]
    } else if (cascader.value.getCheckedNodes()[0]?.pathLabels.length >= 2) {
        areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[1]
    }

    emit('changeValue', cascader.value.getCheckedNodes()[0])
}
const changeName = () => {
    return jbName.value
}

defineExpose({ areaName, change })
</script>

<style scoped></style>
