<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: "ContactDialog",
  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;
      // setTimeout(() => {

      // }, 100);
    }
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
.client-contact-dialog {
  .input {
    width: 60%;
    margin: auto;
  }
}
</style>
