<template>
    <pro-select v-model:modelValue="internalValue" show-search placeholder="请选择科目级别" :optionData="options"
        :filter-option="filterOption" @focus="handleFocus" @blur="handleBlur">
    </pro-select>
    <div>internalValue: {{ internalValue }}</div>
</template>
<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';
const props = defineProps({
    // 请求参数
    sobNo: {
        type: String,
        default: ''
    },
    addEndFlag: {
        type: String,
        default: 'false'
    },
    accLvl: {
        type: String,
        default: ''
    },
    formItemProps: Object, // 定义formItemProps prop
});
const emit = defineEmits(['update:accLvl']);
const internalValue = ref(props.accLvl);
// 监听内部值的变化，向外传递
watch(internalValue, (newValue) => {
    console.log('wyq --internalValue change', newValue);
    emit('update:accLvl', newValue);
});

// 确保从父组件接收到的 `value` 更新时，内部状态也能同步
watch(() => props.accLvl, (newValue) => {
    console.log('wyq --props.accLvl change', newValue);

    if (newValue !== internalValue.value) {
        internalValue.value = newValue;
    }
});
watch(() => props.sobNo, async (newVal, oldVal) => {
    console.log('wyq --props.sobNo change', newVal);

    if (newVal != oldVal && newVal != '') {
        //await getRelationInfoNoOptions();
        if (newVal == '10') {
            options.value = [
                {
                    item_no: '1',
                    item_name: '一级科目',
                },
                {
                    item_no: '2',
                    item_name: '二级科目',
                },
                {
                    item_no: '3',
                    item_name: '三级科目',
                },
                {
                    item_no: '4',
                    item_name: '四级科目',
                }
            ]

            internalValue.value = '4'

        } else {
            options.value = [
                {
                    item_no: '1',
                    item_name: '一级科目',
                },
                {
                    item_no: '2',
                    item_name: '二级科目',
                },
                {
                    item_no: '3',
                    item_name: '三级科目',
                }
            ]
            internalValue.value = '3'
        }
    }
});

const options = ref([]);

const handleChange = value => {
    console.log(`selected ${value}`);
};
const handleBlur = () => {
    console.log('blur');
};
const handleFocus = () => {
    console.log('focus');
};
const filterOption = (input, option) => {
    return option.item_name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
</script>
