<template>
	<el-dialog v-model="state.isShowDialog" width="70%" center>
		<div v-drag="['.app-container .el-dialog', '.app-container .el-dialog__header']"></div>
		<formCreate v-model="formData" v-model:api="state.fApi" :rule="state.rule" :option="state.option"></formCreate>
	</el-dialog>
</template>
<script setup>
import { reactive } from 'vue';
import { get } from '@/api/public/basic';
import { ElMessage } from 'element-plus';
import xForm from '@/xForm/pc/index.es.js';
const formCreate = xForm.formCreate

const props = defineProps({
	listId: {
		type: String,
		default: '',
	},
});

const state = reactive({
	//实例对象
	fApi: {},
	//表单数据
	formData: {},
	//表单生成规则
	rule: [],
	//组件参数配置
	option: {},
	title: '',
	isShowDialog: false,
});

const openDialog = (pageId) => {
	get(pageId, props.listId).then((response) => {
		if (response.status == 0) {
			const data = response.data && response.data[0];
			state.title = data.title;

			if (data.template) {
				const templateParse = JSON.parse(data.template);
				state.rule = templateParse.rule;
				state.option = templateParse.options;
				state.isShowDialog = true;
			}
		} else {
			ElMessage.error(response.msg);
		}
	});
};

defineExpose({
	openDialog,
});
</script>
