<script setup lang="ts">
import { computed, ref } from 'vue'
import { caseCategories } from '~/data/case-categories'
import ProductCard from '~/components/ProductCard.vue'

const selectedCategory = ref('all')

const legacyOrder = [
  'tangshan-ore-terminal',
  'zhongshan-port-service',
  'qinhuangdao-cargo-system',
  'zhongshan-container-terminal',
  'shanghai-hanghua-ship-agent',
  'fangchenggang-railway-container',
  'shanggang-liandai-booking',
  'weihai-gate-yard',
  'anhui-port-hefei',
  'smart-wuzhou-port',
  'zhongshan-xiaolan-remote',
  'yulong-terminal-system',
  'guangzhou-port-authority',
  'hengtong-logistics',
  'guangzhou-anzhida-logistics',
  'rizhao-hongyuan-logistics',
  'qiaoyi-logistics',
  'mobile-machinery-dispatch',
  'zhujiang-shipping',
  'hainan-strait-shipping',
  'hede-international-shipping',
  'shanghai-haihua-shipping',
  'jinjiang-shipping-ecommerce',
  'jiahua-shipping-system',
  'tianjin-zhongyun-shipping',
  'lianyungang-china-korea-ferry',
  'hede-global-supply-chain',
  'yantai-hanitek-container',
  'tangshan-haitong-shipping',
  'huanghua-vehicle-analysis',
  'beibuwan-shuttle-bus',
  'rizhao-huahai-shipping',
  'shanggang-liandai-integration',
  'shanghai-port-coastal-system',
  'tangshan-bigdata-platform',
  'shanghai-hanghua-cloud',
  'shanghai-penghua-platform',
  'shanghai-xinhai-freight',
  'canal-logistics-supervision'
] as const

const legacyOrderMap = new Map(legacyOrder.map((slug, index) => [slug, index]))

const { data: cases } = await useAsyncData('cases-list', () => {
  return queryCollection('cases')
    .all()
})

useSeo({
  title: '客户案例',
  description: '查看岸基科技服务的港口、航运、物流与供应链客户案例。',
  keywords: '岸基科技,客户案例,港口案例,航运案例,物流案例',
  canonicalPath: '/cases'
})

const breadcrumbItems = [
  { label: '首页', to: '/' },
  { label: '客户案例' }
]

const filteredCases = computed(() => {
  if (!cases.value) {
    return []
  }

  const ordered = [...cases.value].sort((a, b) => {
    const orderA = legacyOrderMap.get(a.slug) ?? Number.MAX_SAFE_INTEGER
    const orderB = legacyOrderMap.get(b.slug) ?? Number.MAX_SAFE_INTEGER
    return orderA - orderB
  })

  if (selectedCategory.value === 'all') {
    return ordered
  }

  return ordered.filter((item) => item.categories?.includes(selectedCategory.value))
})
</script>

<template>
  <div>
    <section class="page-title page-title3">
      <div class="container">
        <div class="row">
          <div class="col col-xs-12">
            <h2>创新引领未来，合作成就卓越</h2>
            <p>以客户为中心，以响应为使命，以价值为承诺</p>
          </div>
        </div>
      </div>
    </section>

    <div class="service-tab-nav-fullwidth">
      <div class="service-tab-nav">
        <div class="widget service-list-widget">
          <ul>
            <li
              v-for="category in caseCategories"
              :key="category.id"
              :class="{ current: selectedCategory === category.id }"
            >
              <a href="#" @click.prevent="selectedCategory = category.id">{{ category.label }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <section class="services-section section-padding" style="background-color: #fff;">
      <div class="container">
        <div class="product-cards" id="caseCards">
          <ProductCard
            v-for="item in filteredCases"
            :key="item.id"
            :title="item.title"
            :description="item.summary"
            :image="item.cover"
            :to="item.path"
          />
        </div>
      </div>
    </section>
  </div>
</template>
