<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" @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">
import { EDesigner } from "@/components/EpicDesigner";
import FlowDesign from "@/components/FlowDesign/index.vue";
import { transformFormConfig } from "./utils/transformFormConfig";
import { processData } from "./utils/processData";
const activeName = ref("form");
const pageSchema = ref({
    schemas: [
        {
            type: "page",
            id: "root",
            children: [
                {
                    componentProps: {
                        placeholder: "请输入"
                    },
                    field: "input_4wujh0i3",
                    input: true,
                    label: "输入框",
                    type: "input",
                    id: "input_4wujh0i3"
                }
            ]
        }
    ]
});
// 是否只读
const readOnly = ref(false);
//流程设计器表单权限
const fields = ref<any[]>([]);
//标签页点击事件
const handleTabsClick = (value: any) => {
    console.log(value);
};
//表单设计器保存事件(将表单设计器的数据转成流程设计器可识别的表单权限)
const handleEDesignerSave = (json: any) => {
    console.log(json, "=========表单设计器数据==========");
    //将表单设计器中的表单转换成流程设计器表单权限
    fields.value = transformFormConfig(json.schemas);
    fields.value = processData(fields.value);
    console.log(fields.value, "==========过滤后的数据===========");
};

// 流程节点(默认值)
const process = ref<any>({
    id: "root",
    pid: undefined,
    type: "start",
    name: "发起人",
    executionListeners: [],
    formProperties: [],
    next: {
        id: "end",
        pid: "root",
        type: "end",
        name: "流程结束",
        executionListeners: [],
        next: undefined
    } as any
} as any);
</script>

<style scoped>
.designer-page {
    height: 100vh;
    overflow: hidden;
}
</style>
