<template>
	<div class="zy-template">
		<div class="zy-main-title">用户管理</div>
		<div class="zy-module">
			<el-form ref="form" :model="query" label-width="60px">
				<el-form-item label="关键字:" class="zy-search-form-item">
					<el-input v-model="query.key" size="mini" placeholder="用户名/昵称/手机号/随机码"></el-input>
				</el-form-item>
				<el-button type="primary" size="mini" @click="submit">查询</el-button>
			</el-form>
		</div>

		<div class="zy-module">
			<el-table :data="page.records" stripe header-cell-class-name="zy-table-header-cell"
				cell-class-name='zy-table-cell'>
				<el-table-column prop="openId" label="微信open-id" width="300" />
				<el-table-column prop="randomCode" label="随机码" width="180" />
				<el-table-column label="管理员权限" width="120">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.admin===1">是</el-tag>
						<el-tag v-if="scope.row.admin===0">否</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="注册时间" min-width="10%" />
				<el-table-column label="操作" width="200" min-width="10%">
					<template #default="scope">
						<el-button @click="setGroups(scope.row.id)" type="text" size="small">配置设备组</el-button>
						<el-button @click="setAdmin(scope.row)" type="text" size="small"
							:class="scope.row.admin===0?'':'red'">
							{{scope.row.admin===0?'设为管理员':'取消管理员'}}
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination class="zy-table-pagination" background layout="prev, pager, next" :total="page.total"
				:page-size="page.size" @current-change="pagination" :current-page="page.current" />
		</div>

		<el-dialog title="配置权限" v-model="groupDialog" width="500px">
			<el-form label-width="100px">
				<el-form-item label="配置组:">
					<el-tree :data="groupList" show-checkbox node-key="code" ref="tree" highlight-current
						:props="defaultProps" accordion>
					</el-tree>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="groupDialog = false" size="small">取 消</el-button>
					<el-button type="success" @click="setGroupSubmit" size="small">提 交</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					key: ''
				},
				page: {
					current: 1,
					size: 20,
				},
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				groupDialog: false, //配置设备组权限弹出框
				selUserId: null, //选中的用户的ID
				groupList: null, //设备组权限列表
			};
		},
		mounted() {
			this.getUserList(this.page);
		},
		methods: {

			/**
			 * 提交查询条件
			 */
			submit: function() {
				const param = {
					key: this.query.key
				};
				this.getUserList(param);
			},

			/**
			 * 分页点击事件
			 */
			pagination: function(current) {
				const param = {
					key: this.query.key,
					current: current,
					size: this.page.size,
				};
				this.getUserList(param);
			},

			/**
			 * 获取用户列表
			 */
			getUserList: function(params) {
				const that = this;
				this.$http.Get(this.$global.users.listPage, params).then(res => {
					that.page = res.data;
				})
			},

			/**
			 * 设置设备组权限
			 */
			setGroups: function(id) {
				this.groupDialog = true;
				this.selUserId = id;
				this.getGroupList(id);
			},

			/**
			 * 设置管理员权限
			 */
			setAdmin: function(obj) {
				const param = {
					userId: obj.id,
					admin: obj.admin == 1 ? 0 : 1
				}
				this.$http.Post(this.$global.users.adminAccess, param).then(res => {
					this.$message.success("设置成功!");
					this.refresh();
				})
			},

			/**
			 * 获取权限列表
			 */
			getGroupList: function(userId) {
				const param = {
					userId: userId
				}
				this.$http.Get(this.$global.users.getNoAccessGroups, param).then(res => {
					const arr = [];
					for (let key in res.data) {
						arr.push({
							name: key,
							children: res.data[key]
						})
					}
					console.log(arr);
					this.groupList = arr;
				})
			},

			/**
			 * 提交设备组权限配置
			 */
			setGroupSubmit: function() {
				const arr = this.$refs.tree.getCheckedKeys(true);
				console.log(arr)
				if (arr == null || arr.length <= 0) {
					this.$message.error("至少配置一个组!");
					return;
				}
				let groups = "";
				arr.forEach(item => {
					groups += (item + ",")
				})
				groups = groups.substr(0, groups.length - 1)
				const params = {
					userId: this.selUserId,
					groups: groups
				}
				this.$http.Post(this.$global.users.saveGroupAccess, params).then(res => {
					this.$message.success("配置成功!");
					this.groupDialog = false;
				})
			},

			/**
			 * 刷新列表
			 */
			refresh: function() {
				const params = {
					key: this.query.key,
					current: this.page.current,
					size: this.page.size,
				}
				this.getUserList(params);
			},

		}
	};
</script>
