<template>
  <ADetailPanel
    ref="detailPanel"
    v-bind="detailPanelProps">
    <template #default="detailData">
      <ElDescriptions border title="资金账户表">
        <ElDescriptionsItem label="账户编号">
          {{ detailData.sn }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="账户类型">
          {{ detailData.accountTypeTxt }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="客户名称">
          {{ detailData.customerId }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="企业名称">
          {{ detailData.orgId }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="营收余额">
          {{ detailData.revenue }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="充值余额">
          {{ detailData.recharge }}
        </ElDescriptionsItem>
      </ElDescriptions>
    </template>
  </ADetailPanel>
</template>

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

const detailPanelIns = useTemplateRef<ADetailPanelInstance<MoneyAccountTypes.SearchMoneyAccountResult>>('detailPanel')
const detailPanelProps = buildDetailPanelProps<MoneyAccountTypes.SearchMoneyAccountResult>({
  title: '资金账户表详情',
  detailsLoader: MoneyAccountApi.detail,
})

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