<template>
	<div class="page padding bg page-full">
		<form-create v-if="show" v-model="formData" v-model:api="fapi" :rule="rule" :option="option" @submit="onSubmit"></form-create>
	</div>
</template>

<script setup>
import { ref } from 'vue'
// import formCreate from '@form-create/element-ui'
import formCreate from './form-create.es.js'
import api from '/@/api/modules/designer'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

// 设计器中的拓展需要同步写在这里才能生效
formCreate.extendApi((api) => {
	/**
	 * 扩展一个 message 方法用于显示弹窗
	 * @param {string} msg - 要显示的消息内容
	 * @param {string} [type='info'] - 消息类型 ('success', 'warning', 'info', 'error')
	 */
	api.message = (msg, type = 'info') => {
		return ElMessage({
			message: msg,
			type: type, // 默认为 'info'
		})
	}

	/**
	 * 扩展一个 dayjs 方法用于日期格式化
	 */
	api.dayjs = dayjs
})

const route = useRoute()

const code = route.path.replace('/designerPage/', '').replace('/designer/', '')

const show = ref(false)
const option = ref({})
const rule = ref([])
const fapi = ref(null)
const formData = ref({})

api.get(code).then((res) => {
	if (res.content) {
		const data = JSON.parse(res.content)?.[0]
		option.value = formCreate.parseJson(data?.options)
		rule.value = formCreate.parseJson(data?.rule)
		show.value = true
	}
})

const onSubmit = () => {
	//todo 提交表单
}
</script>
<style scoped>
.from-create ::v-deep(.el-tree-node-disabled > .el-tree-node__content) {
	color: var(--fc-text-color-3) !important;
}
</style>
