<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="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
              <el-input v-model="accountSetPwd.newPwd" type="password" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="重复新密码" prop="newPwdAgain">
              <el-input v-model="accountSetPwd.newPwdAgain" type="password" placeholder="请重复输入新密码"></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>
  export default {
    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位', trigger: 'blur' }
          ],
          'newPwd': [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9_+-]{6,12}$/, message: '密码只能输入大小写字母、数字和_+-这几种类型的字符，并且最少6位', trigger: 'blur' }
          ],
          'newPwdAgain': [
            { required: true, message: '请重复输入新密码', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9_+-]{6,12}$/, message: '密码只能输入大小写字母、数字和_+-这几种类型的字符，并且最少6位', trigger: 'blur' },
            { validator: checkNewPwd, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleClick (tab, event) { /* console.log(tab, event) */ },
      onSubmitSetPwd () {
        this.$refs['setpwdform'].validate((valid) => {
          if (valid) {
            console.log('submit!')
            /* 重置密码 */
            this.$refs['setpwdform'].resetFields()
          } else {
            this.$message.error('请检查输入项，确认无误后，重新提交')
            return false
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.con-title {
  padding: 0 30px;
  font-size: 16px;
  line-height: 45px;
  border-bottom: 1px solid #c9c9c9;
}
.con-box {
  padding: 0.5rem 0.3rem;
}
</style>
