<template>
  <div class="bg-F5">
    <div class="container">
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">{{ $t(`route.home`) }}</el-breadcrumb-item>
        <el-breadcrumb-item to="/user">{{
          $t(`route.user`)
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t(`route.editPassword`) }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="editPanel">
        <div class="partTitle">
          <span class="orangeLine"></span>{{ $t(`route.editPassword`) }}
        </div>
        <div class="editDiv">
          <el-form
            class="editD"
            ref="form"
            :model="form"
            :rules="rules"
            label-width="180px"
          >
            <el-form-item prop="oldPassword">
              <span slot="label">
                <img src="@assets/lock.png" alt="" />
                {{ $t(`page.views.account.user.editPassword.oldPassword`) }}：
              </span>
              <el-input
                v-model="form.oldPassword"
                type="password"
                :placeholder="
                  `${$t(`inputPlaceholder`)}${$t(
                    `page.views.account.user.editPassword.oldPassword`
                  )}`
                "
                show-password
              />
            </el-form-item>
            <el-form-item prop="loginPassword">
              <span slot="label">
                <img src="@assets/lock.png" alt="" />
                {{ $t(`page.views.account.user.editPassword.loginPassword`) }}：
              </span>
              <el-input
                v-model="form.loginPassword"
                :placeholder="
                  `${$t(`inputPlaceholder`)}${$t(
                    `page.views.account.user.editPassword.loginPassword`
                  )}`
                "
                show-password
              />
            </el-form-item>
            <el-form-item prop="surePassword">
              <span slot="label">
                <img src="@assets/lock.png" alt="" />
                {{ $t(`page.views.account.user.editPassword.surePassword`) }}：
              </span>
              <el-input
                v-model="form.surePassword"
                :placeholder="
                  `${$t(`inputPlaceholder`)}${$t(
                    `page.views.account.user.editPassword.surePassword`
                  )}`
                "
                show-password
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="btnDiv">
          <el-button
            class="submitBtn"
            type="text"
            size="small"
            @click="validate"
          >
            {{ $t(`form.submit`) }}</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";
import user from "@/store/modules/user";
import i18n from "@/lang";
@Component
export default class extends Vue {
  private form = {
    loginName: "",
    oldPassword: "",
    loginPassword: "",
    surePassword: ""
  };
  private rules = {
    oldPassword: [
      {
        required: true,
        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
          `page.views.account.user.editPassword.oldPassword`
        )}`,
        trigger: "blur"
      }
    ],
    loginPassword: [
      {
        required: true,
        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
          `page.views.account.user.editPassword.loginPassword`
        )}`,
        trigger: "blur"
      },
      {
        validator: (rule: any, value: string, callback: any) =>
          callback(
            RegAccount.test(value)
              ? undefined
              : new Error(`${i18n.t("form.RegAccount")}`)
          ),
        trigger: "blur"
      }
    ],
    surePassword: [
      {
        required: true,
        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
          `page.views.account.user.editPassword.surePassword`
        )}`,
        trigger: "blur"
      },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (value === "") {
            callback(
              new Error(
                `${i18n.t(`page.views.account.user.editPassword.err1`)}`
              )
            );
          } else if (value !== this.form.loginPassword) {
            callback(
              new Error(
                `${i18n.t(`page.views.account.user.editPassword.err2`)}`
              )
            );
          } else {
            callback();
          }
        },
        trigger: "blur"
      }
    ]
  };
  get DomForm() {
    return this.$refs.form as ElForm;
  }
  validate() {
    this.DomForm.validate(x => x && this.submit());
  }
  async submit() {
    const [err] = await this.$post("/member/info/editPassword", this.form);
    if (err) return;
    this.DomForm.resetFields();
    this.$message.success(`${this.$i18n.t(`message.success.editPassword`)}`);
    await this.$router.push("/login");
    user.clear();
  }
}
</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>
