<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #highFormItem="formData">
      <ElFormItem label="订单编号">
        <ElInput
          v-model="formData.orderSn"
          placeholder="订单编号"/>
      </ElFormItem>
      <ElFormItem label="车次">
        <ElInput
          v-model="formData.trainNum"
          placeholder="车次"/>
      </ElFormItem>
      <ElFormItem label="资金账户">
        <ElInput
          v-model="formData.moneyAccountId"
          placeholder="资金账户"/>
      </ElFormItem>
    </template>

    <template #columns>
      <ElTableColumn label="订单编号" prop="orderSn"/>
      <ElTableColumn label="车次" prop="trainNum"/>
      <ElTableColumn label="资金账户" prop="moneyAccountId"/>
      <ElTableColumn label="变动前余额" prop="beforeBalance"/>
      <ElTableColumn label="变动金额" prop="delta"/>
      <ElTableColumn label="变动后余额" prop="afterBalance"/>
      <ElTableColumn label="变动类型" prop="moneyChangeCategory"/>
      <!-- <ElTableColumn label="附件地址" prop="fileUrl"/> -->
      <ElTableColumn label="备注" prop="memo"/>
    </template>
    <MoneyFlowForm ref="moneyFlowForm" :research="research"/>
    <MoneyFlowDetail ref="moneyFlowDetail"/>
  </ATablePage>
</template>

<script lang="ts" setup>
import MoneyFlowApi from '@/pages/fin/money-flow/money-flow-api.ts'
import MoneyFlowForm from '@/pages/fin/money-flow/MoneyFlowForm.vue'
import ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'
import MoneyFlowDetail from '@/pages/fin/money-flow/MoneyFlowDetail.vue'

const moneyFlowFormIns = useTemplateRef<InstanceType<typeof MoneyFlowForm>>('moneyFlowForm')
const moneyFlowDetailIns = useTemplateRef<InstanceType<typeof MoneyFlowDetail>>('moneyFlowDetail')

const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')

function research() {
  tablePageIns.value?.doSearch()
}

const tablePageProps = buildTablePageProps<MoneyFlowTypes.SearchMoneyFlowParam, MoneyFlowTypes.SearchMoneyFlowResult>({
  searchForm: {
    highForm: {
      contentWidth: 342,
    },
    paging: MoneyFlowApi.paging,
  },
  toolBar: {
    leftTools: [
      {
        icon: 'Plus',
        label: '新建',
        action() {
          moneyFlowFormIns.value?.open()
        },
      },
    ],
  },
  table: {
    actionColumn: {
      tableActions: [
        {
          tooltip: '详情',
          icon: 'Postcard',
          type: 'info',
          action({row}) {
            moneyFlowDetailIns.value?.open(row)
          },
        },
        {
          tooltip: '编辑',
          icon: 'Edit',
          action({row}) {
            moneyFlowFormIns.value?.open(row)
          },
        },
        {
          icon: 'Delete',
          loading: false,
          type: 'danger',
          tooltip: '删除',
          confirm: {
            title: '是否删除当前数据',
          },
          action({row}) {
            return MoneyFlowApi.del([ row.id! ])
              .then(() => {
                ElMessage.success('删除成功')
                return true
              })
          },
        },
      ],
    },
  },
})

</script>
