<template>
    <hc-page-split :options="splitOptions">
        <template #left>
            <hc-card>
                <template #header>
                    <div class="header_box">外委检测模板目录</div>
                </template>
                <div
                    style="
                        position: relative;
                        flex: 1;
                        flex-basis: auto;
                        height: 100%;
                    "
                >
                    <hc-body scrollbar>
                        <hc-data-tree
                            default-expand-all
                            :h-props="treeProps"
                            :datas="leftTreeData"
                            tree-key="id"
                            :menus="treeMenuDatas"
                            @menu-tap="treeMenuClick"
                        />
                    </hc-body>
                </div>
            </hc-card>
        </template>
        <hc-card>
            <template #header>
                <div class="header_box greent_title">第三方检测模板目录</div>
            </template>
            <div
                style="
                    position: relative;
                    flex: 1;
                    flex-basis: auto;
                    height: 100%;
                "
            >
                <hc-body scrollbar>
                    <hc-data-tree
                        default-expand-all
                        :h-props="treeProps"
                        :datas="rightTreeData"
                        tree-key="id"
                        :menus="treeMenuDatas"
                        @menu-tap="treeMenuClick"
                    />
                </hc-body>
            </div>
        </hc-card>
        <!-- 新增编辑 -->
        <hc-dialog
            :title="form.id ? '编辑' : '新增'"
            v-model="treeTap"
            @close="treeClose"
            :loading="saveLoading"
            @save="saveTree"
        >
            <el-form ref="formRef" :model="form" :rules="fromRules">
                <el-form-item label="节点名称" prop="nodeName">
                    <el-input v-model="form.nodeName" />
                </el-form-item>
            </el-form>
        </hc-dialog>
    </hc-page-split>
</template>

<script setup>
import mainApi from "~api/desk/test-classify";
import { getArrValue, getObjVal, formValidate } from "js-fast-way";
import { onMounted, ref, nextTick } from "vue";
import { HcDelMsg } from "hc-vue3-ui";

onMounted(() => {
    getTreeData();
});
//页面分割
const splitOptions = { sizes: [50, 50], snapOffset: 0, minSize: [300, 300] };
const treeProps = ref({
    label: "nodeName",
    children: "children",
    isLeaf: "hasChildren",
});
const leftTreeData = ref([]);
const rightTreeData = ref([]);
const treeMenuDatas = [
    { icon: "add-circle", label: "新增节点", key: "add" },
    { icon: "draft", label: "编辑节点", key: "edit" },
    { icon: "delete-bin", label: "删除节点", key: "del" },
];
//菜单被点击
const treeMenuClick = async ({ key, data, node, keys }) => {
    if (key == "add") {
        form.value = {
            id: "",
            nodeName: "",
            parentId: data.id,
            nodeType: data.nodeType,
        };
        treeTap.value = true;
    } else if (key == "edit") {
        form.value = {
            id: data.id,
            parentId: data.parentId,
            nodeName: data.nodeName,
            nodeType: data.nodeType,
        };
        treeTap.value = true;
    } else if (key == "del") {
        HcDelMsg(async (resolve) => {
            const { code } = await mainApi.setTreeRemove({ id: data.id });
            resolve(); //关闭弹窗的回调
            if (code !== 200) return;
            window.$message.success("删除成功");
            getTreeData();
        }).then();
    }
};
const getTreeData = async () => {
    const { data, code } = await mainApi.getTreeAll();
    if (code === 200) {
        let { leftTree, rightTree } = getObjVal(data);
        //左边树
        if (leftTree.length > 0) {
            leftTree.forEach((val) => {
                val.hasChildren = !val.hasChildren;
            });
        }
        leftTreeData.value = getArrValue(leftTree);

        //右边树
        if (rightTree.length > 0) {
            rightTree.forEach((val) => {
                val.hasChildren = !val.hasChildren;
            });
        }
        rightTreeData.value = rightTree;
    } else {
        leftTreeData.value = [];
        rightTreeData.value = [];
    }
};

//新增编辑
const form = ref({});
const treeTap = ref(false);
const treeClose = () => {};
const formRef = ref(null);
const fromRules = {
    nodeName: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
};
const saveLoading = ref(false);
const saveTree = async () => {
    const formRes = await formValidate(formRef.value);
    if (!formRes) return false;
    const { code, msg } = await mainApi.setTreeSubmit(form.value);
    if (code === 200) {
        window.$message.success(msg);
        treeTap.value = false;
        getTreeData();
    }
};
</script>

<style scoped lang="scss">
.header_box {
    width: 100%;
    background-color: #4095e5;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: white;
}
.greent_title {
    background-color: #17a854;
}
</style>
