<template>
  <ADetailPanel
    ref="detailPanel"
    v-bind="detailPanelProps">
    <template #default="detailData">
      <ElDescriptions border title="收费项目">
        <ElDescriptionsItem label="Id" prop="id">
          {{ detailData.id }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="归属用户 Id" prop="userId">
          {{ detailData.userId }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="归属客户 Id" prop="customerId">
          {{ detailData.customerId }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="归属组织 Id" prop="orgId">
          {{ detailData.orgId }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="产品 Id；仅当项目类型为“产品”时有值" prop="goodsId">
          {{ detailData.goodsId }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="收费项目类型，QiTa-->其他、ChanPin-->产品、YunFei-->运费" prop="expenseItemCategory">
          {{ detailData.expenseItemCategory }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="付费项名称" prop="expenseItemName">
          {{ detailData.expenseItemName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="计费策略；字典代码：expense_strategy，MianFei-->免费、TanXing-->弹性、GuDing-->固定、DanJia-->单价" prop="expenseStrategy">
          {{ detailData.expenseStrategy }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="计量单位；字典代码：unit，Che-->车、Fang-->方、GongLi-->公里、Dun-->吨" prop="unit">
          {{ detailData.unit }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="税率" prop="taxRate">
          {{ detailData.taxRate }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="单价；单位：元，弹性模式-->每档价格" prop="unitPrice">
          {{ detailData.unitPrice }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="起步价；单位：元，<= 起步量 固定费用" prop="initialPrice">
          {{ detailData.initialPrice }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="起步量" prop="initialQuantity">
          {{ detailData.initialQuantity }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="每档的量" prop="everyQuantity">
          {{ detailData.everyQuantity }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="是否可用；0-->否、1-->是" prop="canuse">
          {{ detailData.canuse }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="备注" prop="memo">
          {{ detailData.memo }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="创建人 Id； sys_user.id" prop="creatorId">
          {{ detailData.creatorId }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="修改人 Id； sys_user.id" prop="modifierId">
          {{ detailData.modifierId }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="创建时间" prop="createTime">
          {{ detailData.createTime }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="修改时间" prop="modifyTime">
          {{ detailData.modifyTime }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
          {{ detailData.deleted }}
        </ElDescriptionsItem>
      </ElDescriptions>
    </template>
  </ADetailPanel>
</template>

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

const detailPanelIns = useTemplateRef<ADetailPanelInstance<ExpenseItemTypes.SearchExpenseItemResult>>('detailPanel')
const detailPanelProps = buildDetailPanelProps<ExpenseItemTypes.SearchExpenseItemResult>({
  title: '收费项目详情',
  detailsLoader: ExpenseItemApi.detail,
})

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