<template>
    <h2>下拉树控件</h2>
    <a-select ref="selectRef" v-model:value="selectedDisplayValue" :open="isDropdownOpen" placeholder="请选择"
        :allowClear="true" @clear="handleClear" @click="handleSelectClick" style="width: 500px">
        <template #dropdownRender>
            <pro-tree3 ref="treeRef" :treeType="treeType" :relationNo="relationNo" v-model:txBrNo="txBrNo"
                v-model:sobNo="sobNo" v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys"
                v-model:checkedKeys="checkedKeys" @select="onSelect" @expand="onExpand" @check="onCheck"
                v-bind="$attrs"></pro-tree3>
        </template>
    </a-select>
</template>
<script setup>
import { ref, defineProps, defineExpose, onMounted, onBeforeUnmount, watch, nextTick, provide, defineEmits } from 'vue';
// 定义组件接收的 props
const props = defineProps({
    // 树类型
    treeType: {
        type: String,
        required: true
    },
    // 机构树汇总关系
    relationNo: {
        type: String,
        default: ''
    },
    // 机构
    txBrNo: {
        type: String,
        default: ''
    },
    // 账套
    sobNo: {
        type: String,
        default: ''
    },

    selectedKeys: {
        type: Array,
        default: () => []
    },
    checkedKeys: {
        type: Array,
        default: () => []
    },
    expandedKeys: {
        type: Array,
        default: () => []
    }
});
// 定义自定义事件，用于通知父组件
const emits = defineEmits(['update:txBrNo', 'update:sobNo', 'update:selectedKeys', 'update:checkedKeys', 'update:expandedKeys', 'onCheck', 'onSelect', 'onExpand']);
// 由于 props 是响应式的，直接使用解构赋值
const { treeType, relationNo, txBrNo, sobNo, selectedKeys, expandedKeys } = props;
const checkedKeys = ref([...props.checkedKeys]);

// 用于显示在下拉框中的选中值
const selectedDisplayValue = ref('');
// 是否显示下拉框
const isDropdownOpen = ref(false);

// 处理 a-select 清除事件
const handleClear = () => {
    console.log('wyq-handleClear', props.checkedKeys);
    console.log('wyq-handleClear', checkedKeys.value);
    // wyq-TODO:待实现功能,一进行清理就死循环了
    // checkedKeys.value = [];
    selectedDisplayValue.value = '';
};

// 处理选择框点击事件
const handleSelectClick = () => {
    // 清空搜索框 wyq-TODO:实现搜索功能
    // searchValue.value = '';
    // searchResultList.value = [];
    isDropdownOpen.value = true;
};




const selectRef = ref(null);
const treeRef = ref(null);
const handleDocumentClick = (event) => {
    if (
        selectRef.value &&
        treeRef.value &&
        !selectRef.value.$el.contains(event.target) &&
        !treeRef.value.$el.contains(event.target)
    ) {
        isDropdownOpen.value = false;
    }
};

onMounted(() => {
    document.addEventListener('click', handleDocumentClick);
});

onBeforeUnmount(() => {
    document.removeEventListener('click', handleDocumentClick);
});

// 根据不同类型的树监听相应参数的变化
if (props.treeType === 'deptTree') {
    watch(() => props.relationNo, (newRelationNo) => {
        relationNo = newRelationNo;
    });
    watch(txBrNo, (newTxBrNo) => {
        emits('update:txBrNo', newTxBrNo);
    });
} else if (props.treeType === 'sobTree') {
    watch(() => props.txBrNo, (newtxBrNo) => {
        txBrNo = newtxBrNo;
    });
    watch(sobNo, (newSobNo) => {
        emits('update:sobNo', newSobNo);
    });
} else if (props.treeType === 'sobItemTree') {
    watch(() => props.sobNo, (newSobNo) => {
        sobNo = newSobNo;
    });
}

watch(() => props.checkedKeys, (newCheckedKeys) => {
    checkedKeys.value = [...newCheckedKeys];
});
watch(() => props.selectedKeys, (newSelectedKeys) => {
    selectedKeys.value = [...newSelectedKeys];
});
watch(() => props.expandedKeys, (newExpandedKeys) => {
    expandedKeys.value = [...newExpandedKeys];
});

watch(
    checkedKeys,
    (newCheckedKeys) => {
        console.log('wyq-checkedKeys', newCheckedKeys);
        emits('update:checkedKeys', newCheckedKeys);
        //checkedKeys.value = [...newCheckedKeys];
    }
);
watch(
    selectedKeys,
    (newSelectedKeys) => {
        emits('update:selectedKeys', newSelectedKeys);
    },
    { deep: true }
);
watch(
    expandedKeys,
    (newExpandedKeys) => {
        emits('update:expandedKeys', newExpandedKeys);
    },
    { deep: true }
);

const onCheck = (checkedKeys, info) => {
    emits('onCheck', checkedKeys, info);
};

const onSelect = (selectedKeys, info) => {
    emits('onSelect', selectedKeys, info);
};

const onExpand = (expandedKeys, info) => {
    emits('onExpand', expandedKeys, info);
};

</script>
