<template>
  <div class="register">
    <ul class="ulList">
      <li>
        <div>当前密码：</div>
        <input
          type="password"
          placeholder="请输入当前密码"
          class="ipt"
          v-model="psw.oldPwd"
        />
      </li>
      <li>
        <div>修改密码：</div>
        <input
          type="password"
          placeholder="密码不少于6位，需要字母与数字构成"
          class="ipt"
          v-model="psw.newPwd"
        />
      </li>

      <li>
        <div>确认修改密码：</div>
        <input
          type="password"
          placeholder="密码不少于6位，需要字母与数字构成"
          class="ipt"
          v-model="queren"
        />
      </li>
    </ul>
    <div>
      <van-button type="default" size="large" color="#1f1fbe" @click="changePSw"
        >修 改</van-button
      >
    </div>
  </div>
</template>
<script>
import { resetPassword } from "@/service/api_company.js";
import { Toast } from "vant";
import auth from "@/service/auth";
export default {
  data() {
    return {
      psw: { oldPwd: "", newPwd: "" },
      queren: "",
    };
  },
  mounted() {
    this.psw.userId = auth.currUser().id;
  },
  methods: {
    changePSw() {
      if (this.queren !== this.psw.newPwd) {
        Toast("新密码不一致");
      } else {
        resetPassword(this.psw).then((res) => {
          if (res.errmsg == "成功") {
            this.psw = { oldPwd: "", newPwd: "" };
            this.queren = "";
            this.$router.push("/login");
          }
          Toast(res.errmsg);
        });
      }
    },
  },
};
</script>
<style lang="scss">
.register {
  .ulList {
    background: white;
    box-sizing: border-box;
    width: 90vw;
    margin-left: 5vw;
    margin-top: 7vw;
    border-radius: 5vw;
    padding: 1vw;
    font-weight: 700;
    font-size: 4vw;
    color: rgba(51, 51, 51, 1);
    li {
      display: flex;
      padding: 6vw 3vw;
      white-space: nowrap;
    }
    .ipt::-webkit-input-placeholder {
      font-weight: 500;
      font-size: 3vw;
    }
  }
  .van-button {
    width: 80vw;
    margin-left: 10vw;
    border-radius: 60px;
    position: relative;
    top: 50vh;
  }
}
</style>
