<template>
	<div>
		<el-row :gutter="5">
			<el-col :span="12">
				<div class="button-container">
					<el-input size="small" v-model="queryUserDesc" placeholder="请输入查询条件" style="width :200px;float: left;margin-left: 10px;margin-bottom: 10px;"></el-input>
					<el-button size="small" type="info" @click="search" style="margin-left: 15px;">查询</el-button>
				</div>
			</el-col>
		</el-row>


		<el-row :gutter="5">
			<el-col :span="8">
				<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="120">
							</el-table-column>
						</el-table-column>
					</el-table>

					<el-pagination small @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
					 layout="total,prev, pager, next" :total="totalRows">
					</el-pagination>
				</div>
			</el-col>
			<el-col :span="8">
				<div v-loading="loading" class="style-no-table-container" style="width: 261px;">
					<el-table :data="NoTableData" border highlight-current-row @row-click="handleNoChange">
						<el-table-column label="未选列表">
							<el-table-column prop="id" label="编号" width="60" v-if="isShow">
							</el-table-column>
							<el-table-column prop="roleCode" label="角色编码" width="100">
							</el-table-column>
							<el-table-column prop="roleName" label="用户名称" width="170">
							</el-table-column>
						</el-table-column>
					</el-table>
				</div>
				<div class="button-container1" style="padding-top: 10px;">
					<i class="el-icon-arrow-down" @click="handleSave" style="font-size: 50px;margin-right: 160px;"></i>
					<i class="el-icon-arrow-up" @click="handleRemove" style="font-size: 50px;"></i>
				</div>
				<div class="style-yes-table-container" style="width: 261px;">
					<el-table v-loading="loading" :data="YesTableData" border highlight-current-row @row-click="handleYesChange">
						<el-table-column label="已选列表">
							<el-table-column prop="id" label="编号" width="60" v-if="isShow">
							</el-table-column>
							<el-table-column prop="roleCode" label="角色编码" width="100">
							</el-table-column>
							<el-table-column prop="roleName" label="用户名称" width="170">
							</el-table-column>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="tree-container">
					<el-tree v-loading="loadingTree" :data="dataTree" :props="defaultProps" ref='tree' node-key="id" show-checkbox
					 default-expand-all>
					</el-tree>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import axios from '@/axios';
	export default {
		data() {
			return {
				dataTree: [],
				defaultProps: {
					children: 'children',
					label: 'text'
				},
				menuId: [],
				//表格初始化参数
				tableData: [],
				NoTableData: [],
				YesTableData: [],
				selectUserId: '',
				userId: '',
				roleIdNo: '',
				roleIdYes: '',
				currentPage: 1,
				totalRows: 0,
				pageSize: 10,
				//查询条件
				queryUserDesc: '',
				isShow: false,
				loading: true,
				loadingTree: true,
			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {
			this.getTableData()
			// this.getNoTableData()
			// this.getYesTableData()
			this.getDataTree()
		},
		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()
			},
			getDataTree() {
				//console.log("获取table数据getDataTree")
				var url = 'SysParent/queryMenuForRoleMenu.do'
				var param = {}
				axios.get(url, param).then(response => {
					this.dataTree = response.data.data
				});
				this.loadingTree = false
			},
			getNoTableData() {
				//console.log("获取table数据getTableData")
				var url = 'SysRole/querySystemRole.do'
				var param = {
					selectUserId: this.selectUserId
				}
				axios.get(url, param).then(response => {
					this.NoTableData = response.data.data
				});
			},
			getYesTableData() {
				//console.log("获取table数据getTableData")
				var url = 'SysRole/queryUserRole.do'
				var param = {
					selectUserId: this.selectUserId
				}
				axios.get(url, param).then(response => {
					this.YesTableData = response.data.data
				});
			},
			handleCurrentRowChange(val) {
				this.selectUserId = val.id
				this.userId = val.id
				var url = 'SysRoleMenu/queryByRoleId.do?param1=' + this.selectUserId
				var param = {}
				axios.get(url, param).then(response => {
					this.getNoTableData()
					this.getYesTableData()
				});
			},
			handleNoChange(val) {
				  this.roleIdNo = val.id
				var url = 'SysRoleMenu/queryByRoleIdOnlyLeaf.do'
				var param = {
					roleId: val.id
				}
				axios.post(url, param).then(response => {
					
					var str = response.data.toString()
					console.log(typeof str)
					var bool1 = str.indexOf(",")
					if (bool1 != -1) {
						this.$refs.tree.setCheckedKeys(str.split(","))
					} else {
						var arr = [str]
						this.$refs.tree.setCheckedKeys(arr)
					}
					
				});
			},
			handleYesChange(val) {
		 this.roleIdYes = val.id
				var url = 'SysRoleMenu/queryByRoleIdOnlyLeaf.do'
				var param = {
					roleId: val.id
				}
				axios.post(url, param).then(response => {
					var str = response.data.toString()
					console.log(typeof str)
					var bool1 = str.indexOf(",")
					if (bool1 != -1) {
						this.$refs.tree.setCheckedKeys(str.split(","))
					} else {
						var arr = [str]
						this.$refs.tree.setCheckedKeys(arr)
					}
				});
			},

			handleSave(row) {
				var url = 'SysUserRole/save.do'
				var addId = sessionStorage.getItem('userId');
				var param = {
					userId: this.userId,
					roleId: this.roleIdNo,
					addId: addId,
				}
				axios.post(url, param).then(response => {
					if (response.data === 'success') {
						this.$message({
							type: 'success',
							message: '修改成功!',
						});
						this.getTableData()
						this.getDataTree()
						this.getNoTableData()
						this.getYesTableData()
					} else {
						this.$message({
							type: 'error',
							message: '修改失败' + response.data
						});
					}
				});
			},
			handleRemove(row) {
				var url = 'SysUserRole/remove.do'
				var addId = sessionStorage.getItem('userId');
				var param = {
					userId: this.userId,
					roleId: this.roleIdYes,
				}
				axios.post(url, param).then(response => {
					if (response.data === 'success') {
						this.$message({
							type: 'success',
							message: '删除成功!',
						});
						this.getTableData()
						this.getDataTree()
						this.getNoTableData()
						this.getYesTableData()
					} else {
						this.$message({
							type: 'error',
							message: '删除失败' + response.data
						});
					}
				});
			}

		},
	}
</script>
