/***********************************************************************
 * 目的: 系统的密码策略配置
 * 作者: heyf@steerinfo.com
 * 创建日期: 2020-04-29
 *
 * 更新历史:
 * 日期                    人员                变更目的
 * 2020-04-29        修改人员名     修改的原因和目的*
**********************************************************************/
<template>
	<div class="pwdValSettingPage">
		<div class="searchArea">
			<el-input
                v-model="dataTable.tableParams.form.policyName"
                clearable
                placeholder="策略名"
                size="small"
                style="width: 193px; margin: 0px 5px 15px 0px;"
            ></el-input>
			<el-button
                icon="el-icon-search"
                type="primary"
                size="mini"
                @click="search"
                v-privilege="activeMenu + 'QUERY'"
            >查询</el-button>
            <el-button
                icon="el-icon-circle-plus-outline"
                type="primary"
                size="mini"
                @click="handleCommand('add')"
                v-privilege="activeMenu + 'ADD'"
            >新增</el-button>
		</div>
		<div class="tableArea">
			<el-table
                ref="dataTable"
                v-loading="dataTable.loading"
                border
                :height="dataTable.height"
                highlight-current-row
                :data="dataTable.list"
            >
                <el-table-column
                    type="index"
                    label="序号"
                    fixed="left"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="policyName"
                    label="策略名"
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    :show-overflow-tooltip="true"
                    prop="remark"
                    label="策略描述"
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    prop="status"
                    label="状态"
                    width="120"
                    align="center"
                >
                    <template slot-scope="scope">
                        <span :class="scope.row.status===1 ? 'green' : 'red'">
                        	{{scope.row.status===1 ? '启用' : '停用'}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类型"
                    width="120"
                    align="center"
                >
                    <template slot-scope="scope">
                        <span :style="scope.row.type===0 ? 'font-weight: bold;' : ''">
                        	{{scope.row.type===0 ? '系统默认' : '用户创建'}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="crtDate"
                    label="创建时间"
                    width="150"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="updDate"
                    label="最后修改时间"
                    width="150"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    fixed="right"
                    width="280"
                >
                    <template slot-scope="scope">
                    	<el-button
                            size="mini"
                            :disabled="scope.row.status === 1"
                            @click="handleCommand('start', scope.row)"
                            v-privilege="activeMenu + 'PUT'"
                        >启用</el-button>
                        <el-button
                            size="mini"
                            @click="handleCommand('edit', scope.row)"
                            v-privilege="activeMenu + 'PUT'"
                        >编辑</el-button>
                        <el-button
                            size="mini"
                            @click="handleCommand('see', scope.row)"
                            v-privilege="activeMenu + 'QUERY'"
                        >查看</el-button>
                        <el-button
                            type="danger"
                            size="mini"
                            @click="handleCommand('del', scope.row)"
                            v-if="scope.row.type===1"
                            v-privilege="activeMenu + 'DELETE'"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="foot-style">
                <el-pagination
                    @size-change="pageSizeChange"
                    @current-change="pageCurrentChange"
                    :current-page="dataTable.tableParams.form.pageNum"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :page-size="dataTable.tableParams.form.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="dataTable.tableParams.page.total"
                >
                </el-pagination>
            </div>
		</div>
		<el-dialog
			v-if="dialogVisible"
			:title="dialogTitle"
			:visible.sync="dialogVisible"
			width="40%"
			style="min-width: 580px;"
			:before-close="handleClose">
			<div class="dialogMain">
				<div class="dialogName">
 					<el-row style="width: 100%;">
 						<el-col :span="6">
 							<img src="../../../assets/img/icons/pwdSetting.svg"  class="pwdImg"/>
 						</el-col>
 						<el-col :span="17">
 							<el-input
 								size="small"
 								clearable
 								v-model="pwdSetForm.policyName"
 								placeholder="密码策略名"
 								class="nameInput"
 								:require="true"
 								:disabled="status==='see'">
 							</el-input>
 							<el-input
 								type="textarea"
 								:rows="2"
 								size="small"
 								v-model="pwdSetForm.remark"
 								placeholder="策略描述"
 								:disabled="status==='see'">
 							</el-input>
 						</el-col>
 					</el-row>
				</div>
				<div class="lineArea">
					<span class="lineSpan"></span>
					<span class="usualSpan">密码安全</span>
					<span class="lineSpan"></span>
				</div>
				<div class="pwdSetArea">
					<el-row>
						<el-col :span="12" class="left">
							<el-checkbox
								v-model="pwdSetForm.isForever"
								:disabled="status==='see'">
								密码永久有效
							</el-checkbox>
				            <el-input
				            	type="number"
				            	size="mini"
				            	placeholder="默认有效时限"
				            	v-model="pwdSetForm.pwdValidity"
				            	v-if="pwdSetForm.isForever===false"
				            	style="width: 45%; margin-left: 5px;"
				            	:disabled="status==='see'">
				            </el-input>
				            <span v-if="pwdSetForm.isForever===false">天</span>
						</el-col>
						<el-col :span="12 "class="right">
							<span>
								密码最小长度:
								<el-input-number
									size="small"
									v-model="pwdSetForm.minLength"
									controls-position="right"
									:disabled="status==='see'">
								</el-input-number>
							</span>
						</el-col>
						<el-col :span="12" class="left">
							<el-checkbox
								v-model="pwdSetForm.isMustType"
								:disabled="status==='see'">
								至少数字、字母、特殊符号其中两种
							</el-checkbox>
						</el-col>
						<el-col :span="12" class="right">
							<span>
								密码最大长度:
								<el-input-number
									size="small"
									v-model="pwdSetForm.maxLength"
									controls-position="right"
									:disabled="status==='see'">
								</el-input-number>
							</span>
						</el-col>
						<el-col :span="24" class="left" style="margin-bottom: 15px;">
							<span style="margin-left: 5px;">系统默认密码:</span>
							<el-select
							v-model="pwdSetForm.password"
							size="mini"
							allow-create
							clearable
							filterable
							placeholder="系统默认密码"
							style="width: 30%;"
							:disabled="status==='see'">
								<el-option
									key="0"
									label="账户名"
									value="0">
								</el-option>
								<el-option
									key="1"
									label="身份证后六位"
									value="1">
								</el-option>
								<el-option
									key="2"
									label="123456"
									value="123456">
								</el-option>
							</el-select>
				            <!-- <el-input
				            	size="mini"
				            	placeholder="系统默认密码"
				            	v-model="pwdSetForm.password"
				            	style="width: 30%;"
				            	:disabled="status==='see'">
				            </el-input> -->
						</el-col>
					</el-row>
				</div>
				<div class="lineArea">
					<span class="lineSpan"></span>
					<span class="usualSpan">账户安全</span>
					<span class="lineSpan"></span>
				</div>
				<div class="uNameSetArea">
					<el-row>
						<el-col :span="12 "class="left">
							<span>
								短信单日次数限度:
								<el-input-number
									size="small"
									v-model="pwdSetForm.smsSendTimes"
									controls-position="right"
									:disabled="status==='see'">
								</el-input-number>
							</span>
						</el-col>
						<el-col :span="12" class="right">
							<span>
								账户名最小长度:
								<el-input-number
									size="small"
									v-model="pwdSetForm.nameLength"
									controls-position="right"
									:disabled="status==='see'">	
								</el-input-number>
							</span>
						</el-col>
					</el-row>
				</div>
				<div class="lineArea">
					<span class="lineSpan" style="width: calc(50% - 34px);"></span>
					<span class="usualSpan" style="width: 61.3px;">防暴力破解</span>
					<span class="lineSpan" style="width: calc(50% - 34px);"></span>
				</div>
				<div class="preBruteForceSetArea">
					<el-row>
						<el-col :span="12" class="left">
							<span>
								密码错误锁定次数:
								<el-input-number
									size="small"
									v-model="pwdSetForm.errorLock"
									controls-position="right"
									:disabled="status==='see'">
								</el-input-number>
							</span>
						</el-col>
						<el-col :span="12" class="right">
							<span>
								锁定周期(分钟):
								<el-input-number
									size="small"
									v-model="pwdSetForm.lockCycle"
									controls-position="right"
									:disabled="status==='see'">
								</el-input-number>
							</span>
						</el-col>
						<el-col :span="12" class="left">
							<span>
								密码禁用锁定次数:
								<el-input-number
									size="small"
									v-model="pwdSetForm.disableLock"
									controls-position="right"
									:disabled="status==='see'">
								</el-input-number>
							</span>
						</el-col>
					</el-row>
				</div>
			</div>
			<el-button type="text" size="mini" @click="innerVisible = !innerVisible">操作说明</el-button>
			<div style="color: #F56C6C;" v-if="innerVisible">
				1、新增时默认设置为初始值(新增默认值)，用户可根据需要修改。
			</div>
			<div style="color: #F56C6C;" v-if="innerVisible">
				2、短信单日次数限度：用户首次登录portal平台，需要手机短信验证，此为一天内限制发送验证的次数。
			</div>
			<div style="color: #F56C6C;" v-if="innerVisible">
				3、密码禁用锁定:需要管理员手动解除锁;密码错误锁定:达到锁定周期时间后自动解锁;因此密码禁用锁定次数需大于密码错误锁定次数。
			</div>
			<div style="color: #F56C6C;" v-if="innerVisible">
				4、默认密码可从选项中选择，也可自定义输入;当选择为用户编码/身份证后六位时，若用户信息该信息缺失，则在用户创建或是重置密码会报错。
			</div>
			<span slot="footer" class="dialog-footer" v-if="status !== 'see'">
				<el-button @click="cancel" size="mini">取 消</el-button>
				<el-button type="primary" size="mini" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data () {
		return {
			activeMenu: '',	
            companys: [], // 用户公司列表
            companyId: '', // 选择公司Id
            companyName: '', // 选择公司名称
            innerVisible: false,
			dataTable: {
                height: 600,
                loading: false,
                list: [],
                item: {},
                tableParams: {
                    form: {
                    	policyName: '',
                        companyId: '',
                        pageNum: 1,
                        pageSize: 20
                    },
                    //  返回分页数据
                    page: {
                        total: 0
                    }
                }
            },
            status: 'add',
            dialogVisible: false,
            dialogTitle: '新增密码策略',
            pwdSetForm: {
            	id: '',
            	policyName: '', // 密码策略名
            	status: 0,
            	type: 1,
            	isForever: true, // 是否永久有效
            	pwdValidity: 15, // 密码有效天数
            	isMustType: false, // 是否数字、字母、特殊符号至少两者
            	minLength: 6, // 密码最小长度
            	maxLength: 16, // 密码最大长度
            	password: '123456', // 系统默认密码
            	nameLength: 3, // 用户名最小长度
            	errorLock: 5, // 错误锁定次数
            	lockCycle: 10, // 锁定时间
            	disableLock: 10, // 禁用锁定次数
            	remark: '', // 描述
            	regular: '', // 正则表达式
            	smsSendTimes: 5 // 单日内发送短信的次数限制
            }
		}
	},
	created () {
        this.activeMenu = window.top.localStorage.getItem('activeMenu');
    },
    mounted () {
        // 获取公司信息
        this.companys = JSON.parse(window.top.localStorage.getItem('companys'));
        this.companyId = window.top.localStorage.getItem('companyId');
        if (this.companyId !== '' && this.companyId !== null) {
            this.companyName = this.companys.find((x) => x.id === this.companyId).companyName;
        }
        this.dataTable.tableParams.form.companyId = this.companyId;
        this.getTableData(this.dataTable.tableParams.form);
        this.$nextTick(() => {
            //  设置table区域高度
            this.dataTable.height = this.getTableHeight(this.$refs['dataTable'].$el) - 60;
        });
    },
	methods: {
		// 计算table区域高度
		getTableHeight (dom) {
			return window.innerHeight - dom.offsetTop;
		},
		search () {
			this.getTableData(this.dataTable.tableParams.form);
		},
		getTableData (form) {
			this.dataTable.loading = true;
			this.axios.get('pass/v1/syspwdpolicys/', {params: form}).then((res) => {
                if (res.code === '0') {
                	this.dataTable.list = res.data.list;
                	this.dataTable.tableParams.page.total = res.data.total;
                	this.dataTable.loading = false;
                } else {
                    this.$message.error(res.message);
                }
            }).catch((err) => {
                console.log(err);
            })
		},
		// 每条页数
        pageSizeChange (pageSize) {
            this.noticeTable.tableParams.form.pageSize = pageSize;
            this.getTableData(this.dataTable.tableParams.form);
        },
        //当前页
        pageCurrentChange (pageNum) {
            this.noticeTable.tableParams.form.pageNum = pageNum;
            this.getTableData(this.dataTable.tableParams.form);
        },
		handleCommand (status, row) {
			let item = row ? JSON.parse(JSON.stringify(row)) : '';
			switch (status) {
				case 'add':
					this.status = 'add';
					this.dialogTitle = '新增密码策略';
					this.dialogVisible = true;
					break;
				case 'start':
					this.startPwdSetting(row);
					break;
				case 'edit':
					this.status = 'edit';
					this.dialogTitle = '编辑密码策略';
					if (row.pwdValidity === 9999) {
						item['isForever'] = true;
					} else {
						item['isForever'] = false;
					}
					item['isMustType'] = row.regularType === 1 ? true : false;
					this.pwdSetForm = item;
					this.dialogVisible = true;
					break;
				case 'see':
					this.status = 'see';
					this.dialogTitle = '密码策略详情';
					if (row.pwdValidity === 9999) {
						item['isForever'] = true;
					} else {
						item['isForever'] = false;
					}
					item['isMustType'] = row.regularType === 1 ? true : false;
					this.pwdSetForm = item;
					this.dialogVisible = true;
					break;
				case 'del':
					this.delete(row);
					break;
			}
		},
		startPwdSetting (row) {
			this.$confirm('确认启用？')
			.then(_ => {
				this.axios.post('pass/v1/syspwdpolicys/enable/' + row.id).then((res) => {
                    if (res.code === '0') {
                    	this.$message.success('启用成功！');
                        this.getTableData(this.dataTable.tableParams.form);
                    } else {
                        this.$message.error(res.message);
                    }
                }).catch((err) => {
                    console.log(err);
                })
			})
			.catch(_ => {});
		},
		submit () {
			if (this.pwdSetForm.policyName && this.pwdSetForm.policyName !== '') {
				this.$confirm('确认提交？')
				.then(_ => {
					let form = JSON.parse(JSON.stringify(this.pwdSetForm));
					if (form.isForever === true) {
						form.pwdValidity = 9999;
					}
					delete form.isForever;
					if (form.isMustType === true) {
						form.regularType = 1;
					} else {
						form.regularType = 0;
					}
					delete form.isMustType;
					if (this.status === 'add') {
						this.axios.post('pass/v1/syspwdpolicys/', form).then((res) => {
		                    if (res.code === '0') {
		                    	this.$message.success('新增成功！')
		                        this.dialogVisible = false;
		                        this.resetForm();
		                        this.getTableData(this.dataTable.tableParams.form);
		                    } else {
		                        this.$message.error(res.message);
		                    }
		                }).catch((err) => {
		                    console.log(err);
		                })
					} else {
						this.axios.put('pass/v1/syspwdpolicys/' + form.id, form).then((res) => {
		                    if (res.code === '0') {
		                    	this.$message.success('修改成功！')
		                        this.dialogVisible = false;
		                        this.resetForm();
		                        this.getTableData(this.dataTable.tableParams.form);
		                    } else {
		                        this.$message.error(res.message);
		                    }
		                }).catch((err) => {
		                    console.log(err);
		                })
					}
				})
				.catch(_ => {});
			} else {
				this.$message.warning('策略名不能为空！');
			}
		},
		delete (row) {
			this.$confirm('确认删除？')
			.then(_ => {
				this.axios.delete('pass/v1/syspwdpolicys/' + row.id).then((res) => {
	                if (res.code === '0') {
	                	let index = this.dataTable.list.findIndex((obj) => obj.id === row.id)
	                	this.dataTable.list.splice(index, 1);
	                	this.$message.success('删除成功！')
	                } else {
	                    this.$message.error(res.message);
	                }
	            }).catch((err) => {
	                console.log(err);
	            })
			})
			.catch(_ => {});
		},
		cancel () {
			this.$confirm('确认取消？')
			.then(_ => {
				this.dialogVisible = false;
				this.resetForm();
				this.innerVisible = false;
			})
			.catch(_ => {});
		},
		handleClose (done) {
			this.$confirm('确认关闭？')
			.then(_ => {
				done();
				this.resetForm();
				this.innerVisible = false;
			})
			.catch(_ => {});
		},
		resetForm () {
			this.pwdSetForm = {
            	id: '',
            	policyName: '', // 密码策略名
            	status: 0,
            	type: 1,
            	isForever: true, // 是否永久有效
            	pwdValidity: 15, // 密码有效天数
            	isMustType: false, // 是否数字、字母、特殊符号至少两者
            	minLength: 6, // 密码最小长度
            	maxLength: 16, // 密码最大长度
            	nameLength: 3, // 用户名最小长度
            	errorLock: 5, // 错误锁定次数
            	lockCycle: 10, // 锁定时间
            	disableLock: 10, // 禁用锁定次数
            	remark: '', // 描述
            	regular: '', // 正则表达式
            	smsSendTimes: '5' // 单日内发送短信的次数限制
            }
		}
	}
}
</script>

<style lang="less" scoped>
	.pwdValSettingPage {
		padding: 15px;
		.tableArea {
			.green {
			    color: #67C23A;
			}
			.red {
			    color: #F56C6C;
			}
		}
		/deep/ .el-dialog {
			min-width: 575px;
			backgroud-color: #dbe8f7;
		}
		/deep/ .el-dialog__header {
		    padding: 15px 20px 0px;
		}
		/deep/ .el-input-number.is-controls-right[class*=small] [class*=decrease] {
		    line-height: 17px;
		    height: 14px;
		}
		/deep/ .el-input-number.is-controls-right[class*=small] [class*=increase] {
			line-height: 14px;
			height: 14px;
		}
		.dialogMain {
			border: 1px solid #ccc;
			.dialogName {
			    width: 100%;
			    display: inline-flex;
			    // border-bottom: 1px solid #409eff;
			    .pwdImg {
			    	    width: 90px;
					    border: 1px solid #8eaebd;
					    background: #daedf7;
					    margin: 15px 25px;
			    }
			    .nameInput {
			    	margin: 15px 0px 10px;
			    }
			}
			.lineArea {
				.lineSpan {
					width: calc(50% - 28px);
				    height: 1px;
				    background: #ccc;
				    display: inline-block;  
				}
				.usualSpan {
					width: 49.3px;
				    display: inline-block;
				    text-align: center;
				}
			}
			.pwdSetArea {
				.left {
					margin-top: 15px;
					.el-checkbox {
						margin-left: 5px;
					}
					/deep/ .el-input--mini .el-input__inner {
					    height: 22px;
					    line-height: 22px;
					}
				}
				.right {
					margin-top: 15px;
					span {
						float: right;
						margin-right: 5px;
					}
				}
			}
			.uNameSetArea {
				.left {
					margin-top: 15px;
					span {
						margin-left: 5px;
					}
				}
				.right {
					margin-top: 15px;
					span {
						float: right;
						margin: 0px 5px 5px 0px;
					}
				}
			}
			.preBruteForceSetArea {
				margin-bottom: 20px;
				.left {
					margin-top: 15px;
					span {
						margin-left: 5px;
					}
				}
				.right {
					margin-top: 15px;
					span {
						float: right;
						margin-right: 5px;
					}
				}
			}
		}
		.foot-style {
		    margin: 5px 0 0;
		    text-align: right;
		}
	}
</style>