<template>
  <div class="page">
    <h-navbar title="Entrar" :handleBack="bank" />
    <div class="page-body" :style="{ height: pageHeight }">
      <h-img src="base/2logo.png" width="6rem" type="local" />
      <div class="bottom">
        <other-login />
        <div class="form">
          <h-input
            v-model="data.mobile"
            type="mobile"
            :maxlength="11"
            background="#141618"
            placeholder="Número de Celular"
          />
          <h-input
            background="#141618"
            v-model="data.pwd"
            type="password"
            placeholder="Senha"
          />
          <div>
            <van-checkbox
              v-model="checked"
              shape="square"
              icon-size="16px"
              name="1"
              >Memorizar a senha</van-checkbox
            >
          </div>
          <van-button
            class="login-button"
            color="#2F6368"
            size="large"
            :disabled="hasLogin"
            @click="login"
          >
            Entrar
          </van-button>

          <p class="flex-sb">
            <span @click.stop="changePassword">Esqueci minha senha?</span>
            <span style="color: #55ba57; cursor: pointer" @click="register">
              Criar Conta Nova
            </span>
          </p>
        </div>
      </div>
    </div>
    <bottom-tips />
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, onBeforeMount, inject, ref } from "vue";
import { useRouter } from "vue-router";
import { showLoading, toast } from "@/utils/toast";
import { actions } from "@/utils/storage";
import useLogin from "@/hooks/useLogin";
import useBase from "@/hooks/useBase";
import { MOBILE_CODE } from "@/common/config";
import { resultMobile } from "@/utils";
const { onLogin } = useLogin();
const { pageHeight } = useBase();
const cookies: any = inject("$cookies");
const router = useRouter();

const data = reactive({
  code: MOBILE_CODE,
  mobile: "",
  pwd: "",
});
const checked = ref(true);
onBeforeMount(() => {
  const loginInfo = cookies.get(actions.LOGIN_INFO);
  data.mobile = loginInfo && loginInfo.mobile ? loginInfo.mobile : "";
  data.pwd = loginInfo && loginInfo.pwd ? loginInfo.pwd : "";
  if (loginInfo) {
    checked.value = true;
  }
});

const bank = () => {
  router.replace("/");
};

const login = async () => {
  const flag = resultMobile(data.mobile);
  if (!flag) {
    return toast("Por favor, introduza o número de telefone correto");
  }
  showLoading();
  if (checked.value) {
    cookies.set(actions.LOGIN_INFO, data);
  } else {
    cookies.set(actions.LOGIN_INFO, "");
  }
  await onLogin(data);
};

const register = () => {
  router.push("/register");
};
const changePassword = () => {
  router.push("/changePassword");
};
const hasLogin = computed(() => {
  return !data.mobile || !data.pwd;
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
:deep(.van-checkbox__label) {
  color: #fff;
  font-size: 0.3rem;
}
</style>
