<template>
	<div>
		<el-row :gutter="5">
			<el-col :span="16">
				<el-card :body-style="cardBodyStyle">
					<el-form :inline="true">
						<el-form-item style="margin-bottom: 0px;">
							<el-input v-model="queryPostName" placeholder="请输入查询条件" clearable></el-input>
						</el-form-item>
						<el-button type="primary" @click="search">查询</el-button>
						<el-button type="primary" plain @click="handleAdd">新增</el-button>
					</el-form>
				</el-card>
				<el-card :body-style="cardBodyStyle">
					<el-table v-loading="loading" :data="tableData" border @row-click="handleCurrentRowChange"
						ref="table">
						<el-table-column type="index" label="序号" align="center" width="60">
							<template #default="scope">
								<span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="postCode" label="岗位编码" width="120" show-overflow-tooltip
							header-align="center" align="center">
						</el-table-column>
						<el-table-column prop="postName" label="岗位名称" show-overflow-tooltip header-align="center" align="center">
						</el-table-column>
						<el-table-column prop="postDesc" label="岗位说明" show-overflow-tooltip header-align="center" align="center">
						</el-table-column>
						<el-table-column label="操作" width="200px" header-align="center" align="center">
							<template #default="scope">
								<el-button size="small" plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>
								<el-button  size="small" plain type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
					</el-pagination>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card :body-style="cardBodyStyle">
					<el-button type="primary" plain @click="handleAddUserPost">添加</el-button>
				</el-card>
				<el-card :body-style="cardBodyStyle">
					<el-table :data="tableDataUserPost" border>
						<el-table-column prop="id" label="id" show-overflow-tooltip v-if="isShow">
						</el-table-column>
						<el-table-column prop="user.userName" label="用户名" show-overflow-tooltip header-align="center"
							align="center">
						</el-table-column>
						<el-table-column prop="user.userDesc" label="姓名" show-overflow-tooltip header-align="center"
							align="center">
						</el-table-column>
						<el-table-column label="操作" width="100px" header-align="center" align="center">
							<template #default="scope">
								<el-button size="small" plain type="danger" @click="handleDeleteUserPost(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>
		<el-dialog :close-on-click-modal="false" v-dialogDrag title="编辑信息" v-model="dialogVisible" width="500px">


			<!-- 			<el-form :model="form" label-width="80px">
				<el-form-item label="用户编码" v-if="isShow">
					<el-input v-model="form.id"></el-input>
				</el-form-item>
				<el-form-item label="岗位编码">
					<el-input v-model="form.postCode"></el-input>
				</el-form-item>
				<el-form-item label="岗位名称">
					<el-input v-model="form.postName"></el-input>
				</el-form-item>
				<el-form-item label="岗位说明">
					<el-input v-model="form.postDesc"></el-input>
				</el-form-item>
			</el-form> -->

			<!-- 			 <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
			    </v-form-render> -->
			<v-form-render :form-json="formJson" :form-data="form" ref="vFormRef">
			</v-form-render>

			<template #footer>
				<div class="dialog-footer">
					<el-button type="success" @click="handleSave">保存</el-button>
					<el-button type="danger" @click="handleCancelSave">取消</el-button>
				</div>
			</template>

		</el-dialog>

		<el-dialog :close-on-click-modal="false" v-dialogDrag title="编辑信息" v-model="dialogVisibleUser" width="800px">
			<el-card :body-style="cardBodyStyle">
				<el-form :inline="true">
					<el-form-item style="margin-bottom: 0px;">
						<el-input v-model="queryUserDesc" placeholder="请输入查询条件" style="width :200px; "></el-input>
					</el-form-item>

					<el-button type="primary" @click="searchUser">查询</el-button>

				</el-form>
			</el-card>
			<el-card :body-style="cardBodyStyle">
				<el-table :data="tableDataUser" border>
					<el-table-column sortable prop="userName" label="用户名" width="150" show-overflow-tooltip>
					</el-table-column>
					<el-table-column sortable prop="userDesc" label="姓名" width="150" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="操作" width="150">
						<template #default="scope">
							<el-button @click="handleAddUser(scope.row)">加入</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination :current-page="currentPageUser" :page-size="pageSizesUser" :page-sizes="pageSizeUser"
					:total="totalRowsUser" background="background" layout="total, sizes, prev, pager, next, jumper"
					@size-change="handleSizeChangeUser" @current-change="handleCurrentChangeUser">
				</el-pagination>
			</el-card>
		</el-dialog>
	</div>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

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

	onMounted(() => {
		getTableData()
		getForm()
	})


	/**
	 *   查询 
	 */
	const queryUserDesc = ref('')
	const tableData = ref([])
	const search = () => {
		currentPage.value = 1
		getTableData()
	}
	const getTableData = () => {
		loading.value = true
		var url = 'framework/SysPost/query'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
			postName: queryPostName.value
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
			loading.value = false
		});
	}
	/**
	 *   查询 
	 */

	/**
	 * 分页 
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 20, 30, 40])
	const pageSize = ref(10)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页 
	 */

	const formJson = ref({})
	const getForm = () => {
		var url = 'framework/LowCode/queryForm'
		var param = {
			menuId: 'abc',
			formName: 'name',
			formType: 'type'
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				formJson.value = JSON.parse(response.data.data.json)
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		});
	}



	//查询条件
	const queryPostName = ref('')
	//录入框
	const dialogVisible = ref(false)
	const dialogVisibleUser = ref(false)
	const form = ref({
		id: '',
		postCode: '',
		postName: '',
		postDesc: ''
	})
	const isShow = ref(false)
	const loading = ref(true)
	const selectedPostId = ref('')
	const userPost = ref({
		id: '',
		user: {
			id: ''
		},
		post: {
			id: ''
		}
	})
	const currentPageUser = ref(1)
	const totalRowsUser = ref(0)
	const pageSizesUser = ref([10, 20, 30, 40])
	const pageSizeUser = ref(10)



	const tableDataUserPost = ref([])
	const getTableDataUserPost = () => {
		var url = 'framework/SysUserPost/queryByPostId'
		var param = {
			postId: selectedPostId.value
		}
		proxy.$axios.get(url, param).then(response => {
			tableDataUserPost.value = response.data.data
		});
	}

	const tableDataUser = ref([])


	const getTableDataUser = () => {
		var url = 'framework/SysUser/query'
		var param = {
			page: currentPageUser.value,
			rows: pageSizeUser.value,
			userDesc: queryUserDesc.value
		}
		proxy.$axios.get(url, param).then(response => {
			tableDataUser.value = response.data.data.records
			totalRowsUser.value = response.data.data.total
		});
	}
	const handleAddUserPost = () => {
		if (selectedPostId.value === '') {
			ElMessage({
				type: 'error',
				message: '先选择岗位！',
			});
		} else {
			dialogVisibleUser.value = true
		}
	}
	const searchUser = () => {
		getTableDataUser()
	}
	const handleCurrentRowChange = (row) => {
		selectedPostId.value = row.id
		getTableDataUserPost()
	}


	const handleSizeChangeUser = (val) => {
		pageSizeUser.value = val
		getTableDataUser()
	}

	const handleCurrentChangeUser = (val) => {
		currentPageUser.value = val
		getTableDataUser()
	}

	const handleAdd = () => {
		
		form.value = {
			id: '',
			postCode: '',
			postName: '',
			postDesc: ''
		}

		var url = 'framework/SysPost/queryNewCode'
		var param = {}
		proxy.$axios.get(url, param).then(response => {
			dialogVisible.value = true
			form.value.postCode = response.data.data.code
		});


	}

	const handleEdit = (row) => {
		dialogVisible.value = true
		form.value = row
	}



	const vFormRef = ref(null)
	const handleSave = () => {
	vFormRef.value.getFormData().then(formData => {
		// Form Validation OK
		
		console.log(JSON.stringify(formData)) 
	}).catch(error => {
		// Form Validation failed
		ElMessage.error(error)
	})


		return

		// 
		var url = 'framework/SysPost/save'
		var param = {
			id: form.value.id,
			postCode: form.value.postCode,
			postName: form.value.postName,
			postDesc: form.value.postDesc
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				getTableData()
				dialogVisible.value = false
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败' + response.data.msg,
				});
			}
		});
	}

	const handleAddUser = (row) => {
		userPost.value.user.id = row.id
		userPost.value.post.id = selectedPostId.value
		var url = 'framework/SysUserPost/save'
		var param = {
			json: JSON.stringify(userPost.value)
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code === 0) {
				ElMessage({
					type: 'success',
					message: '修改成功!',
				});
				//this.getTableDataUser()
				getTableDataUserPost()
			} else {
				ElMessage({
					type: 'error',
					message: '修改失败' + response.data.msg,
				});
			}
		});
	}



	const handleCancelSave = (row) => {
		dialogVisible.value = false
	}

	// 删除按钮事件
	const handleDelete = (id) => {
		ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			var url = 'framework/SysPost/remove'
			var param = {
				id: id
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == '0') {
					ElMessage({
						type: 'success',
						message: '删除成功!',
					});
					getTableData()
				} else {
					ElMessage({
						type: 'error',
						message: '删除失败' + response.data.msg
					});
				}
			});
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			});
		});
	}
	const handleDeleteUserPost = (row) => {
		ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			var url = 'framework/SysUserPost/remove'
			var param = {
				id: row.id
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code === 0) {
					ElMessage({
						type: 'success',
						message: '删除成功!',
					});
					getTableDataUserPost()
				} else {
					ElMessage({
						type: 'error',
						message: '删除失败' + response.data.msg
					});
				}
			});
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			});
		});
	}
</script>