<template>
  <div class="box">
    <div class="center">
      <el-form ref="pwdForm" :model="pwdForm" :rules="pwdRules" size="small" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="pwdForm.username" />
        </el-form-item>
        <el-form-item label="原密码" prop="pwd">
          <el-input v-model="pwdForm.pwd" type="password" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="pwdForm.newPwd" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="agnPwd">
          <el-input v-model="pwdForm.agnPwd" type="password" />
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align:center">
        <el-button type="primary" size="small" @click="onSubmit">确定</el-button>
        <el-button size="small" @click="onCancel">取消</el-button>
      </div>
      <p class="tip">
        <span>您的密码存在一定风险，出于安全考虑，需更新密码后才能继续登录。</span>
      </p>
    </div>
  </div>
</template>

<script>
import { encryptByAES } from '@utils/util';
import { updateUserPwdNoAuth } from '@api/api-login';
export default {
  name: 'update-pwd',
  data() {
    let checkRePassword = (rule, value, callback) => {
      if (value !== this.pwdForm.newPwd) {
        return callback(new Error('确认密码与新密码不一致'));
      }
      return callback();
    };
    return {
      pwdDialog: false,
      pwdForm: {},
      pwdRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        pwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 12, max: 20, message: '长度在 12 到 20 个字符', trigger: 'blur' },
          {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*()?+-.])[A-Za-z\d!@#$%^&*()?+-.]{9,}$/,
            message: '密码至少1个字母，1个数字和1个特殊字符',
            trigger: 'blur'
          }
        ],
        agnPwd: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { min: 12, max: 20, message: '长度在 12 到 20 个字符', trigger: 'blur' },
          { validator: checkRePassword, trigger: 'blur' },
          {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*()?+-.])[A-Za-z\d!@#$%^&*()?+-.]{9,}$/,
            message: '密码至少1个字母，1个数字和1个特殊字符',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      let vm = this;
      this.$refs.pwdForm.validate(valid => {
        if (valid) {
          let params = {
            username: vm.pwdForm.username,
            oldPwd: encryptByAES(vm.pwdForm.pwd),
            newPwd: encryptByAES(vm.pwdForm.newPwd),
            agnPwd: encryptByAES(vm.pwdForm.agnPwd),
            code: this.$route.query.code
          };
          updateUserPwdNoAuth(params).then(
            res => {
              if (res.code === '000000') {
                vm.$message.success('修改密码成功');
                setTimeout(() => {
                  vm.$router.push({ name: 'login' });
                }, 2000);
              }
            },
            error => {
              vm.$message.error(error.msg);
            }
          );
        }
      });
    },
    onCancel() {
      this.$router.push({ name: 'login' });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8f8f9;
  .center {
    width: 600px;
    min-height: 300px;
    background: #fff;
    padding: 32px;
    border-radius: 8px;
  }
  .tip {
    margin-top: 24px;
    color: #808695;
    text-align: center;
  }
}
</style>
