<template>
	<div class="rolemenu">
		<el-row :gutter="5">
			<el-col :span="12">
				<div class="button-container">
					<el-input size="small" v-model="queryRoleName" placeholder="请输入查询条件" style="width :200px;margin-left: 10px;margin-bottom: 10px;"></el-input>
					<el-button type="info" size="small" @click="search">查询</el-button>
					<el-button type="success" size="small" @click="handleSave">保存</el-button>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="5">
			<el-col :span="8">
				<div class="table-container" style="width: 621px;padding-right: 30px;">
					<el-table v-loading="loading" :data="tableData" border highlight-current-row @row-click="handleCurrentRowChange">
						<el-table-column prop="id" label="编号" width="50" v-if="isShow">
						</el-table-column>
						<el-table-column prop="roleCode" label="角色编码" width="150" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="roleName" label="角色名称" width="170" show-overflow-tooltip>
						</el-table-column>
						<!-- <el-table-column prop="addTime" label="添加时间" width="180" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="modifyTime" label="更新时间" width="180" show-overflow-tooltip>
						</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>
				</div>
			</el-col>
			<el-col :span="10">
				<div style="padding-right: 50px;">
					<el-tree v-loading="loadingTree" :data="dataTree" :props="defaultProps" ref='tree' node-key="id" @check-change="getCheckedNodes"
					 show-checkbox class="tree-container">
					</el-tree>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import axios from '@/axios';
	export default {
		data() {
			return {
				dataTree: [],
				defaultProps: {
					children: 'children',
					label: 'text'
				},
				checkedMenuIdLeaf: [],
				checkedMenuId: [],
				halfCheckMenuId: [],
				//表格初始化参数
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [100],
				pageSize: 100,
				//查询条件
				queryRoleName: '',
				roleId: '',
				isShow: false,
				loading: true,
				loadingTree: true,
			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {
			this.getTableData()
			this.getDataTree()
		},
		methods: {
			// 获取table数据
			getTableData() {
				//console.log("获取table数据getTableData")
				var url = 'SysRole/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					query: this.queryRoleName
				}
				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
					}
				});
			},
			// 修改每页条数事件
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			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
				});
				this.loadingTree = false
			},
			handleCurrentRowChange(val) {
				this.roleId = val.id
				var url = 'SysRoleMenu/queryByRoleIdOnlyLeaf.do'
				var param = {
					roleId: this.roleId
				}
				axios.get(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)
					}

				});
			},

			getCheckedNodes(data, checked, indeterminate) {
				this.checkedMenuIdLeaf = this.$refs.tree.getCheckedKeys('true')
				this.checkedMenuId = this.$refs.tree.getCheckedKeys()
				this.halfCheckMenuId = this.$refs.tree.getHalfCheckedKeys()
				// 				console.log("this.checkedMenuIdLeaf====="+this.checkedMenuIdLeaf)
				// 				console.log("this.checkedMenuId======"+this.checkedMenuId)
				// 				console.log("this.halfCheckMenuId========"+this.halfCheckMenuId)
				// 				console.log("------------------------------------------------" )
				// 				var halfMenuId = this.checkedMenuId.concat(this.halfCheckMenuId)
				// 				this.checkedMenuId = halfMenuId.join(',')
				// 				this.halfCheckMenuId =this.$refs.tree.getHalfCheckedKeys().join(',')
			},
			handleSave() {
				var url = 'SysRoleMenu/save.do'
				var userId = sessionStorage.getItem('userId');
				// alert(userId)
				var param = {
					roleId: this.roleId,
					checkedMenuIdLeaf: this.checkedMenuIdLeaf.join(','),
					checkedMenuId: this.checkedMenuId.join(','),
					halfCheckMenuId: this.halfCheckMenuId.join(','),
					userId: userId,
				}
				axios.post(url, param).then(response => {
					if (response.data === 'success') {
						this.$message({
							type: 'success',
							message: '修改成功!',
						});
						// 						this.getTableData()
						// 						this.getDataTree()
					} else {
						this.$message({
							type: 'error',
							message: '修改失败' + response.data
						});
					}
				});
			}
		},
	}
</script>
<style>
	.rolemenu {
		margin-top: 20px;
	}
</style>
