<template>
  <view class="container">
    <!-- 顶部状态栏占位 -->
    <view class="status-bar"></view>
    
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input type="text" placeholder="搜索目的地、用户、动物" placeholder-class="placeholder" @focus="navigateToSearch" />
      </view>
    </view>

    <!-- 轮播图 -->
    <swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(item, index) in banners" :key="index" @click="navigateTo(item.link)">
        <image :src="item.image" mode="aspectFill" class="banner-image" />
      </swiper-item>
    </swiper>

    <!-- 功能入口 -->
    <view class="feature-grid">
      <view class="feature-item" @click="navigateTo('/pages/travel/list')">
        <view class="feature-icon travel">
          <uni-icons type="map" size="24" color="#007aff"></uni-icons>
        </view>
        <text class="feature-text">找搭子</text>
      </view>
      <view class="feature-item" @click="navigateTo('/pages/animal/list')">
        <view class="feature-icon animal">
          <uni-icons type="heart" size="24" color="#ff2d55"></uni-icons>
        </view>
        <text class="feature-text">认领动物</text>
      </view>
      <view class="feature-item" @click="navigateTo('/pages/flower/order')">
        <view class="feature-icon flower">
          <uni-icons type="flower" size="24" color="#ff9500"></uni-icons>
        </view>
        <text class="feature-text">送花服务</text>
      </view>
      <view class="feature-item" @click="navigateTo('/pages/promotion/invite')">
        <view class="feature-icon promotion">
          <uni-icons type="gift" size="24" color="#34c759"></uni-icons>
        </view>
        <text class="feature-text">推广奖励</text>
      </view>
    </view>

    <!-- 公告栏 -->
    <view class="notice-bar">
      <uni-icons type="sound" size="16" color="#ff9500"></uni-icons>
      <swiper class="notice-swiper" vertical autoplay circular :interval="3000">
        <swiper-item v-for="(notice, index) in notices" :key="index">
          <text class="notice-text">{{ notice.title }}</text>
        </swiper-item>
      </swiper>
      <uni-icons type="arrowright" size="14" color="#ccc"></uni-icons>
    </view>

    <!-- 推荐内容 -->
    <view class="recommend-section">
      <!-- 推荐旅行计划 -->
      <view class="section-header">
        <text class="section-title">热门旅行计划</text>
        <text class="more" @click="navigateTo('/pages/travel/list')">更多 ></text>
      </view>
      <scroll-view class="horizontal-scroll" scroll-x="true">
        <view class="scroll-item" v-for="(travel, index) in recommendedTravels" :key="index" @click="navigateToTravelDetail(travel.id)">
          <image :src="travel.coverImage" class="item-image" />
          <text class="item-title">{{ travel.destination }}</text>
          <text class="item-price">¥{{ travel.budget }}起</text>
        </view>
      </scroll-view>

      <!-- 热门动物 -->
      <view class="section-header">
        <text class="section-title">热门动物</text>
        <text class="more" @click="navigateTo('/pages/animal/list')">更多 ></text>
      </view>
      <scroll-view class="horizontal-scroll" scroll-x="true">
        <view class="scroll-item" v-for="(animal, index) in hotAnimals" :key="index" @click="navigateToAnimalDetail(animal.id)">
          <image :src="animal.image" class="item-image" />
          <text class="item-title">{{ animal.name }}</text>
          <text class="item-price">¥{{ animal.price }}</text>
        </view>
      </scroll-view>

      <!-- 精选花束 -->
      <view class="section-header">
        <text class="section-title">精选花束</text>
        <text class="more" @click="navigateTo('/pages/flower/list')">更多 ></text>
      </view>
      <scroll-view class="horizontal-scroll" scroll-x="true">
        <view class="scroll-item" v-for="(flower, index) in featuredFlowers" :key="index" @click="navigateToFlowerDetail(flower.id)">
          <image :src="flower.image" class="item-image" />
          <text class="item-title">{{ flower.name }}</text>
          <text class="item-price">¥{{ flower.price }}</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { homeService } from '../../api/services.js'

export default {
  data() {
    return {
      banners: [],
      notices: [],
      recommendedTravels: [],
      hotAnimals: [],
      featuredFlowers: []
    }
  },
  
  onShow() {
    this.loadHomeData()
  },
  
  methods: {
    async loadHomeData() {
      try {
        // 获取轮播图
        const banners = await homeService.getBanners()
        this.banners = banners
        
        // 获取公告
        const notices = await homeService.getNotices()
        this.notices = notices
        
        // 获取推荐旅行计划
        const travels = await homeService.getRecommendedTravels()
        this.recommendedTravels = travels
        
        // 获取热门动物
        const animals = await homeService.getHotAnimals()
        this.hotAnimals = animals
        
        // 获取精选花束
        const flowers = await homeService.getFeaturedFlowers()
        this.featuredFlowers = flowers
      } catch (error) {
        console.error('获取首页数据失败:', error)
        uni.showToast({
          title: '数据加载失败',
          icon: 'none'
        })
      }
    },
    
    navigateTo(url) {
      uni.navigateTo({ url })
    },
    
    navigateToSearch() {
      uni.navigateTo({ url: '/pages/search/index' })
    },
    
    navigateToTravelDetail(id) {
      uni.navigateTo({ url: `/pages/travel/detail?id=${id}` })
    },
    
    navigateToAnimalDetail(id) {
      uni.navigateTo({ url: `/pages/animal/detail?id=${id}` })
    },
    
    navigateToFlowerDetail(id) {
      uni.navigateTo({ url: `/pages/flower/detail?id=${id}` })
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f8f9fa;
  padding-bottom: 20rpx;
}

.status-bar {
  height: var(--status-bar-height);
  background-color: #fff;
}

.search-bar {
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.search-input {
  display: flex;
  align-items: center;
  height: 60rpx;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  padding: 0 20rpx;
}

.placeholder {
  font-size: 28rpx;
  color: #999;
}

.banner-swiper {
  height: 300rpx;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.feature-grid {
  display: flex;
  background-color: #fff;
  padding: 30rpx 0;
  margin-bottom: 20rpx;
}

.feature-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
}

.travel {
  background-color: #e6f1ff;
}

.animal {
  background-color: #ffe6eb;
}

.flower {
  background-color: #fff5e6;
}

.promotion {
  background-color: #e6f9ed;
}

.feature-text {
  font-size: 24rpx;
  color: #333;
}

.notice-bar {
  display: flex;
  align-items: center;
  padding: 15rpx 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.notice-swiper {
  flex: 1;
  height: 40rpx;
  margin: 0 10rpx;
}

.notice-text {
  font-size: 26rpx;
  color: #ff9500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommend-section {
  background-color: #fff;
  padding: 0 30rpx 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30rpx 0 20rpx;
}

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

.more {
  font-size: 26rpx;
  color: #999;
}

.horizontal-scroll {
  white-space: nowrap;
  margin-bottom: 30rpx;
}

.scroll-item {
  display: inline-block;
  width: 200rpx;
  margin-right: 20rpx;
  vertical-align: top;
}

.item-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}

.item-title {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 5rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-price {
  font-size: 24rpx;
  color: #ff6b35;
  font-weight: bold;
}
</style>