<template>

	<el-card :body-style="cardBodyStyle">
		<el-form label-width="auto" ref="ruleFormRef" :model="form" :rules="rules" status-icon :inline="true">
			<div>
				<el-form-item label="表格列" prop="fixedFlag">
					<el-radio-group v-model="form.fixedFlag" style="width: 200px;" @change="changeFixed">
						<el-radio value="0" label="0">静态列</el-radio>
						<el-radio value="1" label="1">动态列</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="界面" prop="menu.menuName">
					<el-input v-model="form.menu.menuName" style="width: 200px;" >
						<!-- :disabled="form.fixedFlag=='0'" -->
						<template #append>
							<el-button @click="handlePopupMenuTree"><el-icon>
									<Search />
								</el-icon></el-button>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="表格名称" prop="tName">
					<el-input v-model="form.tName" style="width: 200px;" ></el-input>
					<!-- :disabled="form.fixedFlag=='0'" -->
				</el-form-item>
			</div>

			<div>
				<el-form-item label="流程挂载" prop="processFlag">
					<el-radio-group v-model="form.processFlag" style="width: 200px;" @change="changeProcess">
						<el-radio value="0" label="0">不挂载</el-radio>
						<el-radio value="1" label="1">挂载</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="流程Key" prop="processKey">
					<el-input v-model="form.processKey" style="width: 200px;" :disabled="form.processFlag=='0'">
						<template #append>
							<el-button @click="handlePopupProcess"><el-icon>
									<Search />
								</el-icon></el-button>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="流程名称" prop="processName">
					<el-input v-model="form.processName" style="width: 200px;" :disabled="form.processFlag=='0'">
						<template #append>
							<el-button @click="handlePopupProcess"> <el-icon>
									<Search />
								</el-icon></el-button>
						</template>
					</el-input>
				</el-form-item>
			</div>

			<div>
				<el-form-item label="附件挂载" prop="attachmentFlag">
					<el-radio-group v-model="form.attachmentFlag" style="width: 200px;" @change="changeAttachment">
						<el-radio value="0" label="0">不挂载</el-radio>
						<el-radio value="1" label="1">挂载</el-radio>
					</el-radio-group>
				</el-form-item>
				<!-- <el-form-item label="附件类型" prop="attachmentType">
					<el-radio-group v-model="form.attachmentType" style="width: 200px;"
						:disabled="form.attachmentFlag=='0'">
						<el-radio value="0" label="0">表单内</el-radio>
						<el-radio value="1" label="1">表单外</el-radio>
					</el-radio-group>
				</el-form-item> -->
			</div>


		</el-form>
	</el-card>
	<PopupMenuTree ref="refMenu" @receiveFromChild="receiveFromChild"></PopupMenuTree>

</template>

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

	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)
	const inputStyle = ref(style.input)

	import PopupMenuTree from '@/components/PopupMenuTree.vue'

	onBeforeMount(() => {

	})
	const props = defineProps({
		tableName: String
	})

	const form = ref({
		fixedFlag: '0',
		tName: '表格',
		menu: {
			menuName: ''
		},
		processFlag: '0',
		processName: '',
		processKey: '',
		attachmentFlag: '0',
		attachmentType: '0',
	})
	const ruleFormRef = ref()
	const rules = reactive({
		fixedFlag: [{
			required: true,
			message: '请选择列类型',
			trigger: 'change' | 'blur',
		}],
		processFlag: [{
			required: true,
			message: '请选择流程挂载',
			trigger: 'change' | 'blur',
		}],
		attachmentFlag: [{
			required: true,
			message: '请选择附件挂载',
			trigger: 'change' | 'blur',
		}],

		'menu.menuName': [{
			required: false,
			message: '请选择菜单',
			trigger: 'change' | 'blur',
		}],
		tName: [{
			required: false,
			message: '请输入表格名称',
			trigger: 'change' | 'blur',
		}],
		processKey: [{
			required: false,
			message: '请选择流程key',
			trigger: 'change' | 'blur',
		}],
		processName: [{
			required: false,
			message: '请选择流程名称',
			trigger: 'change' | 'blur',
		}],
		attachmentType: [{
			required: false,
			message: '请选择附件挂载类型',
			trigger: 'change' | 'blur',
		}],


	})

	const tableData = ref([])
	const handleSearch = () => {
		var url = 'framework/LowCode/query'
		var param = {
			tableName: props.tableName
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == 0) {
				form.value = response.data.data
				tableData.value = response.data.data.fields
				if (!form.value.menu) {
					form.value.menu = {
						menuId: '',
						menuName: ''
					}
				}
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
				tableData.value = []
			}
		})
	}

	const handleSave = (callback) => {
		form.value.tableName = props.tableName
		var url = 'framework/LowCode/update'
		var param = {
			form: JSON.stringify(form.value),
			json: JSON.stringify(tableData.value)
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == 0) {
				ElMessage({
					type: 'success',
					message: '操作成功!'
				})
				callback()
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				})
			}
		})
	}

	const changeFixed = (value) => {
		if (value == '0') {
			rules.tName[0].required = false
			rules['menu.menuName'][0].required = false
		} else {
			rules.tName[0].required = true
			rules['menu.menuName'][0].required = true
		}
	}

	const changeProcess = (value) => {

		if (value == '0') {
			rules.processKey[0].required = false
			rules.processName[0].required = false
		} else {
			rules.processKey[0].required = true
			rules.processName[0].required = true
		}
	}

	const changeAttachment = (value) => {
		console.log(value)
		if (value == '0') {
			rules.attachmentType[0].required = false
		} else {
			rules.attachmentType[0].required = true
		}
	}




	const handlePopupProcess = () => {

	}


	const refMenu = ref()
	const handlePopupMenuTree = () => {
		refMenu.value.open()
	}


	const receiveFromChild = (data) => { 
		form.value.menu = data
	}
	defineExpose({
		ruleFormRef,
		handleSearch,
		handleSave,
		form
	})
</script>

<style>
</style>