<template>
  <div>
    <div class="selfClass" :style="{height}">
      <el-card style="width:600px;margin:50px auto auto auto">
        <div>
          <el-row>
            <el-col :span="24">
              <div class="self-avatar">
                <h2>修改密码</h2>
              </div>
            </el-col>
            <el-col :span="24">
              <Form id="edit-password-form" ref="formObj" :model="formObj" :rules="ruleValidate" :label-width="80">
                <Form-item label="旧密码" prop="oldPwd">
                  <el-input
                    v-model="formObj.oldPwd"
                    name="oldPwd"
                    placeholder="请输入您的密码"
                    clearable
                  />
                </Form-item>
                <Form-item label="新密码" prop="newPwd" class="margin-top-30">
                  <el-input
                    v-model="formObj.newPwd"
                    name="newPwd"
                    placeholder="请输入您的新密码"
                    clearable
                  />
                </Form-item>
                <Form-item label="确认密码" prop="newPwdOk" class="margin-top-30">
                  <el-input
                    v-model="formObj.newPwdOk"
                    placeholder="请再次输入您的新密码"
                    clearable
                  />
                </Form-item>
              </Form>
              <div style="text-align: center;" class="margin-top-30">
                <modal-footer ref="footerModal" :footer="footerList" @on-result-change="_footerResult" />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
/**
 * 修改密码
 */
import { sysUser } from '../../../api'
export default {
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入您的新密码'))
      } else if (value.length < 6) {
        callback(new Error('密码长度不能小于6位'))
      } else if (value === this.formObj.newPwd.replace(/[^a-zA-Z]/g, '')) {
        // 只输入英文
        callback(new Error('请输入数字和字母结合的密码'))
      } else if (value === this.formObj.newPwd.replace(/\D/g, '')) {
        // 只输入数字
        callback(new Error('请输入数字和字母结合的密码'))
      } else {
        callback()
      }
    }
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入您的新密码'))
      } else if (value !== this.formObj.newPwd) {
        callback(new Error('两次输入的密码不匹配'))
      } else {
        callback()
      }
    }
    return {
      formObj: {
        oldPwd: '',
        newPwd: '',
        newPwdOk: ''
      },
      ruleValidate: {
        oldPwd: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' }
        ],
        newPwd: [
          { validator: validatePassword, trigger: 'blur', required: true }
        ],
        newPwdOk: [
          { validator: validatePassCheck, trigger: 'blur', required: true }
        ]
      },
      footerList: [{ name: '保存', type: 'primary' }],
      height: '200px'
    }
  },
  mounted() {
    this.height = document.documentElement.clientHeight - 120 + 'px'
  },
  methods: {
    // modal-footer
    _footerResult(name) {
      switch (name) {
        case '保存':
          this._ok()
          break
        case '取消':
          this._hideLoading()
          break
      }
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _ok() {
      this.$refs.formObj.validate(valid => {
        if (valid) {
          this._save()
        } else {
          this.$message.error('表单验证失败!')
          this._hideLoading()
        }
      })
    },
    _save: async function() {
      const result = await sysUser.editPsd({
        oldPwd: this.formObj.oldPwd,
        newPwd: this.formObj.newPwd
      })
      if (result) {
        this.$message.success('修改成功！')
      }
      this._hideLoading()
    }
  }
}
</script>

<style scoped>
.selfClass {
  background: #eee;
  padding: 20px;
}

.margin-top-30 {
  margin-top: 30px;
}

.self-avatar {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  text-align: center;
}
</style>
