<template>
    <ElTree class="hc-tree-node tree-line el-radio-group" :class="ui" ref="treeRef" :props="treeProps" :data="treeData" auto-expand-parent current-node-key="1570335808521502732" 
            highlight-current accordion :default-expanded-keys="['1570335808521502732']" node-key="primaryKeyId" @node-click="treeClick" :indent="0">
        <template #default="{ node, data }">
            <div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
                <div class="label">{{ node.label }}</div>
            </div>
        </template>
    </ElTree>
</template>

<script setup>
import {ref,nextTick,watch} from "vue";
import {getArrValue} from "vue-utils-plus"
import {getProjectTree} from "~api/tentative";

//参数
const props = defineProps({
    projectId: {
        type: [String,Number],
        default: ''
    },
    contractId: {
        type: [String,Number],
        default: ''
    },
    wbsId: {
        type: [String,Number],
        default: ''
    },
    wbsType: {
        type: [String,Number],
        default: ''
    },
    idPrefix: {
        type: String,
        default: 'test-tree1-'
    },
    ui: {
        type: String,
        default: ''
    },
})

//变量
const treeRef = ref(null)
const treeProps = ref({
    label: 'title',
    children: 'children',
    isLeaf: 'hasChildren'
})
const treeData = ref([])
const projectId = ref(props.projectId);
const contractId = ref(props.contractId);
const wbsId = ref(props.wbsId);
//const tenantId = ref(props.tenantId);

//监听
watch(() => [
    props.projectId,
    props.contractId,
    props.wbsId,
], ([pid, cid, wbs_id]) => {
    projectId.value = pid
    contractId.value = cid
    wbsId.value = wbs_id
})

//加载中
nextTick(() => {
    getTreeData()
})

//获取数据
const isLoading = ref(false)
const getTreeData = async () => {
    isLoading.value = true
    const { data } = await getProjectTree({
        projectId: projectId.value,
        // contractId: contractId.value,
        wbsId: wbsId.value,
    })
    //处理数据
    isLoading.value = false
    treeData.value = getArrValue(data)
    //最后一个，执行点击
    /*if (clickKey) {
        await nextTick(() => {
            document.getElementById(`${idPrefix.value}${clickKey}`)?.click()
        })
    }*/
}

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

//节点被点击
const treeClick = async (data) => {
    emit('nodeTap', data)
}
</script>

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