<!--
 * @Date: 2025-03-21
 * @Description: 我的订单页面
-->
<template>
  <AppLayout title="我的订单">
    <div class="bg-gradient-to-b from-green-50/70 to-white/90 min-h-screen pb-20">
      <!-- 订单列表 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="px-4 py-3 space-y-4"
      >
        <FrostedGlass
          v-for="order in orders"
          :key="order.id"
          class="p-4 rounded-xl"
        >
          <div class="flex items-center justify-between mb-3">
            <span class="text-sm text-gray-500">订单号：{{ order.orderNo }}</span>
            <span :class="['text-sm', order.statusColor]">{{ order.statusText }}</span>
          </div>

          <div class="flex items-center mb-3">
            <img :src="order.image" class="w-20 h-20 object-cover rounded-lg" :alt="order.title">
            <div class="ml-3 flex-1">
              <h3 class="text-base font-medium mb-1">{{ order.title }}</h3>
              <p class="text-sm text-gray-500 mb-1">{{ order.description }}</p>
              <p class="text-sm text-gray-500">{{ order.createTime }}</p>
            </div>
          </div>

          <div class="flex justify-between items-center pt-3 border-t border-gray-100">
            <div class="text-base font-medium text-green-600">¥{{ order.amount }}</div>
            <div class="space-x-2">
              <button
                v-if="order.status === 'pending'"
                class="px-4 py-1.5 text-sm text-white bg-green-600 rounded-full"
                @click="handlePay(order)"
              >
                立即支付
              </button>
              <button
                v-if="order.status === 'paid'"
                class="px-4 py-1.5 text-sm text-gray-600 bg-gray-100 rounded-full"
                @click="handleViewDetail(order)"
              >
                查看详情
              </button>
            </div>
          </div>
        </FrostedGlass>
      </van-list>

      <!-- 无数据提示 -->
      <div v-if="!loading && orders.length === 0" class="flex flex-col items-center justify-center py-12">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
        <p class="mt-4 text-gray-500">暂无订单记录</p>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import AppLayout from '@/components/layout/AppLayout.vue'
import FrostedGlass from '@/components/ui/FrostedGlass.vue'
import { useTitle } from '@vueuse/core';

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const router = useRouter()
const loading = ref(false)
const finished = ref(false)
const orders = ref([
  {
    id: 1,
    orderNo: 'ORDER202503210001',
    status: 'pending',
    statusText: '待支付',
    statusColor: 'text-orange-500',
    title: '亲子阅读课程',
    description: '3-6岁儿童亲子阅读指导',
    image: '/assets/images/course-1.jpg',
    amount: 299,
    createTime: '2025-03-21 10:30:00'
  },
  {
    id: 2,
    orderNo: 'ORDER202503210002',
    status: 'paid',
    statusText: '已支付',
    statusColor: 'text-green-500',
    title: '儿童绘画课程',
    description: '儿童创意绘画启蒙课程',
    image: '/assets/images/course-2.jpg',
    amount: 199,
    createTime: '2025-03-21 09:15:00'
  }
])

// 加载更多
const onLoad = () => {
  // 模拟异步加载
  setTimeout(() => {
    loading.value = false
    finished.value = true
  }, 1000)
}

// 支付订单
const handlePay = (order) => {
  router.push(`/checkout/${order.id}`)
}

// 查看订单详情
const handleViewDetail = (order) => {
  router.push(`/profile/orders/${order.id}`)
}
</script>