<template>
  <ATablePage
    v-bind="tablePageProps">
    <template #highFormItem="formData">
      <ElFormItem label="客户名称">
        <ElInput v-model="formData.customerId" placeholder="客户名称"/>
      </ElFormItem>
      <ElFormItem label="组织名称">
        <ElInput v-model="formData.orgId" placeholder="组织名称"/>
      </ElFormItem>
      <ElFormItem label="账期">
        <ElInput v-model="formData.billPeriod" placeholder="账期"/>
      </ElFormItem>
      <ElFormItem label="账单开始时间">
        <ElInput v-model="formData.startTime" placeholder="账单开始时间"/>
      </ElFormItem>
      <ElFormItem label="账单结束时间">
        <ElInput v-model="formData.endTime" placeholder="账单结束时间"/>
      </ElFormItem>
    </template>
    <template #simpleFormItem="formData">
      <ElFormItem label="客户名称">
        <ElInput v-model="formData.customerId" placeholder="客户名称"/>
      </ElFormItem>
      <ElFormItem label="账期">
        <ElInput v-model="formData.billPeriod" placeholder="账期"/>
      </ElFormItem>
    </template>

    <template #columns>
      <ElTableColumn label="客户名称" prop="customerId"/>
      <ElTableColumn label="单位名称" prop="orgId"/>
      <ElTableColumn label="账户类型" prop="accountType"/>
      <ElTableColumn label="账期" prop="billPeriod"/>
      <ElTableColumn label="账单开始时间" prop="startTime"/>
      <ElTableColumn label="账单结束时间" prop="endTime"/>
      <ElTableColumn label="订单数" prop="orderCount"/>
      <ElTableColumn label="总车数" prop="carCount"/>
      <ElTableColumn label="总质量" prop="totalWeight"/>
      <ElTableColumn label="优惠金额" prop="discountMoney"/>
      <ElTableColumn label="账单金额" prop="totalMoney"/>
      <ElTableColumn label="备注" prop="memo"/>
    </template>
    <BillDetail ref="billDetail"/>
  </ATablePage>
</template>

<script lang="ts" setup>
import BillApi from '@/pages/fin/bill/bill-api.ts'
import BillDetail from '@/pages/fin/bill/BillDetail.vue'
import ATablePage, { buildTablePageProps } from '@/components/a-page/a-table-page/ATablePage.tsx'

const billDetailIns = useTemplateRef<InstanceType<typeof BillDetail>>('billDetail')

const tablePageProps = buildTablePageProps<BillTypes.SearchBillParam, BillTypes.SearchBillResult>({
  searchForm: {
    paging: BillApi.paging,
  },
  table: {
    actionColumn: {
      tableActions: [
        {
          tooltip: '详情',
          icon: 'Postcard',
          type: 'primary',
          action({row}) {
            billDetailIns.value?.open(row)
          },
        },
      ],
    },
  },
})

</script>
