<template>
  <view class="index-page">
    <!-- Hero 首屏 -->
    <HeroBanner :stats="trustStats" />

    <!-- 4步流程 -->
    <StepsFlow :steps="stepList" />

    <!-- 全球POD货盘 -->
    <PodCatalog
      :countries="podCountries"
      :products="podProducts"
      @countryChange="onPodCountryChange"
      @moreTap="onGoProducts"
      @productTap="onGoDetail"
    />

    <!-- 平台功能 + 集成平台 -->
    <PlatformFeatures :features="featureList" />

    <!-- 为什么选择 -->
    <WhyChoose :reasons="reasonList" />

    <!-- 公司简介 + 底部CTA -->
    <CompanyIntro :abilities="companyFeatures" />
  </view>
</template>

<script>
import HeroBanner from './components/HeroBanner.vue'
import StepsFlow from './components/StepsFlow.vue'
import PodCatalog from './components/PodCatalog.vue'
import PlatformFeatures from './components/PlatformFeatures.vue'
import WhyChoose from './components/WhyChoose.vue'
import CompanyIntro from './components/CompanyIntro.vue'

import { getCountries, getGoods } from '@/api/public.js'
import { truncateProductTitle } from '@/utils/product.js'

import {
  trustStats,
  stepList,
  featureList,
  reasonList,
  companyFeatures
} from './mock.js'

export default {
  components: {
    HeroBanner,
    StepsFlow,
    PodCatalog,
    PlatformFeatures,
    WhyChoose,
    CompanyIntro
  },
  data() {
    return {
      trustStats,
      stepList,
      featureList,
      reasonList,
      companyFeatures,
      podCountries: [],
      podProducts: []
    }
  },
  async onLoad() {
    await this.loadPodCountries()
    await this.loadPodProducts('')
  },
  methods: {
    async loadPodCountries() {
      try {
        const res = await getCountries()
        const data = (res.data && res.data.data) || []
        const countries = [{ id: '', name: '全部' }]
        data.forEach((c) => {
          countries.push({ id: c.id, name: c.countryName })
        })
        this.podCountries = countries
      } catch (err) {
        console.error('[loadPodCountries Error]', err)
      }
    },

    async loadPodProducts(countryId) {
      try {
        const params = { page: 1, pageSize: 4 }
        if (countryId) {
          params.countryId = countryId
        }
        const res = await getGoods(params)
        const data = (res.data && res.data.data) || { items: [] }
        const items = (data.items || []).slice(0, 4)
        this.podProducts = items.map((item) => ({
          id: item.goodId,
          name: truncateProductTitle(item.goodName),
          image: item.image
        }))
      } catch (err) {
        console.error('[loadPodProducts Error]', err)
        this.podProducts = []
      }
    },

    async onPodCountryChange(id) {
      await this.loadPodProducts(id)
    },

    onGoProducts() {
      uni.switchTab({
        url: '/pages/products/products'
      })
    },
    onGoDetail(item) {
      uni.navigateTo({
        url: '/pages/product-detail/product-detail?id=' + item.id
      })
    }
  }
}
</script>

<style>
.index-page {
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
}
</style>
