<template>
  <div class="page">
    <h-navbar title="Telefone ligado" />
    <div class="page-body" :style="{ height: pageHeight }">
      <h-img src="base/2logo.png" type="local" width="6rem" />
      <div class="container">
        <h-img src="base/touxiang.png" width="2.5rem" />
        <div class="title">Bem Vindo, Cgae dwai</div>
        <div class="mobile">
          <div class="tip">Termine de configuracoes sua conta</div>
          <h-input
            v-model="data.mobile"
            type="mobile"
            placeholder="Número de Celular"
          />
          <h-input type="number" placeholder="CODE" v-model="data.code">
            <template #right>
              <van-button
                size="small"
                :disabled="countdown !== 120 || !data.mobile"
                color="#235633"
                @click="getCode"
              >
                {{ countdown !== 120 ? countdown : "CODE" }}
              </van-button>
            </template>
          </h-input>
          <h-input type="password" placeholder="Senha" v-model="data.pwd" />
        </div>
        <div class="tips flex-ct">
          <h-img src="base/tips.png" width="1.5rem" />
          <span>
            o numero do celuar sera usado para verificar se seu dinheiro esta
            seguro quando voce tentar
          </span>
        </div>
        <van-button
          class="login-button"
          color="#235633"
          size="large"
          :disabled="disabled"
          @click="bind"
        >
          Continuar
        </van-button>
      </div>
    </div>
    <bottom-tips />
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import { resultMobile } from "@/utils";
import https from "@/https";
import { MOBILE_CODE } from "@/common/config";
import { closeLoading, showLoading, toast } from "@/utils/toast";
import useBase from "@/hooks/useBase";

const { pageHeight } = useBase();
const userStore = useUserStore();

const router = useRouter();

const countdown = ref(120);

const data = reactive({
  mobile: "",
  pwd: "",
  code: "",
});

const disabled = computed(() => {
  return !data.mobile || !data.code || !data.pwd;
});

const getCode = async () => {
  const flag = resultMobile(data.mobile);
  if (flag && countdown.value === 120) {
    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value == 0) {
        countdown.value = 120;
        clearInterval(timer);
      }
    }, 1000);
    const res = await https.mobileCode({
      mobile: MOBILE_CODE + data.mobile,
    });
    if (res.code != 0) {
      return toast(res.txt);
    }
  }
};

const bind = async () => {
  showLoading();
  const res = await https.bindMobile({
    mobile: MOBILE_CODE + data.mobile,
    pwd: data.pwd,
    vCode: data.code,
  });
  if (res.code != 0) {
    closeLoading();
    return toast(res.txt);
  }
  closeLoading();
  toast("Ligando bem sucedido");
  await userStore.getUserInfo();
  router.back();
};

onMounted(() => {
  if (userStore.userInfo.mobile) {
    router.back();
  }
});
</script>

<style lang="scss" scoped>
.page-body {
  overflow: auto;
  .container {
    padding: 0.2rem;
    background-color: #161c1a;
    border-radius: $border-radius;
    margin-top: 0.2rem;
    .title {
      font-size: 0.4rem;
      @extend .blod;
      color: #55ba57;
    }
    .mobile {
      margin: 0.4rem 0;
      .tip {
        font-size: 0.4rem;
      }
      .van-button {
        width: 1.5rem;
      }
    }
    .tips {
      font-size: 0.35rem;
      width: 100%;
      text-align: center;
      margin: 1.5rem 0;
      span {
        text-align: left;
        margin-left: 0.3rem;
      }
    }
  }
}
</style>
