<template>
    <div class="table-box">
        <el-tabs v-model="activeName" class="demo-tabs card" @tab-click="handleTabsClick" type="card">
            <el-tab-pane label="基础设置" name="info"> 基础设置 </el-tab-pane>
            <el-tab-pane label="表单设计器" name="form" style="height: calc(100vh - 80px)">
                <EDesigner :defaultSchema="pageSchema" title="测试0001" :hidePreviewConfirm="true" @save="handleEDesignerSave">
                    <template #header-prefix>
                        <img src="../../assets/images/logo.png" style="width: 28px; height: 28px" />
                        <h3 style="margin-left: 6px">ORICO</h3>
                    </template>
                </EDesigner>
            </el-tab-pane>
            <el-tab-pane label="流程设计" name="process" style="height: calc(100vh - 80px)">
                <FlowDesign :process="process" :fields="fields" :readOnly="readOnly"> </FlowDesign>
            </el-tab-pane>
            <el-tab-pane label="审批流" name="approval" style="height: calc(100vh - 80px)"> 审批流 </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang="ts">
//pluginManager
import { EDesigner } from "epic-designer";
import FlowDesign from "@/views/flowDesign/index.vue";
import type { EndNode, FlowNode, StartNode } from "@/views/flowDesign/nodes/type";
import { transformFormConfig } from "@/utils/transformFormConfig";
const activeName = ref("form");
// pluginManager.hideActivitybar();
//表单设计器数据
const pageSchema = ref({
    schemas: [
        {
            type: "page",
            id: "root",
            children: [
                {
                    componentProps: {
                        placeholder: "请输入"
                    },
                    field: "input_4wujh0i3",
                    input: true,
                    label: "输入框",
                    type: "input",
                    id: "input_4wujh0i3"
                },
                {
                    type: "epic-user-select",
                    label: "用户选择",
                    input: true,
                    field: "epic-user-select_k31aggds",
                    componentProps: {
                        placeholder: "请选择用户",
                        defaultValue: "錢二,姚彤,張三,王五,李五四,李五四",
                        defaultValueClone: [
                            {
                                id: 11,
                                label: "錢二",
                                type: "user"
                            },
                            {
                                id: 21,
                                label: "姚彤",
                                type: "user"
                            },
                            {
                                id: 22,
                                label: "張三",
                                type: "user"
                            },
                            {
                                id: 23,
                                label: "王五",
                                type: "user"
                            },
                            {
                                id: 24,
                                label: "李五四",
                                type: "user"
                            },
                            {
                                id: 25,
                                label: "李五四",
                                type: "user"
                            }
                        ],
                        label: "121212"
                    },
                    name: "UserSelector",
                    id: "epic-user-select_k31aggds"
                }
            ]
        }
    ]
});
// 是否只读
const readOnly = ref(false);
//流程设计器表单权限
const fields = ref<any[]>([]);
//标签页点击事件
const handleTabsClick = (value: any) => {
    console.log(value);
};
const processData = (data: any): any => {
    // 检查是否为对象（非null且非数组）
    if (data !== null && typeof data === "object" && !Array.isArray(data)) {
        // 创建新对象避免直接修改原对象
        const newObj = { ...data };

        // 检查id是否包含"epic-user-select"
        if (newObj.id && newObj.id.includes("epic-user-select")) {
            newObj.name = "UserSelector";
        }
        if (newObj.id && newObj.id.includes("epic-dept-select")) {
            newObj.name = "OrgSelector";
        }
        // 如果有children属性，递归处理每个子元素
        if (newObj.children && Array.isArray(newObj.children)) {
            newObj.children = newObj.children.map((child: any) => processData(child));
        }

        return newObj;
    }
    // 如果是数组，递归处理每个元素
    else if (Array.isArray(data)) {
        return data.map(item => processData(item));
    }

    // 非对象和非数组类型直接返回
    return data;
};
//表单设计器保存事件(将表单设计器的数据转成流程设计器可识别的表单权限)
const handleEDesignerSave = (json: any) => {
    console.log(json, "=========表单设计器数据==========");
    //将表单设计器中的表单转换成流程设计器表单权限
    fields.value = transformFormConfig(json.schemas);
    fields.value = processData(fields.value);
    console.log(fields.value, "==========过滤后的数据===========");
};

// 流程节点(默认值)
const process = ref<FlowNode>({
    id: "root",
    pid: undefined,
    type: "start",
    name: "发起人",
    executionListeners: [],
    formProperties: [],
    next: {
        id: "end",
        pid: "root",
        type: "end",
        name: "流程结束",
        executionListeners: [],
        next: undefined
    } as EndNode
} as StartNode);
</script>
<style scope lang="scss">
.h-full {
    height: calc(100vh - 100px);
}
:deep(.el-tabs__nav-scroll) {
    display: flex;
    justify-content: center;
}
.epic-designer-main {
    height: calc(100% - 150px);
}
.px-10px > .epic-componet-item:nth-child(1) {
    display: none;
}
.px-10px > .epic-componet-item:nth-child(13) {
    display: none;
}
.px-10px > .epic-componet-item:nth-child(14) {
    display: none;
}
.px-10px > .epic-componet-item:nth-child(15) {
    display: none;
}
.px-10px > .epic-componet-item:nth-child(16) {
    display: none;
}
.px-10px > .epic-componet-item:nth-child(17) {
    display: none;
}
.epic-tabs-box > .truncate:nth-child(3) {
    display: none;
}
.epic-header-container {
    border: none;
}
.el-tabs__header {
    margin-bottom: 0;
}
.epic-edit-canvas .epic-edit-range .epic-draggable-range {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 60px;
    padding: 16px;
    border: 1px var(--epic-border-color) dashed;
}
</style>
