<script lang="ts" setup>
import SearchBar from '@/components/searchBar.vue'

defineOptions({
  name: 'Home',
})
definePage({
  // 使用 type: "home" 属性设置首页，其他页面不需要设置，默认为page
  type: 'home',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    'navigationStyle': 'custom',
    'navigationBarTitleText': '%tabbar.home%',
    'backgroundColor': '#F8FAFB',
    'app-plus': {
      bounce: 'none',
    },
  },
})

export interface Category {
  name: string
  icon: string
  label: string
}

interface Video {
  coverImage: string
  videoSrc?: string
  color?: string
  title: string
  desc: string
}

const categories: Category[] = [
  { name: 'Special', icon: '/static/images/category/Special.png', label: '特价' },
  { name: 'TopPicks', icon: '/static/images/category/TopPicks.png', label: '精选' },
  { name: 'NewArrival', icon: '/static/images/category/NewArrival.png', label: '新品' },
  { name: 'Merchandise', icon: '/static/images/category/Merchandise.png', label: '周边' },
  { name: 'Frame', icon: '/static/images/category/Frame.png', label: '机架' },
  { name: 'Antenna', icon: '/static/images/category/Antenna.png', label: '天线' },
  { name: 'Motor', icon: '/static/images/category/Motor.png', label: '电机' },
  { name: 'More', icon: '/static/images/category/More.png', label: '更多分类' },
  // { name: 'Propeller', icon: '/static/images/category/Propeller.png', label: '螺旋桨' },
  // { name: 'Accessories', icon: '/static/images/category/Accessories.png', label: '配件' },
  // { name: 'FPV', icon: '/static/images/category/FPV.png', label: 'FPV设备' },
]

const videoList: Array<Video> = [
  { coverImage: '/static/logo.png', videoSrc: '/static/logo.mp4', color: '#333333', title: 'Volador ll vx5', desc: '捕捉每一刻·畅享飞行乐趣' },
  { coverImage: '/static/logo.png', videoSrc: '/static/logo.mp4', color: '#215484', title: 'Volador ll vx5', desc: '捕捉每一刻·畅享飞行乐趣' },
  { coverImage: '/static/logo.png', videoSrc: '/static/logo.mp4', color: '#368941', title: '标题3', desc: '描述3' },
  { coverImage: '/static/logo.png', videoSrc: '/static/logo.mp4', color: '#885468', title: '标题4', desc: '描述4' },
]

function toCategoryPage(item: Category) {
  uni.navigateTo({
    url: `/pages/index/category`,
  })
}

onLoad(() => {
  console.log('测试 uni API 自动引入: onLoad')
})
</script>

<template>
  <view class="home-page">
    <!-- 搜索框 -->
    <view class="top-container">
      <SearchBar class="home-search-bar" notice-style="white" />

      <!-- 主要产品展示 -->
      <view class="main-product">
        <image class="slider-image" src="/static/images/fifty5@m.webp" mode="aspectFill" />
      </view>
    </view>

    <!-- 分类导航 -->
    <view class="category-nav">
      <view v-for="(item, index) in categories" :key="index" class="category-item" @click="toCategoryPage(item)">
        <image class="category-icon" :src="item.icon" mode="aspectFit" />
        <text class="category-text">{{ item.label }}</text>
      </view>
    </view>

    <!-- 飞行场景 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">飞行场景</text>
        <text class="section-more">全部 ></text>
      </view>
      <swiper class="video-list" next-margin="60rpx">
        <swiper-item v-for="(item, index) in videoList" :key="index" class="video">
          <view class="video-container">
            <view class="video-core" :style="{ backgroundColor: item.color }" />
            <view class="video-info">
              <view class="video-title">
                {{ item.title }}
              </view>
              <view class="video-desc">
                {{ item.desc }}
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<style lang="less" scoped>
.home-page {
  // padding-bottom: 100rpx;
  /* 为底部导航栏留出空间 */
  background-color: #f8fafb;

  min-height: calc(100vh - 128rpx);
  height: 100%;

  .top-container {
    background-color: #fff;
    position: relative;

    .home-search-bar {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 100;
      top: 120rpx;
    }

    // 主要产品展示
    .main-product {
      background-color: #fff;
      height: 563rpx;
      width: 100%;

      .slider-image {
        width: 100%;
        height: 100%;
        background-size: cover;
      }
    }
  }

  // 分类导航
  .category-nav {
    padding: 16rpx 0rpx 36rpx;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: auto;

    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }

    .category-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: 8rpx;
      padding: 24rpx 12rpx;

      .category-icon {
        width: 64rpx;
        height: 64rpx;
        border-radius: 6rpx;
      }

      .category-text {
        font-size: 24rpx;
        line-height: 1.2;
        color: #333333;
      }
    }
  }

  // 通用区块样式
  .section {
    margin-bottom: 40rpx;
    padding: 0 0 0 14px;

    &:last-child {
      margin-bottom: 0;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-left: 16rpx;
      }

      .section-more {
        font-size: 28rpx;
        color: #999;
        margin-right: 44rpx;
      }
    }

    .video-list {
      height: 490rpx; // 设置明确的高度

      .video {
        .video-container {
          width: calc(100% - 16rpx); // 减去next-margin的值，确保内容不被裁剪
          // width: 400rpx;
          .video-core {
            width: 100%;
            aspect-ratio: 16 / 9; // 视频的宽高比

            position: relative;
          }
          .video-info {
            margin-top: 24rpx;
            display: flex;
            flex-direction: column;
            row-gap: 16rpx;
            .video-title {
              font-size: 32rpx;
              font-weight: 500;
              line-height: 1.2;
              color: #333;
            }
            .video-desc {
              font-size: 24rpx;
              line-height: 1;
              color: #666666;
            }
          }
        }
      }
    }
  }
}
</style>
