<template>
  <div class="personal">
    <el-row>
      <el-col class="topBar">
        <div class="formBoxK">
          <div class="tit">
            <i class="el-icon el-icon-edit"></i>
            修改密码
          </div>
          <el-form ref="editForm" :model="editForm" :rules="rules" label-width="7em">
            <el-form-item label="登录账号" prop="account">
              <el-input disabled v-model="editForm.account"></el-input>
            </el-form-item>
            <el-form-item label="原始密码" prop="baccountPwd">
              <el-input type="password" v-model="editForm.baccountPwd"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="accountPwd">
              <el-input type="password" v-model="editForm.accountPwd"></el-input>
            </el-form-item>
            <el-form-item label="新密码确认" prop="qrmm">
              <el-input type="password" v-model="editForm.qrmm"></el-input>
            </el-form-item>
            <div class="cent">
              <el-button type="success" @click="confirmFun()">确定修改</el-button>
            </div>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.formBoxK {
  max-width: 700px;
  margin: 0 auto;
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
  components: {}
})
export default class Personal extends Vue {
  @Provide() editForm: any = {
    baccountPwd: "",
    accountPwd: "",
    qrmm: ""
  };
  @Provide() rules: any = {
    baccountPwd: [
      { required: true, message: "此项为必填项！", trigger: "change" }
    ],
    accountPwd: [
      { required: true, validator: this.validatePassA, trigger: "change" }
    ],
    qrmm: [{ required: true, validator: this.validatePassB, trigger: "change" }]
  };
  @Provide() uid: string = "";
  validatePassA(rule: any, value: any, callback: any) {
    if (value == "") {
      callback(new Error("请输入原始密码"));
    } else if (value == this.editForm.baccountPwd) {
      callback(new Error("新密码与原密码不能一致"));
    } else {
      callback();
    }
  }
  validatePassB(rule: any, value: any, callback: any) {
    if (value == "") {
      callback(new Error("请再次输入密码"));
    } else if (value !== this.editForm.accountPwd) {
      callback(new Error("两次输入密码不一致!"));
    } else {
      callback();
    }
  }
  confirmFun() {
    let that = this;
    (that as any).$refs["editForm"].validate((valid: Boolean) => {
      if (valid) {
        METHOD.axiosPost(
          that,
          `/user/modifyPassword/${that.uid}`,
          {
            oldPassword: that.editForm.baccountPwd,
            newPassword: that.editForm.accountPwd
          },
          function(res: any) {
            if (res.code == 0) {
              that.$message.success('修改密码成功，即将跳转到登录页！')
              that.$router.push('/')
            }
          }
        );
      }
    });
  }
  created() {
    let usd = sessionStorage.getItem("userInfo");
    if (usd) {
      this.editForm.account = JSON.parse(usd).account;
      this.uid = JSON.parse(usd).uid;
    }
  }
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>