<script setup lang="ts">
import { onMounted, ref } from 'vue'

import { fetchOrders, type Order } from '@/api/orders'

const loading = ref(false)
const orders = ref<Order[]>([])

onMounted(loadOrders)

async function loadOrders() {
  loading.value = true
  try {
    orders.value = await fetchOrders()
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <section class="page">
    <div class="page-header">
      <p class="eyebrow">Orders</p>
      <h1>我的订单</h1>
      <p>跟踪待交接、租赁中、待归还、申诉中和已完成订单。</p>
    </div>

    <el-table v-loading="loading" class="table-panel" :data="orders">
      <el-table-column prop="order_no" label="订单号" min-width="210" />
      <el-table-column prop="title" label="账号" min-width="180" />
      <el-table-column prop="rent_hours" label="租期" width="90" />
      <el-table-column prop="rent_amount" label="租金" width="100" />
      <el-table-column prop="deposit_amount" label="押金" width="100" />
      <el-table-column prop="status" label="状态" width="140" />
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <RouterLink :to="`/orders/${row.id}`">
            <el-button size="small">详情</el-button>
          </RouterLink>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>
