<template>
	<div>
		<el-row>
			<el-col :span="12">
				<div class="button-container">
					<el-input v-model="queryUserDesc" placeholder="请输入查询条件" style="width :200px;float: left;margin-left: 10px;margin-bottom: 10px;"></el-input>
					<el-button type="info" @click="search" style="margin-left: 15px;">查询</el-button>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="6">
				<div class="table-container" style="width: 221px;padding-right: 30px;">
					<el-table v-loading="loading" :data="tableData" border highlight-current-row @row-click="handleCurrentRowChange">
						<el-table-column label="用户列表">
							<el-table-column prop="id" label="编号" width="60" v-if="isShow">
							</el-table-column>
							<el-table-column prop="userName" label="用户名" width="120">
							</el-table-column>
							<el-table-column prop="userDesc" label="姓名" width="100">
							</el-table-column>
						</el-table-column>
					</el-table>
					<el-pagination small layout="total,prev, pager, next" @current-change="handleCurrentChange" :current-page="currentPage"
					 :page-size="pageSize" :total="totalRows">
					</el-pagination>
				</div>
			</el-col>
			<el-col :span="18">
				<div class="style-table-container" style="width: 800px;padding-left: 20px;">
					<el-table v-loading="loading" :data="YesTableData" border highlight-current-row>
						<el-table-column label="已选列表">
							<el-table-column prop="id" label="编号" width="60" v-if="isShow">
							</el-table-column>
							<el-table-column prop="user.userDesc" label="用户名称" width="100">
							</el-table-column>
							<el-table-column prop="dept.deptName" label="部门名称" width="180">
							</el-table-column>
							<el-table-column prop="post.postName" label="岗位名称" width="180">
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
								</template>
							</el-table-column>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>
		<el-dialog title="添加信息" :visible.sync="dialogVisible" width="800px">
			<el-row>
				<el-col :span="10">
					<div class="tree-container" style="width: 300px; padding-right: 50px;">
						<el-tree v-loading="loadingTree" :data="dataTree" :props="defaultProps" node-key="id" :expand-on-click-node="false"
						 @check-change="handleNodeClick" show-checkbox default-expand-all>
						</el-tree>
					</div>
				</el-col>
				<el-col :span="14">
					<div class="dialog-table-container" style="padding-left: 150px;width: 271px;">
						<el-table :data="DialogTableData" border highlight-current-row @row-click="handleDialogChange">
							<el-table-column prop="id" label="编号" width="60" v-if="isShow">
							</el-table-column>
							<el-table-column prop="postName" label="岗位名称" width="120">
							</el-table-column>
							<el-table-column prop="postDesc" label="岗位说明" width="150">
							</el-table-column>
						</el-table>
					</div>
				</el-col>
			</el-row>
			<el-button type="success" @click="handleSave" style="width: 200px;">保存</el-button>
			<el-button @click="handleCancelSave" style="width: 200px;margin-left: 330px;">取消</el-button>
		</el-dialog>
	</div>
</template>

<script>
	import axios from '@/axios';
	export default {
		data() {
			return {
				dataTree: [],
				defaultProps: {
					children: 'children',
					label: 'text'
				},
				fid: '',
				//表格初始化参数
				tableData: [],
				YesTableData: [],
				DialogTableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSize: 10,
				dialogVisible: false,
				queryUserDesc: '',
				isShow: false,
				loading: true,
				loadingTree: true,
				udp: {
					"dept": {
						"deptName": "",
						"id": ""
					},
					"id": "",
					"post": {
						"id": "",
						"postName": ""
					},
					"user": {
						"id": "",
						"userDesc": "",
					}
				}
			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {
			this.getTableData()
			this.getYesTableData()
		},
		methods: {
			// 获取table数据
			getTableData() {
				//console.log("获取table数据getTableData")
				var url = 'SysUser/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					userDesc: this.queryUserDesc
				}
				axios.get(url, param).then(response => {
					this.tableData = response.data.data.list
					this.totalRows = response.data.data.total
					if (response) {
						this.loading = false
					} else {
						this.loading = true
					}
				});
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},
			search() {
				this.getTableData()
			},
			getYesTableData() {
				var url = 'SysUserDeptPostJSON/query.do'
				var param = {
					userId: this.udp.user.id
				}
				axios.get(url, param).then(response => {
					this.YesTableData = response.data
				});
			},
			handleAdd(val) {
				this.dialogVisible = true
				this.getDataTree()
				this.getDialogTableData()
			},
			getDialogTableData() {
				//console.log("获取table数据getTableData")
				var url = 'SysPost/queryComboBox.do'
				var param = {}
				axios.get(url, param).then(response => {
					this.DialogTableData = response.data
					if (response) {
						this.loadingTree = false
					} else {
						this.loadingTree = true
					}
				});
			},
			getDataTree() {
				//console.log("获取table数据getDataTree")
				var url = 'SysDepartment/queryTree.do?fid=0'
				var param = {}
				axios.get(url, param).then(response => {
					this.dataTree = response.data
					if (response) {
						this.loadingTree = false
					} else {
						this.loadingTree = true
					}
				});
			},
			handleCurrentRowChange(data) {
				this.udp.user.id = data.id
				console.log("用户" + this.udp.user.id)
				this.getYesTableData()
			},
			handleNodeClick(data) {
				this.udp.dept.id = data.id
				console.log("树结构" + this.udp.dept.id)
			},
			handleDialogChange(data) {
				this.udp.post.id = data.id
				console.log("表格" +this.udp.post.id)
			},
			handleSave(row) {
				var url = 'SysUserDeptPostJSON/save.do'
				var addId = localStorage.getItem('userId');
				console.log('JSON.stringify(this.udp):'+JSON.stringify(this.udp))
				var param = {
					strJSON:JSON.stringify(this.udp),
					addId: addId,
				}
				axios.post(url, param).then(response => {
					if (response.data === 'success') {
						this.$message({
							type: 'success',
							message: '修改成功!',
						});
						this.dialogVisible = false
						this.getTableData()
						this.getYesTableData()
					} else {
						this.$message({
							type: 'error',
							message: '修改失败' + response.data
						});
					}
				});
			},
			handleCancelSave(row) {
				this.dialogVisible = false
			},

			// 删除按钮事件
			handleDelete(id) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var userId = sessionStorage.getItem('userId');
					var url = 'SysUserDeptPost/remove.do'
					var param = {
						id: id,
						userId: userId
					}
					axios.post(url, param).then(response => {
						if (response.data === 'success') {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getTableData()
							this.getYesTableData()
						} else {
							this.$message({
								type: 'error',
								message: '删除失败' + response.data
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		},
	}
</script>
