<template>
    <div v-loading="isElTreeLoadNode">
        <HcDataTree ref="ElTreeRef"
                    :hProps="ElTreeProps"
                    :datas="ElTreeData"
                    :check-strictly="isStrictly"
                    show-checkbox
                    @check="ElTreeCheckChange"
        >
            <template #default="{node, data}">
                <div class="custom-tree-node">
                    <div class="label" @dblclick="ElTreeDblClick(data)">
                        <el-input v-if="data.isInputName" v-model="data.nodeName" size="small" @blur="ElTreeBtnClick(data)" @keyup="keyUpEvent($event,data)">
                            <template #append>
                                <el-button plain size="small" type="primary" @click="ElTreeBtnClick(data)">
                                    <HcIcon name="check"/>
                                </el-button>
                            </template>
                        </el-input>
                        <span v-else>{{ data.nodeName }}</span>
                    </div>
                </div>
            </template>
        </HcDataTree>
    </div>
</template>

<script setup>
import {nextTick, onMounted, ref, watch} from "vue";
import {getArrValue} from "js-fast-way"
import wbsApi from '~api/data-fill/wbs';

//参数
const props = defineProps({
    projectId: {
        type: [String, Number],
        default: ''
    },
    contractId:{
        type: [String, Number],
        default: ''
    },
    nodeKey: {
        type: String,
        default: 'primaryKeyId'
    },
    nodeId: {
        type: [String, Number],
        default: ''
    },
    oldId: {
        type: [String, Number],
        default: ''
    },
    strictly: {
        type: Boolean,
        default: false
    },
    wbsId:{
        type: [String, Number],
        default: ''
    }
})

//变量
const ElTreeRef = ref(null)
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
const isStrictly = ref(props.strictly)
const wbsId=ref(props.wbsId)
const ElTreeProps = ref({
    label: 'nodeName',
    children: 'children',
    isLeaf: 'notExsitChild'
})
const  isElTreeLoadNode = ref(false)

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

})

//渲染完成
onMounted(() => {
    ElTreeLoadNode()
})

//事件
const emit = defineEmits(['check-change'])

//树形结构异步加载数据
const ElTreeData = ref([])
const ElTreeLoadNode = async () => {
    isElTreeLoadNode.value=true
    let nodeId = props.nodeId || ''
    const {error, code, data} = await wbsApi.queryWbsTreeContractByContractIdAndId({
        pKeyId: nodeId,
        contractId: contractId.value,
        projectId: projectId.value,
    })
    if (!error && code === 200) {
        isElTreeLoadNode.value=false
        ElTreeData.value = getArrValue(data)
        ElTreeData.value.forEach((ele,index)=>{
            if (index==0) {
                ele.isPeer=1
            }
        })
    
        await nextTick(() => {
            ElTreeCheckedKeys()
        })
    }
    isElTreeLoadNode.value=false
}

//被选择的
const ElTreeCheckChange = (_, nodes) => {
    emit('check-change', nodes)
}

//处理节点
const ElTreeCheckedKeys = () => {
    const Nodes = ElTreeRef.value?.treeRef?.getCheckedNodes() || []
    const HalfNodes = ElTreeRef.value?.treeRef?.getHalfCheckedNodes() || []
    emit('check-change', {
        checkedNodes: Nodes,
        halfCheckedNodes: HalfNodes
    })
}

//更改节点名称
const ElTreeDblClick = (item) => {
    item.isInputName = true;
}
//回车
const keyUpEvent = (e, item) => {
    if (e.key === "Enter") {
        ElTreeBtnClick(item)
    }
}
//更改节点名称完成
const ElTreeBtnClick = (item) => {
    if (!item?.nodeName) {
        window?.$message?.warning('节点名称不能为空')
    } else {
        item.isInputName = false;
        ElTreeCheckedKeys()
    }
}
</script>
