<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 v-for="(item,index) in formTabs" :key="index" :label="item.formType+'-'+item.formName"
				:name="item.formType+'-'+item.formName">
				<el-row>
					<el-col :span="10">
						<el-card :body-style="cardBodyStyle">
							<el-transfer v-model="rightData" :data="leftData" @change="change" />
						</el-card>
						<!-- 							<el-transfer v-model="rightData" :data="tableData" @change="change"
								:props="{key:'prop',label:'prop'}" /> -->
					</el-col>
					<el-col :span="8">
						<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-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="查询" />
					<el-option label="录入" value="录入" />
				</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('')
	const formTabs = ref([])
	const queryFormTabs = () => {
		var url = 'framework/MenuForm/queryTabsByMenuId'
		var param = {
			menuId: form.value.menu.id
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				formTabs.value = response.data.data
				if (formTabs.value && formTabs.value.length > 0) {
					activeName.value = formTabs.value[0].formType + '-' + formTabs.value[0].formName
					selectFormType.value = formTabs.value[0].formType
					selectFormName.value = formTabs.value[0].formName
					queryMenuForm()
				} 
			} else {
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		})
	}
	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
				tableData.value = response.data.data.fields
				for (var item of tableData.value) {
					leftData.value.push({
						key: item.prop,
						label: item.prop,
					})
				}
				queryFormTabs()
			} 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 = {
			formType: '',
			formName: ''
		}

		dialogVisibleForm.value = true
	}
	const handleSaveForm = () => {
		formTabs.value.push(newForm.value)
		activeName.value = newForm.value.formType + '-' + newForm.value.formName
		dialogVisibleForm.value = false
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: selectFormType.value,
						formname: selectFormName.value, 
						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/MenuForm/saveAll'
		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 formForm = ref({
		id: '',
		menuId: '',
		formType: '',
		prop: '',
		label: '',
		type: '',
		url: '',
		param: '',
		optionLabel: '',
		optionValue: '',
		searchButton: '',
		searchCallback: ''
	})



	const selectFormType = ref('')
	const selectFormName = ref('')
	const handleTabsClick = (tab, event, item) => { 
		rightData.value = []
		var arr = tab.props.name.split('-')
		selectFormType.value = arr[0]
		selectFormName.value = arr[1]
		queryMenuForm()
	}

	const queryMenuForm = () => {
		var url = 'framework/MenuForm/queryMenuForm'
		var param = {
			menuId: form.value.menu.id,
			formType: selectFormType.value,
			formName: selectFormName.value
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				tableDataForm.value = response.data.data

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

					rightData.value.push(item.prop)
				}
				console.log(rightData.value)

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




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

<style>
</style>