<template>
  <q-page class="col bg-grey-2 sd-page-padding">
    <!-- 自定义轮播图组件 -->
    <div class="q-pt-lg">
      <CustomCarousel :items="carouselItems" :mode="carouselMode" :height="320" :autoplay="5000" :arrows="true"
        :is-loading="carouselLoading" />
    </div>

    <!-- 热门商品模块 -->
    <div class="q-mt-sm">
      <div class="text-h5 text-weight-bold q-mb-lg text-grey-9">热门商品</div>
      <div class="q-mb-sm bg-white rounded-borders">
        <q-tabs v-model="activeTab" dense class="text-grey-7" active-color="primary" indicator-color="primary"
          align="left">
          <q-tab name="recharge" icon="account_balance_wallet" label="游戏直充" class="q-px-lg tab-with-icon" />
          <q-tab name="coins" icon="monetization_on" label="游戏币" class="q-px-lg tab-with-icon" />
          <q-tab name="items" icon="inventory" label="游戏道具" class="q-px-lg tab-with-icon" />
          <q-tab name="giftcards" icon="card_giftcard" label="礼品卡" class="q-px-lg tab-with-icon" />
          <q-tab name="cdk" icon="confirmation_number" label="CDK" class="q-px-lg tab-with-icon" />
        </q-tabs>
      </div>
      <!-- 商品网格布局 -->
      <div class="row q-col-gutter-sm">
        <!-- 骨架屏 -->
        <template v-if="isLoading">
          <div v-for="n in skeletonCount" :key="`skeleton-${n}`" class="col-12 col-md-6 col-lg-4">
            <q-card class="product-card q-pa-md" flat>
              <div class="row no-wrap items-center" style="height: 100%;">
                <!-- 商品图片骨架屏 -->
                <div class="q-mr-md" style="width: 108px; height: 108px;">
                  <q-skeleton animation="none" type="rect" width="108px" height="108px" class="rounded-borders" />
                </div>
                <!-- 商品信息骨架屏 -->
                <div class="col flex column justify-center">
                  <q-skeleton animation="none" type="text" width="60%" height="24px" class="q-mb-xs" />
                  <q-skeleton animation="none" type="text" width="40%" height="16px" class="q-mb-xs" />
                  <q-skeleton animation="none" type="text" width="50%" height="16px" class="q-mb-sm" />
                  <!-- 评分区域骨架屏 -->
                  <div class="row items-center q-gutter-xs">
                    <q-skeleton animation="none" type="rect" width="80px" height="16px" class="q-mr-sm" />
                    <q-skeleton animation="none" type="text" width="20px" height="16px" />
                  </div>
                </div>
              </div>
              <!-- 折扣标签骨架屏 -->
              <q-skeleton animation="none" type="rect" width="40px" height="20px" class="absolute-top-right q-ma-sm"
                style="border-radius: 4px;" />
            </q-card>
          </div>
        </template>

        <!-- 动态商品卡片 -->
        <template v-else>
          <div v-for="product in currentProducts" :key="product.id" class="col-12 col-md-6 col-lg-4">
            <q-card class="product-card card-lift q-pa-md cursor-pointer transition-generic" flat
              @click="navigateToProduct(product.name)">
              <div class="row no-wrap items-center" style="height: 100%;">
                <!-- 商品图片 -->
                <div class="q-mr-md flex items-center image-zoom-container" style="width: 108px; height: 108px;">
                  <q-img :src="product.image" :alt="product.name" class="rounded-borders image-zoom" fit="cover"
                    style="width: 100%; height: 100%;" />
                </div>
                <!-- 商品信息 -->
                <div class="col flex column justify-center">
                  <span class="text-subtitle1 text-weight-medium text-grey-9 q-mb-xs">{{ product.name }}</span>
                  <p class="text-body2 text-grey-6 q-mb-xs">Sales Volume: {{ product.sales }}</p>
                  <p class="text-body2 text-grey-6 q-mb-sm">User Reviews: {{ product.reviews }}</p>
                  <!-- 评分区域 -->
                  <div class="row items-center q-gutter-xs">
                    <q-rating :model-value="product.rating" readonly size="sm" color="orange" class="q-mr-sm" />
                    <span class="text-body2 text-weight-medium text-orange">{{ product.rating }}</span>
                  </div>
                </div>
              </div>
              <!-- 折扣标签 -->
              <q-badge style="border-radius: 4px;" class="absolute-top-right q-ma-sm" color="red-1" text-color="red"
                :label="product.discount" />
            </q-card>
          </div>
        </template>
      </div>
    </div>

    <!-- 礼品卡模块 -->
    <div class="q-mt-lg">
      <div class="text-h5 text-weight-bold q-mb-lg text-grey-9">熱銷禮品卡</div>
      <div class="row q-col-gutter-md">
        <!-- 礼品卡骨架屏 -->
        <template v-if="isLoading">
          <div v-for="n in skeletonCount" :key="`gift-skeleton-${n}`"
            class="col-6 col-sm-6 col-md-3 col-lg-2 col-xl-custom-8">
            <q-card class="figma-gift-card bg-white" flat>
              <q-skeleton  animation="none" height="200px" square />
              <q-card-section class="q-pa-md">
                <q-skeleton animation="none" type="text" class="text-subtitle1" />
                <div class="row items-center no-wrap q-mt-sm">
                  <q-skeleton animation="none" type="text" width="60px" class="text-h6" />
                  <q-skeleton animation="none" type="rect" width="50px" height="20px" class="q-ml-sm" />
                </div>
              </q-card-section>
            </q-card>
          </div>
        </template>

        <!-- 实际礼品卡内容 -->
        <template v-else>
          <div v-for="card in figmaGiftCards" :key="card.id" class="col-6 col-sm-6 col-md-3 col-lg-2 col-xl-custom-8">
            <q-card class="figma-gift-card card-lift bg-white cursor-pointer" flat
              @click="navigateToProduct(card.name)">
              <div class="image-zoom-container">
                <q-img :src="card.image" :ratio="1" class="image-zoom" />
              </div>
              <q-card-section class="q-pa-md">
                <div class="text-subtitle1 text-weight-medium text-grey-9 ellipsis">{{ card.name }}</div>
                <div class="row items-center no-wrap q-mt-sm">
                  <div class="text-h6 text-weight-medium text-red">{{ card.price }}</div>
                  <q-badge class="q-ml-sm q-pa-xs text-weight-medium text-red bg-red-1 figma-gift-card-badge">
                    {{ card.discount }}
                  </q-badge>
                </div>
              </q-card-section>
            </q-card>
          </div>
        </template>
      </div>
    </div>

    <!-- 服务特色模块 -->
    <div class="q-mt-lg">
      <div class="text-h5 text-weight-bold q-mb-lg text-grey-9">為什麼選擇我們？</div>
      <div class="row bg-white q-pa-md rounded-borders">
        <!-- 100% Safe Transaction -->
        <div class="col-12 col-md">
          <div class="row items-start q-gutter-md">
            <div class="service-icon-container">
              <q-icon name="verified_user" size="24px" color="grey-8" />
            </div>
            <div class="col">
              <span class="text-h6 text-weight-medium text-grey-9 q-mb-sm">100% Safe Transaction</span>
              <p class="text-body2 text-grey-6 q-ma-none">
                LootBar provides you with competitive product prices and efficient delivery to your account.
                If the goods are not delivered or cannot be used after delivery, the platform promises to
                refund 100% and provide 100% financial security guarantee.
              </p>
            </div>
          </div>
        </div>

        <!-- Full Refund Guarantee -->
        <div class="col-12 col-md">
          <div class="row items-start q-gutter-md">
            <div class="service-icon-container">
              <q-icon name="account_balance_wallet" size="24px" color="grey-8" />
            </div>
            <div class="col">
              <span class="text-h6 text-weight-medium text-grey-9 q-mb-sm">Full Refund Guarantee</span>
              <p class="text-body2 text-grey-6 q-ma-none">
                LootBar provides you with competitive product prices and efficient delivery to your account.
                If the goods are not delivered or cannot be used after delivery, the platform promises to
                refund 100% and provide 100% financial security guarantee.
              </p>
            </div>
          </div>
        </div>

        <!-- 24/7 Support -->
        <div class="col-12 col-md">
          <div class="row items-start q-gutter-md">
            <div class="service-icon-container">
              <q-icon name="support_agent" size="24px" color="grey-8" />
            </div>
            <div class="col">
              <span class="text-h6 text-weight-medium text-grey-9 q-mb-sm">24/7 Support</span>
              <p class="text-body2 text-grey-6 q-ma-none">
                We have a strong customer team and multiple ways to access consultations, quickly and
                conveniently answering any questions you have during the transaction process, including
                any support needed before, during, and after the sale.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付方式和语言选择模块 -->
    <div class="q-mt-lg">
      <FooterComponent />
    </div>
  </q-page>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useQuasar } from 'quasar'
import { useRouter } from 'vue-router'
import FooterComponent from 'src/components/FooterComponent.vue'
import CustomCarousel from 'src/components/CustomCarousel.vue'
const $q = useQuasar()
const router = useRouter()

// 当前激活的选项卡
const activeTab = ref('recharge')
// 加载状态
const isLoading = ref(true)
const carouselLoading = ref(true)
// 根据屏幕宽度计算骨架屏数量
const skeletonCount = computed(() => {
  return ($q.screen.lg || $q.screen.xl) ? 9 : ($q.screen.md ? 8 : 4)
})
// 轮播图模式
const carouselMode = ref('card')
// 轮播图数据
const carouselItems = ref([
  {
    image: 'https://static.ezbuygame.com/uploads/20250807/1b3da6aca2244834baf8dfaceb832fb3.png',
    title: 'Genshin Impact',
    description: '原神 - 开放世界冒险RPG游戏'
  },
  {
    image: 'https://static.ezbuygame.com/uploads/20250807/c38aed26a3d7444c8f9e84c7456491ae.png',
    title: 'Honor of Kings',
    description: '王者荣耀 - 5v5公平竞技手游'
  },
  {
    image: 'https://static.ezbuygame.com/uploads/20250807/173b8565647a44ec81ade9dfa8064682.png',
    title: 'PUBG Mobile',
    description: '绝地求生 - 战术竞技手游'
  },
  {
    image: 'https://static.ezbuygame.com/uploads/20250807/8d60b39cd2ed4dc0a28b48f3a2429ba5.png',
    title: 'Steam Gift Card',
    description: 'Steam礼品卡 - 畅享游戏世界'
  }
])
const figmaGiftCards = ref([
  {
    id: 1,
    name: 'EA Sports FC 24',
    image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', // Placeholder image
    price: '$36.80',
    discount: '8% OFF'
  },
  {
    id: 2,
    name: 'EA Sports FC 24',
    image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', // Placeholder image
    price: '$36.80',
    discount: '8% OFF'
  }, {
    id: 3,
    name: 'EA Sports FC 24',
    image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', // Placeholder image
    price: '$36.80',
    discount: '8% OFF'
  },
  {
    id: 4,
    name: 'EA Sports FC 24',
    image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', // Placeholder image
    price: '$36.80',
    discount: '8% OFF'
  },
  {
    id: 5,
    name: 'EA Sports FC 24',
    image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', // Placeholder image
    price: '$36.80',
    discount: '8% OFF'
  },
  {
    id: 6,
    name: 'EA Sports FC 24',
    image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', // Placeholder image
    price: '$36.80',
    discount: '8% OFF'
  },
    {
    id: 7,
    name: 'EA Sports FC 24',
    image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', // Placeholder image
    price: '$36.80',
    discount: '8% OFF'
  },
    {
    id: 8,
    name: 'EA Sports FC 24',
    image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', // Placeholder image
    price: '$36.80',
    discount: '8% OFF'
  },
]);
// 不同类型的商品数据
const productData = {
  recharge: [
    { id: 1, name: 'Genshin Impact', image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', sales: '100k+', reviews: '32,926', rating: 3.5, discount: '-20%' },
    { id: 2, name: 'Honor of Kings', image: 'https://static.ezbuygame.com/uploads/20250822/987ec15ac7334f55806663f63752d1e0.png', sales: '80k+', reviews: '25,432', rating: 4.2, discount: '-15%' },
    { id: 3, name: 'PUBG Mobile', image: 'https://static.ezbuygame.com/uploads/20250815/0a6cd8b0eac4416d94bd76254af2b423.jpg', sales: '60k+', reviews: '18,765', rating: 4.0, discount: '-10%' },
    { id: 177, name: 'Honor of Kings CDK', image: 'https://static.ezbuygame.com/uploads/20250803/466ebe5d237e41808e733c06ccdcde9d.jpg', sales: '25k+', reviews: '8,234', rating: 4.0, discount: '-35%' },
    { id: 187, name: 'Honor of Kings CDK', image: 'https://static.ezbuygame.com/uploads/20250809/f645e5984b444894b6b5c77106ba156e.jpeg', sales: '25k+', reviews: '8,234', rating: 4.0, discount: '-35%' },
    { id: 197, name: 'Honor of Kings CDK', image: 'https://static.ezbuygame.com/uploads/20250816/2114530bd1fc43bbba18d5d18a1d3498.jpeg', sales: '25k+', reviews: '8,234', rating: 4.0, discount: '-35%' },
    { id: 157, name: 'PUBG Mobile CDK', image: 'https://static.ezbuygame.com/uploads/20250815/0a6cd8b0eac4416d94bd76254af2b423.jpg', sales: '20k+', reviews: '6,789', rating: 3.9, discount: '-30%' }

  ],
  coins: [
    { id: 4, name: 'Genshin Impact 原石', image: 'https://static.ezbuygame.com/uploads/20250814/362d9c76e21643d0bb51674e41ff87d0.jpg', sales: '150k+', reviews: '45,123', rating: 4.5, discount: '-25%' },
    { id: 5, name: 'Honor of Kings 点券', image: 'https://static.ezbuygame.com/uploads/20250805/fd36d10916854f0687626de34110c94a.jpg', sales: '120k+', reviews: '38,567', rating: 4.3, discount: '-20%' },
  ],
  items: [
    { id: 7, name: 'Genshin Impact 武器', image: 'https://static.ezbuygame.com/uploads/20250726/4d66dc35035a4b05b9a461e03134a229.png', sales: '50k+', reviews: '15,678', rating: 4.0, discount: '-30%' },
  ],
  giftcards: [
    { id: 10, name: 'Steam 礼品卡', image: 'https://static.ezbuygame.com/uploads/20250817/c075361f918c4d8ebb2eff19b3284c1e.png', sales: '200k+', reviews: '67,890', rating: 4.6, discount: '-5%' },
    { id: 11, name: 'App Store 礼品卡', image: 'https://static.ezbuygame.com/uploads/20250731/5b5e498590864918acaf3d1d578c06d3.png', sales: '180k+', reviews: '56,234', rating: 4.5, discount: '-8%' },
    { id: 12, name: 'Google Play 礼品卡', image: 'https://static.ezbuygame.com/uploads/20250810/2d138160599546aea73ebb14c72c942c.png', sales: '160k+', reviews: '48,567', rating: 4.4, discount: '-10%' }
  ],
  cdk: [
    { id: 13, name: 'Genshin Impact CDK', image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', sales: '30k+', reviews: '9,876', rating: 4.2, discount: '-40%' },
    { id: 14, name: 'Honor of Kings CDK', image: 'https://static.ezbuygame.com/uploads/20250730/423f84feb5ab405bb2260a60a6c436af.jpg', sales: '25k+', reviews: '8,234', rating: 4.0, discount: '-35%' },
    { id: 16, name: 'Honor of Kings CDK', image: 'https://static.ezbuygame.com/uploads/20250729/0cbb5dd931df47d3a6b819fab875d79f.jpg', sales: '25k+', reviews: '8,234', rating: 4.0, discount: '-35%' },
    { id: 17, name: 'Honor of Kings CDK', image: 'https://static.ezbuygame.com/uploads/20250803/466ebe5d237e41808e733c06ccdcde9d.jpg', sales: '25k+', reviews: '8,234', rating: 4.0, discount: '-35%' },
    { id: 18, name: 'Honor of Kings CDK', image: 'https://static.ezbuygame.com/uploads/20250809/f645e5984b444894b6b5c77106ba156e.jpeg', sales: '25k+', reviews: '8,234', rating: 4.0, discount: '-35%' },
    { id: 19, name: 'Honor of Kings CDK', image: 'https://static.ezbuygame.com/uploads/20250816/2114530bd1fc43bbba18d5d18a1d3498.jpeg', sales: '25k+', reviews: '8,234', rating: 4.0, discount: '-35%' },
    { id: 15, name: 'PUBG Mobile CDK', image: 'https://static.ezbuygame.com/uploads/20250815/0a6cd8b0eac4416d94bd76254af2b423.jpg', sales: '20k+', reviews: '6,789', rating: 3.9, discount: '-30%' }
  ]
}
// 当前显示的商品列表
const currentProducts = computed(() => {
  return productData[activeTab.value] || []
})
const navigateToProduct = (gameType) => {
  // 跳转到charge页面，传递游戏类型参数
  router.push({ path: '/charge', query: { game: gameType } })
}
// 检查轮播图图片是否加载完成
const checkCarouselImagesLoaded = () => {
  const imagePromises = carouselItems.value.map(item => {
    return new Promise((resolve) => {
      if (!item.image) {
        resolve()
        return
      }

      const img = new Image()
      img.onload = () => resolve()
      img.onerror = () => resolve() // 即使加载失败也继续
      img.src = item.image
    })
  })

  Promise.all(imagePromises).then(() => {
    carouselLoading.value = false
  })
}
// 模拟数据加载
onMounted(() => {
  // 开始检查轮播图图片加载
  checkCarouselImagesLoaded()

  // 模拟1500毫秒的加载时间
  setTimeout(() => {
    isLoading.value = false
  }, 1500)
})
</script>

<style scoped>
/* 所有样式已使用 Quasar 官方 CSS 类替代 */
.product-card {
  height: 140px;
  border-radius: 8px;
}

.card-lift {
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.image-zoom-container {
  overflow: hidden;
  border-radius: 8px;
}

.image-zoom {
  transition: transform 0.3s ease;
}

.card-lift:hover .image-zoom {
  transform: scale(1.1);
}

/* 选项卡图标和文字对齐样式 */
.tab-with-icon :deep(.q-tab__content) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.tab-with-icon :deep(.q-tab__icon) {
  margin: 0;
  font-size: 18px;
}

.tab-with-icon :deep(.q-tab__label) {
  margin: 0;
  font-weight: 500;
}

.figma-gift-card {
  width: 100%;
  border-radius: 8px;
}

.figma-gift-card-badge {
  border-radius: 4px;
}

/* Custom breakpoint for xl showing 8 cards per row */
@media (min-width: 1440px) {
  .col-xl-custom-8 {
    width: 16.66%;
    /* 100% / 8 = 12.5% */
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
}

/* lg: 6 cards per row (16.666%) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .col-lg-2 {
    width: 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* md: 4 cards per row (25%) */
@media (min-width: 600px) and (max-width: 1023px) {
  .col-md-3 {
    width: 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* sm: 2 cards per row (50%) */
@media (max-width: 599px) {
  .col-6,
  .col-sm-6 {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* 服务特色区块样式 */
.service-icon-container {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: rgba(37, 39, 46, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
</style>
