<template>
    <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
            <form-render ref="formCreateRef" :currFlowForm="form.currFlowForm" v-if="!validateNull(form.currFlowForm)" :renderType="'-1'"
                         :initFormPermPrint="initFormPermPrint">
            </form-render>
        </div>
        <footer class="el-dialog__footer">
            <span class="dialog-footer">
                <el-button type="primary" @click="printForm" v-if="form.currFlowForm.printInfo">{{
                        t('jfI18n.print')
                    }}
                </el-button>
            </span>
        </footer>

        <!-- 打印表单 -->
        <el-dialog v-model="form.showTinymceView" top="20px" width="700px"
                   :title="form.tinymceTitle" append-to-body
                   @close="closePrint">
            <tinymce-view v-if="form.showTinymceView" :currFlowForm="form.currFlowForm"></tinymce-view>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="RunApplicationView">
    import * as runApplication from "/@/api/order/run-application";
    import {useI18n} from "vue-i18n";
    import {initJobDataByApp} from "../index";
    import {deepClone} from "/@/utils/other";
    import {handleFormPrint} from "/@/flow/utils/form-perm";

    const {t} = useI18n();
    const FormRender = defineAsyncComponent(() => import('/@/flow/components/form-create/render.vue'));
    const formCreateRef = ref(null)
    // 引入组件
    const TinymceView = defineAsyncComponent(() => import('/@/flow/components/tinymce/TinymceView.vue'));

    const props = defineProps({
        currFlowForm: {
            type: Object,
            default: {},
        }
    });

    const form = reactive({
        // 兼容app端监听printInfo
        currFlowForm: {
            type: Object,
            default: {},
        },
        showTinymceView: false,
        tinymceTitle: null,
    });

    const $route = useRoute();
    function initJobData() {
        initJobDataByApp($route, handleGetObj, () => {
            form.currFlowForm = props.currFlowForm
        })
    }

    function handleGetObj(id) {
        runApplication.getObj(id).then(resp => {
            let formData = resp.data ? resp.data : {}
            Object.assign(form.currFlowForm, formData);
        })
    }

    async function initFormPermPrint() {
        await handleFormPrint(form.currFlowForm, form.currFlowForm.type, form.currFlowForm.formId, '1')
    }

    function printForm() {
        form.currFlowForm.formData = formCreateRef.value.design.formData
        form.currFlowForm.modelRefList = []
        let children = formCreateRef.value.design.fApi.children;
        if (children && children.length > 0) {
            // 防止!validateNull(form.currFlowForm)引用循环
            children.forEach(each => form.currFlowForm.modelRefList.push({model: each.model}))
        }
        form.currFlowForm.rule = formCreateRef.value.design.rule
        form.tinymceTitle = form.currFlowForm.formName
        form.showTinymceView = true
    }

    function closePrint(){
        delete form.currFlowForm.modelRefList
        delete form.currFlowForm.rule
    }

    // 监听双向绑定
    watch(
        () => props.currFlowForm.id,
        () => {
            initJobData();
        }
    );

    onMounted(() => {
        initJobData()
    });
</script>

<style lang="scss" scoped>
  .el-dialog__footer {
    text-align: center;
    margin-top: 10px;

    .dialog-footer {
      text-align: center;
    }
  }
</style>

