<template>

	<el-card :body-style="cardBodyStyle">
		<el-button type="warning" @click="handleSearch">重置</el-button>
		<el-button type="primary" @click="handleAdd">新增</el-button>
		<el-button type="success" @click="handleSave">保存</el-button>
	</el-card>

	<el-card :body-style="cardBodyStyle">
		<el-tabs v-model="activeName" type="border-card" @tab-click="handleTabsClick">
			<el-tab-pane label="查询" name="search">
				<el-row>
					<el-col :span="4">
						<el-card :body-style="cardBodyStyle">
							<el-table :data="tableDataSearch" highlight-current-row border @row-click="rowClickSearch">
								<el-table-column prop="formName" label="表单名称" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column label="操作" header-align="center" align="center" show-overflow-tooltip
									width="100px" fixed="right">
									<template #default="scope">
										<el-button plain type="danger" size="small"
											@click="handleDeleteForm(scope.row )">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>

					<el-col :span="10">
						<el-card :body-style="cardBodyStyle">
							<el-transfer v-model="rightData" :data="leftData" @change="change" />
						</el-card>
					</el-col>



					<el-col :span="4">
						<el-card :body-style="cardBodyStyle">
							<el-table :data="tableDataForm" border @row-click="rowClick">
								<el-table-column prop="label" label="标签" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="prop" label="属性" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>

					<el-col :span="6">
						<el-card :body-style="cardBodyStyle">
							<el-form :model="formForm" label-width="100px" :inline="true">
								<el-form-item label="id" v-if="false">
									<el-input v-model="formForm.id"></el-input>
								</el-form-item>
								<!-- 	<el-form-item label="表单类型">
									<el-select v-model="formForm.formType" style="width: 200px;" clearable>
										<el-option label="查询" value="查询" />
										<el-option label="录入" value="录入" />
									</el-select>
								</el-form-item>
								<el-form-item label="表单名称">
									<el-input v-model="formForm.formName" style="width: 200px;"></el-input>
								</el-form-item> -->

								<el-form-item label="控件标签">
									<el-input v-model="formForm.label" style="width: 200px;"></el-input>
								</el-form-item>
								<el-form-item label="控件属性">
									<el-input v-model="formForm.prop" style="width: 200px;"></el-input>
								</el-form-item>

								<el-form-item label="排序">
									<el-input-number v-model="formForm.sort" :min="1" :max="100"
										style="width: 200px;" />
								</el-form-item>
								<div>
									<el-form-item label="控件类型">
										<el-select v-model="formForm.type" style="width: 200px;" clearable>
											<el-option label="输入框" value="input" />
											<el-option label="下拉框" value="select" />
											<el-option label="单选框" value="radio" />
											<el-option label="日期" value="date" />
											<el-option label="日期范围" value="daterange" />
											<el-option label="时间范围" value="datetimerange" />
										</el-select>
									</el-form-item>



								</div>
								<div v-if="(formForm.type=='select'||formForm.type=='radio')  ">
									<el-form-item label="字典类型">
										<el-input v-model="formForm.dicType" style="width: 200px;"></el-input>
									</el-form-item>
								</div>

								<div v-if="formForm.type=='input'">
									<el-form-item label="包含按钮">
										<el-select v-model="formForm.searchButton" style="width: 200px;" clearable>
											<el-option label="是" value="1" />
											<el-option label="否" value="0" />
										</el-select>
									</el-form-item>
									<el-form-item label="按钮回调">
										<el-input v-model="formForm.searchCallback" style="width: 200px;"></el-input>
									</el-form-item>
								</div>

								<div v-if="(formForm.type=='select'||formForm.type=='radio')  ">
									<el-form-item label="自定义url">
										<el-input v-model="formForm.url" style="width: 200px;"></el-input>
									</el-form-item>
									<el-form-item label="自定义参数">
										<el-input v-model="formForm.param" style="width: 200px;"></el-input>
									</el-form-item>
									<el-form-item label="option标签">
										<el-input v-model="formForm.optionLabel" style="width: 200px;"></el-input>
									</el-form-item>
									<el-form-item label="option值">
										<el-input v-model="formForm.optionValue" style="width: 200px;"></el-input>
									</el-form-item>
								</div>

							</el-form>
						</el-card>
					</el-col>




				</el-row>


			</el-tab-pane>


			<el-tab-pane label="录入" name="input">
				<el-col :span="8">
					<el-card :body-style="cardBodyStyle">
						<el-card :body-style="cardBodyStyle">
							<el-table :data="tableDataInput" highlight-current-row border @row-click="rowClickInput">
								<el-table-column prop="formName" label="表单名称" header-align="center" align="center"
									show-overflow-tooltip>
								</el-table-column>
								<el-table-column label="操作" header-align="center" align="center" show-overflow-tooltip
									width="200px" fixed="right">
									<template #default="scope">
										<el-button plain type="success" size="small"
											@click="handleDesignInput(scope.row)">设计</el-button>
										<el-button plain type="warning" size="small"
											@click="handleEditInput(scope.row)">编辑</el-button>
										<el-button plain type="danger" size="small"
											@click="handleDeleteForm(scope.row )">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-card>
					</el-card>
				</el-col>


			</el-tab-pane>
		</el-tabs>
	</el-card>









	<el-card :body-style="cardBodyStyle">
		<el-tabs v-model="activeName" type="border-card" @tab-click="handleTabsClick">
			<el-tab-pane v-for="(item,index) in formTabs" :key="index" :label="item.formType+'-'+item.formName"
				:name="item.formType+'-'+item.formName">
				<el-row>


				</el-row>
			</el-tab-pane>
		</el-tabs>
	</el-card>

	<el-dialog :close-on-click-modal="false" draggable v-model="dialogVisibleForm" width="1200px">
		<el-form :model="newForm" label-width="100px" :inline="true">
			<el-form-item label="表单类型">
				<el-select v-model="newForm.formType" style="width: 200px;" clearable>
					<el-option label="查询" value="search" />
					<el-option label="录入" value="input" />
				</el-select>
			</el-form-item>
			<el-form-item label="表单名称">
				<el-input v-model="newForm.formName" style="width: 200px;"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="success" @click="handleSaveForm">保存</el-button>
				<el-button type="danger" @click="()=>dialogVisibleForm=false">取消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

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

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

	onMounted(() => {})

	const props = defineProps({
		tableName: {
			type: String,
			default: ''
		}
	})
	const ruleFormRef = ref()
	const newForm = ref({
		formType: '',
		formName: ''
	})



	const activeName = ref('search')
	const formTabs = ref([])

	const leftData = ref([])
	const rightData = ref([])
	const tableDataForm = ref([])

	const form = ref({})
	const tableData = ref([])

	const handleSearch = () => {
		leftData.value = []
		rightData.value = []
		tableDataForm.value = []
		// console.log(props.tableName)
		var url = 'framework/LowCode/query'
		var param = {
			tableName: props.tableName
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == 0) {
				form.value = response.data.data
				// console.log(JSON.stringify(form.value.menu.id))
				tableData.value = response.data.data.fields
				for (var item of tableData.value) {
					leftData.value.push({
						key: item.prop,
						label: item.prop,
					})
				}
				// queryFormTabs()
				queryFormList()
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
				tableData.value = []
			}
		})
	}


	const handleRefresh = () => {
		console.log(props.tableName)
		var url = 'framework/LowCode/query'
		var param = {
			tableName: props.tableName
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == 0) {
				form.value = response.data.data
				tableData.value = response.data.data.fields
				for (var item of tableData.value) {
					leftData.value.push({
						key: item.prop,
						label: item.prop,
					})
				}
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
				tableData.value = []
			}
		})
	}


	const dialogVisibleForm = ref(false)
	const handleAdd = () => {
		newForm.value = {
			menuId: form.value.menu.id,
			formType: '',
			formName: '',
			json: ''
		}
		dialogVisibleForm.value = true
	}
	const handleSaveForm = () => {
		// formTabs.value.push(newForm.value)
		formType.value = newForm.value.formType
		activeName.value = newForm.value.formType
		dialogVisibleForm.value = false

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





		// selectFormType.value = newForm.value.formType
		// selectFormName.value = newForm.value.formName
		// rightData.value = []
	}

	const value = ref([])


	const formItem = ref({
		id: '',
		menuId: '',
		formType: '',
		prop: '',
		label: '',
		type: '',
		url: '',
		param: '',
		optionLabel: '',
		optionValue: '',
		searchButton: '',
		searchCallback: ''
	})





	const change = (value, direction, movedKeys) => {



		if (direction == 'right') {
			for (var key of movedKeys) {
				console.log(key)
				if (!tableDataForm.value.some((item) => item.prop == key)) {
					let obj = tableData.value.find(item => item.prop == key);
					tableDataForm.value.push({
						id: '',
						menuId: form.value.menu.id,
						formType: formForm.value.formType,
						formName: formForm.value.formName,
						prop: obj.prop,
						label: obj.fieldComment,
						type: '',
						url: '',
						param: '',
						optionLabel: '',
						optionValue: '',
						searchButton: '',
						searchCallback: ''
					})
				}
			}
			console.log(tableDataForm.value.length)
		}
		if (direction == 'left') {
			for (var key of movedKeys) {
				console.log(key)
				let index = tableDataForm.value.findIndex(item => item.prop == key);
				tableDataForm.value.splice(index, 1)
			}
		}


	}

	const handleSave = () => {

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


	}


	const rowClick = (row) => {
		formForm.value = row
	}



	const rowClickSearch = (row) => {
		formForm.value = row
		queryFormItem()
	}

	const rowClickInput = (row) => {
		formForm.value = row
	}
	const handleDesignInput = (row) => {
		const target = proxy.$router.resolve({
			path: '/formdesigner',
			query: {
				menuId: form.value.menu.id,
				formName: row.formName,
				formType: row.formType
			}
		})
		window.open(target.href, '_blank')
	}

	const handleDeleteForm = (row) => {
		ElMessageBox.confirm('此操作将删除该数据,非逻辑删除,是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {

			var url = 'framework/LowCode/removeForm'
			var param = {
				id: row.id
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == '0') {
					queryFormList()
					ElMessage({
						type: 'success',
						message: '操作成功'
					});
				} else {
					ElMessage({
						type: 'error',
						message: '操作失败' + response.data.msg,
					});
				}
			});

		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			});
		});
	}






	const formForm = ref({
		id: '',
		menuId: '',
		formType: '',
		prop: '',
		label: '',
		type: '',
		url: '',
		param: '',
		optionLabel: '',
		optionValue: '',
		searchButton: '',
		searchCallback: ''
	})



	const selectFormType = ref('')
	const selectFormName = ref('')


	const formType = ref('search')
	const tableDataSearch = ref([])
	const tableDataInput = ref([])

	const handleTabsClick = (tab, event, item) => {
		formType.value = tab.props.name
		queryFormList()
	}


	const queryFormList = () => {

		var url = 'framework/LowCode/queryFormList'
		var param = {
			menuId: form.value.menu.id,
			formType: formType.value
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {

				if (formType.value == 'search') {
					tableDataSearch.value = response.data.data

					for (var item of tableDataForm.value) {
						// rightData.value.push({
						// 	key: item.prop,
						// 	label: item.prop, 
						// })

						rightData.value.push(item.prop)
					}


				} else {
					tableDataInput.value = response.data.data
				}


			} else {
				ElMessage({
					type: 'error',
					message: '操作失败' + response.data.msg,
				});
			}
		});
	}




	const queryFormItem = () => {
		var url = 'framework/LowCode/queryFormItem'
		var param = {
			menuId: formForm.value.menuId,
			formType: formForm.value.formType,
			formName: formForm.value.formName
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				rightData.value = []
				tableDataForm.value = response.data.data
				if (tableDataForm.value.length > 0) {
					for (var item of tableDataForm.value) {
						rightData.value.push(item.prop)
					}
				} else {
					rightData.value = []
				}

			} else {
				ElMessage({
					type: 'error',
					message: '操作失败' + response.data.msg,
				});
			}
		});
	}




	defineExpose({
		ruleFormRef,
		handleSearch,
		handleSave
	})
</script>

<style>
</style>