<template>
  <div>
    <div class="con-title">{{ $t('password.title') }}</div>
    <div class="con-box">
      <el-row>
        <el-col :xs="24" :sm="16" :md="12" :lg="10" :xl="8">
          <el-form ref="setpwdform" label-width="160px" :model="accountSetPwd" :rules="rules">
            <el-form-item :label="$t('password.oldPassword.label')" prop="oldPwd">
              <el-input
                v-model="accountSetPwd.oldPwd"
                type="password"
                :placeholder="$t('password.oldPassword.placeholder')"
                @keyup.enter.native="onSubmitSetPwd"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('password.newPassword.label')" prop="newPwd">
              <el-input
                v-model="accountSetPwd.newPwd"
                type="password"
                :placeholder="$t('password.newPassword.placeholder')"
                @keyup.enter.native="onSubmitSetPwd"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('password.repeatPassword.label')" prop="newPwdAgain">
              <el-input
                v-model="accountSetPwd.newPwdAgain"
                type="password"
                :placeholder="$t('password.repeatPassword.placeholder')"
                @keyup.enter.native="onSubmitSetPwd"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitSetPwd">{{ $t('password.save') }}</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { request } from '@action'

export default {
  components: {},
  data() {
    /* 校验两次输入密码是否一致 */
    const checkNewPwd = (rule, value, callback) => {
      if (value !== this.accountSetPwd.newPwd) {
        callback(new Error(this.$t('password.repeatPassword.rule2')))
      } else {
        callback()
      }
    }
    return {
      activeName: '1',
      accountSetPwd: {},
      rules: {
        oldPwd: [{ required: true, message: this.$t('password.oldPassword.rule'), trigger: 'blur' }],
        newPwd: [
          { required: true, message: this.$t('password.newPassword.rule'), trigger: 'blur' },
          { min: 6, max: 20, message: this.$t('password.newPassword.rule2'), trigger: 'change' }
        ],
        newPwdAgain: [
          { required: true, message: this.$t('password.repeatPassword.rule'), trigger: 'blur' },
          { validator: checkNewPwd, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    onSubmitSetPwd() {
      this.$refs.setpwdform.validate(valid => {
        if (valid) {
          request({
            component: this,
            actionName: 'Other',
            functionName: 'updatePwd',
            data: {
              old_password: this.accountSetPwd.oldPwd,
              password: this.accountSetPwd.newPwd,
              passwordR: this.accountSetPwd.newPwdAgain
            },
            thenCallback: data => {
              if (data.code === 0) {
                /* 重置密码 */
                this.$refs.setpwdform.resetFields()
                this.$message.success('密码修改成功')
              }
            },
            catchCallback: () => {},
            finallyCallback: () => {}
          })
        }
      })
    }
  }
}
</script>
