<template>
	<div class="fc-designer-wrap">
		<form-designer ref="fcDesignerRef" >
			<template #btns>
				<el-button plain @click="consoleLog($refs.fcDesignerRef)">打印JSON</el-button>
				<el-button plain @click="consoleLogOptions($refs.fcDesignerRef)">打印Options</el-button>
			</template>
		</form-designer>
	</div>
</template>

<script>
	import { defineComponent,ref  } from 'vue'
	import formDesigner from '../../components/FormDesigner'

	export default defineComponent({
		name: 'index',
		components: { formDesigner,},
		setup () {
			const consoleLog = (ref) => {
				// 控制台打印JSON
				console.log('rule', ref.getRule())
			}

			const consoleLogOptions = (ref) => {
				// 控制台打印Option
				console.log('option', ref.getOption())
			}

			return {
				consoleLog,
				consoleLogOptions,
			}
		}
	})
</script>

<style scoped>
	.fc-designer-wrap {
		height: 100vh;
	}
</style>