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

import { fetchAdminOrders, type Order } from '@/api/orders'
import { useAdminTable } from '@/composables/useAdminTable'
import { handoffStatusLabel, orderStatusLabel, settlementStatusLabel } from '@/utils/statusLabels'
import { formatDateTime } from '@/utils/time'

const status = ref('')

const { loading, data: orders, load: loadOrders } = useAdminTable<Order[]>({
  fetchFn: fetchAdminOrders,
  initialData: [],
})

const filteredOrders = computed(() => {
  if (!status.value) return orders.value
  return orders.value.filter((item) => item.status === status.value)
})
</script>

<template>
  <section class="page">
    <div class="page-header-row">
      <div class="page-header">
        <p class="eyebrow">Orders</p>
        <h1>订单管理</h1>
        <p>查看全量订单、交接状态、金额和结算状态。</p>
      </div>
      <div class="toolbar-actions">
        <el-select v-model="status" clearable placeholder="订单状态" style="width: 180px">
          <el-option label="待支付" value="pending_payment" />
          <el-option label="待交接" value="pending_handoff" />
          <el-option label="使用中" value="renting" />
          <el-option label="逾期中" value="overdue" />
          <el-option label="待结账确认" value="pending_return_confirm" />
          <el-option label="待号主确认结账" value="pending_checkout_confirm" />
          <el-option label="待租客确认修正" value="pending_checkout_accept" />
          <el-option label="结账争议中" value="checkout_disputing" />
          <el-option label="申诉中" value="disputing" />
          <el-option label="异常" value="abnormal" />
          <el-option label="已完成" value="completed" />
          <el-option label="已关闭" value="closed" />
          <el-option label="已取消" value="cancelled" />
        </el-select>
        <el-button @click="loadOrders">刷新</el-button>
      </div>
    </div>

    <el-table v-loading="loading" class="table-panel" :data="filteredOrders">
      <el-table-column prop="order_no" label="订单号" min-width="230" />
      <el-table-column prop="title" label="账号" min-width="170" />
      <el-table-column prop="renter_phone" label="租客" min-width="130" />
      <el-table-column prop="owner_phone" label="号主" min-width="130" />
      <el-table-column label="状态" width="140">
        <template #default="{ row }">{{ orderStatusLabel(row.status) }}</template>
      </el-table-column>
      <el-table-column label="交接" width="180">
        <template #default="{ row }">{{ handoffStatusLabel(row.handoff_status) }}</template>
      </el-table-column>
      <el-table-column label="结算" width="120">
        <template #default="{ row }">{{ settlementStatusLabel(row.settlement_status) }}</template>
      </el-table-column>
      <el-table-column prop="rent_amount" label="订单金额" width="100" />
      <el-table-column prop="deposit_amount" label="押金" width="100" />
      <el-table-column label="创建时间" min-width="180">
        <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <RouterLink :to="`/admin/orders/${row.id}`">
            <el-button size="small">详情</el-button>
          </RouterLink>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>
