<template>
  <div class="login-container">
    <span v-if="overdueDay !== ''">
      您的密码还有<strong>{{ overdueDay }}</strong>将要过期，请修改密码
    </span>

    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
      <el-form-item prop="username" label="用户名">
        <el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="用户名" disabled />
      </el-form-item>
      <el-form-item prop="password" label="原密码">
        <el-input
          v-model="loginForm.password"
          type="password"
          name="password"
          auto-complete="on"
          placeholder="密码"
        />
      </el-form-item>
      <el-form-item prop="newPassword" label="新密码">
        <el-input
          v-model="loginForm.newPassword"
          type="password"
          name="newPassword"
          auto-complete="on"
          placeholder="新密码"
        />
      </el-form-item>
      <el-form-item prop="confirmNewPassword" label="确认新密码">
        <el-input
          v-model="loginForm.confirmNewPassword"
          type="password"
          name="confirmNewPassword"
          auto-complete="on"
          placeholder="请再次输入新密码"
        />
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" :style="width" type="primary" @click.native.prevent="handleLogin">
          确定
        </el-button>
        <el-button v-if="overdueDay !== ''" :loading="loading" :style="width" type="primary" @click.native.prevent="jump">
          跳过
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'UpdatePassword',
  data() {
    const validatePwdEq = (rule, value, callback) => {
      if (this.clickBtnType === 'jump') {
        callback()
      } else {
        // console.log('validatePwdEq-value==', value)
        if (this.loginForm.newPassword !== value) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      }
    }
    return {
      loginForm: {
        username: '',
        password: '',
        newPassword: '',
        confirmNewPassword: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
        newPassword: [{ required: true, trigger: 'blur', message: '请输入新密码' }],
        confirmNewPassword: [{ required: true, trigger: 'blur', validator: validatePwdEq }]
      },
      loading: false,
      pwdType: 'password',
      errorMessage: undefined,
      overdueDay: '',
      width: 'width: 100%',
      userId: null,
      clickBtnType: 'ok',
      redirect: undefined,
      username: null
    }
  },
  created: function() {
    this.redirect = this.$route.query && this.$route.query.redirect
    // console.log('login--update-password', this.redirect)
    this.errorMessage = this.$route.query && this.$route.query.errorMessage
    this.username = this.$route.query && this.$route.query.username
    this.loginForm.username = this.username
    if (this.username.indexOf('::') > 0) {
      // 表示有租户编码，需要截取用户登录名
      this.loginForm.username = this.username.substring(this.username.indexOf('::') + 2)
    }
    if (this.errorMessage.indexOf('OVERDUE_DAY:') >= 0) {
      // 表示密码将要过期，获得过期天数
      this.overdueDay = this.errorMessage.substring(this.errorMessage.indexOf(':') + 1)
      this.width = 'width: 50%'
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin() {
      // 表示点击了“确定”按钮
      this.clickBtnType = 'ok'
      this.login()
    },
    updatePassword() {
      const map = { 'newPassword': this.loginForm.newPassword, 'levelPassword': this.loginForm.password, 'loginName': this.loginForm.username }
      this.$store.dispatch('updatePassword', map).then(data => {
        if (data === 'success') {
          if (this.redirect) {
            this.$router.push({ path: this.redirect })
          } else {
            this.$router.push({ path: '/' })
          }
        }
      }).catch(e => {
        // console.log('error submit!!')
        return false
      })
    },
    jump() {
      // 表示点击了“跳过”按钮
      this.clickBtnType = 'jump'
      this.login()
    },
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          const map = { 'password': this.loginForm.password, 'username': this.username }
          this.$store.dispatch('login', map).then(() => {
            this.loading = false
            if (this.clickBtnType === 'ok') {
              // 如果点击了“确定”，修改密码
              this.updatePassword()
            } else {
              // 如果点击了跳过，则直接进入主页
              this.$router.push({ path: this.redirect || '/' })
            }
          }).catch((error) => {
            console.log('登录失败', error)
            this.loading = false
            this.$router.push({ path: '/login' })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#fff;
$dark_gray:#889aa4;
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 550px;
    max-width: 100%;
    padding: 35px 35px 15px 35px;
    margin: 120px auto;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>
