<template>
    <div class="my_clearable_ecursion" :style="onFirst ? nFStyle : null">
        <el-cascader v-model="selectedOptions" :options="processOptions(options)" />
        <MyRegsele v-if="selectedOptions[0] >= 0 && options[selectedOptions[0]]?.children"
            :options="options[selectedOptions[0]].children" :onFirst="true" :nFStyle="nFStyle"
            v-model:activeData="activeData" />
    </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
const props = defineProps(['options', 'onFirst', 'nFStyle', 'activeData', 'area'])
const $emit = defineEmits(['update:activeData', 'update:area', 'xxx'])
function processOptions(options) {
    const arr = [{ value: -1, label: '请选择' }]
    options.map((item, index) => arr.push({ ...item, value: index, children: [] }))
    return arr
}
const selectedOptions = ref([-1])
watch(() => selectedOptions.value, () => {
    const record = selectedOptions.value[0]
    activeData.value = props.options[record]?.label||''
    selectedOptions.value[0] = -1
    nextTick(() => selectedOptions.value[0] = record)
})
const activeData = ref()
const getStr = str => {
    let i = str.indexOf('/')
    if (i == -1) return str
    else return str.substring(0, i)
}
watch(() => activeData.value, () => {
    $emit('update:activeData', `${getStr(`${props.activeData}`)}/${activeData.value}`)
    $emit('update:area', activeData.value)
})
</script>
<style lang="scss" scoped>
::v-deep .el-cascader {
    width: .5208rem;
}
::v-deep .el-input{
    font-size: .0729rem;
}
.my_clearable_ecursion {
    display: flex;
}
</style>