<template>
  <!-- 全球POD货盘 -->
  <view class="pod-section">
    <text class="section-title">全球POD货盘</text>

    <!-- 国家 tab 横向滚动 -->
    <scroll-view scroll-x class="country-scroll" show-scrollbar="false">
      <view class="country-list">
        <view
          class="country-tab"
          :class="{ active: activeCountry === item.id }"
          v-for="(item, index) in countries"
          :key="index"
          @tap="onCountryTap(item.id)"
        >
          {{ item.flag }} {{ item.name }}
        </view>
      </view>
    </scroll-view>

    <!-- 产品网格 2列 -->
    <view class="pod-grid">
      <view
        class="pod-card"
        v-for="(item, index) in products"
        :key="index"
        @tap="onProductTap(item)"
      >
        <view class="pod-img-wrap">
          <image class="pod-img" :src="item.image" mode="aspectFit"></image>
        </view>
        <text class="pod-name">{{ item.name }}</text>
      </view>
    </view>

    <!-- 更多产品 -->
    <view class="more-products" @tap="onMoreTap">
      <text class="more-text">更多产品</text>
      <text class="more-arrow">→</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PodCatalog',
  props: {
    countries: {
      type: Array,
      default: () => []
    },
    products: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeCountry: 'us'
    }
  },
  methods: {
    onCountryTap(id) {
      this.activeCountry = id
      this.$emit('countryChange', id)
    },
    onProductTap(item) {
      this.$emit('productTap', item)
    },
    onMoreTap() {
      this.$emit('moreTap')
    }
  }
}
</script>

<style scoped>
.pod-section {
  width: 100%;
  padding: 70rpx 0 0 0;
  background: #ffffff;
}

/* 区块标题 - 设计稿 20px/400/#1a1a1a */
.section-title {
  display: block;
  padding: 0 32rpx;
  font-size: 38rpx;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 30rpx;
}

/* 国家 tab - 设计稿 13px/400, 选中 #ffffff 未选中 #000000 */
.country-scroll {
  width: 100%;
  white-space: nowrap;
  margin-bottom: 36rpx;
}
.country-list {
  display: inline-flex;
  gap: 16rpx;
  padding: 0 32rpx;
}
.country-tab {
  flex-shrink: 0;
  padding: 10rpx 24rpx;
  background: #f5f5f5;
  border-radius: 40rpx;
  font-size: 25rpx;
  color: #1a1a1a;
}
.country-tab.active {
  background: #ff6800;
  color: #ffffff;
  font-weight: 500;
}

/* 产品网格 - 2列 space-between 兼容小程序 */
.pod-grid {
  padding: 0 32rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pod-card {
  width: 330rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}
.pod-img-wrap {
  width: 100%;
  height: 340rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
}
.pod-img {
  width: 100%;
  height: 100%;
}
/* 产品名 - 设计稿 16px/400/#000000 */
.pod-name {
  display: block;
  padding: 16rpx 20rpx 20rpx;
  font-size: 26rpx;
  color: #1a1a1a;
  line-height: 1.4;
  background: #ffffff;
}

/* 更多产品 - 设计稿 12px/400/#ff6800 居中 */
.more-products {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 40rpx 0 20rpx;
}
.more-text {
  font-size: 24rpx;
  color: #ff6800;
}
.more-arrow {
  font-size: 24rpx;
  color: #ff6800;
}
</style>
