<template>
	<xForm ref="designer" @save="handleSave" submitBtn :config="state.config" height="100vh" />
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { add,getDetail,update} from '@/api/system/page';
import xForm from '@/xForm/pc/index.es.js';

// 引入自定义组件
// import { imageBoxRule } from '../components/imageBox/imageBox.js';
import { scheduleBoxRule } from '../components/scheduleBox/scheduleBox.js';
import { calendarBoxRule } from '../components/calendarBox/calendarBox.js';
import { codeBoxRule } from '../components/codeBox/codeBox.js';
import { uploadBox } from '../components/uploadBox/uploadBox.js';
import { descriptionSelf } from '../components/descriptionSelf/descriptionSelf.js';
import { paginationRule } from '../components/paginationBox/paginationRule.js';
import { editTableRule } from '../components/editTableBox/editTableRule.js';
import ScheduleBox from '../components/scheduleBox/scheduleBox.vue';
import CalendarBox from '../components/calendarBox/calendarBox.vue';
import CodeBox from '../components/codeBox/codeBox.vue';
import UploadBox from '../components/uploadBox/uploadBox.vue';
import DescriptionSelf from '../components/descriptionSelf/descriptionSelf.vue';
import PaginationBox from '../components/paginationBox/paginationBox.vue';
import EditTableBox from '../components/editTableBox/editTableBox.vue';
xForm.component('ScheduleBox', ScheduleBox);
xForm.component('CalendarBox', CalendarBox);
xForm.component('CodeBox', CodeBox);
xForm.component('UploadBox', UploadBox);
xForm.component('DescriptionSelf', DescriptionSelf);
xForm.component('PaginationBox', PaginationBox);
xForm.component('EditTableBox', EditTableBox);

const listId = 'hQyTUtB5WjC'; // 页面表id
// 可以在此处获取设计器实例或进行其他操作
const designer = ref(null);
const route = useRoute();

const state = reactive({
	config: {
		// 显示保存按钮
		showSaveBtn: true,
		//控制字段ID输入框能否输入
		fieldReadonly: false,
		showJsonPreview: true,
		showInputData: true,
	},
	ruleJson: undefined, // 表单生成规则
	optionsJson: undefined, // 表单配置
	pageId: '',
});

const handleSave = async () => {
	state.ruleJson = designer.value.getJson();
	state.optionsJson = designer.value.getOptionsJson();
	const title = JSON.parse(designer.value.getOptionsJson()).formName;
	if (!title) {
		ElMessage.error({
			message: '请输入表单名称',
			type: 'warning',
			plain: true,
		});
		return;
	}
	// 保存数据
	const data = {
		title: JSON.parse(designer.value.getOptionsJson()).formName,
		template: `{"rule": ${state.ruleJson},"options": ${state.optionsJson}}`,
	};

	if (state.pageId) {
		// 修改
		update(state.pageId, data, listId).then((response) => {
			if (response.status == 0) {
				ElMessage({
					message: '保存成功',
					type: 'success',
					plain: true,
				});
			} else {
				ElMessage.error(response.msg);
			}
		});
	} else {
		add(data).then((response) => {
			if (response.status == 0) {
				ElMessage.success('保存成功');
				state.pageId = response.data;
				// 将state.pageId存入localstorage
				localStorage.setItem('pageId', state.pageId);
			} else {
				ElMessage.error(response.msg);
			}
		});
	}
	// }
};

onMounted(() => {
	// 注册自定义组件
	// designer.value.addComponent(imageBoxRule);
	designer.value.addComponent(scheduleBoxRule);
	designer.value.addComponent(calendarBoxRule);
	designer.value.addComponent(codeBoxRule);
	designer.value.addComponent(uploadBox);
	designer.value.addComponent(descriptionSelf);
	designer.value.addComponent(paginationRule);
	designer.value.addComponent(editTableRule);

	// console.log(process.env)

	// 获取路由参数
	state.pageId = route.query.pageId || localStorage.getItem('pageId');
	const isNewPageBtnClick = localStorage.getItem('isNewPageBtnClick');

	if (isNewPageBtnClick) {
		// 清除localstorage中的isNewPageBtnClick
		localStorage.removeItem('isNewPageBtnClick');
		// 清除state.pageId
		state.pageId = '';
		localStorage.removeItem('pageId');
	}

	if (state.pageId) {
		// 获取页面数据
		getDetail(state.pageId).then((response) => {
			if (response.status == 0) {
				const data = response.data && response.data[0];
				if (data.template) {
					const templateParse = JSON.parse(data.template);
					state.ruleJson = templateParse.rule;
					state.optionsJson = templateParse.options;
					designer.value.setOptions(state.optionsJson);
					designer.value.setRule(state.ruleJson);
				}
			} else {
				ElMessage.error(response.msg);
			}
		});
		// 将state.pageId存入localstorage
		localStorage.setItem('pageId', state.pageId);
	}
});

onUnmounted(() => {
	// 页面卸载时清除localstorage中的pageId
	localStorage.removeItem('pageId');
});
</script>
<style></style>
