<template>
  <div class="page">
    <h-navbar />
    <div class="paw-box">
      <p>Alterar senha</p>
      <h-input
        type="password"
        placeholder="Atual senha"
        v-model="data.oldPwd"
      />
      <h-input
        type="password"
        class="two-input"
        :maxlength="16"
        placeholder="Nova senha"
        v-model="data.newPwd"
      />
      <div class="btn" @click="changePassword">Mudar</div>
      <div class="bottom" @click.stop="open">Esqueci minha senha?</div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import http from "@/https/index";
import { closeLoading, showLoading, toast } from "@/utils/toast";
import { onMounted, reactive,inject } from "vue";
import { useRouter } from "vue-router";
const socket: any = inject("socket");
import { useUserStore } from "@/stores/modules/user";
const router = useRouter();
const userStore = useUserStore();
onMounted(async () => {});
const data = reactive({
  newPwd: "",
  oldPwd: "",
});
const open = () => {
  router.push("/password");
};
const changePassword = async () => {
  if (data.newPwd.length < 6)
    return toast("Por favor, insira a senha correta");
  showLoading();
  const res = await http.pwdRestPwd(data);

  if (res.code != 0) {
    closeLoading();
    return toast(res.txt);
  }
  closeLoading();
  toast("Mudança de senha bem sucedida, por favor, rexistre novamente");
  userStore.clearUser();
  socket.disconnect();
  router.replace("/login");
};
</script>
<style lang='scss' scoped>
.paw-box {
  padding: 1rem 0.4rem;
  text-align: center;
  overflow: hidden;
  > p {
    font-size: 0.7rem;
    font-weight: 600;
    color: #fcde26;
    margin-bottom: 0.5rem;
  }
  .two-input {
    margin: 0.5rem 0 1rem 0;
  }
  .btn {
    text-align: center;
    padding: 0.2rem 0.4rem;
    background-color: #009d81;
    font-size: 0.4rem;
    font-weight: 600;
    margin-top: 1rem;
    border-radius: $border-radius;
    cursor: pointer;
  }
  .bottom {
    float: right;
    margin-top: 0.2rem;
    font-size: 0.3rem;
    cursor: pointer;
  }
}
</style>