<template>
  <div class="bg-F5">
    <div class="container">
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item to="/user">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>修改密码</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="editPanel">
        <div class="partTitle"><span class="orangeLine"></span>修改密码</div>
        <div class="editDiv">
          <el-form
            class="editD"
            ref="form"
            :model="form"
            :rules="rules"
            label-width="180px"
          >
            <el-form-item prop="loginName">
              <span slot="label">
                <img src="@assets/user.png" alt="" />
                用户名：
              </span>
              <el-input
                v-model="form.loginName"
                placeholder="请输入用户名/登录账号"
              />
            </el-form-item>
            <el-form-item prop="oldPassword">
              <span slot="label">
                <img src="@assets/lock.png" alt="" />
                旧密码：
              </span>
              <el-input
                v-model="form.oldPassword"
                type="password"
                placeholder="请输入旧密码"
              />
            </el-form-item>
            <el-form-item prop="newPassword">
              <span slot="label">
                <img src="@assets/lock.png" alt="" />
                新密码：
              </span>
              <el-input v-model="form.newPassword" placeholder="请输入新密码" />
            </el-form-item>
            <el-form-item prop="surePassword">
              <span slot="label">
                <img src="@assets/lock.png" alt="" />
                确认密码：
              </span>
              <el-input
                v-model="form.surePassword"
                placeholder="请再次输入新密码"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="btnDiv">
          <el-button
            class="submitBtn"
            type="text"
            size="small"
            @click="validate"
            >提交</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { RegAccount } from "@/utils";
import { ElForm } from "element-ui/types/form";
@Component
export default class extends Vue {
  private form = {
    loginName: "",
    oldPassword: "",
    newPassword: "",
    surePassword: ""
  };
  private rules = {
    loginName: [
      { required: true, message: "请输入用户名", trigger: "blur" },
      {
        validator: (rule: any, value: string, callback: any) =>
          callback(
            RegAccount.test(value)
              ? undefined
              : new Error("用户名必须为9到16位由数字字母组合")
          ),
        trigger: "blur"
      }
    ],
    oldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
    newPassword: [
      { required: true, message: "请输入新密码", trigger: "blur" },
      {
        validator: (rule: any, value: string, callback: any) =>
          callback(
            RegAccount.test(value)
              ? undefined
              : new Error("密码必须为9到16位由数字字母组合")
          ),
        trigger: "blur"
      }
    ],
    surePassword: [
      { required: true, message: "请再次输入密码", trigger: "blur" },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (value === "") {
            callback(new Error("请再次输入密码"));
          } else if (value !== this.form.newPassword) {
            callback(new Error("两次输入密码不一致!"));
          } else {
            callback();
          }
        },
        trigger: "blur"
      }
    ]
  };
  get DomForm() {
    console.log(this.$refs);
    return this.$refs.form as ElForm;
  }
  validate() {
    this.DomForm.validate(x => x && this.submit());
  }
  async submit() {
    const [err] = await this.$post("/", this.form);
    if (err) return;
    this.DomForm.resetFields();
    this.$message.success("密码修改成功");
    // this.$router.push("/");
  }
}
</script>
<style lang="scss" scoped>
.breadcrumb {
  height: 4rem;
  line-height: 4rem;
}
.partTitle {
  padding-top: 2rem;
  font-size: 1.6rem;
  color: #fd5522;
  .orangeLine {
    display: inline-block;
    height: 1.8rem;
    width: 0.3rem;
    background: #fd5522;
    vertical-align: middle;
    border-radius: 0.15rem;
    margin-right: 1rem;
  }
}
.editPanel {
  background: #fff;
  border-radius: 0.4rem;
  .editDiv {
    padding: 2rem;
    box-sizing: border-box;
    .editD {
      width: 100%;
      background: #fff5f2;
      padding: 2rem;
      box-sizing: border-box;
    }
  }
  .btnDiv {
    text-align: center;
    padding-bottom: 2rem;
    .submitBtn {
      height: 3.6rem;
      line-height: 3.6rem;
      font-size: 1.4rem;
      background: #fd5522;
      color: #fff;
      border: 0.1rem solid #fd5522;
      padding: 0 2rem;
    }
  }
}
</style>
<style lang="scss">
.editItem .el-input {
  width: 60% !important;
  .el-input__inner {
    border: 0;
    background: #fff5f2;
  }
}
</style>
