<template>
    <!--1.汇总关系下拉列表-->
    <div class="relation-dropdown">
        <span class="relation-label">汇总关系：</span>
        <a-select v-model:value="relationInfoNo" :options="relationInfoNoOptions" class="relation-select"
            :allowClear="true">
        </a-select>
    </div>
    <!--2.不同树形结构标签页-->
    <div style="margin-bottom: -10px">
        <a-tabs type="card" v-model:activeKey="treeType">
            <a-tab-pane key="0" tab="账务树">
            </a-tab-pane>
            <a-tab-pane key="1" tab="对比树">
            </a-tab-pane>
            <a-tab-pane key="2" tab="报送树">
            </a-tab-pane>
        </a-tabs>
    </div>
    <!--3.搜索框-->
    <div class="search-dropdown">
        <a-input v-model:value="searchValue" @input="onInputChange" placeholder="搜索..." :allowClear="true" />
        <div v-if="searchResultList.length > 0" class="search-select">
            <div class="search-select-li" v-for=" searchResult in searchResultList" :key="searchResult.id"
                @click="onOptionClick(searchResult)">
                {{ searchResult.name }}
            </div>
        </div>
    </div>
    <!--4.机构树-->
    <div>
        <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys"
            v-model:checkedKeys="checkedKeys" v-model:loadedKeys="loadedKeys" :load-data="onLoadData"
            :tree-data="treeData" :fieldNames="fieldNames" checkable @select="onSelect" @expand="onExpand"
            @check="onCheck" />
    </div>
</template>

<script setup>
//问题汇总:
//1.机构checked 如何联动下账套， 两个组件不在一块
//2.机构汇总关系下拉列表属性必填项，如何与查询按钮绑定并校验
//3.机构汇总关系获取枚举值时,如何获取当前交易的pageInterfaceNo 
//4.系统日期如何获取到
//5.机构汇总下拉列表如何获取对应的内部值
//6.搜索框,需要判断值是否为空的逻辑处理
//7.控制台报：Tree missing follow keys: '1'
//8.搜索机构时，因为是单选正常应该只展示自己和自己的上级节点
//9.查询时获取查询选中的机构列表也存在问题，需要优化，需要与后台呼应上 父节点下叶子节点全部选中，则返回父节点，否则返回选中的子节点
//10.机构是必填项，如何校验

// 11.当搜索一个节点时，然后展开整个树，再次重新 checked的话，点击查询获取查询节点有存在问题了
// 12.点击树进行展开，然后再切换树类型或者汇总关系，展开图标消失了，但是数据还是存在
// 13.增加loadedKeys 或者是移动到组件中，展开叶子节点就无效了
// 14.机构面板组件封装到组件中，，业务就特别卡顿

// 机构汇总关系双向绑定到页面中
import { ref } from 'vue'
import { defineProps, defineExpose, onMounted, watch, nextTick, provide, defineEmits } from 'vue';
import { getRelationInfoNoList, getDepartTreeData, getSearchResultByNodeId } from '@/api/departTreePanel';
defineExpose({ getCheckedNodes, getNodes });
const getCheckedNodesEmit = defineEmits(['get-checkedNodes']);
// 使用 provide 提供这个方法
// provide('getNodes', getNodes);

function getNodes (data) {
    console.log("获取机构树数据成功", data);
    return {
        name: "查询组件调用成功",
    };
}


// 声名接收参数数据
const props = defineProps({});
// 机构汇总关系双向绑定到页面中
const relationInfoNo = ref('');
// 机构汇总关系枚举值, 组件挂载时向后端发起请求
const relationInfoNoOptions = ref([]);
// 树形结构标签页值双向绑定到页面中
const treeType = ref('');

// 钩子函数，页面加载完成后首先获取下汇总关系
onMounted(async () => {
    // 1.获取机构汇总关系枚举值
    await getRelationInfoNoOptions();
});
// 监听汇总关系和树形结构标签页值,只要值发生变化,重新获取树形结构数据
watch(() => [relationInfoNo.value, treeType.value,], async (newVal, oldVal) => {
    // 1.当类型数发生变化时，重新获取树形结构数据
    if (newVal != oldVal) {
        await getDeptTreeData();
    }
});



// 获取机构汇总关系枚举值及默认值
async function getRelationInfoNoOptions () {
    // 清空 relationInfoNoOptions 数组
    relationInfoNoOptions.value = [];
    // // 1.获取机构汇总关系枚举值
    const resp = await getRelationInfoNoList({
        pageInterfaceNo: 'zzsearch_01_01_02',
    });
    // 2.将枚举值添加到 relationInfoNoOptions 中 并设置下拉列表默认值
    resp.forEach(node => {
        if (node.item_no === 'AAAAAA') {
            relationInfoNo.value = node.item_no;
        }
        relationInfoNoOptions.value.push({ label: node.item_name, value: node.item_no });
    });
    // 3.设置机构树类型的默认值
    treeType.value = '0';
}

// 搜索框 start
// 搜索框触发事件
const searchValue = ref('');
const searchResultList = ref([]);

async function onInputChange () {
    // 1.判断搜索框是否为空,为空则清空 options 数组,重新获取树形结构数据
    if (!searchValue || searchValue.value.length === 0) {
        searchResultList.value = [];
        getDeptTreeData();
        return;
    }
    // 2.获取搜索结果
    searchResultList.value = await getDepartTreeData({
        treeSearch: "true",
        kw: searchValue.value,
        relation_info_no: relationInfoNo.value,
        treeType: treeType.value,
        qryDate: '20231117',
    });
}

// 选择搜索下拉列表项(点击事件)回调
async function onOptionClick (searchResult) {
    // 1.设置搜索框值
    searchValue.value = searchResult.name;
    // 2.点击完成后,隐藏下拉列表设置为空
    searchResultList.value = [];
    // 3.重新获取树形结构数据
    const searchResultList2 = await getSearchResultByNodeId({
        isAsync: "flase",
        nodeId: searchResult.dep_no,
        treeType: treeType.value,
        relation_info_no: relationInfoNo.value,
        qryDate: '20231117',

    });

    const treeDataMap = {};
    searchResultList2.forEach(node => {
        treeDataMap[node.id] = node;
    });

    let parentKeys = [];
    let searchTreeData = [];
    let searchNode = treeDataMap[searchResult.dep_no];
    while (true) {
        const parent = treeDataMap[searchNode.pid];
        if (parent) {
            // 父节点存在,则往父节点添加该子节点
            if (!parent.children) {
                parent.children = [];
            }
            parentKeys.push(parent.id);
            parent.children.push(searchNode);
            searchNode = parent;
        } else {
            // 父节点不存在,则直接添加到树形结构数据中
            searchTreeData.push(searchNode);
            break;
        }
    }
    treeData.value = searchTreeData;
    // 4.设置默认选中节点
    nextTick(() => {
        // 等到数据加载完成后，设置默认选中节点
        checkedKeys.value = [searchNode.id];
        expandedKeys.value = parentKeys;

    });

}
// 搜索框 send

const fieldNames = {
    title: 'name',
    key: 'id',
};
const treeData = ref([])// 树的数据
const expandedKeys = ref([]);// 已展开的节点
const selectedKeys = ref([]);// 已选中的节点
const checkedKeys = ref([]);// 已勾选的节点
const loadedKeys = ref([]); // 已加载子节点的节点
watch(() => checkedKeys.value, (newVal, oldVal) => {
    // 2.当搜索框值发生变化时,重新获取搜索结果
    if (newVal != oldVal) {
        getCheckedNodesEmit('get-checkedNodes', newVal);
    }
});
// 获取机构树数据
async function getDeptTreeData () {
    expandedKeys.value = [];
    selectedKeys.value = [];
    checkedKeys.value = [];
    // 清空已加载子节点的节点数组,不然切换树类型或者汇总关系时会导致展开图标消失
    //loadedKeys.value = [];
    treeData.value = await getDepartTreeData({
        isParentType: '&&',
        page_code: 'cs',
        isAsync: 'true',
        relation_info_no: relationInfoNo.value,
        treeType: treeType.value,
        qryDate: '20231117',
    });
    nextTick(() => {
        // 等到数据加载完成后，设置默认选中节点
        checkedKeys.value = [treeData.value[0].id];
    });
}

// 节点选中时的回调
function onSelect (selectedKeys, info) {
}
// 节点展开时的回调
function onExpand (expandedKeys, info) {
    console.log('wyq---------expandedKeys', expandedKeys);
}
// 节点选中时的回调
function onCheck (checkedKeys, info) {
    // getCheckedNodesEmit('get-checkedNodes', checkedKeys);
}
// 异步加载数据
const onLoadData = async (treeNode) => {
    return new Promise(async (resolve, reject) => {
        if (treeNode.dataRef.children) {
            resolve();
            return;
        }
        try {
            // data.children 是从后端获取的子节点数据
            treeNode.dataRef.children = await getDepartTreeData({
                id: treeNode.eventKey,
                isParentType: "&&",
                isAsync: "true",
                page_code: 'cs',
                relation_info_no: relationInfoNo.value,
                treeType: treeType.value,
                qryDate: '20231117',
            });
            // 更新 treeData
            treeData.value = [...treeData.value];
            resolve();
        } catch (error) {
            //console.error('获取数据失败', error);
            reject(error);
        }
    });
};


function getCheckedNodes () {
    let checkedNodes = [];
    let allNodes = getAllNodes();
    if (checkedKeys.value.length === 1) {
        // 只选中一个节点
        const node = allNodes.find(n => n.id === checkedKeys.value[0]);
        checkedNodes.push(node);
    } else {
        // 选中多个节点
        for (let i = 0; i < checkedKeys.value.length; i++) {
            // 找到当前节点
            const node = allNodes.find(n => n.id === checkedKeys.value[i]);
            if (!checkedKeys.value.includes(node.pid)) {
                // 选择的节点对应的父节点没有被选择， 则添加到结果中
                checkedNodes.push(node);
            }
        }
    }
    return checkedNodes;
}


const getAllNodes = (nodes = treeData.value) => {
    let allNodes = [];
    const traverse = (nodeList) => {
        nodeList.forEach(node => {
            allNodes.push(node); // 收集当前节点
            if (node.children) {
                traverse(node.children); // 递归遍历子节点
            }
        });
    };
    traverse(nodes);
    return allNodes;
};





</script>
<style scoped>
.relation-dropdown {
    margin-bottom: 5px;
}

.relation-label {
    display: inline-block;
    vertical-align: middle;
}

.relation-select {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
}

.search-dropdown {
    position: relative;
    display: inline-block;
    width: 286px;
    margin-bottom: 5px
        /* 设置宽度 */
}

.search-select {
    position: absolute;
    top: calc(100% + 5px);
    /* 适当调整下拉列表的位置 */
    left: 0;
    right: 0;
    z-index: 1000;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* 圆角 */
    background-color: #fff;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* 添加阴影 */
}

.search-select-li {
    padding: 3px 10px;
    padding-left: 0px;
    /* 调整内边距 */
    cursor: pointer;
}

.search-select-li:hover {
    background-color: #1890ff;
    /* 使用主题色 */
    color: #fff;
    /* 改变文字颜色 */
}
</style>
