<template>
	<!-- 用户配置 -->
	<div class="pageBody">
		<el-row>
			<el-col :span="24">
				<div class="tableHead">
					<el-row>
						<el-col :span="12">
							<div class="userTitle">
								用户列表
								<el-button type="primary" icon="el-icon-plus" size="small" @click="add" v-if="auth.includes('save')">新增</el-button>
							</div>
						</el-col>
						<el-col :span="12">
							<div class="grid-content bg-purple-dark fr">
								<el-form :inline="true" :model="searchParams" ref="form" class="demo-form-inline">
									<el-form-item label="账号"><el-input v-model="searchParams.name" placeholder="账号"></el-input></el-form-item>
									<el-form-item>
										<el-button type="primary" @click="searchHandle">查询</el-button>
										<el-button type="warning" @click="resetSearch">重置</el-button>
									</el-form-item>
								</el-form>
							</div>
						</el-col>
					</el-row>
				</div>
				<el-divider></el-divider>
				<el-table :data="listData" border style="width: 100%" v-loading="loading">
					<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
					<el-table-column prop="name" label="账号"></el-table-column>
					<el-table-column prop="roleName" label="角色"></el-table-column>
					<el-table-column prop="areaName" label="区域"></el-table-column>
					<el-table-column prop="phone" label="电话"></el-table-column>
					<el-table-column prop="loginTime" label="最后登录时间" align="center"></el-table-column>
					<el-table-column fixed="right" label="操作" width="350" align="center">
						<template slot-scope="scope">
							<el-button type="primary" size="mini" @click="detail(scope.row)">查看</el-button>
							<el-button v-if="auth.includes('update')" type="success" size="mini" @click="edit(scope.row)">编辑</el-button>
							<el-button v-if="auth.includes('delete')" type="warning" size="mini" @click="del(scope.row)">删除</el-button>
							<el-button v-if="auth.includes('resetPwd')" type="danger" size="mini" @click="resetPasswd(scope.row)">重置密码</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<div class="page-right"><Pagination :total="listTotal" @change="paginationChange"></Pagination></div>
		<user-mobiel
			v-if="modal.visibleModal"
			:title="modal.title"
			:action="modal.action"
			:visible="modal.visibleModal"
			:selectRow="modal.selectRow"
			@closeModal="closeModal"
		></user-mobiel>
	</div>
</template>

<script>
import Pagination from '@/components/Pagination';
import userMobiel from './modal/userMobiel';
import { paginationConfig } from '@/api/CONST';
export default {
	name: 'user',
	components: {
		Pagination,
		userMobiel
	},
	created() {
		let params = Object.assign({}, this.searchParams, this.pagination);
		this.getUserlist(params);
	},
	data() {
		return {
			loading: true,
			visibleDel: false,
			modal: {
				action: '',
				title: '',
				visibleModal: false,
				selectRow: null
			},
			searchParams: {
				name: ''
			},
			pagination: Object.assign({}, paginationConfig),
			listTotal: 0,
			listData: []
		};
	},
	computed: {
		//当前页权限
		auth() {
			const activePage = this.$route.path;
			return (
				this.$store.state.userTree
					.filter(x => {
						return x.url == activePage;
					})
					.map(x => {
						return x.auth;
					})[0] || []
			);
		}
	},
	methods: {
		searchHandle() {
			let params = Object.assign({}, this.searchParams, this.pagination);
			this.getUserlist(params);
		},
		resetSearch() {
			this.searchParams = {};
			let params = Object.assign({}, this.pagination);
			this.getUserlist(params);
		},
		add() {
			this.modal.visibleModal = true;
			this.modal.title = '用户添加';
			this.modal.action = 'add';
		},
		detail(item) {
			this.modal.visibleModal = true;
			this.modal.title = '用户信息查看';
			this.modal.action = 'view';
			this.modal.selectRow = item;
		},
		edit(item) {
			this.modal.visibleModal = true;
			this.modal.title = '用户信息编辑';
			this.modal.action = 'edit';
			this.modal.selectRow = item;
		},
		del(item) {
			this.$confirm('此操作将永久删除此账号, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					let params = {
						userId: item.userId
					};
					this.$port.delUser(params).then(res => {
						if (!res.code) {
							this.$message({
								type: 'success',
								message: '删除成功!',
								duration:800
							});
							this.getUserlist();
						}
					});
				})
				.catch(() => {});
		},
		resetPasswd(item) {
			this.$confirm('此操作将此账号密码重置为123456, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					let params = {
						id: item.userId
					};
					this.$port.resetDefaultPwd(params).then(res => {
						if (!res.code) {
							this.$message({
								type: 'success',
								message: '重置密码成功!',
								duration:800
							});
							this.getUserlist();
						}
					});
				})
				.catch(() => {});
		},
		getUserlist(params) {
			this.loading = true;
			this.$port.getUserList(params).then(res => {
				this.loading = false;
				this.listData = res.list || [];
				this.listTotal = res.total;
			});
		},
		paginationChange(json) {
			let params = Object.assign({}, this.searchParams, json);
			this.getUserlist(params);
		},
		closeModal(flag = false) {
			this.modal.visibleModal = false;
			flag && this.getUserlist();
		},
		closeDelModal(flag = false) {
			this.modalDel.visibleModal = false;
			flag && this.getUserlist();
		}
	}
};
</script>

<style lang="less" scoped>
.fr {
	float: right;
}
.userTitle {
	margin-top: 8px;
}
.el-form-item {
	margin-bottom: 0;
}
.tableHead {
	vertical-align: middle;
	.el-button {
		margin-left: 15px;
	}
}
.page-right {
	margin-top: 15px;
	float: right;
}
</style>
