<template>
  <view class="travel-list-page">
    <!-- 顶部搜索栏 -->
    <view class="search-header">
      <view class="search-input" @click="navigateToSearch">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <text class="placeholder">搜索目的地、旅行计划</text>
      </view>
    </view>

    <!-- 筛选条件 -->
    <view class="filter-bar">
      <view class="filter-item" :class="{ active: filterActive === 'all' }" @click="changeFilter('all')">
        <text>全部</text>
      </view>
      <view class="filter-item" :class="{ active: filterActive === 'recruiting' }" @click="changeFilter('recruiting')">
        <text>招募中</text>
      </view>
      <view class="filter-item" :class="{ active: filterActive === 'ongoing' }" @click="changeFilter('ongoing')">
        <text>进行中</text>
      </view>
      <view class="filter-item" :class="{ active: filterActive === 'completed' }" @click="changeFilter('completed')">
        <text>已完成</text>
      </view>
    </view>

    <!-- 旅行计划列表 -->
    <view class="travel-list">
      <view class="travel-item" v-for="travel in travelList" :key="travel.id" @click="navigateToDetail(travel.id)">
        <image :src="travel.coverImage" class="travel-image" mode="aspectFill"></image>
        <view class="travel-info">
          <text class="travel-title">{{ travel.title }}</text>
          <text class="travel-destination">{{ travel.destination }}</text>
          <view class="travel-meta">
            <text class="travel-date">{{ travel.startDate }} - {{ travel.endDate }}</text>
            <text class="travel-budget">¥{{ travel.budget }}</text>
          </view>
          <view class="travel-status">
            <text class="status-tag" :class="getStatusClass(travel.status)">{{ getStatusText(travel.status) }}</text>
            <text class="members">{{ travel.currentMembers }}/{{ travel.maxMembers }}人</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore">
      <text>加载中...</text>
    </view>
    <view class="no-more" v-else>
      <text>没有更多数据了</text>
    </view>

    <!-- 发布按钮 -->
    <view class="publish-btn" @click="navigateToPublish">
      <uni-icons type="plus" size="24" color="#fff"></uni-icons>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      travelList: [],
      filterActive: 'all',
      currentPage: 1,
      pageSize: 10,
      hasMore: true,
      loading: false
    }
  },

  onLoad() {
    this.loadTravelList()
  },

  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadMore()
    }
  },

  methods: {
    async loadTravelList() {
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          status: this.filterActive === 'all' ? undefined : this.filterActive
        }

        const response = await travelService.getList(params)
        this.travelList = response.list || []
        this.hasMore = response.total > this.currentPage * this.pageSize
      } catch (error) {
        console.error('加载旅行计划列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    async loadMore() {
      this.currentPage++
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          status: this.filterActive === 'all' ? undefined : this.filterActive
        }

        const response = await travelService.getList(params)
        this.travelList = [...this.travelList, ...(response.list || [])]
        this.hasMore = response.total > this.currentPage * this.pageSize
      } catch (error) {
        console.error('加载更多失败:', error)
        this.currentPage--
      } finally {
        this.loading = false
      }
    },

    changeFilter(filter) {
      if (this.filterActive !== filter) {
        this.filterActive = filter
        this.currentPage = 1
        this.travelList = []
        this.loadTravelList()
      }
    },

    getStatusClass(status) {
      const statusMap = {
        recruiting: 'recruiting',
        ongoing: 'ongoing',
        completed: 'completed',
        cancelled: 'cancelled'
      }
      return statusMap[status] || 'recruiting'
    },

    getStatusText(status) {
      const statusTextMap = {
        recruiting: '招募中',
        ongoing: '进行中',
        completed: '已完成',
        cancelled: '已取消'
      }
      return statusTextMap[status] || '招募中'
    },

    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/travel/detail?id=${id}`
      })
    },

    navigateToSearch() {
      uni.navigateTo({
        url: '/pages/search/index?type=travel'
      })
    },

    navigateToPublish() {
      uni.navigateTo({
        url: '/pages/travel/publish'
      })
    }
  }
}
</script>

<style scoped>
.travel-list-page {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 100rpx;
}

.search-header {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

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

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

.filter-bar {
  display: flex;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.filter-item {
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  border-radius: 20rpx;
  background-color: #f8f9fa;
}

.filter-item.active {
  background-color: #007aff;
  color: #fff;
}

.travel-list {
  padding: 20rpx;
}

.travel-item {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.travel-image {
  width: 100%;
  height: 300rpx;
}

.travel-info {
  padding: 20rpx;
}

.travel-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.travel-destination {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 15rpx;
}

.travel-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.travel-date {
  font-size: 24rpx;
  color: #999;
}

.travel-budget {
  font-size: 28rpx;
  color: #ff6b35;
  font-weight: bold;
}

.travel-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-tag {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
}

.status-tag.recruiting {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-tag.ongoing {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-tag.completed {
  background-color: #f9f9f9;
  color: #999;
}

.status-tag.cancelled {
  background-color: #fff2f0;
  color: #ff4d4f;
}

.members {
  font-size: 24rpx;
  color: #999;
}

.load-more,
.no-more {
  text-align: center;
  padding: 30rpx;
  font-size: 26rpx;
  color: #999;
}

.publish-btn {
  position: fixed;
  right: 40rpx;
  bottom: 100rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #007aff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.3);
}
</style>