<template>
  <el-dialog title="修改密码" center :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false" :show-close="false" :before-close="handleClose">
    <div class="change-password">
      <el-divider></el-divider>
      <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
        <el-form-item label="新密码" prop="p1">
          <el-input v-model="formData.p1" type="password"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="p2">
          <el-input v-model="formData.p2" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div class="tips">
        密码为8~16位包含大小写字母、数字、!#$%^&*@特殊符号
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFn" :loading="loading">提 交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {renewPwdApi} from '@/api/admin/user.js';
export default {
  data() {
    let validatePassword = (rule, value, callback) => {
      var regA = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!#$%^&*@])[\da-zA-Z!#$%^&*@]{8,16}$/; //密码必须是8位以上、必须含有字母、数字、特殊符号
      var regB = /(123|234|345|456|567|678|789|012)/; //不能有3个连续数字
      if (!regA.test(value)) {
        callback(new Error('密码必须是8~16位、必须含有大小写字母、数字、特殊符号'));
      } else if (regB.test(value)) {
        callback(new Error('不能有3个连续数字'));
      } else {
        callback();
      }
    };
    var validateCheckPass = (rule, value, callback) => {
      if (value !== this.formData.p1) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      dialogVisible: false,
      loading: false,
      formData: {
        p1: '',
        p2: '',
        code: '123456'
      },
      rules: {
        p1: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
          {
            required: true,
            trigger: 'blur',
            validator: validatePassword
          }
        ],
        p2: [
          {required: true, message: '请再次输入密码', trigger: 'blur'},
          {
            required: true,
            trigger: 'blur',
            validator: validateCheckPass
          }
        ]
      }
    };
  },
  methods: {
    handleClose() {},
    submitFn() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          this.loading = true;
          const res = await renewPwdApi(this.formData);
          if (res.data.code === 0) {
            this.$message.success('修改密码成功，请重新登录~');
            setTimeout(() => {
              this.loading = false;
              this.$store.dispatch('LogOut').then(() => {
                const pathQuery = {path: '/login'};
                const specialPath = this.$store.getters.specialPath;
                if (specialPath !== 'default') pathQuery.query = {s: specialPath};
                this.$router.push(pathQuery);
              });
            }, 1500);
          }
        } else {
          return false;
        }
      });
    },
    show() {
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.text {
  text-align: center;
}
.tips {
  margin-left: 120px;
}
</style>
