<template>
  <div class="page-container">
    <PageTitle title="订单执行状态" />
    
    <SearchBar :form="searchForm" :filters="filters" />

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="orderDate" label="下单日期" width="110" align="center" />
      <el-table-column prop="orderNo" label="订单编号" width="120" align="center" />
      <el-table-column prop="productName" label="产品" min-width="140" show-overflow-tooltip />
      <el-table-column prop="quantity" label="数量" width="80" align="center" />
      <el-table-column prop="price" label="单价" width="100" align="center">
        <template #default="{ row }">¥{{ row.price.toLocaleString() }}</template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" width="100" align="center">
        <template #default="{ row }">¥{{ row.amount.toLocaleString() }}</template>
      </el-table-column>
      <el-table-column prop="shippedQty" label="发货数量" width="90" align="center" />
      <el-table-column prop="unshippedQty" label="未发货数量" width="100" align="center" />
      <el-table-column prop="status" label="订单状态" width="100" align="center">
        <template #default="{ row }">
          <span :class="['status-tag', getOrderStatusClass(row.status)]">{{ row.status }}</span>
        </template>
      </el-table-column>
    </el-table>

    <TablePagination v-model:page="pagination.page" v-model:pageSize="pagination.pageSize" :total="pagination.total" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { PageTitle, SearchBar, TablePagination } from '@/components'
import { BILL_STATUS_OPTIONS, INVOICE_STATUS_OPTIONS, PAY_STATUS_OPTIONS } from '@/constants/status'
import { getOrderStatusClass } from '@/utils/status'

const searchForm = reactive({
  keyword: '',
  dateRange: [],
  billStatus: '',
  invoiceStatus: '',
  payStatus: ''
})

const filters = [
  { field: 'billStatus', label: '对账状态', options: BILL_STATUS_OPTIONS },
  { field: 'invoiceStatus', label: '开票状态', options: INVOICE_STATUS_OPTIONS },
  { field: 'payStatus', label: '支付状态', options: PAY_STATUS_OPTIONS }
]

const pagination = reactive({ page: 1, pageSize: 10, total: 100 })

const tableData = ref([
  { orderDate: '2025-11-22', orderNo: '2323232323', productName: '清华同方超...', quantity: 2, price: 2115.97, amount: 2115.97, shippedQty: 2, unshippedQty: 2, status: '运输中' },
  { orderDate: '2025-12-09', orderNo: '2323412123', productName: '清华同方超...', quantity: 1, price: 4476.12, amount: 4476.12, shippedQty: 1, unshippedQty: 1, status: '待发货' },
  { orderDate: '2025-11-21', orderNo: '4566784543', productName: '越E500台式...', quantity: 5, price: 7751.34, amount: 7751.34, shippedQty: 5, unshippedQty: 5, status: '已收货' },
  { orderDate: '2025-11-27', orderNo: '2356565654', productName: '清华同机电...', quantity: 2, price: 7936.37, amount: 7936.37, shippedQty: 2, unshippedQty: 2, status: '运输中' },
  { orderDate: '2025-12-11', orderNo: '2323412123', productName: '清华同方超...', quantity: 1, price: 3931.45, amount: 3931.45, shippedQty: 1, unshippedQty: 1, status: '待发货' },
  { orderDate: '2025-11-27', orderNo: '2323232323', productName: '清00台式机...', quantity: 6, price: 6132.75, amount: 6132.75, shippedQty: 6, unshippedQty: 6, status: '已收货' },
  { orderDate: '2025-11-25', orderNo: '2356565654', productName: '机电脑超越...', quantity: 7, price: 3189.56, amount: 3189.56, shippedQty: 7, unshippedQty: 7, status: '已收货' },
  { orderDate: '2025-11-20', orderNo: '2323232323', productName: '清华同方超...', quantity: 2, price: 993.66, amount: 993.66, shippedQty: 2, unshippedQty: 2, status: '运输中' },
  { orderDate: '2025-11-17', orderNo: '2323412123', productName: '超越E500台...', quantity: 1, price: 2763.35, amount: 2763.35, shippedQty: 1, unshippedQty: 1, status: '待发货' },
  { orderDate: '2025-12-05', orderNo: '2323232323', productName: '机电脑超越...', quantity: 5, price: 9286.45, amount: 9286.45, shippedQty: 5, unshippedQty: 5, status: '已收货' }
])
</script>
