<template>
  <view class="order-list-page">
    <!-- 自定义导航栏 -->
    <view class="custom-nav safe-area-top">
      <view class="nav-content">
        <view class="nav-btn" @click="goBack">
          <uni-icons type="left" size="22" color="#1E293B"></uni-icons>
        </view>
        <text class="nav-title">我的订单</text>
        <view class="nav-btn" @click="refreshData">
          <uni-icons type="refresh" size="20" color="#64748B"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 筛选标签 -->
    <view class="filter-bar">
      <view 
        v-for="tab in tabs" 
        :key="tab.value"
        class="filter-item"
        :class="{ active: activeTab === tab.value }"
        @click="switchTab(tab.value)"
      >
        <text>{{tab.label}}</text>
      </view>
    </view>

    <scroll-view 
      scroll-y 
      class="page-content" 
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 订单列表 -->
      <view class="order-list" v-if="filteredOrders.length > 0">
        <view 
          v-for="(order, index) in filteredOrders" 
          :key="order.id"
          class="order-card"
          @click="viewOrderDetail(order)"
        >
          <view class="order-header">
            <view class="order-info">
              <text class="order-no">订单号：{{order.orderNo}}</text>
              <text class="order-time">{{formatDateTime(order.createTime)}}</text>
            </view>
            <view class="order-status" :class="order.status">
              {{getStatusText(order.status)}}
            </view>
          </view>

          <view class="order-body">
            <view class="plan-info">
              <text class="plan-name">{{order.planName || order.subscriptionPlan?.name || '-'}}</text>
              <text class="plan-duration">{{order.months}} 个月</text>
            </view>
            <view class="price-info">
              <view v-if="order.amount !== order.actualAmount" class="original-price">
                ¥{{order.amount}}
              </view>
              <view class="actual-price">¥{{order.actualAmount}}</view>
            </view>
          </view>

          <view class="order-footer" v-if="order.status === 'pending'">
            <button class="action-btn cancel" @click.stop="cancelOrder(order)">取消订单</button>
            <button class="action-btn pay" @click.stop="showPaymentInfo(order)">付款说明</button>
          </view>
        </view>

        <!-- 加载更多 -->
        <view class="load-more" v-if="hasMore">
          <text v-if="loading">加载中...</text>
          <text v-else @click="loadMore">加载更多</text>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-else>
        <uni-icons type="wallet-filled" size="80" color="#E4E7ED"></uni-icons>
        <text class="empty-title">暂无订单</text>
        <text class="empty-desc">您还没有创建任何订单</text>
        <button class="empty-action" @click="goToPlanSelect">去购买套餐</button>
      </view>

      <view class="safe-area-bottom" style="height: 40rpx;"></view>
    </scroll-view>
  </view>
</template>

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

  export default {
    data() {
      return {
        tabs: [
          { label: '全部', value: 'all' },
          { label: '待支付', value: 'pending' },
          { label: '已支付', value: 'paid' },
          { label: '已取消', value: 'cancelled' }
        ],
        activeTab: 'all',
        orders: [],
        page: 1,
        pageSize: 10,
        hasMore: true,
        loading: false,
        refreshing: false
      }
    },
    computed: {
      filteredOrders() {
        if (this.activeTab === 'all') {
          return this.orders
        }
        return this.orders.filter(order => order.status === this.activeTab)
      }
    },
    onLoad() {
      this.loadOrders()
    },
    onShow() {
      this.refreshData()
    },
    methods: {
      async loadOrders() {
        if (this.loading || !this.hasMore) return
        this.loading = true

        try {
          const res = await billingApi.getOrders({
            page: this.page,
            pageSize: this.pageSize
          })

          if (res.code === 200) {
            const newOrders = res.data.list || []
            if (this.page === 1) {
              this.orders = newOrders
            } else {
              this.orders = [...this.orders, ...newOrders]
            }
            this.hasMore = newOrders.length >= this.pageSize
          }
        } catch (error) {
          console.error('加载订单失败:', error)
          uni.showToast({ title: '加载失败', icon: 'none' })
        } finally {
          this.loading = false
          this.refreshing = false
        }
      },

      switchTab(value) {
        this.activeTab = value
      },

      onRefresh() {
        this.refreshing = true
        this.page = 1
        this.hasMore = true
        this.loadOrders()
      },

      refreshData() {
        this.page = 1
        this.hasMore = true
        this.loadOrders()
      },

      loadMore() {
        if (this.hasMore && !this.loading) {
          this.page++
          this.loadOrders()
        }
      },

      getStatusText(status) {
        const map = {
          pending: '待支付',
          paid: '已支付',
          cancelled: '已取消'
        }
        return map[status] || status
      },

      formatDateTime(dateTime) {
        if (!dateTime) return '-'
        const date = new Date(dateTime)
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
      },

      viewOrderDetail(order) {
        uni.navigateTo({
          url: `/pages/billing/order-detail?id=${order.id}`
        })
      },

      async cancelOrder(order) {
        uni.showModal({
          title: '提示',
          content: '确定要取消该订单吗？',
          success: async (res) => {
            if (res.confirm) {
              try {
                const result = await billingApi.cancelOrder(order.id)
                if (result.code === 200) {
                  uni.showToast({ title: '已取消', icon: 'success' })
                  this.refreshData()
                } else {
                  uni.showToast({ title: result.message || '取消失败', icon: 'none' })
                }
              } catch (error) {
                console.error('取消订单失败:', error)
                uni.showToast({ title: '取消失败', icon: 'none' })
              }
            }
          }
        })
      },

      showPaymentInfo(order) {
        uni.showModal({
          title: '付款说明',
          content: `订单 #${order.orderNo}\n应付金额：¥${order.actualAmount}\n请按平台收款信息完成转账，管理员确认后套餐自动生效。`,
          showCancel: false,
          confirmText: '我知道了'
        })
      },

      goBack() {
        uni.navigateBack()
      },

      goToPlanSelect() {
        uni.navigateTo({
          url: '/pages/billing/plan-select'
        })
      }
    }
  }
</script>

<style scoped>
  .order-list-page {
    min-height: 100vh;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
  }

  /* 导航栏 */
  .custom-nav {
    background: #FFFFFF;
    border-bottom: 2rpx solid #F1F5F9;
  }

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx;
  }

  .nav-btn {
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #1E293B;
  }

  /* 筛选栏 */
  .filter-bar {
    display: flex;
    background: #FFFFFF;
    padding: 20rpx 32rpx;
    border-bottom: 2rpx solid #F1F5F9;
    gap: 16rpx;
  }

  .filter-item {
    padding: 16rpx 32rpx;
    background: #F8FAFC;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #64748B;
  }

  .filter-item.active {
    background: #667eea;
    color: #FFFFFF;
    font-weight: 500;
  }

  /* 页面内容 */
  .page-content {
    flex: 1;
    padding: 24rpx 32rpx;
  }

  /* 订单列表 */
  .order-list {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
  }

  .order-card {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 28rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  }

  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #F1F5F9;
  }

  .order-info {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
  }

  .order-no {
    font-size: 28rpx;
    font-weight: 600;
    color: #1E293B;
  }

  .order-time {
    font-size: 24rpx;
    color: #94A3B8;
  }

  .order-status {
    padding: 8rpx 20rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    font-weight: 500;
  }

  .order-status.pending {
    background: #FEF3C7;
    color: #D97706;
  }

  .order-status.paid {
    background: #D1FAE5;
    color: #059669;
  }

  .order-status.cancelled {
    background: #F3F4F6;
    color: #6B7280;
  }

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

  .plan-info {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
  }

  .plan-name {
    font-size: 30rpx;
    font-weight: 600;
    color: #1E293B;
  }

  .plan-duration {
    font-size: 26rpx;
    color: #64748B;
  }

  .price-info {
    text-align: right;
  }

  .original-price {
    font-size: 24rpx;
    color: #94A3B8;
    text-decoration: line-through;
    margin-bottom: 4rpx;
  }

  .actual-price {
    font-size: 36rpx;
    font-weight: 700;
    color: #F56C6C;
  }

  .order-footer {
    display: flex;
    justify-content: flex-end;
    gap: 16rpx;
    padding-top: 20rpx;
    border-top: 2rpx solid #F1F5F9;
  }

  .action-btn {
    padding: 16rpx 32rpx;
    border-radius: 12rpx;
    font-size: 26rpx;
    font-weight: 500;
    border: none;
  }

  .action-btn.cancel {
    background: #F3F4F6;
    color: #64748B;
  }

  .action-btn.pay {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #FFFFFF;
  }

  /* 加载更多 */
  .load-more {
    text-align: center;
    padding: 32rpx;
    color: #64748B;
    font-size: 26rpx;
  }

  /* 空状态 */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120rpx 32rpx;
  }

  .empty-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1E293B;
    margin-top: 32rpx;
    margin-bottom: 16rpx;
  }

  .empty-desc {
    font-size: 26rpx;
    color: #64748B;
    margin-bottom: 48rpx;
  }

  .empty-action {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #FFFFFF;
    font-size: 30rpx;
    font-weight: 600;
    padding: 28rpx 64rpx;
    border-radius: 16rpx;
    border: none;
  }
</style>
