<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-08-06 14:03:17
 * @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 === 'buy' }" @click="setViewMode('buy')">
            我买的车
          </view>
          <view class="toggle-option" :class="{ active: viewMode === 'sell' }" @click="setViewMode('sell')">
            我卖的车
          </view>
          <view class="toggle-option" :class="{ active: viewMode === 'verification' }"
            @click="setViewMode('verification')">
            我的认证
          </view>
        </view>
      </view>

      <!-- 状态筛选标签 -->
      <view id="status-tabs" class="status-tabs">
        <view class="tab-item" :class="{ active: activeTab === '' }" @click="setActiveTab('')">
          全部
        </view>
        <!-- 我买的车状态筛选 -->
        <template v-if="viewMode === 'buy'">
          <view class="tab-item" :class="{ active: activeTab === 3 }" @click="setActiveTab(3)">
            待支付
          </view>
          <view class="tab-item" :class="{ active: activeTab === 9 }" @click="setActiveTab(9)">
            待收货
          </view>
          <view class="tab-item" :class="{ active: activeTab === 'completed' }" @click="setActiveTab('completed')">
            已完成
          </view>
          <view class="tab-item" :class="{ active: activeTab === 7 }" @click="setActiveTab(7)">
            已取消
          </view>
        </template>
        <!-- 我卖的车状态筛选 -->
        <template v-if="viewMode === 'sell'">
          <view class="tab-item" :class="{ active: activeTab === 5 }" @click="setActiveTab(5)">
            待发货
          </view>
          <view class="tab-item" :class="{ active: activeTab === 9 }" @click="setActiveTab(9)">
            待收货
          </view>
          <view class="tab-item" :class="{ active: activeTab === 'profit_sharing' }" @click="setActiveTab('profit_sharing')">
            分账
          </view>
          <view class="tab-item" :class="{ active: activeTab === 7 }" @click="setActiveTab(7)">
            已取消
          </view>
        </template>
        <!-- 我的认证状态筛选 -->
        <template v-if="viewMode === 'verification'">
          <view class="tab-item" :class="{ active: activeTab === 3 }" @click="setActiveTab(3)">
            待支付
          </view>
          <view class="tab-item" :class="{ active: activeTab === 5 }" @click="setActiveTab(5)">
            已付款
          </view>
          <view class="tab-item" :class="{ active: activeTab === 9 }" @click="setActiveTab(9)">
            待收货
          </view>
          <view class="tab-item" :class="{ active: activeTab === 7 }" @click="setActiveTab(7)">
            已取消
          </view>
          <view class="tab-item" :class="{ active: activeTab === 15 }" @click="setActiveTab(15)">
            退款
          </view>
        </template>
      </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.created_time }}</text>
              <text class="order-status" :class="getStatusClass(order.status)">
                {{ getStatusText(order.status) }}
              </text>
            </view>

            <!-- 车辆信息 -->
            <nut-row :gutter="12" class="vehicle-info" @click="goToProductDetail(order)">
              <nut-col :span="6">
                <image :src="order.details.vehicle.front_photo || DEFAULT_COVER_IMG"
                  :alt="order.details.vehicle.brand + ' ' + order.details.vehicle.model" class="vehicle-image"
                  mode="aspectFill" />
              </nut-col>
              <nut-col :span="18">
                <view class="vehicle-details">
                  <text class="vehicle-name">{{ order.details.vehicle.brand }} {{ order.details.vehicle.model }}</text>
                  <text class="vehicle-specs">
                    <text v-if="order.details.vehicle.manufacture_year">{{ order.details.vehicle.manufacture_year }}年 |
                    </text>续航{{ order.details.vehicle.range_km }}km
                  </text>
                  <text v-if="order.details.vehicle.battery_capacity_ah" class="vehicle-battery">电池容量：{{
                    order.details.vehicle.battery_capacity_ah }}Ah</text>
                  <text v-if="order.details.vehicle.price" class="vehicle-price">¥{{ order.details.vehicle.price
                    }}</text>
                </view>
              </nut-col>
            </nut-row>

            <!-- 支付剩余时间 -->
            <view v-if="viewMode === 'buy' && order.status === 3" class="payment-countdown">
              <text class="countdown-text">剩余支付时间：{{ formatCountdown(order.remain_time) }}</text>
            </view>

            <!-- 剩余自动收货时间 - 文字描述 -->
            <view v-if="viewMode === 'buy' && order.status === 9" class="auto-receipt-countdown">
              <text class="countdown-text">
                {{ order.receiving_deadline_desc }}
              </text>
            </view>

            <!-- 认证模式: 支付剩余时间 -->
            <view v-if="viewMode === 'verification' && order.status === 3" class="payment-countdown">
              <text class="countdown-text">剩余支付时间：{{ formatCountdown(order.remain_time) }}</text>
            </view>

            <!-- 认证模式: 认证剩余时间 - 文字描述 -->
            <view v-if="viewMode === 'verification' && order.status === 9" class="auto-receipt-countdown">
              <text class="countdown-text">
                {{ order.receiving_deadline_desc }}
              </text>
            </view>

            <!-- 操作按钮 -->
            <view v-if="!order.is_sold" class="order-actions">
              <!-- 买车模式：待支付状态 -->
              <template v-if="viewMode === 'buy' && order.status === 3">
                <nut-button type="default" size="small" @click="handleCancelOrder(order.id)"
                  :loading="cancelingOrderId === order.id" :disabled="cancelingOrderId === order.id">
                  {{ cancelingOrderId === order.id ? '取消中...' : '取消订单' }}
                </nut-button>
                <nut-button type="primary" size="small" @click="handlePayment(order)" color="orange" class="ml-2">
                  去支付
                </nut-button>
              </template>

              <!-- 认证模式：待支付状态 -->
              <template v-if="viewMode === 'verification' && order.status === 3">
                <nut-button type="default" size="small" @click="handleCancelOrder(order.id)"
                  :loading="cancelingOrderId === order.id" :disabled="cancelingOrderId === order.id">
                  {{ cancelingOrderId === order.id ? '取消中...' : '取消订单' }}
                </nut-button>
                <nut-button type="primary" size="small" @click="handlePayment(order)" color="orange" class="ml-2">
                  去支付
                </nut-button>
              </template>

              <!-- 买车模式：待收货状态 -->
              <template v-if="viewMode === 'buy' && order.status === 9">
                <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
                  订单详情
                </nut-button>
                <nut-button type="primary" size="small" @click="handleConfirmReceive(order)" color="orange" class="ml-2"
                  :loading="receivingOrderId === order.id" :disabled="receivingOrderId === order.id">
                  {{ receivingOrderId === order.id ? '收货中...' : '确认收货' }}
                </nut-button>
              </template>

              <!-- 卖车模式：待发货状态 -->
              <template v-if="viewMode === 'sell' && order.status === 5">
                <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
                  订单详情
                </nut-button>
                <nut-button type="primary" size="small" @click="handleConfirmShip(order)" color="orange" class="ml-2"
                  :loading="shippingOrderId === order.id" :disabled="shippingOrderId === order.id">
                  {{ shippingOrderId === order.id ? '发货中...' : '确认发货' }}
                </nut-button>
              </template>

              <!-- 买车模式：待发货状态 -->
              <template v-if="viewMode === 'buy' && order.status === 5">
                <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
                  订单详情
                </nut-button>
              </template>

              <!-- 卖车模式：已发货状态 -->
              <template v-if="viewMode === 'sell' && order.status === 9">
                <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
                  订单详情
                </nut-button>
              </template>

              <!-- 已完成状态 -->
              <template v-if="order.status === 11">
                <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
                  订单详情
                </nut-button>
                <!-- 只有买车订单才显示评价按钮，卖车订单不显示 -->
                <nut-button v-if="viewMode === 'buy'" type="primary" size="small" @click="rateOrder(order.id)"
                  class="ml-2" color="orange" plain>
                  {{ order.details.review ? '查看评价' : '评价' }}
                </nut-button>
              </template>

              <!-- 购车模式：已取消状态 -->
              <template v-if="viewMode === 'buy' && order.status === 7">
                <nut-button type="default" size="small" @click="deleteOrder(order.id)"
                  :loading="deletingOrderId === order.id" :disabled="deletingOrderId === order.id">
                  {{ deletingOrderId === order.id ? '删除中...' : '删除订单' }}
                </nut-button>
              </template>

              <!-- 认证模式：已取消状态 -->
              <template v-if="viewMode === 'verification' && order.status === 7">
                <nut-button type="default" size="small" @click="deleteOrder(order.id)"
                  :loading="deletingOrderId === order.id" :disabled="deletingOrderId === order.id">
                  {{ deletingOrderId === order.id ? '删除中...' : '删除订单' }}
                </nut-button>
              </template>

              <!-- 卖车模式：已取消状态 -->
              <template v-if="viewMode === 'sell' && order.status === 7">
                <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
                  订单详情
                </nut-button>
              </template>

              <!-- 认证模式：已取消状态 -->
              <template
                v-if="viewMode === 'verification' && (order.status === 7 || order.status === 15 || order.status === 5)">
                <nut-button type="default" size="small" @click="viewOrderDetail(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" @paySuccess="onPaySuccess" />

    <!-- 评价弹窗 -->
    <nut-popup v-model:visible="showRatePopup" position="right" :catch-move="true"
      :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?.details?.vehicle?.front_photo || DEFAULT_COVER_IMG" class="product-image"
              mode="aspectFill" />
            <view class="product-details">
              <text class="product-name">{{ currentRateOrder?.details?.vehicle?.brand }} {{
                currentRateOrder?.details?.vehicle?.model }}</text>
              <text class="product-specs">{{ currentRateOrder?.details?.vehicle?.manufacture_year }}年 · 里程: {{
                currentRateOrder?.details?.vehicle?.range_km }}km</text>
              <text class="product-price">¥ {{ currentRateOrder?.details?.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"
                :cursorSpacing="100" :rows="4" :show-word-limit="!isReadOnlyMode" :readonly="isReadOnlyMode"
                :class="{ 'readonly': isReadOnlyMode }" />
            </view>
            <!-- <text v-if="isReadOnlyMode && currentRateOrder?.details?.review?.date" class="review-date">
              评价时间：{{ currentRateOrder?.details?.review?.date }}
            </text> -->
          </view>
        </view>

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

    <!-- 订单详情弹窗 -->
    <nut-popup v-model:visible="showOrderDetailPopup" position="right" :catch-move="true"
      :style="{ width: '100%', height: '100%' }" @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?.created_time }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">支付时间</text>
              <text class="info-value">{{ currentOrderDetail?.payment_time }}</text>
            </view>
            <view v-if="currentOrderDetail?.refund_time" class="info-row">
              <text class="info-label">退款时间</text>
              <text class="info-value">{{ currentOrderDetail?.refund_time }}</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?.total_amount }}</text>
            </view>
          </view>

          <!-- 商品信息 -->
          <view class="detail-section">
            <text class="section-title">商品信息</text>
            <view class="product-detail-info">
              <image :src="currentOrderDetail?.details?.vehicle?.front_photo || DEFAULT_COVER_IMG"
                class="product-detail-image" mode="aspectFill" />
              <view class="product-detail-content">
                <text class="product-detail-name">{{ currentOrderDetail?.details?.vehicle?.brand }} {{
                  currentOrderDetail?.details?.vehicle?.model }}</text>
                <text class="product-detail-specs"><text
                    v-if="currentOrderDetail?.details?.vehicle?.manufacture_year">{{
                      currentOrderDetail?.details?.vehicle?.manufacture_year }}年 · </text>续航:
                  {{
                    currentOrderDetail?.details?.vehicle?.range_km }}km/h</text>
                <text class="product-detail-battery">电池容量: {{ currentOrderDetail?.details?.vehicle?.battery_capacity_ah
                }}Ah</text>
                <text v-if="currentOrderDetail?.details?.vehicle?.price" class="product-detail-price">¥ {{
                  currentOrderDetail?.details?.vehicle?.price }}</text>
              </view>
            </view>
          </view>

          <!-- 交易信息 -->
          <view v-if="viewMode === 'buy' || viewMode === 'sell'" class="detail-section">
            <text class="section-title">交易信息</text>
            <view class="info-row">
              <text class="info-label">{{ viewMode === 'buy' ? '卖家' : '买家' }}</text>
              <text class="info-value">{{ viewMode === 'buy' ? currentOrderDetail?.details?.vehicle?.seller?.nickname :
                currentOrderDetail?.buyer?.nickname }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">联系电话</text>
              <text class="info-value">{{ viewMode === 'buy' ? currentOrderDetail?.details?.vehicle?.seller?.phone :
                currentOrderDetail?.buyer?.phone }}</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?.details?.review">
            <text class="section-title">评价信息</text>
            <view class="review-info">
              <view class="review-rating">
                <text class="rating-label">评分：</text>
                <nut-rate :model-value="currentOrderDetail?.details?.review?.rating" readonly size="20"
                  active-color="#ff6b35" void-color="#e5e5e5" />
                <!-- <text class="rating-text">{{ currentOrderDetail?.details?.review?.rating }}/5分</text> -->
              </view>
              <view class="review-content">
                <text class="content-label">评价内容：</text>
                <text class="content-text">{{ currentOrderDetail?.details?.review?.note }}</text>
              </view>
              <view class="review-time">
                <text class="time-text">评价时间：{{ currentOrderDetail?.details?.review?.created_time }}</text>
              </view>
            </view>
          </view>
        </view>

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

    <!-- Delete Confirmation Modal -->
    <nut-dialog v-model:visible="showConfirmModal" title="温馨提示" cancel-text="取消" ok-text="确认"
      @cancel="showConfirmModal = false" @ok="performDeleteOrder(pendingDeleteOrderId)">
      <template #default>
        <view>
          <text style="font-size: 1rem;">是否确认删除订单?</text>
        </view>
      </template>
      <template #footer>
        <view class="flex gap-4 p-4">
          <nut-button plain class="flex-1" size="small" @click="showConfirmModal = false">
            取消
          </nut-button>
          <nut-button type="warning" class="flex-1" size="small" color="orange"
            @click="performDeleteOrder(pendingDeleteOrderId)">
            确认
          </nut-button>
        </view>
      </template>
    </nut-dialog>

    <!-- Cancel Order Confirmation Modal -->
    <nut-dialog v-model:visible="showCancelConfirmModal" title="温馨提示" cancel-text="我再想想" ok-text="确定取消"
      @cancel="showCancelConfirmModal = false" @ok="performCancelOrder(pendingCancelOrderId)">
      <template #default>
        <view>
          <text style="font-size: 1rem;">是否确认取消订单?</text>
        </view>
      </template>
      <template #footer>
        <view class="flex gap-4 p-4">
          <nut-button plain class="flex-1" size="small" @click="showCancelConfirmModal = false">
            我再想想
          </nut-button>
          <nut-button type="warning" class="flex-1" size="small" color="orange"
            @click="performCancelOrder(pendingCancelOrderId)">
            确定取消
          </nut-button>
        </view>
      </template>
    </nut-dialog>

    <!-- 确认发货弹窗 -->
    <nut-dialog v-model:visible="showShipConfirmModal" title="确认发货" cancel-text="取消" ok-text="确认发货"
      @cancel="showShipConfirmModal = false" @ok="performConfirmShip(pendingShipOrderId)">
      <template #default>
        <view>
          <text style="font-size: 1rem;">确认已将车辆发货给买家？</text>
        </view>
      </template>
      <template #footer>
        <view class="flex gap-4 p-4">
          <nut-button plain class="flex-1" size="small" @click="showShipConfirmModal = false">
            取消
          </nut-button>
          <nut-button type="warning" class="flex-1" size="small" color="orange"
            @click="performConfirmShip(pendingShipOrderId)">
            确认发货
          </nut-button>
        </view>
      </template>
    </nut-dialog>

    <!-- 确认收货弹窗 -->
    <nut-dialog v-model:visible="showReceiveConfirmModal" title="确认收货" cancel-text="取消" ok-text="确认收货"
      @cancel="showReceiveConfirmModal = false" @ok="performConfirmReceive(pendingReceiveOrderId)">
      <template #default>
        <view>
          <text style="font-size: 1rem;">确认已收到车辆？</text>
        </view>
      </template>
      <template #footer>
        <view class="flex gap-4 p-4">
          <nut-button plain class="flex-1" size="small" @click="showReceiveConfirmModal = false">
            取消
          </nut-button>
          <nut-button type="warning" class="flex-1" size="small" color="orange"
            @click="performConfirmReceive(pendingReceiveOrderId)">
            确认收货
          </nut-button>
        </view>
      </template>
    </nut-dialog>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import Taro from '@tarojs/taro'
import './index.less'
import { $ } from '@tarojs/extend'
import payCard from '@/components/payCard.vue'
// 导入接口
import { getOrderListAPI, getOrderDetailAPI, reviewOrderAPI, cancelOrderAPI, deleteOrderAPI, shipOrderAPI, receiptOrderStatusAPI, receiveOrderAPI } from '@/api/orders'
import { DEFAULT_COVER_IMG } from '@/utils/config'

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

/**
 * 跳转到商品详情页
 * @param {string} orderId - 订单ID
 */
const goToProductDetail = ({ details }) => {
  Taro.navigateTo({
    url: `/pages/productDetail/index?id=${details.vehicle.id}`
  })
}

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

// 页面状态
const activeTab = ref('')
const viewMode = ref('buy')
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([])

// 订单数据 - 我卖的车
const soldOrders = ref([])

// 订单数据 - 我认证的车
const verificationOrders = ref([])

// 分页相关状态
const currentPage = ref(0)
const pageLimit = ref(10)

// 倒计时相关状态
const countdownIntervals = ref(new Map()) // 存储每个订单的倒计时定时器

/**
 * 根据当前视图模式获取订单列表（不再进行前端过滤，直接返回API查询结果）
 */
const filteredOrders = computed(() => {
  return viewMode.value === 'buy' ? boughtOrders.value : viewMode.value === 'verification' ? verificationOrders.value : soldOrders.value
})

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

/**
 * 设置活跃的状态标签
 */
const setActiveTab = (tab) => {
  activeTab.value = tab
  // 重置列表状态和数据
  resetListState(true)
  // 重新加载对应状态的数据
  loadOrderData(false)
}

/**
 * 加载订单数据
 * @param {boolean} isLoadMore - 是否为加载更多
 */
const loadOrderData = async (isLoadMore = false) => {
  if (loading.value) return

  try {
    loading.value = true

    const type = viewMode.value === 'buy' ? 'buy' : viewMode.value === 'verification' ? 'verification' : 'sell'
    
    // 处理状态筛选逻辑
    let status = undefined
    if (activeTab.value === 'completed') {
      // 我买的车：已完成状态包括 11=已收货分账中，19=分账成功, 21=分账失败
      status = [11, 19, 21]
    } else if (activeTab.value === 'profit_sharing') {
      // 我卖的车：分账状态包括 11=已收货分账中，19=分账成功, 21=分账失败
      status = [11, 19, 21]
    } else if (activeTab.value === 15) {
      // 认证模式：退款状态包括 15=已退款和17=退款失败
      status = [15, 17]
    } else if (activeTab.value) {
      // 其他单一状态
      status = activeTab.value
    }
    const page = isLoadMore ? currentPage.value + 1 : 0

    // TAG: 添加mock数据用于测试
    // if (page === 0) {
    //   const mockOrder = {
    //     id: `mock_${type}_${Date.now()}`,
    //     status: 9, // 已发货/待收货状态
    //     created_time: new Date().toLocaleString('zh-CN'),
    //     total_amount: 15000,
    //     details: {
    //       id: `detail_${Date.now()}`,
    //       vehicle: {
    //         id: `vehicle_${Date.now()}`,
    //         brand: '雅迪',
    //         model: 'DE2',
    //         manufacture_year: 2023,
    //         range_km: 60,
    //         battery_capacity_ah: 48,
    //         price: 15000,
    //         front_photo: DEFAULT_COVER_IMG,
    //         seller: {
    //           nickname: '测试卖家',
    //           phone: '138****8888'
    //         }
    //       }
    //     },
    //     buyer: {
    //       nickname: '测试买家',
    //       phone: '139****9999'
    //     },
    //     is_sold: false
    //   }

    //   const targetOrders = viewMode.value === 'buy' ? boughtOrders : soldOrders
    //   targetOrders.value = [mockOrder]
    // }

    const response = await getOrderListAPI({
      type,
      status,
      page,
      limit: pageLimit.value
    })

    if (response.code && response.data && response.data.list && response.data.list.length > 0) {
      // 处理多个订单数据
      const newOrders = response.data.list.map(orderData => {
        // 处理details数组，取第一个元素作为details对象
        const processedOrder = {
          ...orderData,
          details: orderData.details && orderData.details.length > 0 ? orderData.details[0] : null
        }

        // 为待支付订单添加倒计时时间
        if (processedOrder.status === 3) {
          // 计算剩余时间（毫秒）
          const current_date = new Date(processedOrder.server_time);
          const end_date = new Date(processedOrder.pay_deadline_time);
          let time_left = end_date - current_date;
          // 将毫秒转换为秒，如果时间已过期或计算失败则默认30分钟（1800秒）
          processedOrder.remain_time = time_left > 0 ? Math.floor(time_left / 1000) : 1800
        }

        return processedOrder
      })

      const targetOrders = viewMode.value === 'buy' ? boughtOrders : viewMode.value === 'verification' ? verificationOrders : soldOrders

      if (isLoadMore) {
        targetOrders.value = [...targetOrders.value, ...newOrders]
        currentPage.value = page
      } else {
        targetOrders.value = newOrders
        currentPage.value = 0
      }

      // 为待支付订单启动倒计时
      newOrders.forEach(order => {
        if (order.status === 3 && order.remain_time) {
          startCountdown(order)
        }
      })

      // 判断是否还有更多数据
      hasMore.value = newOrders.length === pageLimit.value
    } else {
      hasMore.value = false
    }
  } catch (error) {
    console.error('加载订单数据失败:', error)
    Taro.showToast({
      title: '加载失败，请重试',
      icon: 'error',
      duration: 2000
    })
    hasMore.value = false
  } finally {
    loading.value = false
  }
}

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

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

  if (resetData) {
    // 清空订单数据
    boughtOrders.value = []
    soldOrders.value = []
    verificationOrders.value = []
    // 重新加载数据
    loadOrderData(false)
  }

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

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



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

/**
 * 获取订单状态文本
 */
const getStatusText = (status) => {
  switch (status) {
    case 3:
      return '待支付'
    case 5:
      return viewMode.value === 'verification' ? '已付款' : (viewMode.value === 'sell' ? '待发货' : '待收货')
    case 9:
      return '待收货'
    case 11:
      return viewMode.value === 'sell' ? '已收货分账中' : '已完成'
    case 7:
      return '已取消'
    case 13:
      return '退款中'
    case 15:
      return '已退款'
    case 17:
      return '退款失败'
    case 19:
      return viewMode.value === 'sell' ? '分账成功' : '已完成'
    case 21:
      return viewMode.value === 'sell' ? '分账失败' : '已完成'
    default:
      return '未知状态'
  }
}

/**
 * 获取订单状态样式类
 */
const getStatusClass = (status) => {
  switch (status) {
    case 3:
      return 'status-pending'
    case 5:
      return 'status-shipping'
    case 9:
      return 'status-shipping'
    case 11:
      return 'status-completed'
    case 7:
      return 'status-cancelled'
    case 13:
      return 'status-refund-pending'
    case 15:
      return 'status-refund-success'
    case 17:
      return 'status-refund-failed'
    case 19:
      return 'status-profit-sharing-success'
    case 21:
      return 'status-profit-sharing-failed'
    default:
      return ''
  }
}

/**
 * 格式化倒计时显示
 * @param {number} seconds - 剩余秒数
 * @returns {string} 格式化的时间字符串 HH:MM:SS
 */
const formatCountdown = (seconds) => {
  if (!seconds || seconds <= 0) {
    return '00:00:00'
  }

  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

/**
 * 启动订单倒计时
 * @param {Object} order - 订单对象
 */
const startCountdown = (order) => {
  if (!order || order.status !== 3 || !order.remain_time) {
    return
  }

  // 清除已存在的定时器
  if (countdownIntervals.value.has(order.id)) {
    clearInterval(countdownIntervals.value.get(order.id))
  }

  const timer = setInterval(async () => {
    const orders = viewMode.value === 'buy' ? boughtOrders : viewMode.value === 'verification' ? verificationOrders : soldOrders
    const targetOrderIndex = orders.value.findIndex(o => o.id === order.id)

    if (targetOrderIndex !== -1) {
      const targetOrder = orders.value[targetOrderIndex]

      if (targetOrder.remain_time > 0) {
        // 创建新的订单对象来触发响应式更新
        const updatedOrder = {
          ...targetOrder,
          remain_time: targetOrder.remain_time - 1
        }

        // 替换数组中的订单对象
        orders.value.splice(targetOrderIndex, 1, updatedOrder)

        // 使用nextTick确保DOM更新
        await nextTick()
      } else {
        // 时间到，取消订单
        clearInterval(timer)
        countdownIntervals.value.delete(order.id)
        handleTimeoutCancel(targetOrder)
      }
    } else {
      // 订单不存在，清除定时器
      clearInterval(timer)
      countdownIntervals.value.delete(order.id)
    }
  }, 1000)

  countdownIntervals.value.set(order.id, timer)
}

/**
 * 处理超时取消订单
 * @param {Object} order - 订单对象
 */
const handleTimeoutCancel = async (order) => {
  // 清除该订单的倒计时定时器
  if (countdownIntervals.value.has(order.id)) {
    clearInterval(countdownIntervals.value.get(order.id))
    countdownIntervals.value.delete(order.id)
  }

  // 更新订单状态为已取消
  const orders = viewMode.value === 'buy' ? boughtOrders : viewMode.value === 'verification' ? verificationOrders : soldOrders
  const targetOrderIndex = orders.value.findIndex(o => o.id === order.id)

  if (targetOrderIndex !== -1) {
    // 创建新的订单对象来触发响应式更新
    const updatedOrder = {
      ...orders.value[targetOrderIndex],
      status: 7
    }

    // 替换数组中的订单对象
    orders.value.splice(targetOrderIndex, 1, updatedOrder)

    // 使用nextTick确保DOM更新
    await nextTick()
  }

  Taro.showToast({
    title: '订单已超时取消',
    icon: 'none',
    duration: 2000
  })
}

/**
 * 清除所有倒计时定时器
 */
const clearAllCountdowns = () => {
  countdownIntervals.value.forEach((timer) => {
    clearInterval(timer)
  })
  countdownIntervals.value.clear()
}

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

/**
 * 发送订单支付信息到支付组件
 * @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
}

/**
 * 处理支付成功事件
 * @param {Object} data - 支付成功数据
 * @param {string} data.orderId - 订单ID
 */
const onPaySuccess = ({ orderId }) => {
  // 找到对应的订单并更新状态
  const orders = viewMode.value === 'buy' ? boughtOrders.value : viewMode.value === 'verification' ? verificationOrders.value : soldOrders.value
  const order = orders.find(o => o.id === orderId)

  if (order) {
    // 更新订单状态为已完成
    order.status = 5

    Taro.showToast({
      title: '支付成功，订单已更新',
      icon: 'success',
      duration: 2000
    })
  }
}

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

  if (order) {
    const { code, data } = await getOrderDetailAPI({ id: orderId })
    if (code) {
      currentOrderDetail.value = { ...data, details: data.details[0] }
      showOrderDetailPopup.value = true
    }
  }
}

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

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

  if (order) {
    currentRateOrder.value = order

    // 检查是否已有评价
    if (order.details.review) {
      // 已评价，显示只读模式
      isReadOnlyMode.value = true
      rateContent.value = order.details.review.note
      rateScore.value = order.details.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

    const response = await reviewOrderAPI({
      detail_id: currentRateOrder.value.details.id,
      rating: rateScore.value,
      note: rateContent.value
    })
    if (response.code) {
      // API提交成功后的处理
      const currentOrders = viewMode.value === 'buy' ? boughtOrders : viewMode.value === 'verification' ? verificationOrders : soldOrders
      const order = currentOrders.value.find(o => o.id === currentRateOrder.value.id)
      if (order) {
        // 创建评价数据对象
        const reviewData = {
          rating: rateScore.value,
          note: rateContent.value,
          created_time: new Date().toLocaleString('zh-CN')
        }

        // 同时更新order.review和order.details.review，确保状态一致
        order.review = reviewData
        if (order.details) {
          order.details.review = reviewData
        }

        // 确保订单状态为已完成
        order.status = 11
      }

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

      closeRatePopup()
    } else {
      throw new Error(response.msg || '提交失败')
    }

  } catch (error) {
    console.error('提交评价失败:', error)
  } finally {
    submittingRate.value = false
  }
}

// 取消订单相关状态
const cancelingOrderId = ref('')

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

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

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

/**
 * 取消订单确认弹窗显示状态
 */
const showCancelConfirmModal = ref(false)

/**
 * 待取消的订单ID
 */
const pendingCancelOrderId = ref('')

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

/**
 * 待发货的订单ID
 */
const pendingShipOrderId = ref('')

/**
 * 发货中的订单ID
 */
const shippingOrderId = ref('')

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

/**
 * 待收货的订单ID
 */
const pendingReceiveOrderId = ref('')

/**
 * 收货中的订单ID
 */
const receivingOrderId = ref('')

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

/**
 * 执行取消订单操作
 * @param {string} orderId - 订单ID
 */
const performCancelOrder = async (orderId) => {
  // 关闭确认弹窗
  showCancelConfirmModal.value = false

  // 设置取消状态，用于显示加载效果
  cancelingOrderId.value = orderId

  try {
    // 调用取消订单API
    const response = await cancelOrderAPI({ id: orderId })

    if (response.code) {
      // API取消成功后的处理
      const orders = viewMode.value === 'buy' ? boughtOrders : viewMode.value === 'verification' ? verificationOrders : soldOrders
      const order = orders.value.find(o => o.id === orderId)

      if (order) {
        // 清除该订单的倒计时定时器
        if (countdownIntervals.value.has(orderId)) {
          clearInterval(countdownIntervals.value.get(orderId))
          countdownIntervals.value.delete(orderId)
        }

        // 更新订单状态为已取消
        const orders = viewMode.value === 'buy' ? boughtOrders : viewMode.value === 'verification' ? verificationOrders : soldOrders
        const targetOrderIndex = orders.value.findIndex(o => o.id === orderId)

        if (targetOrderIndex !== -1) {
          // 创建新的订单对象来触发响应式更新
          const updatedOrder = {
            ...orders.value[targetOrderIndex],
            status: 7
          }

          // 替换数组中的订单对象
          orders.value.splice(targetOrderIndex, 1, updatedOrder)
        }

        Taro.showToast({
          title: '订单已取消',
          icon: 'success',
          duration: 2000
        })
      }
    } else {
      throw new Error(response.msg || '取消失败')
    }
  } catch (error) {
    // console.error('取消订单失败:', error)

    Taro.showToast({
      title: error.msg || '取消订单失败，请重试',
      icon: 'error',
      duration: 2000
    })
  } finally {
    // 清除取消状态
    cancelingOrderId.value = ''
    // 清除待取消订单ID
    pendingCancelOrderId.value = ''
  }
}

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

/**
 * 确认收货处理
 * @param {Object} order - 订单对象
 */
const handleConfirmReceive = async (order) => {
  try {
    // 保存待收货的订单ID
    pendingReceiveOrderId.value = order.id
    showReceiveConfirmModal.value = true
  } catch (error) {
    Taro.showToast({
      title: '操作失败',
      icon: 'error',
      duration: 2000
    })
  }
}

/**
 * 执行确认收货操作
 * @param {string} orderId - 订单ID
 */
const performConfirmReceive = async (orderId) => {
  // 关闭确认弹窗
  showReceiveConfirmModal.value = false

  // 设置收货状态，用于显示加载效果
  receivingOrderId.value = orderId

  try {
    const order = boughtOrders.value.find(o => o.id === orderId)

    // 调用确认收货API
    if (order) {
      // 调用买家查询收货状态接口
      const response = await receiveOrderAPI({ order_id: order.id })

      if (response.code) {
        // 接口返回状态为11，确认收货成功
        order.status = 11 // 更新为已完成状态

        Taro.showToast({
          title: '确认收货成功',
          icon: 'success',
          duration: 2000
        })
      }
    }
  } catch (error) {
    Taro.showToast({
      title: '操作失败',
      icon: 'error',
      duration: 2000
    })
  } finally {
    // 清除收货状态
    receivingOrderId.value = ''
    // 清除待收货订单ID
    pendingReceiveOrderId.value = ''
  }
}

/**
 * 确认发货处理
 * @param {Object} order - 订单对象
 */
const handleConfirmShip = async (order) => {
  try {
    // 保存待发货的订单ID
    pendingShipOrderId.value = order.id
    showShipConfirmModal.value = true
  } catch (error) {
    // 确认发货失败处理
  }
}

/**
 * 执行确认发货操作
 * @param {string} orderId - 订单ID
 */
const performConfirmShip = async (orderId) => {
  // 关闭确认弹窗
  showShipConfirmModal.value = false

  // 设置发货状态，用于显示加载效果
  shippingOrderId.value = orderId

  try {
    // 调用确认发货API
    const response = await shipOrderAPI({ order_id: orderId })

    if (response.code) {
      // API发货成功后的处理
      const orders = viewMode.value === 'buy' ? boughtOrders : viewMode.value === 'verification' ? verificationOrders : soldOrders
      const order = orders.value.find(o => o.id === orderId)

      if (order) {
        // 更新订单状态为待收货
        order.status = 9

        Taro.showToast({
          title: response.msg || '发货成功',
          icon: 'success',
          duration: 2000
        })
      }
    } else {
      throw new Error(response.msg || '发货失败')
    }
  } catch (error) {
    // 确认发货失败处理
    Taro.showToast({
      title: error.msg || '确认发货失败，请重试',
      icon: 'error',
      duration: 2000
    })
  } finally {
    // 清除发货状态
    shippingOrderId.value = ''
    // 清除待发货订单ID
    pendingShipOrderId.value = ''
  }
}

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

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

  try {
    // 调用删除订单API
    const response = await deleteOrderAPI({ id: orderId })

    if (response.code) {
      // API删除成功后的处理
      const orders = viewMode.value === 'buy' ? boughtOrders : viewMode.value === 'verification' ? verificationOrders : soldOrders
      const orderIndex = orders.value.findIndex(order => order.id === orderId)

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

        Taro.showToast({
          title: response.msg || '订单删除成功',
          icon: 'success',
          duration: 2000
        })
      }
    } else {
      throw new Error(response.msg || '删除失败')
    }

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

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

/**
 * 处理确认收货成功事件
 * @param {Object} data - 事件数据
 */
const handleConfirmReceiveSuccess = async ({ merchantId, transactionId, merchantTradeNo }) => {
  const orders = boughtOrders.value
  const order = orders.find(o => o.id === merchantTradeNo)

  if (order) {
    try {
      // 调用买家查询收货状态接口
      const response = await receiptOrderStatusAPI({ order_id: merchantTradeNo })

      if (response.code && response.data && response.data.status === 11) {
        // 接口返回状态为11，确认收货成功
        order.status = 11 // 更新为已完成状态

        Taro.showToast({
          title: '确认收货成功',
          icon: 'success',
          duration: 2000
        })
      } else {
        // 状态不是11，可能还在处理中
        // 可以根据需要添加其他处理逻辑
      }
    } catch (error) {
      // 查询收货状态失败，即使接口调用失败，也更新本地状态
      order.status = 11
    }
  }
}

// 页面加载时的初始化
onMounted(async () => {
  // 加载订单数据
  loadOrderData(false)

  // 设置滚动列表可视高度
  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);

  // 监听确认收货成功事件
  Taro.eventCenter.on('confirmReceiveSuccess', handleConfirmReceiveSuccess)
})

// 页面卸载时清理定时器和事件监听器
onUnmounted(() => {
  clearAllCountdowns()
  // 移除确认收货成功事件监听器
  Taro.eventCenter.off('confirmReceiveSuccess', handleConfirmReceiveSuccess)
})
</script>

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