<template>
	<div class="ManagingUsers">
		<div class="ManagingUsers1">
			<!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
			<div class="ManagingUsers1-L">
				<el-button type="primary" icon="el-icon-plus" @click="AddUser('news')">新增用户</el-button>
			</div>
			<div class="ManagingUsers1-R">
				<div class="ManagingUsers1-Rtx">
					搜索：
				</div>
				<el-input v-model="pages.T_name" placeholder="请输入内容" @keyup.enter.native="search" clearable></el-input>
			</div>
		</div>
		<div class="ManagingUsers2">
			<el-table :data="tableData" border size="small">
				<el-table-column label="名称" width="180">
					<template slot-scope="scope">
						<span>{{ scope.row.T_name}}</span>
					</template>
				</el-table-column>
				<el-table-column label="权限" width="180">
					<template slot-scope="scope">
						{{ scope.row.T_power_name}}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<div style="display: flex;">
							<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
							<el-button slot="reference" size="small" @click="handleDelete(scope.row)">删除
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="ManagingUsers3">
			<el-pagination @current-change="handleCurrentChange" :current-page="pages.page" :page-size="pages.page_z"
				layout="total, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<el-drawer :title="title" :visible.sync="dialog" direction="rtl" ref="drawer">
			<div class="demo-drawers">
				<el-form :model="form" :rules="rules" ref="ruleForm">
					<el-form-item label="名称" :label-width="LabelWidth" prop="T_name">
						<el-input v-model="form.T_name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="权限" :label-width="LabelWidth" prop="T_power">
						<el-select v-model="form.T_power" placeholder="请选择活动区域">
							<el-option :label="item.T_name" :value="item.Id" v-for="(item,index) in openers" :key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="用户" :label-width="LabelWidth" prop="T_user">
						<el-input v-model="form.T_user" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="LabelWidth" prop="T_pass">
						<el-input v-model="form.T_pass" autocomplete="off" show-password></el-input>
					</el-form-item>
					<el-form-item :label-width="LabelWidth">
						<el-button type="primary"  @click="submitForm('ruleForm')">
							确 定
						</el-button>
						<el-button @click="dialog=false">取 消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import {
		AdminList,
		AdminAdd,
		UserPowerAll,AdminUp,AdminDel
	} from '@/api/ManagingUsers'
	export default {
		name: 'ManagingUsers',
		data() {
			return {
				title: '新增',
				LabelWidth: "50px",
				loading: false,
				dialog: false,
				total: 30,
				pages: {
					T_name:'',
					page: 1,
					page_z: 10,
				},
				tableData: [],
				form: {
					T_name: '',
					T_power: '',
					T_user: '',
					T_pass: '',
				},
				rules: {
					T_name: [{
							required: true,
							message: '请输入名称',
							trigger: 'blur'
						},
					],
					T_power: [{
						required: true,
						message: '请选择权限',
						trigger: 'blur'
					}],
					T_user: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					T_pass: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				},
				bl:0,//提交按钮，1是新增提交，2是编辑提交
				openers: []
			}
		},
		mounted() {
			this.GetAdminApi()
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
			 	if (valid) {
						var obj = {...this.form}
						obj.T_pass = this.$md5(obj.T_pass)
						if(this.bl==1){//新增提交
							this.GetAdminAddApi(obj)
						}else{//编辑提交
							this.GetAdminUpApi(obj)
						}
					} else {
						return false;
					}
				});
			},
			AddUser(e) {
				if(this.$refs.ruleForm!=undefined){
					this.$refs.ruleForm.clearValidate()
				}
				this.form = this.$options.data().form
				this.GetUserPowerAllApi()
				this.bl = 1
				this.dialog = true
			},
			handleEdit(e) {
				console.log(e)
				if(this.$refs.ruleForm!=undefined){
					this.$refs.ruleForm.clearValidate()
				}
				this.form = this.$options.data().form
				this.GetUserPowerAllApi()
				this.bl = 2
				this.dialog = true
				this.title = '编辑'
				
				
				this.form.T_name = e.T_name
				this.form.T_power = e.T_power
				this.form.T_user = e.T_user
				this.form.T_pass = '*********'
				this.form.T_uuid = e.T_uuid
			},
			GetUserPowerAllApi() { //权限select
				UserPowerAll({}).then(res => {
					console.log(res)
					if (res.data.Code === 200) {
						this.openers = res.data.Data.List
					}
				})
			},
			GetAdminAddApi(e) {
				AdminAdd(e).then(res => {
					console.log(res)
					if(res.data.Code===200){
						this.$message.success('添加成功')
						this.dialog = false
						this.pages.page = 1
						this.GetAdminApi()
					}
				})
			},
			GetAdminUpApi(e) {
				AdminUp(e).then(res => {
					console.log(res)
					if(res.data.Code===200){
						this.$message.success('编辑成功')
						this.dialog = false
						this.pages.page = 1
						this.GetAdminApi()
					}
				})
			},
			GetAdminApi() {
				AdminList(this.pages).then(res => {
					if (res.data.Code === 200) {
						this.tableData = res.data.Data.List
						this.total = res.data.Data.Num
					}
				})
			},
			search() { //回车搜索
				this.pages.page = 1
				this.GetAdminApi()
			},
			handleCurrentChange(val) {
				this.pages.page = val
				this.GetAdminApi()
				console.log('当前页', this.page);
			},
			handleDelete(e) {
				this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
					confirmButtonText: '立即删除',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					AdminDel({T_uuid:e.T_uuid}).then(res=>{
						if(res.data.Code===200){
							this.$message.success('删除成功')
							this.pages.page = 1
							this.GetAdminApi()
						}
					})
				}).catch(() => {
					this.$message.info('取消删除');
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 在填充数据之前隐藏
	[v-cloak] {
		display: none;
	}

	.demo-drawers {
		padding: 20px;
	}

	.ManagingUsers {
		.ManagingUsers1 {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.ManagingUsers1-L {}

			.ManagingUsers1-R {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.ManagingUsers1-Rtx {
					min-width: 45px;
					font-size: 14px;
					color: #909399;
					user-select: none;
				}
			}
		}

		.ManagingUsers2 {
			margin-top: 20px;
		}

		.ManagingUsers3 {
			margin-top: 40px;
		}
	}
</style>
