<!-- 用于展示表单设计完成的页面 -->
<template>
	<formCreate v-if="state.option" v-model="formData" v-model:api="state.fApi" :rule="state.rule" :option="state.option"></formCreate>
</template>
<script setup>
import { reactive, onMounted } from 'vue';
import { get } from '@/api/public/basic';
import { getDetail} from '@/api/system/page';
import { ElMessage,ElMessageBox } from 'element-plus';
import { gatherId } from '@/utils/dataGather';
import { useRoute } from 'vue-router';
import UploadBox from '@/views/develop/page/components/uploadBox/uploadBox.vue';
import DescriptionSelf from '@/views/develop/page/components/descriptionSelf/descriptionSelf.vue';
import PaginationBox from '@/views/develop/page/components/paginationBox/paginationBox.vue';
import EditTableBox from '@/views/develop/page/components/editTableBox/editTableBox.vue';
import xForm from '@/xForm/pc/index.es.js';
const formCreate = xForm.formCreate
xForm.component('UploadBox', UploadBox);
xForm.component('DescriptionSelf', DescriptionSelf);
xForm.component('PaginationBox', PaginationBox);
xForm.component('EditTableBox', EditTableBox);

const route = useRoute();

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

const state = reactive({
	// 页面id
	pageId: '',
	//实例对象
	fApi: {},
	//表单数据
	formData: {},
	//表单生成规则
	rule: [],
	//组件参数配置
	option: null,
	isShowDialog: false,
	modeDataId: gatherId.PAGE_LIST_ID,
});

const decodeHexString = (hexString) => {
	let str = '';
	for (let i = 0; i < hexString.length; i += 2) {
		const hexChar = hexString.substr(i, 2);
		const charCode = parseInt(hexChar, 16);
		str += String.fromCharCode(charCode);
	}
	return str;
};

const getPageConfig = () => {
	getDetail(state.pageId).then((response) => {
		if (response.status == 0) {
			const data = response.data && response.data[0];
			if (data.template) {
				const templateParse = formCreate.parseJson(data.template);
				state.rule = templateParse.rule;
				state.option = templateParse.options;
				state.isShowDialog = true;
			}
		} else {
			ElMessage.error(response.msg);
		}
	});
};

onMounted(() => {
	// 获取路由参数
	if (route.query.pid) {
		state.modeDataId = gatherId.PAGE_LIST_NO_ACL_ID;
		state.pageId = route.query.pid;
	} else {
		state.modeDataId = gatherId.PAGE_LIST_ID;
		let patchArr = route.path.split('/');
		let str = patchArr[patchArr.length - 1];
		state.pageId = decodeHexString(str);
	}

	// 新增扩展方法
	formCreate.extendApi((api) => {
		api.message = (msg, type) => {
			return ElMessage({
				message: msg,
				type: type || 'info',
			});
		};
		api.ElMessageBox = () => {
			return ElMessageBox
		}
	})
	getPageConfig();
});

defineExpose({});
</script>
