<script setup lang="ts">
import { computed } from 'vue'

type LinkItem = { label: string; to: string }

const props = withDefaults(defineProps<{
  title: string
  description?: string
  bannerImage?: string
  breadcrumbItems?: Array<{ label: string; to?: string }>
  relatedProducts?: LinkItem[]
  relatedCases?: LinkItem[]
}>(), {
  description: undefined,
  bannerImage: undefined,
  breadcrumbItems: () => [],
  relatedProducts: () => [],
  relatedCases: () => []
})

const bannerStyle = computed(() => {
  if (!props.bannerImage) {
    return undefined
  }

  return {
    backgroundImage: `linear-gradient(rgba(16, 37, 65, 0.32), rgba(16, 37, 65, 0.32)), url(${props.bannerImage})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  }
})
</script>

<template>
  <div>
    <section class="page-title" :style="bannerStyle">
      <div class="container">
        <div class="row">
          <div class="col col-xs-12">
            <h2>{{ title }}</h2>
            <p v-if="description">{{ description }}</p>
          </div>
        </div>
      </div>
    </section>
    <Breadcrumb v-if="breadcrumbItems.length" :items="breadcrumbItems" />
    <slot />

    <section v-if="relatedProducts.length" class="product-related-section section-padding">
      <div class="container">
        <div class="row">
          <div class="col col-xs-12">
            <div class="product-advantages-header">
              <div>
                <h1 class="product-advantages-title">相关产品</h1>
                <p>继续查看与当前方案高度关联的产品能力。</p>
              </div>
            </div>
            <div class="product-related-links">
              <NuxtLink v-for="item in relatedProducts" :key="item.to" :to="item.to" class="product-related-link">
                {{ item.label }}
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.product-related-section {
  padding-top: 20px;
}

.product-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.product-related-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(20, 129, 255, 0.2);
  color: #102541;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(16, 37, 65, 0.06);
}
</style>
