<template>
	<div>
		<!-- 	<v-form-designer ref="vfDesigner" :field-list-api="fieldListApi" :banned-widgets="testBanned"
	               :designer-config="designerConfig"> -->
		<v-form-designer ref="vfDesigner" :designer-config="designerConfig">
			<template #customToolButtons>
				<el-button type="text" @click="saveFormJson">保存</el-button>
				<!-- <el-button type="primary" @click="search">查询</el-button> -->
			</template>
		</v-form-designer>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	// import {
	// 	useRoute
	// } from 'vue-router';

	// const route = useRoute();




	onMounted(() => {
		formJson.value.menuId = proxy.$route.query.menuId
		formJson.value.formName = proxy.$route.query.formName
		formJson.value.formType = proxy.$route.query.formType
		formJson.value.json = {}
		// 临时屏蔽
		// getForm()
	})

	const menuId = ref('')
	const formName = ref('')
	const formType = ref('')
	const vfDesigner = ref(null)

	const fieldListApi = reactive({
		URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
		labelKey: 'fieldLabel',
		nameKey: 'fieldName'
	})
	const testBanned = ref([
		//'sub-form',
		//'alert',
	])
	const designerConfig = reactive({
		languageMenu: false,
		//externalLink: false,
		//formTemplates: false,
		//eventCollapse: false,
		//clearDesignerButton: false,
		//previewFormButton: false,
		toolbarMaxWidth: 500,
		//presetCssCode: '.abc { font-size: 16px; }',
	})


	const formJson = ref({})

	const getForm = () => {
		console.log(JSON.stringify(formJson.value))
	 
		var url = 'framework/LowCode/queryForm'
		var param = {
			menuId: formJson.value.menuId,
			formName: formJson.value.formName,
			formType: formJson.value.formType
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				 console.log(typeof response.data.data.json)
				 console.log(response.data.data.json)
				 
				if (response.data.data && response.data.data.json != null && response.data.data.json != '{}'&& response.data.data.json != '') {
					formJson.value = response.data.data
					vfDesigner.value.setFormJson(formJson.value.json)
				} else {
					vfDesigner.value.clearDesigner()
				}
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		});
	}



	const saveFormJson = () => {
		// let formJson = vfDesigner.value.getFormJson()
		//TODO: 将formJson提交给后端保存接口，需自行实现！！ 

		formJson.value.json = vfDesigner.value.getFormJson()

		var url = 'framework/LowCode/saveForm'
		var param = {
			json: JSON.stringify(formJson.value)
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				formJson.value = response.data.data
				ElMessage.success('保存成功！' + response.data.msg)
			} else {
				ElMessage.error('保存失败！' + response.data.msg)
			}

		})
	}
</script>

<style lang="scss" scoped>
	body {
		margin: 0;
	}
</style>