<template>
  <div class="page">
    <h-navbar />
    <div class="page-body">
      <h-img src="base/2logo.png" width="6rem" type="local" />
      <div class="bg-box">
        <h2>Esqueci a senha</h2>
        <h-input
          v-model="data.mobile"
          :maxlength="11"
          type="mobile"
          placeholder="Número de Celuar"
        />
        <h-input v-model="data.code" placeholder="Reenviar código">
          <template #right>
            <div class="send-code" v-show="countdown === 60" @click="sendCode">
              Enviar CODE
            </div>
            <div class="count-down" v-show="countdown !== 60">
              {{ countdown }}s
            </div>
          </template>
        </h-input>
        <h-input
          type="password"
          placeholder="Nova senha"
          v-model="data.newPassword"
        />
        <van-button
          size="large"
          color="#2F6368"
          class="btn"
          :disabled="buttonDisabled"
          @click="changePassword"
        >
          Modificar
        </van-button>
        <div class="goback">
          <!-- <span @click="returnCode">Reenviar o código</span> -->
          <span @click="goBack" v-show="!userStore.userInfo.mobile">
            Voltar ao início de sessão
          </span>
        </div>
      </div>
    </div>
    <bottom-tips />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, inject, computed } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import http from "@/https/index";
import { showLoading, closeLoading, toast } from "@/utils/toast";
import storage, { actions } from "@/utils/storage";
import { MOBILE_CODE } from "@/common/config";
import { resultMobile } from "@/utils";
const userStore = useUserStore();
const router = useRouter();

const countdown = ref(60);

const cookies: any = inject("$cookies");
const socket: any = inject("socket");
const data = reactive({
  newPassword: "",
  code: "",
  mobile: userStore.userInfo.mobile
    ? userStore.userInfo.mobile.slice(2, userStore.userInfo.mobile.length)
    : "",
});

const sendCode = async () => {
  if (!data.mobile) return toast("Por favor, introduza seu número de telefone");
  const res = await http.mobileCode({ mobile: `${MOBILE_CODE}${data.mobile}` });
  if (res.code != 0) {
    return toast(res.txt);
  }
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value == 0) {
      countdown.value = 60;
      clearInterval(timer);
    }
  }, 1000);
};
const goBack = () => {
  router.push("/login");
};

// const returnCode = () => {
//   data.code = "";
//   data.newPassword = "";
// };

const changePassword = async () => {
  let reg = RegExp(/^.{6,18}$/);
  if (!data.mobile || !data.newPassword || !data.code)
    return toast("Por favor, completa a informação");
  const flag = resultMobile(data.mobile);
  if (!flag) {
    return toast("Por favor, introduza o número de telefone correto");
  }
  if (!reg.test(data.newPassword)) {
    return toast("Por favor, introduz uma senha de 6 a 18 dígitos");
  }
  const res = await http.restPassword({
    mobile: `${MOBILE_CODE}${data.mobile}`,
    pwd: data.newPassword,
    vCode: data.code,
  });
  if (res.code != 0) {
    return toast(res.txt);
  }
  showLoading();
  const ress: ResultData = await http.login({
    mobile: `${MOBILE_CODE}${data.mobile}`,
    pwd: data.newPassword,
  });
  if (ress.code !== 0) {
    toast(ress.txt);
    return;
  }
  let newData = {
    code: MOBILE_CODE,
    mobile: data.mobile,
    pwd: data.newPassword,
  };
  // cookies.set(actions.LOGIN_INFO, newData);
  storage.setStorage(actions.USER_INFO, JSON.stringify(ress.data));
  storage.setStorage(actions.USER_TOEKN, ress.data.token);
  userStore.setUserInfo(ress.data);
  socket.connect().then(() => {
    router.replace("/");
    closeLoading();
  });
};

const buttonDisabled = computed(() => {
  if (data.newPassword && data.mobile && data.mobile) {
    return false;
  }
  return true;
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
