<template>
  <el-dialog width="460px" :visible.sync="_visible" title="设置新登录密码" center append-to-body :close-on-click-modal="false" @close="_visible = false">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      autocomplete="on"
      label-position="left"
      label-width="100px"
    >
      <el-form-item prop="oldPassword" label="旧密码：">
        <el-input
          ref="oldPassword"
          v-model="loginForm.oldPassword"
          placeholder="旧密码"
          name="oldPassword"
          type="password"
          tabindex="1"
          maxlength="16"
          autocomplete="on"
        />
      </el-form-item>
      <el-form-item prop="newPassword" label="新密码：">
        <el-input
          ref="newPassword"
          v-model="loginForm.newPassword"
          placeholder="新密码"
          name="newPassword"
          type="password"
          maxlength="16"
          tabindex="1"
          autocomplete="on"
        />
      </el-form-item>
      <el-form-item prop="confirmPassword" label="确认密码：">
        <el-input
          ref="confirmPassword"
          v-model="loginForm.confirmPassword"
          placeholder="确认密码"
          name="confirmPassword"
          type="password"
          maxlength="16"
          tabindex="1"
          autocomplete="on"
        />
      </el-form-item>
      <el-button
        :loading="loading"
        type="primary"
        round
        style="width: 100%; margin: 0 auto"
        @click.native.prevent="handleLogin"
      >确认修改</el-button>
    </el-form>
  </el-dialog>
</template>

<script>
import { isnumber, isAlphanumeric, validAlphabets } from '@/utils/validate'
import asyncRequest from '@/apis/service/user/index'
import resToken from '@/mixins/resToken'

export default {
  name: 'PasswordModal',
  mixins: [resToken],
  props: {
    visible: {
      type: Boolean
    }
  },
  data() {
    const validateOldPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('旧密码不能为空！'))
      } else {
        if (!isAlphanumeric(value)) {
          callback(new Error('旧密码为6-18位数字字母组合！'))
        } else if (value.length < 6 || value.length > 18) {
          callback(new Error('旧密码为6-18位数字字母组合！'))
        } else if (isnumber(value)) {
          callback(new Error('旧密码不能为纯数字！'))
        } else if (validAlphabets(value)) {
          callback(new Error('旧密码不能为纯字母！'))
        } else {
          callback()
        }
      }
    }
    const validateNewPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('新密码不能为空！'))
      } else {
        if (this.loginForm.oldPassword === value) {
          callback(new Error('新密码不能与旧密码一致！'))
        } else {
          if (!isAlphanumeric(value)) {
            callback(new Error('新密码为6-18位数字字母组合！'))
          } else if (value.length < 6 || value.length > 18) {
            callback(new Error('新密码为6-18位数字字母组合！'))
          } else if (isnumber(value)) {
            callback(new Error('新密码不能为纯数字！'))
          } else if (validAlphabets(value)) {
            callback(new Error('新密码不能为纯字母！'))
          } else {
            callback()
          }
        }
      }
    }
    const validateConfirmPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('确认密码不能为空！'))
      } else {
        if (this.loginForm.newPassword !== value) {
          callback(new Error('确认密码与新密码不一致！'))
        } else {
          callback()
        }
      }
    }
    return {
      loginForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      loginRules: {
        oldPassword: [
          { required: true, trigger: 'blur', validator: validateOldPassword }
        ],
        newPassword: [
          { required: true, trigger: 'blur', validator: validateNewPassword }
        ],
        confirmPassword: [
          {
            required: true,
            trigger: 'blur',
            validator: validateConfirmPassword
          }
        ]
      },
      loading: false,
      otherQuery: {}
    }
  },
  computed: {
    _visible: {
      get() {
        return this.visible
      },
      set(newVal) {
        this.$emit('update:visible', newVal)
      }
    }
  },

  methods: {
    async handleLogin() {
      this.$refs.loginForm.validate(async(valid) => {
        if (valid) {
          if (!this.loading) {
            this.loading = true
            const model = {
              password: this.loginForm.oldPassword,
              new_password: this.loginForm.newPassword,
              confirm_password:this.loginForm.confirmPassword
            }
            asyncRequest.setpwd(model).then(async(res) => {
              if (res && res.code === 1) {
                this.loading = false
                this.$message.success("密码修改成功!")
                await this.logout()
              } else {
                this.loading = false
                this._visible = false
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
