<template>
    <ElTree ref="ElTreeRef"
            :class="ui"
            :default-expanded-keys="defaultExpandedCids"
            :indent="0"
            :load="ElTreeLoadNode"
            :props="ElTreeProps"
            accordion
            class="hc-tree-node tree-line"
            highlight-current
            lazy
            node-key="primaryKeyId"
            @node-click="ElTreeClick">
        <template #default="{ node, data }">
            <div :id="`${idPrefix}${data['primaryKeyId']}`" class="data-custom-tree-node">
                <div :class="node.level === 1?'level-name':''" class="label">{{ node.label }}</div>
            </div>
        </template>
    </ElTree>

</template>

<script setup>
import {ref, nextTick, watch} from "vue";
import samplingApi from "~api/tentative/material/sampling"
import {isArrItem, getArrValue} from "js-fast-way"

//参数
const props = defineProps({
    projectId: {
        type: [String, Number],
        default: ''
    },
    contractId: {
        type: [String, Number],
        default: ''
    },
    wbsTempId: {
        type: [String, Number],
        default: ''
    },
    tenantId: {
        type: [String, Number],
        default: ''
    },
    wbsType: {
        type: [String, Number],
        default: ''
    },
    autoExpandKeys: {
        type: Array,
        default: () => ([])
    },
    idPrefix: {
        type: String,
        default: 'test-tree-'
    },
    ui: {
        type: String,
        default: ''
    },
    fromType: {
        type: Boolean,
        default: false
    },
    nodeId: {
        type: [String, Number],
        default: ''
    }
})

//变量
const ElTreeRef = ref(null)
const ElTreeProps = ref({
    label: 'title',
    children: 'children',
    isLeaf: 'hasChildren'
})
const TreeExpandKey = ref(props.autoExpandKeys)
const projectId = ref(props.projectId);
const contractId = ref(props.contractId);
const wbsTempId = ref(props.wbsTempId);
const tenantId = ref(props.tenantId);
const wbsType = ref(props.wbsType);
const idPrefix = ref(props.idPrefix);
const fromTypedata = ref(props.fromType)
//监听
watch(() => [
    props.autoExpandKeys,
    props.projectId,
    props.contractId,
    props.wbsTempId,
    props.tenantId,
    props.idPrefix,
    props.wbsType,
    props.fromType
], ([expandKeys, UserProjectId, UserContractId, UserWbsTempId, UserTenantId, UserIdPrefix, wbs_type, fromType]) => {
    TreeExpandKey.value = expandKeys
    projectId.value = UserProjectId
    contractId.value = UserContractId
    wbsTempId.value = UserWbsTempId
    tenantId.value = UserTenantId
    idPrefix.value = UserIdPrefix
    wbsType.value = wbs_type
    fromTypedata.value = fromType
})

//事件
const emit = defineEmits(['menuTap', 'nodeTap', 'nodeLoading'])

//树形结构异步加载数据
const defaultExpandedCids = ref([])
const ElTreeLoadNode = async (node, resolve) => {
    console.log(fromTypedata.value, ' fromTypedata.value');
    let parentId = '0';
    if (node.level !== 0) {
        parentId = node?.data?.id
    }
    if (fromTypedata.value) {
        //获取数据
        const {error, code, data} = await samplingApi.getMixRatioTestTree({
            pKeyId: props.nodeId,
        })
        //处理数据
        if (!error && code === 200) {
            let clickKey = '', defaultExpandedArr = [];
            const keys = TreeExpandKey.value || []
            const resData = getArrValue(data)
            for (let i = 0; i < resData.length; i++) {
                resData[i].hasChildren = !resData[i].hasChildren
            }
            if (keys.length > 0) {
                let lastKey = keys[keys.length - 1];
                for (const item of resData) {
                    //自动展开
                    if (isArrItem(keys, item?.primaryKeyId)) {
                        defaultExpandedArr.push(item?.primaryKeyId)
                    }
                    //最后一个，选中点击
                    if (item?.primaryKeyId === lastKey) {
                        clickKey = item?.primaryKeyId
                    }
                }
            } else if (node.level === 0) {
                defaultExpandedArr.push(resData[0]?.primaryKeyId)
            }
            //自动展开
            defaultExpandedCids.value = defaultExpandedArr
            if (node.level === 0) {
                emit('nodeLoading')
            }
            resolve(resData)
            //最后一个，执行点击
            if (clickKey) {
                await nextTick(() => {
                    document.getElementById(`${idPrefix.value}${clickKey}`)?.click()
                })
            }
        } else {
            if (node.level === 0) {
                emit('nodeLoading')
            }
            resolve([])
        }

    } else {
        //获取数据
        const {error, code, data} = await samplingApi.queryLazyTree({
            wbsId: wbsTempId.value,
            tenantId: tenantId.value,
            projectId: projectId.value,
            parentId,
            wbsType: wbsType.value
        })
        //处理数据
        if (!error && code === 200) {
            let clickKey = '', defaultExpandedArr = [];
            const keys = TreeExpandKey.value || []
            const resData = getArrValue(data)
            for (let i = 0; i < resData.length; i++) {
                resData[i].hasChildren = !resData[i].hasChildren
            }
            if (keys.length > 0) {
                let lastKey = keys[keys.length - 1];
                for (const item of resData) {
                    //自动展开
                    if (isArrItem(keys, item?.primaryKeyId)) {
                        defaultExpandedArr.push(item?.primaryKeyId)
                    }
                    //最后一个，选中点击
                    if (item?.primaryKeyId === lastKey) {
                        clickKey = item?.primaryKeyId
                    }
                }
            } else if (node.level === 0) {
                defaultExpandedArr.push(resData[0]?.primaryKeyId)
            }
            //自动展开
            defaultExpandedCids.value = defaultExpandedArr
            if (node.level === 0) {
                emit('nodeLoading')
            }
            resolve(resData)
            //最后一个，执行点击
            if (clickKey) {
                await nextTick(() => {
                    document.getElementById(`${idPrefix.value}${clickKey}`)?.click()
                })
            }
        } else {
            if (node.level === 0) {
                emit('nodeLoading')
            }
            resolve([])
        }
    }

}

//节点被点击
const ElTreeClick = async (data, node) => {
    let autoKeysArr = []
    await getNodeExpandKeys(node, autoKeysArr)
    const autoKeys = autoKeysArr.reverse()
    emit('nodeTap', {node, data, keys: autoKeys})
}

//处理自动展开的节点KEY
const getNodeExpandKeys = async (node, newKeys) => {
    const parent = node?.parent ?? []
    const primaryKeyId = node?.data?.primaryKeyId ?? ''
    if (primaryKeyId) {
        newKeys.push(primaryKeyId)
        await getNodeExpandKeys(parent, newKeys)
    }
}
</script>

<style lang="scss" scoped>
@import "../../../../styles/app/tree.scss";
</style>
