<template>
    <div class="edit-popup">
        <popup ref="popupRef" :title="popupTitle" :async="true" width="60vw" @confirm="handleSubmit"
            @close="handleClose">
            <el-card>
                <template #header>
                    审批内容
                </template>
                <generateForm :config="formData.data" :form-data="formData.extends"></generateForm>
            </el-card>
            <oaFlow :form-data="formData"></oaFlow>
        </popup>
    </div>
</template>

<script lang="ts" setup name="oaFlowTypeEdit">
import generateForm from './../../components/generateForm/index.vue'
import Popup from "@/components/popup/index.vue";
import { apiOaoaApproveAdd } from "@/api/oa_Initiate"

const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");
const showDialog = ref(false)

// 弹窗标题
const popupTitle = computed(() => {
    return mode.value == "edit" ? "编辑审批类型" : "新增审批类型";
});

// 表单数据
const formData = reactive({
    data: [],
    extends: {}
});


// 表单验证
const formRules = reactive<any>({
    type: [
        {
            required: true,
            message: "请输入所属分类",
            trigger: ["blur"],
        },
    ]
});

// 获取详情
const setFormData = async (data: Record<any, any>) => {
    formData.data = data.data;
};




// 提交按钮
const handleSubmit = async () => {
    await formRef.value?.validate();
    const data = { ...formData };
    await apiOaoaApproveAdd(data)
    popupRef.value?.close();
    emit("success");
};

//打开弹窗
const open = (type = "add") => {
    mode.value = type;
    popupRef.value?.open();
};

// 关闭回调
const handleClose = () => {
    emit("close");
};

defineExpose({
    open,
    setFormData,
});
</script>