admin-web/src/modules/finance/pages/FinanceCustomerArapView.vue

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, Eye, FileCheck2, FilePlus2, Link2 } from '@lucide/vue'
import { ElMessage } from 'element-plus'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import AdminPage from '@/shared/components/AdminPage.vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import AppDialog from '@/shared/components/AppDialog.vue'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
import FormSection from '@/shared/components/FormSection.vue'
import ListPageLayout from '@/shared/components/ListPageLayout.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
import { createReconciliationStatement, getFinanceFeeSource, listFinanceFeePool, reviewFinanceFeeSource, updateFinanceFeeSourceSettlementInclusion } from '../api/finance'
import { financeArapStatusOptions, financeDirectionLabel, financeOperationActionLabel, financeOperationResultLabel, financeSourceTypeLabel, financeStatusLabel } from '../status'
import type { FinanceFeeSourceDetail } from '../types'

interface ArapRow {
  id: string
  feeSourceId: string | null
  customerId: string
  customerName: string
  direction: 'RECEIVABLE' | 'PAYABLE'
  documentNo: string
  sourceType: string
  sourceId: string
  orderId: string
  inboundId: string
  containerId: string
  feeName: string
  amount: number
  status: string
  occurredAt: string
  businessDate: string
  reviewStatus: string
  settlementIncluded: boolean | null
  statementGenerated: boolean | null
}

const access = useAccessPreviewStore()
const route = useRoute()
const router = useRouter()
const customers = ref<PlatformTenantResource[]>([])
const customersLoading = ref(false)
const customersError = ref<ApiErrorDetails | null>(null)
const filters = ref<QueryModel>({ customerId: '', direction: '', reviewStatus: '', settlementIncluded: '', statementGenerated: '', businessRange: [], keyword: '' })
const allRows = ref<ArapRow[]>([])
const loading = ref(false)
const loadError = ref<ApiErrorDetails | null>(null)
const detailOpen = ref(false)
const selected = ref<ArapRow | null>(null)
const detail = ref<FinanceFeeSourceDetail | null>(null)
const detailLoading = ref(false)
const detailError = ref<ApiErrorDetails | null>(null)
const reviewOpen = ref(false)
const reviewSaving = ref(false)
const reviewError = ref<ApiErrorDetails | null>(null)
const reviewForm = reactive<{ action: 'APPROVE' | 'REJECT'; reason: string }>({ action: 'APPROVE', reason: '' })
const inclusionOpen = ref(false)
const inclusionSaving = ref(false)
const inclusionError = ref<ApiErrorDetails | null>(null)
const inclusionForm = reactive({ included: true, reason: '' })
const generationOpen = ref(false)
const generationSaving = ref(false)
const generationError = ref<ApiErrorDetails | null>(null)
const generationForm = reactive<{ mode: 'BY_CUTOFF' | 'SELECTED'; customerId: string; period: string[]; cutoffDate: string; remark: string }>({ mode: 'SELECTED', customerId: '', period: [], cutoffDate: '', remark: '' })
const selectedRows = ref<ArapRow[]>([])
const page = ref(1)
const pageSize = ref(20)

const canView = computed(() => access.can('platform:finance:customer-arap:list'))
const canListCustomers = computed(() => canView.value || access.can('platform:customer:list'))
const canViewSource = computed(() => access.can('platform:finance:customer-arap:list'))
const canReviewSource = computed(() => access.can('platform:finance:fee-source:review'))
const canSettleSource = computed(() => access.can('platform:finance:fee-source:settlement'))
const canCreateStatement = computed(() => access.can('platform:finance:reconciliation:create'))
const stateError = computed(() => customersError.value || loadError.value)
const activeCustomers = computed(() => customers.value.filter((item) => item.status === 'ACTIVE'))
const queryFields = computed<QueryField[]>(() => [
  { key: 'customerId', type: 'select', label: '客户名称', width: 260, placeholder: '全部客户', props: { 'aria-label': '客户名称', filterable: true, clearable: true, loading: customersLoading.value }, options: activeCustomers.value.map((item) => ({ label: item.tenantName, value: String(item.id) })) },
  { key: 'direction', type: 'select', label: '收付方向', width: 140, placeholder: '全部', options: [{ label: '应收', value: 'RECEIVABLE' }, { label: '应付', value: 'PAYABLE' }] },
  { key: 'reviewStatus', type: 'select', label: '审核状态', width: 150, placeholder: '全部状态', options: financeArapStatusOptions },
  { key: 'settlementIncluded', type: 'select', label: '参与结算', width: 140, placeholder: '全部', options: [{ label: '参与', value: 'true' }, { label: '不参与', value: 'false' }] },
  { key: 'statementGenerated', type: 'select', label: '已生成对账单', width: 160, placeholder: '全部', options: [{ label: '已生成', value: 'true' }, { label: '未生成', value: 'false' }] },
  { key: 'businessRange', type: 'daterange', label: '业务日期', width: 280 },
  { key: 'keyword', type: 'input', label: '关键词', width: 220, placeholder: '单号/费用/来源ID', props: { 'aria-label': '关键词' } },
])
const columns: DataTableColumn[] = [
  { key: 'actions', label: '操作', width: 260, fixed: 'left', slotName: 'actions' }, { key: 'selection', type: 'selection', width: 48, fixed: 'left', selectable: (row: ArapRow) => row.direction === 'RECEIVABLE' && Boolean(row.feeSourceId) }, { key: 'direction', label: '收付方向', width: 100, slotName: 'direction' },
  { key: 'customerName', label: '客户', minWidth: 180, slotName: 'customerName' }, { key: 'documentNo', label: '费用单据', minWidth: 170 }, { key: 'sourceType', label: '来源类型', width: 120, slotName: 'sourceType' },
  { key: 'sourceId', label: '来源追溯', minWidth: 200 }, { key: 'feeName', label: '费用项目', minWidth: 150 }, { key: 'amount', label: '金额(CNY)', width: 130 },
  { key: 'reviewStatus', label: '审核状态', width: 120, slotName: 'status' }, { key: 'settlementIncluded', label: '参与结算', width: 110, slotName: 'included' }, { key: 'statementGenerated', label: '已生成对账单', width: 140, slotName: 'generated' }, { key: 'businessDate', label: '业务发生日', width: 170, slotName: 'businessDate' },
]
function customerName(customerId: string, snapshot?: string) {
  const masterName = customers.value.find((item) => String(item.id) === String(customerId))?.tenantName?.trim()
  const candidate = String(snapshot || '').trim()
  const placeholder = [String(customerId), `客户 ${customerId}`, `客户${customerId}`].includes(candidate)
  return masterName || (candidate && !placeholder ? candidate : '客户名称暂不可用')
}
function sourceTypeDisplay(value: unknown) {
  const code = String(value || '').trim().toUpperCase()
  const labels: Record<string, string> = {
    INBOUND_FEE: '入库费用', ORDER_FEE: '订单费用', CONTAINER_COST: '整柜成本', CONTAINER_FEE: '柜次费用',
    MANUAL_COST: '人工成本', STORAGE_FEE: '仓储费用',
  }
  return labels[code] || (code ? '其他费用来源' : '来源类型暂不可用')
}
function feeDocumentLabel(direction: ArapRow['direction'], feeName: unknown) {
  const prefix = direction === 'RECEIVABLE' ? '应收费用' : '应付费用'
  const name = displayFeeName(feeName)
  return name ? `${prefix} · ${name}` : prefix
}
function displayFeeName(value: unknown) {
  const name = String(value || '').trim()
  if (!name) return ''
  if (/^ADMIN-API-\d+-整柜成本$/i.test(name)) return '整柜成本'
  return name
}
function sourceSummary(sourceType: unknown, orderId: unknown, inboundId: unknown, containerId: unknown) {
  const relations = [inboundId ? '关联入库单' : '', orderId ? '关联订单' : '', containerId ? '关联柜次' : ''].filter(Boolean)
  const type = sourceTypeDisplay(sourceType)
  return relations.length ? `${type} · ${relations.join('、')}` : type
}
function formatDateTime(value: unknown) {
  const raw = String(value || '').trim()
  if (!raw) return '时间暂不可用'
  const date = new Date(raw)
  return Number.isNaN(date.getTime()) ? '时间暂不可用' : date.toLocaleString('zh-CN', { hour12: false })
}
function displayOperator(value: unknown) {
  const operator = String(value || '').trim()
  if (!operator) return '名称数据缺失'
  return /^(?:operator-)?\d+$/i.test(operator) ? '名称数据缺失' : operator
}
const filteredRows = computed(() => {
  const keyword = String(filters.value.keyword || '').trim().toLowerCase(); const direction = String(filters.value.direction || ''); const reviewStatus = String(filters.value.reviewStatus || '')
  const included = String(filters.value.settlementIncluded || ''); const generated = String(filters.value.statementGenerated || ''); const range = Array.isArray(filters.value.businessRange) ? filters.value.businessRange.map(String) : []
  return allRows.value.filter((row) => (!direction || row.direction === direction) && (!reviewStatus || row.reviewStatus === reviewStatus) && (!included || String(row.settlementIncluded) === included) && (!generated || String(row.statementGenerated) === generated) && (!range[0] || row.businessDate >= range[0]) && (!range[1] || row.businessDate <= range[1]) && (!keyword || [row.documentNo, row.sourceId, row.feeName].some((value) => value.toLowerCase().includes(keyword))))
})
const rows = computed(() => filteredRows.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
const selectedAmount = computed(() => selectedRows.value.reduce((sum, row) => sum + row.amount, 0))

async function loadCustomers() {
  if (!canListCustomers.value) return
  customersLoading.value = true; customersError.value = null
  try { const records: PlatformTenantResource[] = []; let currentPage = 1; let pages = 1; do { const result = await listPlatformTenants({ page: currentPage, size: 200, status: 'ACTIVE' }); records.push(...result.records); pages = Math.max(1, result.pages); currentPage += 1 } while (currentPage <= pages); customers.value = records }
  catch (error) { customersError.value = getApiErrorDetails(error, '客户列表加载失败') }
  finally { customersLoading.value = false }
}
async function load(model: QueryModel = filters.value) {
  Object.assign(filters.value, model); page.value = 1; allRows.value = []; loadError.value = null
  const customerId = String(filters.value.customerId || '').trim()
  loading.value = true
  try {
    const direction = String(filters.value.direction || '') as 'RECEIVABLE' | 'PAYABLE' | ''
    const items = await listFinanceFeePool(customerId || undefined, direction || undefined)
    allRows.value = items.map((item): ArapRow => ({ id: item.poolItemId, feeSourceId: item.feeSourceId, customerId: item.customerId, customerName: customerName(item.customerId, item.customerName), direction: item.direction, documentNo: feeDocumentLabel(item.direction, item.feeItemName), sourceType: item.sourceType, sourceId: sourceSummary(item.sourceType, item.orderId, item.inboundId, item.containerId), orderId: item.orderId || '', inboundId: item.inboundId || '', containerId: item.containerId || '', feeName: displayFeeName(item.feeItemName), amount: item.amount, status: item.status, occurredAt: item.createdAt, businessDate: item.createdAt, reviewStatus: item.status, settlementIncluded: null, statementGenerated: null }))
  } catch (error) { loadError.value = getApiErrorDetails(error, '客户应收应付加载失败，请重试') }
  finally { loading.value = false }
}
async function loadDetail(row: ArapRow) {
  detailLoading.value = true; detailError.value = null; detail.value = null
  if (!row.feeSourceId) { detailError.value = { message: '该手工成本没有可审核的费用来源详情' }; detailLoading.value = false; return null }
  try { detail.value = await getFinanceFeeSource(row.feeSourceId); return detail.value }
  catch (error) { detailError.value = getApiErrorDetails(error, '费用来源详情加载失败，请重试'); return null }
  finally { detailLoading.value = false }
}
async function openDetail(row: Record<string, unknown>) {
  const target = row as unknown as ArapRow
  if (!target.feeSourceId) return
  await router.push({ name: 'finance-customer-arap-detail', params: { feeSourceId: target.feeSourceId } })
}
async function openReview(row: Record<string, unknown>) {
  const target = row as unknown as ArapRow; selected.value = target
  const loaded = await loadDetail(target)
  if (!loaded) { detailOpen.value = true; return }
  Object.assign(reviewForm, { action: 'APPROVE', reason: '' }); reviewError.value = null; reviewOpen.value = true
}
async function submitReview() {
  if (!detail.value) return
  if (reviewForm.action === 'REJECT' && !reviewForm.reason.trim()) { ElMessage.warning('请填写驳回原因'); return }
  reviewSaving.value = true; reviewError.value = null
  try {
    detail.value = await reviewFinanceFeeSource(detail.value.feeSourceId, { action: reviewForm.action, reason: reviewForm.reason.trim() || undefined, expectedVersion: detail.value.operationVersion })
    reviewOpen.value = false; ElMessage.success(reviewForm.action === 'APPROVE' ? '费用来源已审核通过' : '费用来源已驳回'); await load()
  } catch (error) { reviewError.value = getApiErrorDetails(error, '费用来源审核失败，请重试') }
  finally { reviewSaving.value = false }
}
async function openInclusion(row: Record<string, unknown>) {
  const target = row as unknown as ArapRow; selected.value = target
  const loaded = await loadDetail(target)
  if (!loaded) { detailOpen.value = true; return }
  Object.assign(inclusionForm, { included: !loaded.settlementIncluded, reason: '' }); inclusionError.value = null; inclusionOpen.value = true
}
async function submitInclusion() {
  if (!detail.value) return
  if (!inclusionForm.reason.trim()) { ElMessage.warning('请填写调整原因'); return }
  inclusionSaving.value = true; inclusionError.value = null
  try {
    detail.value = await updateFinanceFeeSourceSettlementInclusion(detail.value.feeSourceId, { included: inclusionForm.included, reason: inclusionForm.reason.trim(), expectedVersion: detail.value.operationVersion })
    inclusionOpen.value = false; ElMessage.success(inclusionForm.included ? '已纳入结算' : '已排除结算'); await load()
  } catch (error) { inclusionError.value = getApiErrorDetails(error, '参与结算状态更新失败，请重试') }
  finally { inclusionSaving.value = false }
}
function statusLabel(status: string) { return financeStatusLabel(status) }
function money(value: unknown) { return Number(value || 0).toFixed(2) }
function onSelectionChange(rows: ArapRow[]) { selectedRows.value = rows }
function openGeneration(mode: 'BY_CUTOFF' | 'SELECTED') {
  generationForm.mode = mode
  generationForm.customerId = ''
  generationForm.period = Array.isArray(filters.value.businessRange) ? filters.value.businessRange.map(String) : []
  generationForm.cutoffDate = generationForm.period[1] || ''
  generationForm.remark = ''
  generationError.value = null
  generationOpen.value = true
}
async function submitGeneration() {
  const eligible = selectedRows.value.filter((row) => row.feeSourceId && row.direction === 'RECEIVABLE' && row.reviewStatus === 'APPROVED' && row.settlementIncluded === true && row.statementGenerated === false && row.customerId === generationForm.customerId)
  const period = generationForm.period
  if (!generationForm.customerId || !period[0] || !period[1]) { ElMessage.warning('请选择客户和业务期间'); return }
  if (generationForm.mode === 'SELECTED' && !eligible.length) { ElMessage.warning('请选择审核通过、参与结算且未出账的应收费用'); return }
  generationSaving.value = true; generationError.value = null
  try { await createReconciliationStatement({ customerId: generationForm.customerId, currency: 'CNY', generationMode: generationForm.mode, feeSourceIds: generationForm.mode === 'SELECTED' ? eligible.map((row) => row.feeSourceId as string) : undefined, periodStart: period[0], periodEnd: period[1], remark: generationForm.remark.trim() }); generationOpen.value = false; selectedRows.value = []; ElMessage.success('对账单草稿已生成'); await load() } catch (error) { generationError.value = getApiErrorDetails(error, '对账单生成失败，请重试') } finally { generationSaving.value = false }
}
async function closeDetail() { detailOpen.value = false; selected.value = null; detail.value = null; await router.push({ name: 'finance-customer-arap' }) }
async function restoreFeeSourceDetail(feeSourceId: string) {
  detailOpen.value = true; detailLoading.value = true; detailError.value = null; detail.value = null
  try {
    detail.value = await getFinanceFeeSource(feeSourceId)
    selected.value = { id: detail.value.poolItemId, feeSourceId, customerId: detail.value.customerId, customerName: customerName(detail.value.customerId, detail.value.customerName), direction: detail.value.direction, documentNo: feeDocumentLabel(detail.value.direction, detail.value.feeItemName), sourceType: detail.value.sourceType, sourceId: detail.value.sourceId, orderId: detail.value.orderId || '', inboundId: detail.value.inboundId || '', containerId: detail.value.containerId || '', feeName: displayFeeName(detail.value.feeItemName), amount: detail.value.amount, status: detail.value.status, occurredAt: detail.value.createdAt, businessDate: detail.value.businessDate, reviewStatus: detail.value.reviewStatus, settlementIncluded: detail.value.settlementIncluded, statementGenerated: detail.value.statementGenerated }
  } catch (error) { detailError.value = getApiErrorDetails(error, '费用来源详情加载失败，请重试') }
  finally { detailLoading.value = false }
}

onMounted(async () => {
  const feeSourceId = String(route.params.feeSourceId || '')
  if (route.name === 'finance-customer-arap-detail' && feeSourceId) { if (canListCustomers.value) await loadCustomers(); await restoreFeeSourceDetail(feeSourceId); return }
  if (canListCustomers.value) await loadCustomers()
  await load()
})
watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSourceId], previous) => {
  if (!previous) return
  if (name === 'finance-customer-arap-detail' && feeSourceId) void restoreFeeSourceDetail(String(feeSourceId))
  else { detailOpen.value = false; selected.value = null; detail.value = null; void load() }
})
</script>

<template>
  <AdminPage as="div" class="finance-arap-page" spacing="normal">
      <el-result v-if="!canView" icon="warning" title="无权访问客户应收应付" sub-title="请联系管理员开通账单查看权限" />
    <ListPageLayout v-else-if="!detailOpen" aria-label="客户应收应付">
      <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="客户应收应付筛选" :fields="queryFields" preference-key="finance-customer-arap-query" @search="load" /></template>
      <template v-if="stateError" #state><LoadErrorState title="客户应收应付加载失败" :message="stateError.message" :loading="customersLoading || loading" @retry="customersError ? loadCustomers() : load()"><template #details><ApiErrorMeta :details="stateError" /></template></LoadErrorState></template>
      <section v-if="!customersError && !loadError" class="surface-panel table-panel">
        <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="filteredRows.length" preference-key="finance-customer-arap-table" aria-label="客户应收应付列表" row-key="id" empty-text="暂无客户应收应付数据" @selection-change="onSelectionChange">
        <template #toolbar-actions><div v-if="canCreateStatement" class="generation-actions"><el-button @click="openGeneration('BY_CUTOFF')"><FilePlus2 :size="16" />按截止日期生成</el-button><el-button type="primary" :disabled="!selectedRows.length" @click="openGeneration('SELECTED')"><FilePlus2 :size="16" />按勾选生成</el-button></div></template>
        <template #actions="{ row }"><div class="row-actions"><template v-if="row.feeSourceId"><el-button v-if="canViewSource" link type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button><el-button v-if="canReviewSource" link type="primary" @click="openReview(row)"><FileCheck2 :size="15" />审核</el-button><el-button v-if="canSettleSource" link type="primary" @click="openInclusion(row)"><Link2 :size="15" />结算</el-button></template><span v-else class="muted-action">手工成本</span></div></template>
        <template #customerName="{ row }">{{ customerName(row.customerId, row.customerName) }}</template><template #direction="{ row }"><el-tag :type="row.direction === 'RECEIVABLE' ? 'success' : row.direction === 'PAYABLE' ? 'warning' : 'info'">{{ financeDirectionLabel(row.direction) }}</el-tag></template>
        <template #documentNo="{ row }">{{ feeDocumentLabel(row.direction, row.feeName) }}</template><template #sourceType="{ row }">{{ sourceTypeDisplay(row.sourceType) }}</template><template #sourceId="{ row }">{{ row.sourceId }}</template>
        <template #status="{ row }"><el-tag :type="row.reviewStatus === 'APPROVED' ? 'success' : row.reviewStatus === 'REJECTED' ? 'danger' : 'warning'">{{ statusLabel(row.reviewStatus) }}</el-tag></template>
        <template #included="{ row }">{{ row.settlementIncluded == null ? '待加载' : row.settlementIncluded ? '参与' : '不参与' }}</template>
        <template #generated="{ row }">{{ row.statementGenerated == null ? '待加载' : row.statementGenerated ? '已生成' : '未生成' }}</template>
        <template #businessDate="{ row }">{{ formatDateTime(row.businessDate) }}</template><template #pagination-left>已选 {{ selectedRows.length }} 笔 · 应收金额 {{ money(selectedAmount) }} CNY</template>
      </DataTable></section>
    </ListPageLayout>
    <AdminPage v-else as="div" class="finance-arap-detail" spacing="normal">
      <section class="surface-panel finance-arap-detail__surface">
      <DetailPageLayout class="finance-arap-detail__layout" aria-label="费用来源详情">
        <template #header><div class="detail-heading"><el-button @click="closeDetail"><ArrowLeft :size="16" />返回客户应收应付</el-button><div class="detail-title"><h2>费用来源详情</h2><p>{{ selected?.documentNo || '费用来源' }} · {{ selected ? customerName(selected.customerId, selected.customerName) : '客户名称暂不可用' }}</p></div><div class="detail-actions"><el-button v-if="canReviewSource && selected" @click="openReview(selected as unknown as Record<string, unknown>)"><FileCheck2 :size="16" />审核</el-button><el-button v-if="canSettleSource && selected" @click="openInclusion(selected as unknown as Record<string, unknown>)"><Link2 :size="16" />参与结算</el-button></div></div></template>
        <template v-if="detail" #summary><section class="arap-metrics" aria-label="费用来源概览"><div class="arap-metric is-amount"><span>费用金额</span><strong>{{ money(detail.amount) }}</strong><small>CNY</small></div><div class="arap-metric"><span>收付方向</span><strong>{{ financeDirectionLabel(detail.direction) }}</strong></div><div class="arap-metric"><span>参与结算</span><strong>{{ detail.settlementIncluded ? '是' : '否' }}</strong></div><div class="arap-metric"><span>审核状态</span><strong>{{ statusLabel(detail.reviewStatus) }}</strong></div></section></template>
        <LoadErrorState v-if="detailError" title="费用来源详情加载失败" :message="detailError.message" :loading="detailLoading" @retry="selected && loadDetail(selected)"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
        <template v-else-if="detail"><div class="arap-detail-grid"><FormSection class="arap-information" title="单据信息" :bordered="false"><el-descriptions :column="2" class="arap-detail"><el-descriptions-item label="客户">{{ customerName(detail.customerId, detail.customerName || selected?.customerName) }}</el-descriptions-item><el-descriptions-item label="费用项目">{{ displayFeeName(detail.feeItemName) }}</el-descriptions-item><el-descriptions-item label="来源类型">{{ sourceTypeDisplay(detail.sourceType) }}</el-descriptions-item><el-descriptions-item label="关联单据">{{ detail.inboundCode || detail.containerNo || '—' }}</el-descriptions-item><el-descriptions-item label="业务日期" :span="2">{{ formatDateTime(detail.businessDate) }}</el-descriptions-item></el-descriptions></FormSection><FormSection class="arap-settlement" title="审核与结算" :bordered="false"><el-descriptions :column="1" class="arap-detail"><el-descriptions-item label="费用状态">{{ statusLabel(detail.sourceStatus) }}</el-descriptions-item><el-descriptions-item label="已生成对账单">{{ detail.statementGenerated ? '是' : '否' }}</el-descriptions-item><el-descriptions-item label="审核原因">{{ detail.reviewReason || '-' }}</el-descriptions-item><el-descriptions-item label="结算调整原因">{{ detail.settlementReason || '-' }}</el-descriptions-item></el-descriptions></FormSection></div><FormSection class="operation-log" title="操作记录" :bordered="false"><el-timeline v-if="detail.operationLogs?.length"><el-timeline-item v-for="(log, index) in detail.operationLogs" :key="`${log.occurredAt}-${index}`" :timestamp="formatDateTime(log.occurredAt)">{{ financeOperationActionLabel(log.action) }} · {{ displayOperator(log.operatorName) }}<small>{{ log.remark || financeOperationResultLabel(log.result) }}</small></el-timeline-item></el-timeline><el-empty v-else description="暂无操作记录" /></FormSection></template>
      </DetailPageLayout>
      </section>
    </AdminPage>
    <AppDialog v-model="reviewOpen" title="费用来源审核" confirm-text="提交审核" :confirm-loading="reviewSaving" @confirm="submitReview">
      <el-alert v-if="reviewError" type="error" :closable="false"><ApiErrorMeta :details="reviewError" /></el-alert>
      <el-form label-position="top"><el-form-item label="审核结论"><el-segmented v-model="reviewForm.action" :options="[{ label: '通过', value: 'APPROVE' }, { label: '驳回', value: 'REJECT' }]" /></el-form-item><el-form-item :label="reviewForm.action === 'REJECT' ? '驳回原因' : '审核说明（可选）'"><el-input v-model="reviewForm.reason" type="textarea" :rows="3" maxlength="500" :placeholder="reviewForm.action === 'REJECT' ? '请填写驳回原因' : '请输入审核说明（可选）'" show-word-limit /></el-form-item></el-form>
    </AppDialog>
    <AppDialog v-model="inclusionOpen" title="参与结算设置" confirm-text="保存设置" :confirm-loading="inclusionSaving" @confirm="submitInclusion">
      <el-alert v-if="inclusionError" type="error" :closable="false"><ApiErrorMeta :details="inclusionError" /></el-alert>
      <el-form label-position="top"><el-form-item label="结算状态"><el-switch v-model="inclusionForm.included" active-text="参与结算" inactive-text="排除结算" /></el-form-item><el-form-item label="调整原因"><el-input v-model="inclusionForm.reason" type="textarea" :rows="3" maxlength="500" placeholder="请说明参与或排除结算的原因" show-word-limit /></el-form-item></el-form>
    </AppDialog>
    <AppDialog v-model="generationOpen" :title="generationForm.mode === 'BY_CUTOFF' ? '按截止日期生成对账单' : '按勾选生成对账单'" confirm-text="生成草稿" :confirm-loading="generationSaving" @confirm="submitGeneration">
      <el-alert v-if="generationError" type="error" :closable="false"><ApiErrorMeta :details="generationError" /></el-alert>
      <el-form label-position="top"><el-form-item label="客户"><el-select v-model="generationForm.customerId" filterable placeholder="请选择客户" style="width:100%"><el-option v-for="customer in activeCustomers" :key="String(customer.id)" :label="customer.tenantName" :value="String(customer.id)" /></el-select></el-form-item><el-form-item label="业务期间"><el-date-picker v-model="generationForm.period" type="daterange" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="截止日期" style="width:100%" /></el-form-item><el-form-item v-if="generationForm.mode === 'SELECTED'" label="已选费用"><span>{{ selectedRows.length }} 笔，合计 {{ money(selectedAmount) }} CNY</span></el-form-item><el-form-item label="备注"><el-input v-model="generationForm.remark" type="textarea" :rows="3" maxlength="500" show-word-limit /></el-form-item></el-form>
    </AppDialog>
  </AdminPage>
</template>

<style scoped>
.finance-arap-page {
  min-width: 0;
}

.finance-arap-detail {
  width: 100%;
  min-width: 0;
}

.finance-arap-detail__surface {
  width: min(100%, 1920px);
  margin: 0 auto;
  overflow: hidden;
}

.finance-arap-detail__layout {
  width: 100%;
  margin: 0 auto;
}

.finance-arap-detail__layout :deep(.detail-page-layout) {
  gap: 0;
}

.finance-arap-detail__layout :deep(.detail-page-layout__header) {
  min-height: 64px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cc-border, #e3e8ef);
}

.finance-arap-detail__layout :deep(.detail-page-layout__summary) {
  padding: 10px 16px 0;
}

.finance-arap-detail__layout :deep(.detail-page-layout__content) {
  padding: 0 16px 12px;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.row-actions .el-button {
  margin-left: 0;
}

.generation-actions,
.detail-heading,
.detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-heading {
  min-width: 0;
  align-items: flex-start;
}

.detail-title {
  min-width: 0;
}

.detail-heading h2 {
  margin: 0;
  font-size: 18px;
}

.detail-heading p {
  overflow: hidden;
  margin: 3px 0 0;
  color: var(--cc-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-actions {
  margin-left: auto;
}

.muted-action {
  color: var(--cc-muted);
}

.arap-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--cc-border, #e3e8ef);
}

.arap-metric {
  min-width: 0;
  padding: 0 12px;
}

.arap-metric:first-child {
  padding-left: 0;
}

.arap-metric + .arap-metric {
  border-left: 1px solid var(--cc-border, #e3e8ef);
}

.arap-metric span {
  display: block;
  color: var(--cc-muted);
  font-size: 12px;
}

.arap-metric strong {
  display: inline-block;
  margin-top: 6px;
  color: var(--cc-text);
  font-size: 20px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.arap-metric small {
  margin-left: 6px;
  color: var(--cc-muted);
  font-size: 11px;
}

.arap-metric.is-amount strong {
  color: #4f46e5;
}

.arap-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 16px;
  border-bottom: 1px solid var(--cc-border, #e3e8ef);
}

.arap-information,
.arap-settlement,
.operation-log {
  padding: 10px 0;
}

.arap-settlement {
  padding-left: 16px;
  border-left: 1px solid var(--cc-border, #e3e8ef);
}

.operation-log {
  min-height: 150px;
}

:deep(.arap-detail .el-descriptions__content) {
  min-width: 0;
  overflow-wrap: anywhere;
}

:deep(.arap-detail .el-descriptions__label) {
  width: 112px;
  color: var(--cc-muted);
}

.operation-log :deep(.el-empty) {
  padding: 10px 0 2px;
}

.operation-log :deep(.el-empty__image) {
  display: none;
}

.operation-log small {
  display: block;
  margin-top: 4px;
  color: var(--cc-muted);
}

@media (max-width: 1080px) {
  .finance-arap-detail__surface {
    width: 100%;
  }

  .arap-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arap-metric:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .arap-detail-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .arap-settlement {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--cc-border, #e3e8ef);
  }
}

@media (max-width: 720px) {
  .detail-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-actions {
    margin-left: 0;
  }

  .arap-metrics {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .arap-metric,
  .arap-metric:first-child,
  .arap-metric:nth-child(3) {
    padding-left: 0;
  }

  .arap-metric + .arap-metric {
    border-left: 0;
  }

  :deep(.arap-detail .el-descriptions__body .el-descriptions__table) {
    table-layout: fixed;
  }
}

@media (max-width: 480px) {
  :deep(.arap-detail .el-descriptions__cell) {
    display: block;
    width: 100%;
  }
}
</style>