<template>
	<div>
		<el-row>
			<el-col :span="24" class="first-row">
				<div class="tag">账号管理</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="second-row">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="账号：" class="shuibiaoId">
						<el-input v-model="account" placeholder="请输入账号" clearable maxlength="16"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSearch">查找</el-button>
					</el-form-item>
				</el-form>
				<div class="btn-add">
					<el-button type="primary" icon="el-icon-add" @click="handleAdd">添加</el-button>
				</div>
			</el-col>
		</el-row>
		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
		<el-row>
			<el-col :span="24" class="third-row">
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					highlight-current-row>
					<el-table-column label="昵称" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
					<el-table-column prop="number" label="账号" align="center"></el-table-column>
					<el-table-column prop="password" label="密码" show-overflow-tooltip>*********</el-table-column>
					<el-table-column label="操作" align="center" width="80">
						<el-button type="text" class="del-btn" slot-scope="scope"
							v-if="scope.row.number != login_account" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</el-table-column>
					<el-table-column width="130">
						<el-button type="text" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
					</el-table-column>
				</el-table>
				<div style="margin-top: 20px" class="table-footer">
					<div class="pages">
						<el-pagination layout="prev, pager, next" :total="total_rows" :current-page.sync="current_page"
							:hide-on-single-page="true" :page-size="page_rows" @current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 添加对话框 -->
				<el-dialog title="添加账号" :visible.sync="adddialogFormVisible" width="500px" top="0vh" class="my-dialog"
					:close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :model="addform" :rules="addRules" ref="addform">
						<el-form-item label="昵称：" prop="name" :label-width="formLabelWidth">
							<el-input v-model="addform.name" autocomplete="off" minlength="5" maxlength="16"></el-input>
						</el-form-item>
						<el-form-item label="账号：" prop="number" :label-width="formLabelWidth">
							<el-input v-model="addform.number" autocomplete="off" minlength="5" maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="密码：" prop="password" :label-width="formLabelWidth">
							<el-input v-model="addform.password" type="password" minlength="5" autocomplete="off"
								maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="确认密码：" prop="comfirmPass" :label-width="formLabelWidth">
							<el-input v-model="addform.comfirmPass" type="password" minlength="5" autocomplete="off"
								maxlength="16">
							</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="adddialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleAddRow('addform')">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 编辑对话框 -->
				<el-dialog title="编辑" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog"
					:close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :model="form" :rules="formRules" ref="form">
						<el-form-item label="昵称：" prop="name" :label-width="formLabelWidth">
							<el-input ref="nicheng" v-model="form.name" autocomplete="off" maxlength="16"></el-input>
						</el-form-item>
						<el-form-item label="账号：" prop="number" :label-width="formLabelWidth">
							<el-input ref="zhanghao" v-model="form.number" autocomplete="off" maxlength="16"></el-input>
						</el-form-item>
						<el-form-item label="原密码：" prop="oldPassword" :label-width="formLabelWidth">
							<el-input ref="yuanmima" v-model="form.oldPassword" type="password" autocomplete="off"
								maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="新密码：" prop="password" :label-width="formLabelWidth">
							<el-input ref="xinmima" v-model="form.password" autocomplete="off" type="password"
								maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="确认新密码：" prop="comfirmPass" :label-width="formLabelWidth">
							<el-input ref="querenmima" v-model="form.comfirmPass" autocomplete="off" type="password"
								maxlength="16">
							</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="editdialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleEditRow('form')">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 删除对话框 -->
				<el-dialog :visible.sync="delDialogVisible" width="500px" center top="0vh" class="my-dialog"
					:close-on-click-modal="false" :close-on-press-escape="false">
					<div class="box-icon"></div>
					<span class="del-msg">确定删除【{{del_account}}】账号吗？</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="delDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleDelRow">确 定</el-button>
					</span>
				</el-dialog>
				<!-- 删除账号密码验证对话框 -->
				<el-dialog title="验证密码" :visible.sync="delDialogEnterPwdVisible" width="500px" top="0vh"
					class="my-dialog" :close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :model="delConfirmPwdform" :rules="delConfirmPwdRules" ref="delConfirmPwdform">
						<el-form-item label="请输入密码：" prop="delPwd" :label-width="formLabelWidth">
							<el-input ref="delPwd" v-model="delConfirmPwdform.delPwd" type="password" autocomplete="off"
								maxlength="16">
							</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="delDialogEnterPwdVisible = false">取 消</el-button>
						<el-button type="primary" @click="getDelPwd('delConfirmPwdform')">确 定</el-button>
					</div>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addform: { // 添加框的数据绑定
					name: '',
					number: '',
					password: '',
					comfirmPass: ''
				},
				addRules: {
					name: [{
							required: true,
							message: '请输入昵称',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: '昵称长度不小于5位',
							trigger: 'blur'
						}
					],
					number: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: '账号长度不小于5位',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?])[a-zA-Z\d!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?]{8,20}$/,
							message: '请输入包含大小写英文字母、数字、特殊符号，8到20位',
							trigger: 'blur'
						}
					],
					comfirmPass: [{
							required: true,
							message: '请输入确认密码',
							trigger: 'blur'
						},
						{
							pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?])[a-zA-Z\d!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?]{8,20}$/,
							message: '请输入包含大小写英文字母、数字、特殊符号，8到20位',
							trigger: 'blur'
						}
					]
				},
				form: { // 编辑框的数据绑定
					id: 0,
					name: '',
					number: '',
					oldPassword: '',
					password: '',
					comfirmPass: ''
				},
				formRules: {
					name: [{
							required: true,
							message: '请输入昵称',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: '昵称长度不小于5位',
							trigger: 'blur'
						}
					],
					number: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: '账号长度不小于5位',
							trigger: 'blur'
						}
					],
					oldPassword: [{
							required: true,
							message: '请输入原密码',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: '原密码长度不小于5位',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入新密码',
							trigger: 'blur'
						},
						{
							pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?])[a-zA-Z\d!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?]{8,20}$/,
							message: '请输入包含大小写英文字母、数字、特殊符号，8到20位',
							trigger: 'blur'
						}
					],
					comfirmPass: [{
							required: true,
							message: '请输入确认新密码',
							trigger: 'blur'
						},
						{
							pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?])[a-zA-Z\d!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?]{8,20}$/,
							message: '请输入包含大小写英文字母、数字、特殊符号，8到20位',
							trigger: 'blur'
						}
					]
				},
				delConfirmPwdform: {
					delPwd: '' // 被删除的账号的密码
				},
				delConfirmPwdRules: {
					delPwd: [{
							required: true,
							message: '请输入密码进行验证',
							trigger: 'blur'
						},
						{
							min: 8,
							max: 20,
							message: '密码长度不小于8位',
							trigger: 'blur'
						}
					]
				},
				del_id: 0, // 被删除的id
				del_account: '', // 被删除的账号
				account: '', // 需要查找的账号
				login_account: '', // 登陆的账号
				adddialogFormVisible: false, // 控制添加对话框显示、隐藏
				editdialogFormVisible: false, // 控制编辑对话框显示、隐藏
				delDialogEnterPwdVisible: false, // 控制删除账号时输入密码对话框
				delDialogVisible: false, // 控制删除对话框显示、隐藏
				formLabelWidth: '146px', // label宽度
				tableData: [], // 表格数据
				current_page: 1, // 当前所在页码
				page_rows: 8, // 每页显示的记录数
				total_rows: 0 // 总记录数
			}
		},
		created() {
			this.login_account = sessionStorage.getItem('uname')
			// 获取账号列表
			this.updateTable()
		},
		methods: {
			/**
			 * 改变页码
			 * @param {Object} val
			 */
			handleCurrentChange(val) {
				this.current_page = val

				// 查询账号相关信息
				this.updateTable()
			},
			/**
			 * 获取账号数据，填充表格变量
			 */
			updateTable() {
				var _this = this
				_this.tableData = []
				let params = {
					page: this.current_page,
					rows: this.page_rows
				}
				if (this.account) {
					params.number = this.account
				}
				// _this.rows_total = 0
				this.$axios.get('/jxch-smartmp/HotWaters/waterqueryAdmin.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
							'{}') {
							// _this.$message.success('数据加载成功！');
							_this.tableData = res.data.rows
							_this.total_rows = res.data.total

							for (var i = 0; i < _this.tableData.length; i++) {
								if (_this.tableData[i].number == _this.login_account) {
									sessionStorage.setItem('unic', _this.tableData[i].name)
									break
								}
							}
							_this.$emit('sonFun', _this.tableData[i].name)
						} else {
							_this.$message.success('【获取账号数据】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取账号数据】请求异常: ' + err);
					})
			},
			/**
			 * 查找账号
			 */
			onSearch() {
				// if (!this.account) {
				// 	this.$message.error('请输入账号')
				// 	return
				// }

				// 查询账号相关信息
				this.updateTable()
			},
			/**
			 * 添加账号
			 */
			handleAdd() {
				this.adddialogFormVisible = true
			},
			/**
			 * 添加一条账号
			 */
			handleAddRow(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (!String(this.addform.name).trim()) {
							this.$message.error('请输入昵称')
							return
						}
						if (!String(this.addform.number).trim()) {
							this.$message.error('请输入账号')
							return
						}
						if (!String(this.addform.password).trim()) {
							this.$message.error('请输入密码')
							return
						}
						if (String(this.addform.password).trim() != String(this.addform.comfirmPass).trim()) {
							this.$message.error('密码与确认密码不一致！')
							return
						}
						var _this = this
						this.$axios.get('/jxch-smartmp/HotWaters/wateraddAdmin.action', {
								params: {
									name: String(this.addform.name).trim(),
									number: String(this.addform.number).trim(),
									password: String(this.addform.password).trim()
								}
							})
							.then(res => {
								// console.log(res.data);
								if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data
									.msg == '添加成功' && JSON
									.stringify(res.data) != '{}') {
									_this.$message.success('【账号添加】成功！');
									_this.addform.name = ''
									_this.addform.number = ''
									_this.addform.password = ''
									_this.addform.comfirmPass = ''
									// 更新列表
									this.updateTable()
								} else {
									_this.$message.error('【账号添加】失败！' + res.data.msg);
								}
								this.adddialogFormVisible = false
							})
							.catch(err => {
								// console.log(err);
								_this.$message.error('【账号添加】请求异常: ' + err);
							})
					} else {
						// this.$message.error('表单验证失败！')
						return false;
					}
				});
			},
			/**
			 * 编辑对话框
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleEdit(index, row) {
				this.editdialogFormVisible = true
				this.form.id = row.id
				this.form.name = row.name
				this.form.number = row.number
				this.form.oldPassword = ''
				this.form.password = ''
				this.form.comfirmPass = ''
			},
			/**
			 * 编辑更新指定的id所在的行
			 */
			handleEditRow(formName) {
				var _this = this
				_this.$refs[formName].validate((valid) => {
					if (valid) {
						if (!String(_this.form.name).trim()) {
							_this.$message.error('请输入昵称')
							_this.$refs['nicheng'].focus()
							return
						}
						if (!String(_this.form.number).trim()) {
							_this.$message.error('请输入账号')
							_this.$refs['zhanghao'].focus()
							return
						}
						if (!String(_this.form.oldPassword).trim()) {
							_this.$message.error('请输入原密码')
							_this.$refs['yuanmima'].focus()
							return
						}
						if (!String(_this.form.password).trim()) {
							_this.$message.error('请输入新密码')
							_this.$refs['xinmima'].focus()
							return
						}
						if (String(_this.form.password).trim() != String(_this.form.comfirmPass).trim()) {
							_this.$message.error('新密码和确认新密码不一致！')
							_this.$refs['querenmima'].focus()
							return
						}

						_this.$axios.get('/jxch-smartmp/HotWaters/waterupdateAdmin.action', {
								params: {
									id: _this.form.id,
									name: String(_this.form.name).trim(),
									number: String(_this.form.number).trim(),
									oldpass: String(_this.form.oldPassword).trim(),
									password: String(_this.form.password).trim()
								}
							})
							.then(res => {
								// console.log(res.data);
								if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data
									.msg == '更新成功' && JSON
									.stringify(res.data) != '{}') {
									_this.$message.success('【账号更新】成功！');

									// 更新表格
									_this.updateTable()

									_this.form.id = ''
									_this.form.name = ''
									_this.form.number = ''
									_this.form.password = ''
									_this.form.oldPassword = ''
									_this.form.comfirmPass = ''
								} else {
									_this.$message.error('【账号更新】失败！' + res.data.msg);
								}
								_this.editdialogFormVisible = false
							})
							.catch(err => {
								// console.log(err);
								_this.$message.error('【账号更新】请求异常: ' + err);
							})
					} else {
						// _this.$message.error('表单验证失败！')
						return false;
					}
				});
			},
			/**
			 * 删除对话框
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleDelete(index, row) {
				this.delDialogVisible = true
				this.del_account = row.number
				this.del_id = row.id
			},
			/**
			 * 被删除账号的密码
			 */
			getDelPwd(formName) {
				var _this = this
				_this.$refs[formName].validate((valid) => {
					if (valid) {
						if (_this.delConfirmPwdform.delPwd.trim()) {
							_this.$axios.get('/jxch-smartmp/HotWaters/waterdelAdmin.action', {
									params: {
										id: _this.del_id,
										password: _this.delPwd
									}
								})
								.then(res => {
									// console.log(res.data);
									if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data
										.msg == '删除成功' &&
										JSON
										.stringify(res.data) != '{}') {
										_this.$message.success('账号【' + this.del_account + '】删除成功！');
										_this.delDialogEnterPwdVisible = false
										_this.delDialogVisible = false
										_this.updateTable()
									} else {
										_this.$message.error('账号【' + this.del_account + '】删除失败！');
									}
								})
								.catch(err => {
									// console.log(err);
									_this.$message.error('账号【' + this.del_account + '】删除请求异常: ' + err);
								})
						} else {
							_this.$message.error('请输入账号【' + _this.del_account + '】的密码')
							_this.$refs['delPwd'].focus()
						}
					} else {
						// _this.$message.error('表单验证失败！')
						return false;
					}
				});
			},
			/**
			 * 删除指定的id所在的行
			 */
			handleDelRow() {
				if (this.login_account == this.del_account) {
					this.delDialogVisible = false
					this.$message.error('不能删除当前登录账号！')
					return
				}

				this.delConfirmPwdform.delPwd = ''

				this.delDialogEnterPwdVisible = true

				setTimeout(() => {
					this.$refs['delPwd'].focus()
				}, 200)
			}
		}
	}
</script>

<style scoped>
	@import url("zhuanghaoguanli.css");
</style>
