<template>
  <div>
    <div class="con-title">修改密码</div>
    <div class="con-box">
      <el-row>
        <!-- <el-col class="hidden-sm-and-down" :md="6" :lg="7" :xl="8" style="height: 1px;"></el-col> -->
        <el-col :xs="24" :sm="16" :md="12" :lg="10" :xl="8">
          <el-form ref="setpwdform" label-width="100px" :model="accountSetPwd" :rules="rules">
            <el-form-item label="旧密码" prop="oldPwd">
              <el-input v-model="accountSetPwd.oldPwd" type="password" placeholder="请输入密码" @keyup.enter.native="onSubmitSetPwd"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
              <el-input v-model="accountSetPwd.newPwd" type="password" placeholder="请输入新密码" @keyup.enter.native="onSubmitSetPwd"></el-input>
            </el-form-item>
            <el-form-item label="重复新密码" prop="newPwdAgain">
              <el-input v-model="accountSetPwd.newPwdAgain" type="password" placeholder="请重复输入新密码" @keyup.enter.native="onSubmitSetPwd"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitSetPwd">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

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

export default {
  components: { },
  data () {
    /* 校验两次输入密码是否一致 */
    let checkNewPwd = (rule, value, callback) => {
      if (value !== this.accountSetPwd.newPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      activeName: '1',
      accountSetPwd: {},
      rules: {
        'oldPwd': [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_+-]{6,12}$/, message: '请输入6-20个字母、数字及标点符号', trigger: 'change' }
        ],
        'newPwd': [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_+-]{6,12}$/, message: '请输入6-20个字母、数字及标点符号', trigger: 'change' }
        ],
        'newPwdAgain': [
          { required: true, message: '请重复输入新密码', trigger: 'blur' },
          { validator: checkNewPwd, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleClick (tab, event) { /* console.log(tab, event) */ },
    onSubmitSetPwd () {
      this.$refs['setpwdform'].validate((valid) => {
        if (valid) {
          request({
            component: this,
            actionName: 'loginAction',
            functionName: 'updatePwd',
            data: {
              old_password: this.$md5('uokoaduw' + this.accountSetPwd.oldPwd.split('').reverse().join('') + 'auhgniq'),
              new_password: this.accountSetPwd.newPwdAgain
            },
            thenCallback: data => {
              if (data.status === 200) {
                /* 重置密码 */
                this.$refs['setpwdform'].resetFields()
                this.$message.success('密码修改成功')
              } else {
                this.$message.error(data.message)
              }
            },
            catchCallback: () => {},
            finallyCallback: () => {}
          })
        } else {
          this.$message.error('请检查输入项，确认无误后，重新提交')
          return false
        }
      })
    }
  }
}
</script>
