<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-07-04 14:34:39
 * @FilePath: /jgdl/src/pages/myOrders/index.vue
 * @Description: 订单管理页面
-->
<template>
  <view class="order-management-page">
    <nut-sticky>
      <!-- 买车/卖车切换 -->
      <view id="mode-toggle" class="view-mode-toggle">
        <view class="toggle-container">
          <view class="toggle-option" :class="{ active: viewMode === 'bought' }" @click="setViewMode('bought')">
            我买的车
          </view>
          <view class="toggle-option" :class="{ active: viewMode === 'sold' }" @click="setViewMode('sold')">
            我卖的车
          </view>
        </view>
      </view>

      <!-- 状态筛选标签 -->
      <view id="status-tabs" class="status-tabs">
        <view class="tab-item" :class="{ active: activeTab === 'all' }" @click="setActiveTab('all')">
          全部
        </view>
        <view v-if="viewMode === 'bought'" class="tab-item" :class="{ active: activeTab === 'pending' }"
          @click="setActiveTab('pending')">
          待支付
        </view>
        <view class="tab-item" :class="{ active: activeTab === 'completed' }" @click="setActiveTab('completed')">
          已完成
        </view>
        <view class="tab-item" :class="{ active: activeTab === 'cancelled' }" @click="setActiveTab('cancelled')">
          已取消
        </view>
      </view>
    </nut-sticky>

    <!-- 订单列表 -->
    <view class="order-list">
      <!-- 滚动列表 -->
      <scroll-view ref="scrollViewRef" class="order-scroll-view" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
        @scroll="scroll" :lower-threshold="50" :enable-flex="false" :scroll-top="scrollTop">
        <!-- 空状态 -->
        <view v-if="filteredOrders.length === 0" class="empty-state">
          <text class="empty-text">暂无订单</text>
        </view>

        <!-- 订单卡片 -->
        <view v-else>
          <view v-for="order in filteredOrders" :key="order.id" class="order-card">
            <!-- 订单头部信息 -->
            <view class="order-header">
              <text class="order-date">{{ order.date }}</text>
              <text class="order-status" :class="getStatusClass(order.status)">
                {{ getStatusText(order.status) }}
              </text>
            </view>

            <!-- 车辆信息 -->
            <nut-row :gutter="12" class="vehicle-info">
              <nut-col :span="6">
                <image :src="order.vehicle.imageUrl" :alt="order.vehicle.name" class="vehicle-image"
                  mode="aspectFill" />
              </nut-col>
              <nut-col :span="18">
                <view class="vehicle-details">
                  <text class="vehicle-name">{{ order.vehicle.name }}</text>
                  <text class="vehicle-specs">
                    {{ order.vehicle.year }} | {{ order.vehicle.mileage }}
                  </text>
                  <text class="vehicle-battery">{{ order.vehicle.batteryCapacity }}</text>
                  <text class="vehicle-price">¥{{ order.vehicle.price }}</text>
                </view>
              </nut-col>
            </nut-row>

            <!-- 操作按钮 -->
            <view class="order-actions">
              <!-- 买车模式：待支付状态 -->
              <template v-if="viewMode === 'bought' && order.status === 'pending'">
                <nut-button type="primary" size="small" @click="handlePayment(order)" color="orange">
                  去支付
                </nut-button>
              </template>

              <!-- 已完成状态 -->
              <template v-if="order.status === 'completed'">
                <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
                  查看详情
                </nut-button>
                <nut-button type="primary" size="small" @click="rateOrder(order.id)" class="ml-2" color="orange" plain>
                  {{ order.review ? '查看评价' : '评价' }}
                </nut-button>
              </template>

              <!-- 已取消状态 -->
              <template v-if="order.status === 'cancelled'">
                <nut-button type="default" size="small" @click="deleteOrder(order.id)"
                  :loading="deletingOrderId === order.id" :disabled="deletingOrderId === order.id">
                  {{ deletingOrderId === order.id ? '删除中...' : '删除订单' }}
                </nut-button>
              </template>
            </view>
          </view>
        </view>

        <!-- 加载更多指示器 -->
        <view v-if="loading" class="loading-container">
          <text class="loading-text">加载中...</text>
        </view>

        <!-- 没有更多数据 -->
        <view v-if="!hasMore && filteredOrders.length > 0" class="no-more">
          <text class="no-more-text">没有更多订单了</text>
        </view>
      </scroll-view>
    </view>

    <!-- 支付组件 -->
    <payCard :visible="show_pay" :data="payData" @close="onPayClose" />

    <!-- 评价弹窗 -->
    <nut-popup v-model:visible="showRatePopup" position="right" :style="{ width: '100%', height: '100%' }" closeable
      close-icon-position="top-right" @close="closeRatePopup">
      <view class="rate-popup">
        <view class="rate-header">
          <text class="rate-title">{{ isReadOnlyMode ? '查看评价' : '商品评价' }}</text>
        </view>

        <view class="rate-content">
          <!-- 商品信息展示 -->
          <view class="product-info">
            <image :src="currentRateOrder?.vehicle?.imageUrl" class="product-image" mode="aspectFill" />
            <view class="product-details">
              <text class="product-name">{{ currentRateOrder?.vehicle?.name }}</text>
              <text class="product-specs">{{ currentRateOrder?.vehicle?.year }} · {{ currentRateOrder?.vehicle?.mileage
                }}</text>
              <text class="product-price">¥{{ currentRateOrder?.vehicle?.price }}</text>
            </view>
          </view>

          <!-- 评分组件 -->
          <view class="rate-score-section">
            <text class="score-label">{{ isReadOnlyMode ? '评分' : '请给商品评分' }}</text>
            <nut-rate v-model="rateScore" :readonly="isReadOnlyMode" :size="isReadOnlyMode ? '20' : '24'"
              active-color="#ff6b35" void-color="#e5e5e5" class="rate-stars" />
            <!-- <text v-if="isReadOnlyMode" class="score-text">{{ rateScore }}/5分</text> -->
          </view>

          <!-- 评价输入框 -->
          <view class="rate-input-section">
            <text class="input-label">{{ isReadOnlyMode ? '评价内容' : '请输入评价内容' }}</text>
            <view class="border border-gray-100">
              <nut-textarea v-model="rateContent" :placeholder="isReadOnlyMode ? '' : '请输入您的评价内容...'" :max-length="200"
                :rows="4" :show-word-limit="!isReadOnlyMode" :readonly="isReadOnlyMode"
                :class="{ 'readonly': isReadOnlyMode }" />
            </view>
            <text v-if="isReadOnlyMode && currentRateOrder?.review?.date" class="review-date">
              评价时间：{{ currentRateOrder?.review?.date }}
            </text>
          </view>
        </view>

        <!-- 提交按钮 -->
        <view class="rate-footer" v-if="!isReadOnlyMode">
          <nut-button type="primary" size="large" @click="submitRate" :loading="submittingRate" block>
            提交评价
          </nut-button>
        </view>
      </view>
    </nut-popup>

    <!-- 订单详情弹窗 -->
    <nut-popup v-model:visible="showOrderDetailPopup" position="right" :style="{ width: '100%', height: '100%' }"
      closeable close-icon-position="top-right" @close="closeOrderDetailPopup">
      <view class="order-detail-popup">
        <view class="detail-header">
          <text class="detail-title">订单详情</text>
        </view>

        <view class="detail-content">
          <!-- 订单基本信息 -->
          <view class="detail-section">
            <text class="section-title">订单信息</text>
            <view class="info-row">
              <text class="info-label">订单编号</text>
              <text class="info-value">{{ currentOrderDetail?.id }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">下单时间</text>
              <text class="info-value">{{ currentOrderDetail?.date }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">订单状态</text>
              <text class="info-value" :class="getStatusClass(currentOrderDetail?.status)">
                {{ getStatusText(currentOrderDetail?.status) }}
              </text>
            </view>
            <view class="info-row">
              <text class="info-label">订单金额</text>
              <text class="info-value price">¥{{ currentOrderDetail?.price }}</text>
            </view>
          </view>

          <!-- 商品信息 -->
          <view class="detail-section">
            <text class="section-title">商品信息</text>
            <view class="product-detail-info">
              <image :src="currentOrderDetail?.vehicle?.imageUrl" class="product-detail-image" mode="aspectFill" />
              <view class="product-detail-content">
                <text class="product-detail-name">{{ currentOrderDetail?.vehicle?.name }}</text>
                <text class="product-detail-specs">{{ currentOrderDetail?.vehicle?.year }} · {{
                  currentOrderDetail?.vehicle?.mileage }}</text>
                <text class="product-detail-battery">{{ currentOrderDetail?.vehicle?.batteryCapacity }}</text>
                <text class="product-detail-price">¥{{ currentOrderDetail?.vehicle?.price }}</text>
              </view>
            </view>
          </view>

          <!-- 交易信息 -->
          <view class="detail-section">
            <text class="section-title">交易信息</text>
            <view class="info-row">
              <text class="info-label">{{ viewMode === 'bought' ? '卖家' : '买家' }}</text>
              <text class="info-value">{{ viewMode === 'bought' ? '张先生' : '李女士' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">联系电话</text>
              <text class="info-value">{{ viewMode === 'bought' ? '138****5678' : '139****1234' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">交易地点</text>
              <text class="info-value">北京市朝阳区望京SOHO</text>
            </view>
          </view>

          <!-- 评价信息（如果有） -->
          <view class="detail-section" v-if="currentOrderDetail?.review">
            <text class="section-title">评价信息</text>
            <view class="review-info">
              <view class="review-rating">
                <text class="rating-label">评分：</text>
                <nut-rate :model-value="currentOrderDetail?.review?.rating" readonly size="20" active-color="#ff6b35"
                  void-color="#e5e5e5" />
                <!-- <text class="rating-text">{{ currentOrderDetail?.review?.rating }}/5分</text> -->
              </view>
              <view class="review-content">
                <text class="content-label">评价内容：</text>
                <text class="content-text">{{ currentOrderDetail?.review?.content }}</text>
              </view>
              <view class="review-time">
                <text class="time-text">评价时间：{{ currentOrderDetail?.review?.date }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 关闭按钮 -->
        <view class="detail-footer">
          <nut-button type="primary" size="large" @click="closeOrderDetailPopup" block>
            关闭
          </nut-button>
        </view>
      </view>
    </nut-popup>

    <!-- Confirmation Modal -->
    <nut-dialog
        v-model:visible="showConfirmModal"
        title="温馨提示"
        content="确定要删除订单吗？"
        cancel-text="取消"
        ok-text="确认"
        @cancel="showConfirmModal = false"
        @ok="performDeleteOrder(pendingDeleteOrderId)"
    />

    <!-- 成功提示 -->
    <nut-toast
        v-model:visible="toastVisible"
        :msg="toastMessage"
        :type="toastType"
    />
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'
// import { deleteOrderAPI, submitReviewAPI } from '@/api/orders' // 预留真实API调用
import './index.less'
import { $ } from '@tarojs/extend'
import payCard from '@/components/payCard.vue'
// NutUI组件已全局注册，无需单独导入Rate

const scrollStyle = ref({
  height: ''
})

// 滚动相关
const scrollViewRef = ref(null)
const scrollTop = ref(0)

// 页面状态
const activeTab = ref('all')
const viewMode = ref('bought')
const loading = ref(false)
const hasMore = ref(true)

const show_pay = ref(false)
const payData = ref({
  id: '',
  price: 0,
  remain_time: 0
})

// 评价相关状态
const showRatePopup = ref(false)
const currentRateOrder = ref(null)
const rateContent = ref('')
const rateScore = ref(5)
const submittingRate = ref(false)
const isReadOnlyMode = ref(false)

// 订单详情相关状态
const showOrderDetailPopup = ref(false)
const currentOrderDetail = ref(null)

// 模拟订单数据 - 我买的车
const boughtOrders = ref([
  {
    id: 'B001',
    price: 3999,
    date: '2023-11-15 14:30',
    status: 'pending',
    vehicle: {
      name: '小牛 U1 Pro',
      year: '2022年',
      mileage: '续航120km',
      batteryCapacity: '电池容量：1.5kWh',
      price: 3999,
      imageUrl: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  },
  {
    id: 'B002',
    price: 5299,
    date: '2023-10-28 09:15',
    status: 'completed',
    vehicle: {
      name: '雅迪 DE2',
      year: '2023年',
      mileage: '续航80km',
      batteryCapacity: '电池容量：1.2kWh',
      price: 5299,
      imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    },
    review: {
      rating: 4,
      content: '车子质量不错，续航也够用，就是充电时间有点长。',
      date: '2023-10-30 16:20'
    }
  },
  {
    id: 'B003',
    price: 2899,
    date: '2023-09-20 11:30',
    status: 'cancelled',
    vehicle: {
      name: '台铃 小狮子',
      year: '2021年',
      mileage: '续航65km',
      batteryCapacity: '电池容量：1.0kWh',
      price: 2899,
      imageUrl: 'https://images.unsplash.com/photo-1544191696-15693072b5a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  },
  {
    id: 'B004',
    price: 4599,
    date: '2023-08-15 15:45',
    status: 'completed',
    vehicle: {
      name: '九号 E80C',
      year: '2023年',
      mileage: '续航80km',
      batteryCapacity: '电池容量：1.44kWh',
      price: 4599,
      imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    },
    review: {
      rating: 5,
      content: '非常满意！车况很好，卖家服务态度也很棒，推荐！',
      date: '2023-08-18 10:30'
    }
  },
  {
    id: 'B005',
    price: 1899,
    date: '2023-07-22 13:20',
    status: 'pending',
    vehicle: {
      name: '绿源 MH5',
      year: '2020年',
      mileage: '续航50km',
      batteryCapacity: '电池容量：0.9kWh',
      price: 1899,
      imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  }
])

// 模拟订单数据 - 我卖的车
const soldOrders = ref([
  {
    id: 'S001',
    price: 3200,
    date: '2023-11-10 16:45',
    status: 'completed',
    vehicle: {
      name: '爱玛 小蜜豆',
      year: '2021年',
      mileage: '续航60km',
      batteryCapacity: '电池容量：0.8kWh',
      price: 3200,
      imageUrl: 'https://images.unsplash.com/photo-1544191696-15693072b5a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    },
    review: {
      rating: 5,
      content: '买家很爽快，交易很顺利，车子也很满意！',
      date: '2023-11-12 14:20'
    }
  },
  {
    id: 'S002',
    price: 2800,
    date: '2023-10-05 10:30',
    status: 'pending',
    vehicle: {
      name: '小刀 长征版',
      year: '2022年',
      mileage: '续航70km',
      batteryCapacity: '电池容量：1.1kWh',
      price: 2800,
      imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  },
  {
    id: 'S003',
    price: 4200,
    date: '2023-09-18 14:15',
    status: 'cancelled',
    vehicle: {
      name: '立马 威风',
      year: '2023年',
      mileage: '续航90km',
      batteryCapacity: '电池容量：1.6kWh',
      price: 4200,
      imageUrl: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  },
  {
    id: 'S004',
    price: 1650,
    date: '2023-08-28 09:45',
    status: 'completed',
    vehicle: {
      name: '新日 XC1',
      year: '2020年',
      mileage: '续航45km',
      batteryCapacity: '电池容量：0.7kWh',
      price: 1650,
      imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  },
  {
    id: 'S005',
    price: 3800,
    date: '2023-07-12 16:20',
    status: 'completed',
    vehicle: {
      name: '哈啰 A80',
      year: '2022年',
      mileage: '续航85km',
      batteryCapacity: '电池容量：1.3kWh',
      price: 3800,
      imageUrl: 'https://images.unsplash.com/photo-1544191696-15693072b5a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    },
    review: {
      rating: 4,
      content: '车子成色不错，买家也很好沟通，交易愉快！',
      date: '2023-07-15 11:30'
    }
  }
])

/**
 * 根据当前视图模式和筛选条件获取过滤后的订单列表
 */
const filteredOrders = computed(() => {
  const orders = viewMode.value === 'bought' ? boughtOrders.value : soldOrders.value

  if (activeTab.value === 'all') {
    return orders
  }

  return orders.filter(order => {
    if (activeTab.value === 'pending') return order.status === 'pending'
    if (activeTab.value === 'completed') return order.status === 'completed'
    if (activeTab.value === 'cancelled') return order.status === 'cancelled'
    return true
  })
})

/**
 * 设置视图模式（买车/卖车）
 */
const setViewMode = (mode) => {
  viewMode.value = mode
  // 重置状态筛选标签到全部
  activeTab.value = 'all'
  // 重置列表状态和数据
  resetListState(true)
}

/**
 * 设置活跃的状态标签
 */
const setActiveTab = (tab) => {
  activeTab.value = tab
  // 重置列表加载状态
  resetListState(false)
}

/**
 * 重置列表状态
 * @param {boolean} resetData - 是否重置已加载的数据
 */
const resetListState = (resetData = false) => {
  loading.value = false
  hasMore.value = true

  // 重置滚动位置到顶部
  scrollTop.value = Math.random() // 使用随机数触发scroll-view重新渲染

  if (resetData) {
    // 重置已加载的数据索引
    loadedBoughtIndex.value = 0
    loadedSoldIndex.value = 0

    // 重置订单数据到初始状态
    boughtOrders.value = boughtOrders.value.slice(0, 5) // 保留前5条初始数据
    soldOrders.value = soldOrders.value.slice(0, 5) // 保留前5条初始数据
  }

  // 延迟重置scrollTop为0，确保滚动位置正确
  setTimeout(() => {
    scrollTop.value = 0
  }, 50)
}

/**
 * 滚动事件处理
 */
const scroll = (e) => {
  // 可以在这里处理滚动事件
}

// 模拟更多数据池 - 买车订单
const moreBoughtOrders = [
  {
    id: 'B006',
    price: 2299,
    date: '2023-06-18 14:30',
    status: 'completed',
    vehicle: {
      name: '小鸟 V1',
      year: '2019年',
      mileage: '续航55km',
      batteryCapacity: '电池容量：0.8kWh',
      price: 2299,
      imageUrl: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    },
    review: {
      rating: 3,
      content: '车子还行，就是电池续航有点短，价格还算合理。',
      date: '2023-06-20 09:15'
    }
  },
  {
    id: 'B007',
    price: 3599,
    date: '2023-05-25 16:45',
    status: 'cancelled',
    vehicle: {
      name: '速珂 TC Max',
      year: '2022年',
      mileage: '续航100km',
      batteryCapacity: '电池容量：1.8kWh',
      price: 3599,
      imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  },
  {
    id: 'B008',
    price: 4899,
    date: '2023-04-12 11:20',
    status: 'pending',
    vehicle: {
      name: '小牛 NGT',
      year: '2023年',
      mileage: '续航130km',
      batteryCapacity: '电池容量：2.0kWh',
      price: 4899,
      imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  }
]

// 模拟更多数据池 - 卖车订单
const moreSoldOrders = [
  {
    id: 'S006',
    price: 2100,
    date: '2023-06-08 13:15',
    status: 'completed',
    vehicle: {
      name: '绿佳 FDT',
      year: '2020年',
      mileage: '续航50km',
      batteryCapacity: '电池容量：0.9kWh',
      price: 2100,
      imageUrl: 'https://images.unsplash.com/photo-1544191696-15693072b5a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  },
  {
    id: 'S007',
    price: 3500,
    date: '2023-05-20 10:30',
    status: 'pending',
    vehicle: {
      name: '雅迪 G5 Pro',
      year: '2022年',
      mileage: '续航85km',
      batteryCapacity: '电池容量：1.4kWh',
      price: 3500,
      imageUrl: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  },
  {
    id: 'S008',
    price: 1800,
    date: '2023-04-15 15:45',
    status: 'cancelled',
    vehicle: {
      name: '爱玛 麦',
      year: '2019年',
      mileage: '续航40km',
      batteryCapacity: '电池容量：0.6kWh',
      price: 1800,
      imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  }
]

// 记录已加载的数据索引
const loadedBoughtIndex = ref(0)
const loadedSoldIndex = ref(0)

/**
 * 加载更多数据
 */
const loadMore = () => {
  if (loading.value || !hasMore.value) return

  loading.value = true

  // 模拟加载延迟
  setTimeout(() => {
    const currentOrders = viewMode.value === 'bought' ? boughtOrders : soldOrders
    const moreOrders = viewMode.value === 'bought' ? moreBoughtOrders : moreSoldOrders
    const loadedIndex = viewMode.value === 'bought' ? loadedBoughtIndex : loadedSoldIndex

    // 每次加载2条数据
    const batchSize = 2
    const startIndex = loadedIndex.value
    const endIndex = Math.min(startIndex + batchSize, moreOrders.length)

    if (startIndex < moreOrders.length) {
      // 添加新数据
      const newOrders = moreOrders.slice(startIndex, endIndex)
      currentOrders.value.push(...newOrders)

      // 更新已加载索引
      if (viewMode.value === 'bought') {
        loadedBoughtIndex.value = endIndex
      } else {
        loadedSoldIndex.value = endIndex
      }

      // 检查是否还有更多数据
      hasMore.value = endIndex < moreOrders.length
    } else {
      // 没有更多数据了
      hasMore.value = false
    }

    loading.value = false
  }, 1000)
}

/**
 * 获取订单状态文本
 */
const getStatusText = (status) => {
  switch (status) {
    case 'pending':
      return '待支付'
    case 'completed':
      return '已完成'
    case 'cancelled':
      return '已取消'
    default:
      return '未知状态'
  }
}

/**
 * 获取订单状态样式类
 */
const getStatusClass = (status) => {
  switch (status) {
    case 'pending':
      return 'status-pending'
    case 'completed':
      return 'status-completed'
    case 'cancelled':
      return 'status-cancelled'
    default:
      return ''
  }
}

// 页面导航相关方法可以在需要时添加

/**
 * 处理支付
 */
const handlePayment = ({ id, price }) => {
  onPay({
    id,
    remain_time: 1800, // 30分钟
    price
  })
}

/**
 * 发送订单支付信息到支付组件
 * @param {Object} payInfo - 支付信息
 * @param {string} payInfo.id - 订单ID
 * @param {number} payInfo.remain_time - 剩余时间
 * @param {number} payInfo.price - 价格
 */
const onPay = ({ id, remain_time, price }) => {
  show_pay.value = true
  payData.value.id = id
  payData.value.price = price
  payData.value.remain_time = remain_time
}

/**
 * 关闭支付弹框
 */
const onPayClose = () => {
  show_pay.value = false
}

/**
 * 查看订单详情
 */
const viewOrderDetail = (orderId) => {
  // 找到对应的订单
  const orders = viewMode.value === 'bought' ? boughtOrders.value : soldOrders.value
  const order = orders.find(o => o.id === orderId)

  if (order) {
    currentOrderDetail.value = order
    showOrderDetailPopup.value = true
  }
}

/**
 * 关闭订单详情弹窗
 */
const closeOrderDetailPopup = () => {
  showOrderDetailPopup.value = false
  currentOrderDetail.value = null
}

/**
 * 评价订单
 */
const rateOrder = (orderId) => {
  // 找到对应的订单
  const orders = viewMode.value === 'bought' ? boughtOrders.value : soldOrders.value
  const order = orders.find(o => o.id === orderId)

  if (order) {
    currentRateOrder.value = order

    // 检查是否已有评价
    if (order.review) {
      // 已评价，显示只读模式
      isReadOnlyMode.value = true
      rateContent.value = order.review.content
      rateScore.value = order.review.rating
    } else {
      // 未评价，显示编辑模式
      isReadOnlyMode.value = false
      rateContent.value = ''
      rateScore.value = 5
    }

    showRatePopup.value = true
  }
}

/**
 * 关闭评价弹窗
 */
const closeRatePopup = () => {
  showRatePopup.value = false
  currentRateOrder.value = null
  rateContent.value = ''
  rateScore.value = 5
  isReadOnlyMode.value = false
}

/**
 * 提交评价
 */
const submitRate = async () => {
  if (!rateContent.value.trim()) {
    Taro.showToast({
      title: '请输入评价内容',
      icon: 'error',
      duration: 2000
    })
    return
  }

  try {
    submittingRate.value = true

    // 真实的API调用（当前注释掉，使用模拟数据）
    // const response = await submitReviewAPI({
    //   orderId: currentRateOrder.value.id,
    //   rating: rateScore.value,
    //   comment: rateContent.value
    // })
    // if (response.success) {
    //   // API提交成功后的处理
    //   const currentOrders = viewMode.value === 'bought' ? boughtOrders : soldOrders
    //   const order = currentOrders.value.find(o => o.id === currentRateOrder.value.id)
    //   if (order) {
    //     order.review = {
    //       rating: rateScore.value,
    //       content: rateContent.value,
    //       date: new Date().toLocaleString('zh-CN')
    //     }
    //     order.status = 'completed'
    //   }
    //   Toast.success(response.message || '评价提交成功')
    //   closeRatePopup()
    // } else {
    //   throw new Error(response.message || '提交失败')
    // }

    // 模拟API调用延迟（开发阶段使用）
    await new Promise(resolve => setTimeout(resolve, 1500))

    // 更新本地数据
    const currentOrders = viewMode.value === 'bought' ? boughtOrders : soldOrders
    const order = currentOrders.value.find(o => o.id === currentRateOrder.value.id)
    if (order) {
      order.review = {
        rating: rateScore.value,
        content: rateContent.value,
        date: new Date().toLocaleString('zh-CN')
      }
      order.status = 'completed'
    }

    Taro.showToast({
      title: '评价提交成功',
      icon: 'success',
      duration: 2000
    })

    closeRatePopup()

  } catch (error) {
    // console.error('提交评价失败:', error)
    Taro.showToast({
      title: error.message || '提交失败，请重试',
      icon: 'error',
      duration: 2000
    })
  } finally {
    submittingRate.value = false
  }
}

// 删除订单相关状态
const deletingOrderId = ref('')

/**
 * 确认弹窗显示状态
 */
const showConfirmModal = ref(false)

/**
 * 待删除的订单ID
 */
const pendingDeleteOrderId = ref('')

/**
 * Toast提示
 */
const toastVisible = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

/**
 * 显示提示信息
 */
const showToast = (message, type = 'success') => {
    toastMessage.value = message
    toastType.value = type
    toastVisible.value = true
}

/**
 * 删除订单
 * @param {string} orderId - 订单ID
 */
const deleteOrder = async (orderId) => {
  try {
    // 保存待删除的订单ID
    pendingDeleteOrderId.value = orderId
    showConfirmModal.value = true
  } catch (error) {
     // 用户取消删除或其他错误
     // console.log('删除操作被取消或出错:', error)
  }
}

/**
 * 执行删除订单操作
 * @param {string} orderId - 订单ID
 */
const performDeleteOrder = async (orderId) => {
  // 关闭确认弹窗
  showConfirmModal.value = false

  // 设置删除状态，用于显示加载效果
  deletingOrderId.value = orderId

  try {
    // 真实的API调用（当前注释掉，使用模拟数据）
    // const response = await deleteOrderAPI({ orderId })
    // if (response.success) {
    //   // API删除成功后的处理
    //   const orders = viewMode.value === 'bought' ? boughtOrders : soldOrders
    //   const orderIndex = orders.value.findIndex(order => order.id === orderId)
    //   if (orderIndex !== -1) {
    //     orders.value.splice(orderIndex, 1)
    //   }
    //   Toast.success(response.message || '订单删除成功')
    // } else {
    //   throw new Error(response.message || '删除失败')
    // }

    // 模拟API调用延迟（开发阶段使用）
    await new Promise(resolve => setTimeout(resolve, 1000))

    // 从本地数据中移除订单
    const orders = viewMode.value === 'bought' ? boughtOrders : soldOrders
    const orderIndex = orders.value.findIndex(order => order.id === orderId)

    if (orderIndex !== -1) {
      orders.value.splice(orderIndex, 1)

      showToast('订单删除成功', 'success')
    } else {
      throw new Error('订单不存在')
    }

  } catch (error) {
    // console.error('删除订单失败:', error)

    showToast('删除订单失败', 'error')
  } finally {
    // 清除删除状态
    deletingOrderId.value = ''
    // 清除待删除订单ID
    pendingDeleteOrderId.value = ''
  }
}

// 页面加载时的初始化
onMounted(async () => {
  // TODO: 加载订单数据
  // 设置滚动列表可视高度
  const windowHeight = wx.getWindowInfo().windowHeight;
  setTimeout(async () => {
    const headerHeight = await $('#mode-toggle').height();
    const navHeight = await $('#status-tabs').height();
    scrollStyle.value = {
      height: windowHeight - headerHeight - navHeight + 'px'
    }
  }, 500);
})
</script>

<script>
export default {
  name: "OrderManagementPage",
};
</script>

<style lang="less">
/* 样式已移至 index.less 文件 */
</style>