<!--服务列表页面-->
<template>
  <view class="container">
    <view class="header">
      <view class="search-bar">
        <view class="search-input">
          <input 
            placeholder="搜索服务..." 
            v-model="searchText"
            @input="handleSearch"
          />
        </view>
        <view class="filter-btn" @click="showFilter">
          <text>筛选</text>
        </view>
      </view>
    </view>

    <view class="service-list">
      <view class="service-item" 
            v-for="(service, index) in filteredServiceList" 
            :key="index"
            @click="goToDetail(service)">
        <view class="service-header">
          <view class="service-title">{{ service.name }}</view>
          <view class="service-badge" :class="[
            service.status === '正常' ? 'badge-success' : '',
            service.status === '即将到期' ? 'badge-warning' : '',
            service.status === '已过期' ? 'badge-danger' : '',
            !['正常', '即将到期', '已过期'].includes(service.status) ? 'badge-default' : ''
          ]">
            {{ service.status }}
          </view>
        </view>
        
        <view class="service-content">
          <view class="service-meta">
            <view class="meta-item">
              <text class="meta-label">类型：</text>
              <text class="meta-value">{{ service.type }}</text>
            </view>
            <view class="meta-item">
              <text class="meta-label">时长：</text>
              <text class="meta-value">{{ service.duration }}</text>
            </view>
          </view>
          
          <view class="service-desc">{{ service.description }}</view>
          
          <view class="service-footer">
            <view class="service-time">
              {{ service.startTime }} - {{ service.endTime }}
            </view>
            <view class="service-action">
              <text class="action-text">查看详情</text>
              <text class="action-arrow">></text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="empty-state" v-if="filteredServiceList.length === 0">
      <image class="empty-icon" src="/static/icon-img/empty.png"></image>
      <view class="empty-text">{{ searchText ? '未找到相关服务' : '暂无服务记录' }}</view>
    </view>

    <!-- 筛选弹窗 -->
    <fui-bottom-popup v-model="showFilterPopup" :zIndex="9999">
      <view class="filter-popup">
        <view class="popup-header">
          <view class="popup-title">筛选条件</view>
          <view class="popup-close" @click="showFilterPopup = false">✕</view>
        </view>
        
        <view class="filter-content">
          <view class="filter-group">
            <view class="filter-title">服务状态</view>
            <view class="filter-options">
              <view 
                class="filter-option" 
                :class="{ active: selectedStatus === '' }"
                @click="selectedStatus = ''"
              >
                全部
              </view>
              <view 
                class="filter-option" 
                :class="{ active: selectedStatus === '正常' }"
                @click="selectedStatus = '正常'"
              >
                正常
              </view>
              <view 
                class="filter-option" 
                :class="{ active: selectedStatus === '即将到期' }"
                @click="selectedStatus = '即将到期'"
              >
                即将到期
              </view>
              <view 
                class="filter-option" 
                :class="{ active: selectedStatus === '已过期' }"
                @click="selectedStatus = '已过期'"
              >
                已过期
              </view>
            </view>
          </view>
        </view>
        
        <view class="popup-actions">
          <view class="btn btn-reset" @click="resetFilter">重置</view>
          <view class="btn btn-confirm" @click="applyFilter">确定</view>
        </view>
      </view>
    </fui-bottom-popup>
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
  data() {
    return {
      serviceList: [],
      filteredServiceList: [],
      searchText: '',
      showFilterPopup: false,
      selectedStatus: ''
    }
  },
  onLoad() {
    this.init();
  },
  methods: {
    async init() {
      this.getServiceList();
    },

    // 获取服务列表
    async getServiceList() {
      try {
        // 模拟数据，实际应该调用API
        this.serviceList = [
          {
            id: 1,
            name: '专业体能训练服务',
            type: '体能训练',
            status: '正常',
            duration: '3个月',
            startTime: '2024-01-01',
            endTime: '2024-03-31',
            description: '专业的体能训练指导，包含有氧运动、力量训练等综合项目'
          },
          {
            id: 2,
            name: '基础动作指导服务',
            type: '技术指导',
            status: '即将到期',
            duration: '1个月',
            startTime: '2024-06-01',
            endTime: '2024-06-30',
            description: '针对基础动作的专业指导和纠正'
          },
          {
            id: 3,
            name: '营养咨询服务',
            type: '营养指导',
            status: '正常',
            duration: '6个月',
            startTime: '2024-01-15',
            endTime: '2024-07-15',
            description: '专业营养师提供个性化营养方案和饮食建议'
          },
          {
            id: 4,
            name: '康复训练服务',
            type: '康复指导',
            status: '已过期',
            duration: '2个月',
            startTime: '2023-10-01',
            endTime: '2023-11-30',
            description: '运动损伤康复和预防性训练指导'
          }
        ];
        
        this.filteredServiceList = [...this.serviceList];
        
        // 实际API调用示例：
        // let res = await apiRoute.getServiceList({});
        // if (res.code === 1) {
        //   this.serviceList = res.data;
        //   this.filteredServiceList = [...this.serviceList];
        // }
      } catch (error) {
        console.error('获取服务列表失败:', error);
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        });
      }
    },

    // 搜索处理
    handleSearch() {
      this.filterServices();
    },

    // 筛选服务
    filterServices() {
      let filtered = [...this.serviceList];
      
      // 按搜索文本筛选
      if (this.searchText) {
        filtered = filtered.filter(service => 
          service.name.includes(this.searchText) ||
          service.type.includes(this.searchText) ||
          service.description.includes(this.searchText)
        );
      }
      
      // 按状态筛选
      if (this.selectedStatus) {
        filtered = filtered.filter(service => service.status === this.selectedStatus);
      }
      
      this.filteredServiceList = filtered;
    },

    // 显示筛选
    showFilter() {
      this.showFilterPopup = true;
    },

    // 重置筛选
    resetFilter() {
      this.selectedStatus = '';
      this.filterServices();
    },

    // 应用筛选
    applyFilter() {
      this.filterServices();
      this.showFilterPopup = false;
    },


    // 跳转到详情页
    goToDetail(service) {
      this.$navigateTo({
        url: `/pages/coach/my/service_detail?id=${service.id}`
      });
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

.header {
  background: white;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.search-bar {
  display: flex;
  gap: 20rpx;
  align-items: center;
}

.search-input {
  flex: 1;
  background: #f5f5f5;
  border-radius: 25rpx;
  padding: 15rpx 30rpx;
  
  input {
    width: 100%;
    font-size: 28rpx;
  }
}

.filter-btn {
  background: #29d3b4;
  color: white;
  padding: 15rpx 30rpx;
  border-radius: 25rpx;
  font-size: 28rpx;
}

.service-list {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.service-item {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.service-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 20rpx;
}

.service-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  
  &.badge-success {
    background: #e8f5e8;
    color: #52c41a;
  }
  
  &.badge-warning {
    background: #fff2e8;
    color: #fa8c16;
  }
  
  &.badge-danger {
    background: #fff1f0;
    color: #ff4d4f;
  }
  
  &.badge-default {
    background: #f0f0f0;
    color: #666;
  }
}

.service-content {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.service-meta {
  display: flex;
  gap: 30rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  
  .meta-label {
    color: #666;
    font-size: 26rpx;
  }
  
  .meta-value {
    color: #333;
    font-size: 26rpx;
  }
}

.service-desc {
  color: #666;
  font-size: 26rpx;
  line-height: 1.5;
}

.service-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15rpx;
  border-top: 1px solid #f0f0f0;
}

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

.service-action {
  display: flex;
  align-items: center;
  color: #29d3b4;
  font-size: 26rpx;
  
  .action-arrow {
    margin-left: 10rpx;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
    opacity: 0.3;
  }
  
  .empty-text {
    color: #999;
    font-size: 28rpx;
  }
}

// 筛选弹窗样式
.filter-popup {
  background: white;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 80vh;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
}

.popup-close {
  font-size: 36rpx;
  color: #999;
}

.filter-content {
  padding: 30rpx;
}

.filter-group {
  margin-bottom: 40rpx;
}

.filter-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.filter-option {
  padding: 15rpx 30rpx;
  background: #f5f5f5;
  border-radius: 25rpx;
  font-size: 26rpx;
  color: #666;
  
  &.active {
    background: #29d3b4;
    color: white;
  }
}

.popup-actions {
  display: flex;
  gap: 20rpx;
  padding: 30rpx;
  border-top: 1px solid #f0f0f0;
}

.btn {
  flex: 1;
  padding: 20rpx;
  border-radius: 12rpx;
  text-align: center;
  font-size: 28rpx;
  
  &.btn-reset {
    background: #f0f0f0;
    color: #333;
  }
  
  &.btn-confirm {
    background: #29d3b4;
    color: white;
  }
}
</style>