<template>
  <ADetailPanel
    ref="detailPanel"
    v-bind="detailPanelProps">
    <template #default="detailData">
      <ElDescriptions border title="对账单">
        <ElDescriptionsItem label="客户名称">
          {{ detailData.customerId }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="企业名称">
          {{ detailData.orgId }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="账户类型">
          {{ detailData.accountType }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="账期">
          {{ detailData.billPeriod }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="账单开始时间">
          {{ detailData.startTime }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="账单结束时间">
          {{ detailData.endTime }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="订单数">
          {{ detailData.orderCount }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="总车数">
          {{ detailData.carCount }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="总质量">
          {{ detailData.totalWeight }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="优惠金额">
          {{ detailData.discountMoney }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="账单金额">
          {{ detailData.totalMoney }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="备注">
          {{ detailData.memo }}
        </ElDescriptionsItem>
      </ElDescriptions>
    </template>
  </ADetailPanel>
</template>

<script lang="ts" setup>
import BillApi from '@/pages/fin/bill/bill-api.ts'
import ADetailPanel, {
  type ADetailPanelInstance,
  buildDetailPanelProps,
} from '@/components/a-detail-panel/ADetailPanel.tsx'

const detailPanelIns = useTemplateRef<ADetailPanelInstance<BillTypes.SearchBillResult>>('detailPanel')
const detailPanelProps = buildDetailPanelProps<BillTypes.SearchBillResult>({
  title: '对账单详情',
  detailsLoader: BillApi.detail,
})

defineExpose({
  open(data: BillTypes.SearchBillResult) {
    detailPanelIns.value?.open(data)
  },
})
</script>
