<template>
  <div class="page-container">
    <PageTitle title="对账结算状况" />
    
    <SearchBar :form="searchForm" :filters="filters">
      <template #buttons>
        <el-button type="danger">导出</el-button>
      </template>
    </SearchBar>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="orderNo" label="订单编号" min-width="110" align="center" />
      <el-table-column prop="orderType" label="订单类型" min-width="90" align="center">
        <template #default="{ row }">{{ row.orderType || '-' }}</template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" min-width="100" align="center">
        <template #default="{ row }">¥{{ row.amount.toLocaleString() }}</template>
      </el-table-column>
      <el-table-column prop="orderDate" label="下单日期" min-width="100" align="center" />
      <el-table-column prop="orderStatus" label="订单状态" min-width="90" align="center">
        <template #default="{ row }">
          <span :class="['status-tag', getOrderStatusClass(row.orderStatus)]">{{ row.orderStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="billStatus" label="对账状态" min-width="90" align="center">
        <template #default="{ row }">{{ row.billStatus || '-' }}</template>
      </el-table-column>
      <el-table-column prop="invoiceStatus" label="开票状态" min-width="90" align="center">
        <template #default="{ row }">
          <span :class="['status-tag', getInvoiceStatusClass(row.invoiceStatus)]">{{ row.invoiceStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="settleStatus" label="结算状态" min-width="90" align="center">
        <template #default="{ row }">
          <span :style="{ color: row.settleStatus === '已结算' ? '#67c23a' : '' }">{{ row.settleStatus }}</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, SETTLE_STATUS_OPTIONS } from '@/constants/status'
import { getOrderStatusClass, getInvoiceStatusClass } from '@/utils/status'

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

const filters = [
  { field: 'billStatus', label: '对账状态', options: BILL_STATUS_OPTIONS },
  { field: 'invoiceStatus', label: '开票状态', options: INVOICE_STATUS_OPTIONS },
  { field: 'settleStatus', label: '结算状态', options: SETTLE_STATUS_OPTIONS }
]

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

const tableData = ref([
  { orderNo: '232323232', orderType: '普通订单', amount: 2115.97, orderDate: '2025-11-22', orderStatus: '运输中', billStatus: '已对账', invoiceStatus: '已付款', settleStatus: '已结算' },
  { orderNo: '2323412123', orderType: '普通订单', amount: 4476.12, orderDate: '2025-12-09', orderStatus: '待发货', billStatus: '未对账', invoiceStatus: '待开票', settleStatus: '未结算' },
  { orderNo: '4566784543', orderType: '协议订单', amount: 7751.34, orderDate: '2025-11-21', orderStatus: '已收货', billStatus: '已对账', invoiceStatus: '已开票', settleStatus: '已结算' },
  { orderNo: '2356565654', orderType: '普通订单', amount: 7936.37, orderDate: '2025-11-27', orderStatus: '运输中', billStatus: '未对账', invoiceStatus: '已付款', settleStatus: '未结算' },
  { orderNo: '2323412123', orderType: '协议订单', amount: 3931.45, orderDate: '2025-12-11', orderStatus: '待发货', billStatus: '未对账', invoiceStatus: '待开票', settleStatus: '未结算' },
  { orderNo: '2323232323', orderType: '普通订单', amount: 6132.75, orderDate: '2025-11-27', orderStatus: '已收货', billStatus: '已对账', invoiceStatus: '已开票', settleStatus: '已结算' },
  { orderNo: '2356565654', orderType: '普通订单', amount: 3189.56, orderDate: '2025-11-25', orderStatus: '已收货', billStatus: '已对账', invoiceStatus: '已开票', settleStatus: '已结算' },
  { orderNo: '2323232323', orderType: '协议订单', amount: 993.66, orderDate: '2025-11-20', orderStatus: '运输中', billStatus: '未对账', invoiceStatus: '已付款', settleStatus: '未结算' },
  { orderNo: '2323412123', orderType: '普通订单', amount: 2763.35, orderDate: '2025-11-17', orderStatus: '待发货', billStatus: '未对账', invoiceStatus: '待开票', settleStatus: '未结算' },
  { orderNo: '2323232323', orderType: '协议订单', amount: 9286.45, orderDate: '2025-12-05', orderStatus: '已收货', billStatus: '已对账', invoiceStatus: '已开票', settleStatus: '已结算' }
])
</script>
