<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-07-03 16:32:53
 * @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
        class="order-scroll-view"
        :style="scrollStyle"
        :scroll-y="true"
        @scrolltolower="loadMore"
        @scroll="scroll"
        :lower-threshold="50"
        :enable-flex="false"
      >
        <!-- 空状态 -->
        <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)"
              >
                去支付
              </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"
              >
                {{ order.review ? '查看评价' : '评价' }}
              </nut-button>
            </template>

            <!-- 已取消状态 -->
            <template v-if="order.status === 'cancelled'">
              <nut-button
                type="default"
                size="small"
                @click="deleteOrder(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="bottom"
      :style="{ height: '60%' }"
      round
      closeable
      @close="closeRatePopup"
    >
      <view class="rate-popup">
        <view class="rate-header">
          <text class="rate-title">评价商品</text>
        </view>

        <view class="rate-content">
            <!-- 商品信息 -->
            <view class="product-info" v-if="currentRateOrder">
              <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>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import './index.less'
import { $ } from '@tarojs/extend'
import payCard from '@/components/payCard.vue'
// NutUI组件已全局注册，无需单独导入Rate

const scrollStyle = ref({
    height: 'calc(100vh)'
})

// 页面状态
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 boughtOrders = ref([
  {
    id: '1',
    price: 999,
    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: '2',
    price: 999,
    date: '2023-10-28 09:15',
    status: 'completed',
    vehicle: {
      name: '雅迪 G5',
      year: '2021年',
      mileage: '续航80km',
      batteryCapacity: '电池容量：1.2kWh',
      price: 2599,
      imageUrl: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    },
    // 已评价信息
    review: {
      rating: 4,
      content: '车子质量不错，续航也很给力，卖家服务态度很好，推荐购买！',
      date: '2023-10-30 10:20'
    }
  },
  {
    id: '3',
    price: 999,
    date: '2023-09-05 16:45',
    status: 'cancelled',
    vehicle: {
      name: '绿源 MN5',
      year: '2023年',
      mileage: '续航100km',
      batteryCapacity: '电池容量：1.8kWh',
      price: 4299,
      imageUrl: 'https://images.unsplash.com/photo-1567922045116-2a00fae2ed03?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  }
])

const soldOrders = ref([
  {
    id: '4',
    price: 999,
    date: '2023-11-10 11:20',
    status: 'pending',
    vehicle: {
      name: '爱玛 A3',
      year: '2022年',
      mileage: '续航90km',
      batteryCapacity: '电池容量：1.3kWh',
      price: 3299,
      imageUrl: 'https://images.unsplash.com/photo-1591637333184-19aa84b3e01f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    }
  },
  {
    id: '5',
    price: 999,
    date: '2023-10-15 13:45',
    status: 'completed',
    vehicle: {
      name: '台铃 战速',
      year: '2023年',
      mileage: '续航110km',
      batteryCapacity: '电池容量：1.6kWh',
      price: 3599,
      imageUrl: 'https://images.unsplash.com/photo-1558980664-3a031cf67ea8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
    },
    // 已评价信息
    review: {
      rating: 5,
      content: '非常满意的一次购买体验，车辆性能超出预期，卖家很专业，物流也很快！',
      date: '2023-10-18 16: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
  // 重置列表加载状态
  resetListState()
}

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

/**
 * 重置列表加载状态
 */
const resetListState = () => {
  loading.value = false
  hasMore.value = true
}

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

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

  loading.value = true

  // 模拟加载更多数据
  setTimeout(() => {
    loading.value = false
    // 这里可以添加实际的加载更多逻辑
    // 如果没有更多数据，设置 hasMore.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) => {
  Taro.showToast({
    title: '查看订单详情',
    icon: 'none'
  })
}

/**
 * 评价订单
 */
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: 'none'
    })
    return
  }

  if (rateScore.value < 1 || rateScore.value > 5) {
    Taro.showToast({
      title: '请选择评分',
      icon: 'none'
    })
    return
  }

  submittingRate.value = true

  try {
    // 模拟提交评价
    await new Promise(resolve => setTimeout(resolve, 1500))

    // 更新订单评价信息
    if (currentRateOrder.value) {
      const currentDate = new Date()
      const dateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')} ${String(currentDate.getHours()).padStart(2, '0')}:${String(currentDate.getMinutes()).padStart(2, '0')}`

      currentRateOrder.value.review = {
        rating: rateScore.value,
        content: rateContent.value,
        date: dateStr
      }
    }

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

    // 关闭弹窗
    closeRatePopup()

    // TODO: 这里可以添加实际的API调用逻辑
    // await api.submitOrderRate({
    //   orderId: currentRateOrder.value.id,
    //   rating: rateScore.value,
    //   content: rateContent.value
    // })

  } catch (error) {
    Taro.showToast({
      title: '提交失败，请重试',
      icon: 'none'
    })
  } finally {
    submittingRate.value = false
  }
}

/**
 * 删除订单
 */
const deleteOrder = (orderId) => {
  Taro.showModal({
    title: '确认删除',
    content: '确定要删除这个订单吗？',
    success: (res) => {
      if (res.confirm) {
        // TODO: 实现删除订单逻辑
        Taro.showToast({
          title: '订单已删除',
          icon: 'success'
        })
      }
    }
  })
}

// 页面加载时的初始化
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>