<template>
  <ADetailPanel
    ref="detailPanel"
    v-bind="detailPanelProps">
    <template #default="detailData">
      <ElDescriptions border title="资金流水">
        <ElDescriptionsItem label="订单编号">
          {{ detailData.orderSn }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="车次">
          {{ detailData.trainNum }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="变动前余额">
          {{ detailData.beforeBalance }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="变动金额；有正负">
          {{ detailData.delta }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="变动后余额">
          {{ detailData.afterBalance }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="变动类型">
          {{ detailData.moneyChangeCategoryTxt }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="附件地址">
          {{ detailData.fileUrl }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="备注">
          {{ detailData.memo }}
        </ElDescriptionsItem>
      </ElDescriptions>
    </template>
  </ADetailPanel>
</template>

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

const detailPanelIns = useTemplateRef<ADetailPanelInstance<MoneyFlowTypes.SearchMoneyFlowResult>>('detailPanel')
const detailPanelProps = buildDetailPanelProps<MoneyFlowTypes.SearchMoneyFlowResult>({
  title: '资金流水详情',
  detailsLoader: MoneyFlowApi.detail,
})

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

