<template>
  <UContainer>
    <UPageHero :title="page?.title" :description="page?.description" />

    <p class="text-muted py-4 text-center">{{ page?.remarks }}</p>

    <UTabs :items="serviceTabs">
      <template v-for="service in serviceTabs" :key="service.id" #[service.id]>
        <UPricingPlans :plans="service.plans" />
      </template>
    </UTabs>
    <WebDevContactSalesModal ref="webDevContactSalesModal" />
  </UContainer>
</template>

<script lang="ts" setup>
import WebDevContactSalesModal from "~/components/webDev/ContactSalesModal.vue";

const { data: page } = await useLocalizedCollection("webDev");

const webDevContactSalesModal = ref<InstanceType<
  typeof WebDevContactSalesModal
> | null>(null);

const serviceTabs = computed(() =>
  page.value?.services.map((srv) => ({
    ...srv,
    plans: srv.plans.map((pln) => ({
      ...pln,
      button: {
        label: "立刻咨询", // TODO: i18n 适配
        onClick: () => {
          webDevContactSalesModal.value?.openModal({
            serviceTitle: srv.label,
            planTitle: pln.title,
            startingPrice: pln.price,
            features: pln.features ?? [],
          });
        },
      },
    })),
    slot: srv.id,
  }))
);
</script>

<style></style>
