<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <!-- 修改密码 -->
    <BackBar :title="$t('setting.l36')"> </BackBar>
    <div class="container">
      <el-form class="content" autocomplete="off" :rules="rules" :model="user" ref="form">
        <el-form-item prop="oldPassword">
          <div class="label">
            <!-- 原密码 -->
            {{ $t('setting.l29') }}
          </div>
          <!-- 请输入原密码 -->
          <el-input autocomplete="off" size="large" :type="showPassword" v-model="user.oldPassword" :placeholder="$t('setting.l30')" @keyup.enter.native="submitClick">
            <div slot="suffix" class="suffix">
              <img class="eye" @click="showPassword = 'text'" v-show="showPassword == 'password'" src="/img/auth/eye.png" alt="极度证券">
              <img class="eye" @click="showPassword = 'password'" v-show="showPassword == 'text'" src="/img/auth/eye_no.png" alt="极度证券">
            </div>
          </el-input>
        </el-form-item>
        <el-form-item prop="newPassword">
          <div class="label">
            <!-- 新密码 -->
            {{ $t('setting.l31') }}
          </div>
          <!-- 请输入新密码 -->
          <el-input autocomplete="off" size="large" :type="showPassword1" v-model="user.newPassword" :placeholder="$t('setting.l32')" @keyup.enter.native="submitClick">
            <div slot="suffix" class="suffix">
              <img class="eye" @click="showPassword1 = 'text'" v-show="showPassword1 == 'password'" src="/img/auth/eye.png" alt="极度证券">
              <img class="eye" @click="showPassword1 = 'password'" v-show="showPassword1 == 'text'" src="/img/auth/eye_no.png" alt="极度证券">
            </div>
          </el-input>
        </el-form-item>
        <el-form-item prop="newPassword2">
          <div class="label">
            <!-- 确认密码 -->
            {{ $t('setting.l33') }}
          </div>
          <!-- 确认密码 -->
          <el-input autocomplete="off" size="large" :type="showPassword2" v-model="user.newPassword2" :placeholder="$t('setting.l33')" @keyup.enter.native="submitClick">
            <div slot="suffix" class="suffix">
              <img class="eye" @click="showPassword2 = 'text'" v-show="showPassword2 == 'password'" src="/img/auth/eye.png" alt="极度证券">
              <img class="eye" @click="showPassword2 = 'password'" v-show="showPassword2 == 'text'" src="/img/auth/eye_no.png" alt="极度证券">
            </div>
          </el-input>
        </el-form-item>
        <div class="btn-box">
          <div class="submit-btn" @click="submitClick">
            <!-- 确定 -->
            {{ $t('common.l50') }}
          </div>
        </div>
        <div class="tip">
          <!-- 为了账户安全,请您定期修改密码,密码由8-20位字母+数字组合 -->
          {{ $t('setting.l34') }}
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { updateLoginPassword } from '@/api/user'
import BackBar from '@/components/backBar'
export default {
  components: {
    BackBar,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      var passReg = /(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}/
      if (value === '') {
        callback(new Error(this.$t('login.empty')))
      }
      if (rule.field === 'oldPassword' && !passReg.test(value)) {
        // 8-20位字符, 必须包括数字和字母
        callback(new Error(this.$t('login.password-reg')))
      }
      if (rule.field === 'newPassword' && !passReg.test(value)) {
        // 8-20位字符, 必须包括数字和字母
        callback(new Error(this.$t('login.password-reg')))
      }
      if (rule.field === 'newPassword2' && value !== this.user.newPassword) {
        // 密码输入不一致
        callback(new Error(this.$t('setting.l35')))
      }
      callback()
    }
    return {
      user: {
        oldPassword: '',
        newPassword: '',
        newPassword2: '',
      },
      showPassword: 'password',
      showPassword1: 'password',
      showPassword2: 'password',
      rules: {
        oldPassword: [{ validator: validatePass, trigger: 'blur' }],
        newPassword: [{ validator: validatePass, trigger: 'blur' }],
        newPassword2: [{ validator: validatePass, trigger: 'blur' }],
      },
    }
  },
  methods: {
    submitClick(){
      this.$refs['form'].validate((valid) => {
        if (!valid) return false
        this.updateLoginPassword()
      })
    },
    updateLoginPassword() {
      this.fullscreenLoading = true
      updateLoginPassword({
        old_password: this.user.oldPassword,
        new_password: this.user.newPassword,
        new_password2: this.user.newPassword2
      }).then(res => {
        this.$notify({
          message: this.$t('setting.alter-p'),
          type: 'success'
        });
        this.$store.commit('SET_LOGIN', false)
        this.$store.commit('setAccountList', [])
        this.$store.commit('setCashInfo', {})
        this.$router.replace('/login')
      }).catch(() => {
      }).finally(() => {
        this.fullscreenLoading = false;
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 27px 17px 12px;
}
.el-input {
  border-bottom: 1px solid #EDEDED;
}
.label {
  font-size: 18px;
  font-weight: 600;
  color: #1B1B1B;
  line-height: 1;
  margin-bottom: 3px;
}
.tip {
  color: #C0C0C0;
  text-align: center;
  line-height: 20px;
  padding: 0 18px;
}
.eye {
  width: 24px;
}
/deep/ .el-form-item {
  margin-bottom: 28px;
  .el-input__inner {
    padding: 0;
    border: none;
    height: 54px;
    font-size: 16px;
    line-height: 52px;
  }
  .el-input__suffix {
    right: 0;
  }
}
.suffix {
  height: 54px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.btn-box {
  padding-top: 12px;
  padding-bottom: 21px;
}
.submit-btn {
  line-height: 44px;
  text-align: center;
  border-radius: 6px;
  background: var(--color-);
  font-size: 16px;
  color: #fff;
}
</style>