<template>
  <div class="page-container">
    <div v-if="!pending">
      <div v-if="product">
        <!-- 面包屑导航 -->
        <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
        <!-- 产品详情内容 -->
        <product-header :product="product" />
        <!-- 产品详细描述 -->
        <product-detail :product="product" />
      </div>
      <!-- 未找到产品 -->
      <div v-else class="not-found">
        <not-found-result
          :title="$t('product-not-found')"
          :sub-title="$t('product-not-found-desc')"
          :back-text="$t('back-to-products')"
          :on-back="() => $router.push($localePath('/products'))"
        />
      </div>
    </div>
    <div v-else class="loading">
      <el-skeleton style="--el-skeleton-circle-size: 400px">
        <template #template>
          <el-skeleton-item variant="circle" />
        </template>
      </el-skeleton>
      <el-skeleton :rows="5" animated />
    </div>
  </div>
</template>

<script setup lang="ts">
  const route = useRoute();
  const localePath = useLocalePath();

  // 获取路由参数
  const id = route.params.slug as string;

  const { data: product, pending, error } = await useProduct(id);

  const breadcrumbItems = computed(() => [
    { label: $t('navigation.home'), to: localePath('/') },
    { label: $t('navigation.products'), to: localePath('/products') },
    { label: product.value?.name || '' },
  ]);

  watch(error, (value) => {
    if (value) {
      logger.error('数据获取失败: ', value);
    }
  });

  // SEO
  usePageSeo({
    title: product.value.name || $t('page-title.products'),
    description: product.value.summary || '',
  });
</script>

<style scoped>
  .page-container {
    min-height: 80vh;
    max-width: 1200px;
    margin: 0 auto;
  }

  .breadcrumb {
    padding: 2rem;
  }

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
  }

  .not-found {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
  }
</style>
