<template>
  <div class="page-container">
    <PageTitle title="对账单管理" />
    
    <SearchBar :form="searchForm" :filters="filters" placeholder="对账编号" />

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="billNo" label="对账编号" min-width="130" align="center" />
      <el-table-column prop="billDate" label="对账日期" min-width="110" align="center" />
      <el-table-column prop="amount" label="对账单金额" min-width="110" align="center">
        <template #default="{ row }">¥{{ row.amount.toFixed(2) }}</template>
      </el-table-column>
      <el-table-column prop="billStatus" label="对账状态" min-width="90" align="center">
        <template #default="{ row }">{{ row.billStatus === '1' ? '已对账' : '未对账' }}</template>
      </el-table-column>
      <el-table-column prop="invoiceStatus" label="开票状态" min-width="90" align="center">
        <template #default="{ row }">
          <span :style="{ color: row.invoiceStatus === '1' ? '#e60012' : '' }">
            {{ row.invoiceStatus === '1' ? '已开票' : '-' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="payStatus" label="支付状态" min-width="90" align="center">
        <template #default="{ row }">{{ row.payStatus === '1' ? '已支付' : '-' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="handleView(row)">查看</el-button>
          <el-button type="danger" link size="small" @click="handleConfirm(row)" :disabled="row.billStatus === '1'">确认</el-button>
        </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, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { PageTitle, SearchBar, TablePagination } from '@/components'
import { BILL_STATUS_OPTIONS, INVOICE_STATUS_OPTIONS, PAY_STATUS_OPTIONS } from '@/constants/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 rawData = ref([
  { id: 1, billNo: '2323232323', billDate: '2025-11-22', amount: 2115.97, billStatus: '1', invoiceStatus: '1', payStatus: '1' },
  { id: 2, billNo: '2323412123', billDate: '2025-12-09', amount: 4476.12, billStatus: '1', invoiceStatus: '1', payStatus: '1' },
  { id: 3, billNo: '4566784543', billDate: '2025-11-21', amount: 7751.34, billStatus: '', invoiceStatus: '1', payStatus: '1' },
  { id: 4, billNo: '2356565654', billDate: '2025-11-27', amount: 7936.37, billStatus: '1', invoiceStatus: '1', payStatus: '1' },
  { id: 5, billNo: '2323412123', billDate: '2025-12-11', amount: 3931.45, billStatus: '', invoiceStatus: '1', payStatus: '1' },
  { id: 6, billNo: '2323232323', billDate: '2025-11-27', amount: 6132.75, billStatus: '1', invoiceStatus: '1', payStatus: '1' },
  { id: 7, billNo: '2356565654', billDate: '2025-11-25', amount: 3189.56, billStatus: '1', invoiceStatus: '1', payStatus: '1' },
  { id: 8, billNo: '2323232323', billDate: '2025-11-20', amount: 993.66, billStatus: '', invoiceStatus: '1', payStatus: '1' },
  { id: 9, billNo: '2323412123', billDate: '2025-11-17', amount: 2763.35, billStatus: '1', invoiceStatus: '1', payStatus: '1' },
  { id: 10, billNo: '2323232323', billDate: '2025-12-05', amount: 9286.45, billStatus: '', invoiceStatus: '1', payStatus: '0' }
])

// 过滤后的数据
const tableData = computed(() => {
  return rawData.value.filter(item => {
    // 按对账编号过滤
    if (searchForm.keyword && !item.billNo.includes(searchForm.keyword)) {
      return false
    }
    // 按对账状态过滤
    if (searchForm.billStatus && item.billStatus !== searchForm.billStatus) {
      return false
    }
    // 按开票状态过滤
    if (searchForm.invoiceStatus && item.invoiceStatus !== searchForm.invoiceStatus) {
      return false
    }
    // 按支付状态过滤
    if (searchForm.payStatus && item.payStatus !== searchForm.payStatus) {
      return false
    }
    return true
  })
})

const handleView = (row: any) => {
  ElMessage.info(`查看对账单：${row.billNo}`)
}

const handleConfirm = (row: any) => {
  ElMessageBox.confirm(`确定要确认对账单"${row.billNo}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    row.billStatus = '1'
    ElMessage.success('确认成功')
  })
}
</script>
