<template>
  <el-dialog
    title="重置密码"
    :visible.sync="dialogVisible"
    width="30%"
    append-to-body
    :before-close="handleClose"
  >
    <el-form
      ref="resetPasswordForm"
      :model="resetPasswordForm"
      :rules="passwordRules"
      label-width="120px"
      status-icon
      class="resetPasswordForm"
    >
      <el-form-item label="旧密码：" prop="old">
        <el-input
          v-model="resetPasswordForm.old"
          type="password"
          placeholder="请输入旧密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="new">
        <el-input
          v-model="resetPasswordForm.new"
          type="password"
          placeholder="请输入新密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码确认：" prop="newRepeat">
        <el-input
          v-model="resetPasswordForm.newRepeat"
          type="password"
          placeholder="请再次输入新密码"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer__wrap">
      <el-button size="small" @click="handleClose">取消</el-button>
      <el-button
        size="small"
        type="primary"
        :disabled="isDisabled"
        @click="handleConfirm"
      >
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getDefaultPwdStrategy,
    resetPassword,
    validateOldPassword,
  } from '@/api/uc.js'
  import { recordRoute } from '@/config'
  import { encryptWithRsa } from '@/utils'
  export default {
    name: 'ResetPassword',
    props: {
      account: {
        type: String,
        default: '',
      },
    },
    data() {
      const validateNew = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'))
        }
        const { pwdRule, pwdLength, enable } = this.pwdStrategy

        if (enable === 1) {
          if (pwdRule) {
            if (value.length < pwdLength) {
              callback(new Error('新密码长度至少为' + pwdLength))
            }
            if ([2, 3, 4].includes(pwdRule)) {
              this.validatePassword(pwdRule, value, callback)
            } else {
              callback()
            }
          }
        } else {
          if (value.length < 6) {
            callback(new Error('新密码长度至少为6'))
          } else {
            callback()
          }
        }
      }
      const validateOld = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入旧密码'))
        } else {
          callback()
        }
      }
      const validateNewRepeat = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入新密码'))
        } else if (value !== this.resetPasswordForm.new) {
          callback(new Error('两次输入的密码不一致！'))
        } else {
          callback()
        }
      }
      const validateOldPwd = (rule, value, callback) => {
        const params = {
          oldPwd: encryptWithRsa(this.resetPasswordForm.old),
        }
        validateOldPassword(params).then((res) => {
          if (res.value) {
            callback()
          } else {
            callback(new Error('请输入正确的密码'))
          }
        })
      }
      return {
        dialogVisible: false,
        resetPasswordForm: {
          old: '',
          new: '',
          newRepeat: '',
        },
        passwordRules: {
          old: [
            { validator: validateOld, trigger: 'blur' },
            { validator: validateOldPwd, trigger: 'blur' },
            { required: true, trigger: 'blur' },
          ],
          new: [
            { validator: validateNew, trigger: 'blur' },
            { required: true, trigger: 'blur' },
          ],
          newRepeat: [
            { validator: validateNewRepeat, trigger: 'blur' },
            { required: true, trigger: 'blur' },
          ],
        },
        pwdStrategy: {},
        isDisabled: false,
      }
    },
    methods: {
      getDefaultPasswordStrategy() {
        getDefaultPwdStrategy().then((res) => {
          this.pwdStrategy = res
        })
      },
      handleClose() {
        this.$refs.resetPasswordForm.clearValidate()
        this.dialogVisible = false
        this.resetPasswordForm = {
          old: '',
          new: '',
          newRepeat: '',
        }
        this.logout()
      },
      handleConfirm() {
        this.$refs['resetPasswordForm'].validate((valid) => {
          if (valid) {
            if (!this.account) {
              return this.$message.warning('请返回重新登录')
            }
            this.isDisabled = true
            const params = {
              account: this.account,
              oldPwd: this.resetPasswordForm.old,
              newPwd: this.resetPasswordForm.new,
            }
            resetPassword(params).then((res) => {
              if (res.state) {
                this.$message.success(res.message)
                this.isDisabled = false
                this.$emit('reset-success')
                this.dialogVisible = false
              } else {
                this.$message.warning(res.message)
                this.isDisabled = false
              }
            })
          } else {
            this.$message.warning('密码校验失败，请检查密码')
          }
        })
      },
      openResetPasswordDialog() {
        this.dialogVisible = true
        this.getDefaultPasswordStrategy()
      },
      validatePassword(pwdRule, value, callback) {
        const passwordRuleMap = {
          2: new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])'),
          3: new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])'),
          4: new RegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9])'),
        }
        const passwordTipMap = {
          2: '新密码必须包含数字、字母',
          3: '新密码必须包含数字、字母、特殊字符',
          4: '新密码必须包含数字、大小写字母、特殊字符',
        }
        if (!passwordRuleMap[pwdRule].test(value)) {
          callback(new Error(passwordTipMap[pwdRule]))
        } else {
          callback()
        }
      },
      async logout() {
        await this.$store.dispatch('user/logout')
        if (recordRoute) {
          const fullPath = this.$route.fullPath
          this.$router.push(`/login?redirect=${fullPath}`)
        } else {
          this.$router.push('/login')
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>