<template>
  <div class="page-container">
    <div v-if="!pending">
      <div v-if="solution">
        <div class="page-header">
          <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
        </div>
        <solution-detail :solution="solution" />
      </div>
      <div v-else class="not-found">
        <not-found-result
          :title="$t('solution-not-found')"
          :sub-title="$t('solution-not-found-desc')"
          :back-text="$t('back-to-solutions')"
          :on-back="() => $router.push($localePath('/solutions'))"
        />
      </div>
    </div>
    <div v-else class="loading">
      <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: solution, pending, error } = await useSolution(id);

  const breadcrumbItems = computed(() => [
    { label: $t('navigation.home'), to: localePath('/') },
    { label: $t('navigation.solutions'), to: localePath('/solutions') },
    { label: solution.value ? solution.value.title : '' },
  ]);

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

  usePageSeo({
    title: solution.value?.title || $t('page-title.solutions'),
    description: solution.value?.summary || '',
  });
</script>

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

  .breadcrumb {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .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>
