<template>
  <el-dialog
      class="client-contact-dialog"
      :center="true"
      :visible.sync="dialogVisible"
      title="修改密码"
      width="30%"
      :before-close="handleClose">

    <div class="input">
      <el-form :model="userChangePwdFormData" ref="form" :rules="rules" :label-width="'100px'">
        <el-form-item label="原密码：" prop="oldPassword">
          <el-input type="password" v-model="userChangePwdFormData.oldPassword" placeholder="原始密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="password">
          <el-input type="password" v-model="userChangePwdFormData.password" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="password_confirm">
          <el-input type="password" v-model="userChangePwdFormData.passwordConfirm" placeholder="确认密码"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitClick">确 认</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
export default {
  name: "ChangePwdDialog",
  props: {
    dialogVisible: {
      type: Boolean
    },
    loginName: {
      type: String,
      required: true
    }
  },
  data() {
    var validatePass = (rule, value, callback) => {
      value = this.userChangePwdFormData.passwordConfirm;
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.userChangePwdFormData.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      userChangePwdFormData: {
        oldPassword: "",
        password: "",
        passwordConfirm: ""
      },
      visible: this.$props.dialogVisible,
      rules: {
        password_confirm: [{validator: validatePass, trigger: "blur"}]
      }
    };
  },
  methods: {
    submitClick() {
      this.$$post("/user/updatePassword", {
        loginName: this.loginName,
        oldPassword: this.userChangePwdFormData.oldPassword,
        newPassword: this.userChangePwdFormData.password
      })
          .then(res => {
            if (res.data.code < 1) {
              this.$message.error(res.data.msg);
              return;
            }
            this.$message({message: "修改密码成功", type: "success"});
            this.handleClose();
          })
          .catch(err => {
            this.showErrorAlert(err);
          });
    },
    /** 关闭处理 */
    handleClose() {
      this.$emit("update:dialogVisible", false);
      this.visible = false;
    }
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
.client-contact-dialog {
  .input {
    width: 60%;
    margin: auto;
  }
}
</style>
