<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<form-render ref="formCreateRef" :currFlowForm="data.currFlowForm" :initFormPermPrint="initFormPermPrint"> </form-render>
		</div>
		<footer class="el-dialog__footer" v-if="data.submitBtn">
			<span class="dialog-footer">
				<el-button type="primary" @click="submitForm" :disabled="loading">{{ t('jfI18n.submit') }} </el-button>
				<el-button type="primary" @click="handleTempStore" :disabled="loading">{{ t('jfI18n.temp') }} </el-button>
			</span>
		</footer>
	</div>
</template>

<script setup lang="ts" name="FlowApplicationInitiate">
import * as flowApplication from '/@/api/order/flow-application';
import { useI18n } from 'vue-i18n';
import { validateNull } from '/@/utils/validate';
import { deepClone } from '/@/utils/other';
import { setPropsNull } from '/@/flow/support/common';
import { doInitData, doInitiateForm, doTempStore, initFormMethods, initJobDataByApp } from '../index';
import { handleFormStartPerm } from '/@/flow/utils/form-perm';
import { currFormIsView } from '/@/api/order/order-key-vue';

const FormRender = defineAsyncComponent(() => import('/@/flow/components/form-create/render.vue'));
const formCreateRef = ref(null);

const { t } = useI18n();
const $emit = defineEmits(['handleInitiateOrder']);
const loading = ref(false);
const props = defineProps({
	currFlowForm: {
		type: Object,
		default: {},
	},
});

const data = reactive({
	// 兼容app端监听currFlowForm
	currFlowForm: {
		type: Object,
		default: {},
	},
	submitBtn: true,
});

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

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

async function submitForm() {
	await doInitiateForm(loading, props, data, $route, formCreateRef, $emit, saveInitData, t);
}

function handleTempStore() {
	doTempStore(loading, data, $route, formCreateRef, $emit, saveInitData);
}

const methods = initFormMethods(formCreateRef, data);

async function initFormPermPrint(formInfo) {
	// 处理表单权限
	let res = await handleFormStartPerm(null, null, formInfo, data.currFlowForm.defFlowId, null, data.currFlowForm.type);
	await currFormIsView(methods, res.elTab, true, res.callback, res.widgetList);
	return res.elTab;
}

function saveInitData(form) {
	data.currFlowForm.formData = validateNull(form) ? undefined : form;
	let formJson = deepClone(data.currFlowForm);
	formJson.formData = JSON.stringify(formJson.formData);
	formJson.formId = formJson.id;
	setPropsNull(formJson, 'id', 'status');
	return formJson;
}

async function getFormData() {
	return await doInitData(formCreateRef, saveInitData);
}

// 暴露变量
defineExpose({
	getFormData,
});

// 监听双向绑定
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>
