<template>
  <view class="order-list-page">
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="title">我的预约</text>
    </view>

    <!-- 订单状态筛选 -->
    <view class="tabs">
      <view 
        v-for="tab in tabs" 
        :key="tab.value"
        class="tab-item"
        :class="{ active: currentTab === tab.value }"
        @click="changeTab(tab.value)"
      >
        <text class="tab-text">{{ tab.label }}</text>
        <text v-if="tab.count > 0" class="tab-badge">{{ tab.count }}</text>
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view class="order-list" scroll-y>
      <!-- 订单项 -->
      <view 
        v-for="order in orderList" 
        :key="order.id"
        class="order-item"
        @click="goOrderDetail(order.id)"
      >
        <!-- 订单头部 -->
        <view class="order-header">
          <text class="order-no">订单号：{{ order.orderNo }}</text>
          <text class="order-status" :class="'status-' + order.status">
            {{ getStatusText(order.status) }}
          </text>
        </view>

        <!-- 服务信息 -->
        <view class="order-content">
          <view class="service-info">
            <text class="service-icon">📚</text>
            <view class="service-detail">
              <text class="service-name">{{ order.serviceName }}</text>
              <text class="service-time">服务时间：{{ order.serviceDate }} {{ order.timeSlot }}</text>
              <text class="service-duration">服务时长：{{ order.duration }}小时</text>
            </view>
          </view>
          
          <view class="order-price">
            <text class="price-label">实付金额</text>
            <text class="price-value">¥{{ order.payAmount }}</text>
          </view>
        </view>

        <!-- 订单操作按钮 -->
        <view class="order-actions">
          <!-- 待支付状态 -->
          <template v-if="order.status === 0">
            <button class="btn btn-cancel" @click.stop="cancelOrder(order.id)">取消订单</button>
            <button class="btn btn-primary" @click.stop="payOrder(order.id)">立即支付</button>
          </template>

          <!-- 待服务状态 -->
          <template v-else-if="order.status === 1">
            <button class="btn btn-default" @click.stop="contactTeacher(order)">联系陪伴员</button>
            <button class="btn btn-cancel" @click.stop="applyRefund(order.id)">申请退款</button>
          </template>

          <!-- 服务中状态 -->
          <template v-else-if="order.status === 2">
            <button class="btn btn-default" @click.stop="viewProgress(order.id)">查看进度</button>
          </template>

          <!-- 已完成状态 -->
          <template v-else-if="order.status === 3">
            <button class="btn btn-default" @click.stop="viewFeedback(order.id)">查看反馈</button>
            <button class="btn btn-primary" v-if="!order.isEvaluated" @click.stop="evaluate(order.id)">评价</button>
          </template>

          <!-- 已取消状态 -->
          <template v-else-if="order.status === -1">
            <button class="btn btn-default" @click.stop="deleteOrder(order.id)">删除订单</button>
            <button class="btn btn-primary" @click.stop="rebookService(order)">再次预约</button>
          </template>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="orderList.length === 0" class="empty-state">
        <text class="empty-icon">📋</text>
        <text class="empty-text">暂无订单</text>
        <button class="btn-go-booking" @click="goBooking">立即预约</button>
      </view>

      <!-- 加载更多 -->
      <view v-if="hasMore && orderList.length > 0" class="load-more" @click="loadMore">
        <text>{{ loading ? '加载中...' : '加载更多' }}</text>
      </view>

      <!-- 没有更多 -->
      <view v-if="!hasMore && orderList.length > 0" class="no-more">
        <text>没有更多了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import api from '@/api/index.js'

export default {
  data() {
    return {
      currentTab: 'all',
      tabs: [
        { label: '全部', value: 'all', count: 0 },
        { label: '待支付', value: 0, count: 2 },
        { label: '待服务', value: 1, count: 3 },
        { label: '已完成', value: 3, count: 0 },
        { label: '已取消', value: -1, count: 0 }
      ],
      orderList: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      loading: false
    }
  },

  onLoad(options) {
    // 从URL参数获取状态
    if (options.status !== undefined) {
      this.currentTab = parseInt(options.status)
    }
    this.loadOrderList()
  },
  
  // 注入API
  beforeCreate() {
    this.$api = api
  },

  methods: {
    // 切换标签
    changeTab(value) {
      this.currentTab = value
      this.page = 1
      this.orderList = []
      this.hasMore = true
      this.loadOrderList()
    },

    // 加载订单列表
    async loadOrderList() {
      if (this.loading) return
      
      this.loading = true
      uni.showLoading({ title: '加载中...' })

      try {
        // 调用真实API获取订单列表
        const params = {
          page: this.page,
          pageSize: this.pageSize
        }
        
        // 如果不是全部，添加状态筛选
        if (this.currentTab !== 'all') {
          params.status = this.currentTab
        }

        const response = await this.$api.orderApi.getOrderList(params)
        
        // 处理返回数据
        const orders = response.list || response.records || response || []
        this.orderList = this.page === 1 ? orders : [...this.orderList, ...orders]
        
        // 判断是否还有更多数据
        if (response.total) {
          this.hasMore = this.orderList.length < response.total
        } else {
          this.hasMore = orders.length >= this.pageSize
        }

        // 更新标签页的数量统计
        if (response.statusCount) {
          this.updateTabCounts(response.statusCount)
        }

      } catch (error) {
        console.error('加载订单失败:', error)
        uni.showToast({
          title: error.message || '加载失败',
          icon: 'none'
        })
        
        // 如果是第一页加载失败，显示空列表
        if (this.page === 1) {
          this.orderList = []
        }
      } finally {
        this.loading = false
        uni.hideLoading()
      }
    },
    
    // 更新标签页数量
    updateTabCounts(statusCount) {
      this.tabs.forEach(tab => {
        if (tab.value === 'all') {
          tab.count = statusCount.total || 0
        } else {
          tab.count = statusCount[tab.value] || 0
        }
      })
    },

    // 获取模拟数据
    getMockOrders() {
      return [
        {
          id: 1,
          orderNo: 'PD202512300001',
          serviceName: '一对一陪伴服务',
          serviceDate: '2025-01-05',
          timeSlot: '14:00-16:00',
          duration: 2,
          payAmount: 200,
          status: 0, // 待支付
          isEvaluated: false
        },
        {
          id: 2,
          orderNo: 'PD202512300002',
          serviceName: '数学专项辅导',
          serviceDate: '2025-01-06',
          timeSlot: '15:00-17:00',
          duration: 2,
          payAmount: 300,
          status: 0, // 待支付
          isEvaluated: false
        },
        {
          id: 3,
          orderNo: 'PD202512290001',
          serviceName: '英语口语陪练',
          serviceDate: '2025-01-03',
          timeSlot: '10:00-12:00',
          duration: 2,
          payAmount: 250,
          status: 1, // 待服务
          isEvaluated: false
        },
        {
          id: 4,
          orderNo: 'PD202512290002',
          serviceName: '阅读陪伴',
          serviceDate: '2025-01-04',
          timeSlot: '16:00-18:00',
          duration: 2,
          payAmount: 180,
          status: 1, // 待服务
          isEvaluated: false
        },
        {
          id: 5,
          orderNo: 'PD202512290003',
          serviceName: '作业辅导',
          serviceDate: '2025-01-04',
          timeSlot: '19:00-21:00',
          duration: 2,
          payAmount: 200,
          status: 1, // 待服务
          isEvaluated: false
        }
      ]
    },

    // 加载更多
    loadMore() {
      if (!this.hasMore || this.loading) return
      this.page++
      this.loadOrderList()
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '待服务',
        2: '服务中',
        3: '已完成',
        '-1': '已取消'
      }
      return statusMap[status] || '未知'
    },

    // 跳转订单详情
    goOrderDetail(orderId) {
      uni.navigateTo({
        url: `/order-package/pages/order/detail?id=${orderId}`
      })
    },

    // 取消订单
    async cancelOrder(orderId) {
      uni.showModal({
        title: '提示',
        content: '确定要取消该订单吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await this.$api.orderApi.cancelOrder(orderId, { reason: '用户主动取消' })
              uni.showToast({
                title: '订单已取消',
                icon: 'success'
              })
              this.page = 1
              this.loadOrderList()
            } catch (error) {
              uni.showToast({
                title: error.message || '取消失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },

    // 支付订单
    payOrder(orderId) {
      uni.navigateTo({
        url: `/pages/payment/index?orderId=${orderId}`
      })
    },

    // 联系陪伴员
    contactTeacher(order) {
      uni.showModal({
        title: '联系陪伴员',
        content: '是否拨打陪伴员电话？',
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: '13800138000'
            })
          }
        }
      })
    },

    // 申请退款
    applyRefund(orderId) {
      uni.navigateTo({
        url: `/pages/order/refund?orderId=${orderId}`
      })
    },

    // 查看进度
    viewProgress(orderId) {
      uni.navigateTo({
        url: `/pages/order/progress?orderId=${orderId}`
      })
    },

    // 查看反馈
    viewFeedback(orderId) {
      uni.navigateTo({
        url: `/user-package/pages/review/list`
      })
    },

    // 评价
    evaluate(orderId) {
      uni.navigateTo({
        url: `/user-package/pages/review/submit?orderId=${orderId}`
      })
    },

    // 删除订单
    deleteOrder(orderId) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该订单吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '订单已删除',
              icon: 'success'
            })
            // TODO: 调用删除订单API
            this.loadOrderList()
          }
        }
      })
    },

    // 再次预约
    rebookService(order) {
      uni.navigateTo({
        url: `/pages/service/detail?id=${order.serviceId}`
      })
    },

    // 去预约
    goBooking() {
      uni.switchTab({
        url: '/pages/booking/quick-booking'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';

.order-list-page {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.header {
  background: $primary-color;
  padding: 60rpx 30rpx 30rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
  }
}

.tabs {
  background: #fff;
  display: flex;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  
  .tab-item {
    position: relative;
    flex: 1;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .tab-text {
      font-size: 28rpx;
      color: #666;
    }
    
    .tab-badge {
      position: absolute;
      top: 16rpx;
      right: 20rpx;
      min-width: 32rpx;
      height: 32rpx;
      background: #ff4d4f;
      color: #fff;
      font-size: 20rpx;
      border-radius: 16rpx;
      padding: 0 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    &.active {
      .tab-text {
        color: $primary-color;
        font-weight: bold;
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background: $primary-color;
        border-radius: 2rpx;
      }
    }
  }
}

.order-list {
  flex: 1;
  padding: 20rpx 30rpx;
}

.order-item {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    .order-no {
      font-size: 24rpx;
      color: #999;
    }
    
    .order-status {
      font-size: 26rpx;
      font-weight: bold;
      
      &.status-0 {
        color: #ff9800;
      }
      
      &.status-1 {
        color: $primary-color;
      }
      
      &.status-2 {
        color: #2196f3;
      }
      
      &.status-3 {
        color: #999;
      }
      
      &.status--1 {
        color: #999;
      }
    }
  }
  
  .order-content {
    padding: 30rpx;
    
    .service-info {
      display: flex;
      margin-bottom: 20rpx;
      
      .service-icon {
        font-size: 80rpx;
        margin-right: 20rpx;
      }
      
      .service-detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        .service-name {
          font-size: 30rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 12rpx;
        }
        
        .service-time,
        .service-duration {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 8rpx;
        }
      }
    }
    
    .order-price {
      display: flex;
      justify-content: flex-end;
      align-items: baseline;
      
      .price-label {
        font-size: 24rpx;
        color: #999;
        margin-right: 8rpx;
      }
      
      .price-value {
        font-size: 32rpx;
        font-weight: bold;
        color: #ff4d4f;
      }
    }
  }
  
  .order-actions {
    display: flex;
    justify-content: flex-end;
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #f5f5f5;
    gap: 20rpx;
    
    .btn {
      padding: 12rpx 32rpx;
      font-size: 26rpx;
      border-radius: 40rpx;
      border: none;
      
      &.btn-default {
        background: #f5f5f5;
        color: #666;
      }
      
      &.btn-cancel {
        background: #fff;
        color: #666;
        border: 1rpx solid #ddd;
      }
      
      &.btn-primary {
        background: $primary-color;
        color: #fff;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  
  .empty-icon {
    font-size: 120rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 40rpx;
  }
  
  .btn-go-booking {
    padding: 20rpx 60rpx;
    background: $primary-color;
    color: #fff;
    font-size: 28rpx;
    border-radius: 40rpx;
    border: none;
  }
}

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