<template>
    <a-select ref="selectRef" v-model:value="localValue" :mode="mode" placeholder="请选择" :tagRender="tagRender"
        :options="optionData" :fieldNames="optionFieldNames" :maxTagCount=1 :allowClear="true" @clear="onClear"
        :open="isDropdownOpen" @click="onSelectClick" :showSearch="false">
        <template #dropdownRender>
            <div ref="dropdownRef">
                <pro-tree3 ref="proTreeRef" :tree-data="localTreeData" :fieldNames="fieldNames"
                    v-model:value="localValue" v-model:stddNo="stddNo" :showCheckbox="showCheckbox" :multiple="multiple"
                    :isAsync="isAsync" :treeType="treeType" :isStopPropagation="isStopPropagation"
                    :isClearSearchResult="isClearSearchResult" :isWithoutDsc="isWithoutDsc" @getNodes="getNodes"
                    @onNode="onNode" v-bind="$attrs">
                </pro-tree3>
            </div>
        </template>
    </a-select>
</template>
<script setup lang="jsx">
import { isEmpty } from '@/utils/validate'
import { findNodes } from '@/utils/treeUtil'
import { getTreeData } from '@/api/treeDataApi';
import { ref, defineProps, defineEmits, onMounted, onBeforeUnmount, watch, nextTick, computed, h } from 'vue';
// 定义组件接收的 props
const props = defineProps({
    value: {
        type: [String, Array, Number],
        required: true
    },
    treeType: {
        type: String,
        default: ''
    },
    isAsync: {
        type: Boolean,
        default: false
    },
    relationNo: {
        type: String,
        default: ''
    },
    brNos: {
        type: Array,
        default: () => []
    },
    stddNo: {
        type: String,
        default: ''
    },
    sobNo: {
        type: [String, Array],
        default: ''
    },
    treeData: {
        type: Array,
        default: () => []
    },
    multiple: {
        type: Boolean,
        default: false
    },
    showCheckbox: {
        type: Boolean,
        default: false
    },
    formItemProps: {
        type: Object,
        default: () => { }
    },
    isStopPropagation: {
        // 是否阻止冒泡
        type: Boolean,
        default: true
    },
    isClearSearchResult: {
        // 是否自动清空搜索结果
        type: Boolean,
        default: false
    },
    isWithoutDsc: {
        // 是否不包含后代节点返回
        type: Boolean,
        default: false
    },
    mode: {
        type: String,
        default: 'multiple'
    },
    fieldNames: {
        type: Object,
        default: () => {
            return {
                key: 'id',
                title: 'name',
                children: 'children'
            }
        }
    }

});
const emits = defineEmits(['update:value', 'update:stddNo', 'get-nodes']);
console.log('wyq:pro-select-tree-接收参数:', props);
const selectRef = ref(null);
const dropdownRef = ref(null);
const proTreeRef = ref(null);
const isDropdownOpen = ref(false);
const optionData = ref([]);
const localTreeData = ref([]);
const optionFieldNames = {
    value: props.fieldNames.key,
    label: props.fieldNames.title,
};
const localValue = computed({
    // 从父组件获取值
    get: () => {
        console.log('wyq:pro-select-tree-获取localValue值:', props.value);
        return props.value;
    },
    // 向父组件传递更新
    set: (value) => {
        console.log('wyq:pro-select-tree-更改localValue值:', value);
        emits('update:value', value);
    }
});

const stddNo = computed({
    // 从父组件获取值
    get: () => {
        if (props.treeType === 'sobTree') {
            return props.stddNo;
        }
        return '';
    },
    // 向父组件传递更新
    set: (value) => {
        if (props.treeType === 'sobTree') {
            emits('update:stddNo', value);
        }
    }
});

function getNodes (value, nodes) {
    console.log('wyq:pro-select-tree-getNodes 获取节点:', value, nodes);
    optionData.value = nodes;
    emits('get-nodes', value, nodes);
}

function onNode (item) {
    isDropdownOpen.value = false;
}

// 点击其他区域隐藏下拉框
const handleDocumentClick = (event) => {
    if (
        selectRef.value &&
        dropdownRef.value &&
        !selectRef.value.$el.contains(event.target) &&
        !dropdownRef.value.contains(event.target)
    ) {
        isDropdownOpen.value = false;
    }
};

const onClear = () => {
    // localValue.value = [];
    console.log('wyq:pro-select-tree-清空选择', Array.isArray(localValue.value) ? [] : '');
    if (Array.isArray(localValue.value)) {
        localValue.value = [];
    } else {
        const val = '10';
        localValue.value = val;
    }
    //localValue.value = Array.isArray(localValue.value) ? [] : '';
};

// 处理选择框点击事件
const onSelectClick = () => {
    // 清空上一次搜索框内容和结果
    if (proTreeRef.value) {
        proTreeRef.value.onClearSearch();
    }
    isDropdownOpen.value = true;
};


// 监听shuTreeData变化，更新localTreeData
watch(() => props.treeData, (newTreeData) => {
    localTreeData.value = newTreeData;
});

// 根据不同类型的树监听相应参数的变化
if (props.treeType === 'deptTree') {
    watch(() => props.relationNo, async () => {
        // 监听机构汇总关系发生变化,重新请求机构树
        await getTreeTypeData();
    });
} else if (props.treeType === 'sobTree') {
    // 监听账套树
    watch(() => props.brNos, async () => {
        // TODO : 这个地方可能会被 pro-tree 和 pro-select-tree都调用
        // 监听机构发生变化,重新请求账套树
        await getTreeTypeData();
    });
} else if (props.treeType === 'sobItemTree') {
    watch(() => props.sobNo, async () => {
        // 监听账套发生变化,重新请求科目树
        await getTreeTypeData();
    });
}

// 定义 tagRender 函数
const tagRender = (props) => {
    const isLastValue = localValue.value[localValue.value.length - 1] === props.value;
    return h('span', { class: 'no-wrap' }, [
        props.label,
        !isLastValue && ',',
    ]);
};

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

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


async function getLocalTreeData () {
    console.log('wyq:pro-select-tree-准备树数据');
    if (!isEmpty(props.treeData)) {
        localTreeData.value = props.treeData;
        if (!isEmpty(props.value)) {
            const nodes = findNodes(localTreeData, props.fieldNames.key, props.value);
            optionData.value = nodes;
            emits('get-nodes', props.value, nodes);
        }
    } else if (!isEmpty(props.treeType)) {
        // 如果 props.treeData 不存在，则请求后端接口获取树数据
        await getTreeTypeData();
    }
}

async function getTreeTypeData () {
    const { treeData, defaultValue, defaultNode, defaultStddNo } = await getTreeData(props, {});
    if (!isEmpty(treeData) && treeData.length > 0) {
        localTreeData.value = treeData;

        // 使用 nextTick 确保在 DOM 更新后执行后续操作
        // await nextTick();

        if (!isEmpty(defaultValue)) {
            optionData.value = defaultNode;
            localValue.value = defaultValue;
            emits('get-nodes', defaultValue, defaultNode);
        }

        if (!isEmpty(defaultStddNo) && props.treeType === 'sobTree') {
            stddNo.value = defaultStddNo;
        }
    }
    console.log('wyq:pro-select-tree-获取树数据完成', treeData);
}



// async function prepareTreeData () {
//     try {
//         if (!isEmpty(props.treeData)) {
//             // 如果 props.treeData 存在，则直接使用 props.treeData
//             localTreeData.value = props.treeData;
//             // 处理默认值
//             if (!isEmpty(props.value)) {
//                 optionData.value = findNodes(localTreeData, props.fieldNames.key, [props.value]);
//             }
//         } else if (!isEmpty(props.treeType)) {
//             // 如果 props.treeData 不存在，则请求后端接口获取树数据
//             await fetchTreeData();
//         }
//     } catch (error) {
//         // 处理 fetchTreeData 可能抛出的错误
//         console.error('Error occurred while preparing tree data:', error);
//     }
// }

// async function fetchTreeData () {
//     try {
//         // 从 useTreeData 中获取 getTreeData 函数
//         const { getTreeData } = useTreeData(props, {});
//         // 调用 getTreeData 函数获取树数据
//         localTreeData.value = await getTreeData();

//         // 如果树数据为空，提前返回
//         if (isEmpty(localTreeData.value)) {
//             return;
//         }

//         // 使用 nextTick 确保在 DOM 更新后执行后续操作
//         await nextTick();

//         // 计算默认值
//         const defaultValues = getDefaultValues(localTreeData.value, props);

//         // 如果默认值不为空
//         if (!isEmpty(defaultValues)) {
//             if (props.showCheckbox === true) {
//                 // 复选框模式
//                 localValue.value = defaultValues;
//             } else {
//                 localValue.value = defaultValues;
//             }
//         }
//     } catch (error) {
//         // 处理 getTreeData 函数调用时可能出现的错误
//         message.error(`获取数据失败: ${error.message}`);
//     }
// }

// // 提取计算默认值的逻辑到单独的函数
// function getDefaultValues (treeData, props) {
//     let defaultValues = '';
//     switch (props.treeType) {
//         case 'deptTree':
//             // 机构树默认值为第一个节点
//             if (treeData.length > 0) {
//                 defaultValues = [treeData[0][props.fieldNames.key]];
//                 optionData.value = findNodes(treeData, props.fieldNames.key, [...defaultValues]);
//             }
//             break;
//         case 'sobTree':
//             // 账套树默认值为default_yn为Y的节点
//             const defaultNodes = findNodes(treeData, 'default_yn', 'Y');
//             if (!isEmpty(defaultNodes) && defaultNodes.length > 0) {
//                 stddNo.value = defaultNodes[0]['pid'].split('@')[0];
//                 defaultValues = [defaultNodes[0][props.fieldNames.key]];
//                 optionData.value = [defaultNodes[0]];
//             }
//             break;
//         case 'sobItemTree':
//             // 科目树无默认值
//             break;
//         default:
//             break;
//     }
//     console.log('wyq:pro-select-tree-默认值:', defaultValues, optionData.value);
//     return defaultValues;
// }
</script>

<style scoped>
.dropdown-content {
    /* 设置固定的高度和宽度 */
    max-height: 300px;
    /* width: 500px; */
    /* 设置溢出时显示滚动条 */
    overflow: auto;
    /* 可以根据需要添加其他样式 */
    /* border: 1px solid #ccc; */
    padding: 8px;
}

.dropdown-content2 {
    /* 设置固定的高度和宽度 */
    max-height: 300px;
    /* width: 500px; */
    /* 设置溢出时显示滚动条 */
    overflow: auto;
    /* 防止内容换行 */
    white-space: nowrap;
    /* 当内容宽度超过元素宽度时显示横向滚动条 */
    overflow-x: auto;
    /* 可以根据需要添加其他样式 */
    /* border: 1px solid #ccc; */
    padding: 8px;
}

.no-wrap-tag {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
