<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #highFormItem="formData">
      <ElFormItem label="账户编号">
        <ElInput v-model="formData.sn" placeholder="账户编号"/>
      </ElFormItem>
      <ElFormItem label="客户名称">
        <ElInput v-model="formData.customerName" placeholder="客户名称"/>
      </ElFormItem>
      <ElFormItem label="企业名称">
        <ElInput v-model="formData.orgName" placeholder="企业名称"/>
      </ElFormItem>
      <ElFormItem label="营收余额">
        <ElInput v-model="formData.revenue" placeholder="营收余额"/>
      </ElFormItem>
      <ElFormItem label="充值余额">
        <ElInput v-model="formData.recharge" placeholder="充值余额"/>
      </ElFormItem>
    </template>
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput v-model="formData.sn" placeholder="账户编号"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="formData.customerName" placeholder="客户名称"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="formData.orgName" placeholder="企业名称"/>
      </ElFormItem>
    </template>

    <template #columns>
      <ElTableColumn label="账户编号" prop="sn"/>
      <ElTableColumn label="账户类型" prop="accountType"/>
      <ElTableColumn label="客户名称" prop="customerId"/>
      <ElTableColumn label="企业名称" prop="orgId"/>
      <ElTableColumn label="营收余额" prop="revenue"/>
      <ElTableColumn label="充值余额" prop="recharge"/>
    </template>
    <MoneyAccountForm ref="moneyAccountForm" :research="research"/>
    <MoneyAccountDetail ref="moneyAccountDetail"/>
  </ATablePage>
</template>

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

const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
const moneyAccountFormIns = useTemplateRef<InstanceType<typeof MoneyAccountForm>>('moneyAccountForm')
const moneyAccountDetailIns = useTemplateRef<InstanceType<typeof MoneyAccountDetail>>('moneyAccountDetail')

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

const tablePageProps = buildTablePageProps<MoneyAccountTypes.SearchMoneyAccountParam, MoneyAccountTypes.SearchMoneyAccountResult>({
  searchForm: {
    paging: MoneyAccountApi.paging,
  },
  toolBar: {
    leftTools: [
      {
        icon: 'Plus',
        label: '新建',
        action() {
          moneyAccountFormIns.value?.open()
        },
      },
    ],
  },
  table: {
    actionColumn: {
      foldLimit: 4,
      tableActions: [
        {
          tooltip: '详情',
          icon: 'Postcard',
          type: 'primary',
          action({row}) {
            moneyAccountDetailIns.value?.open(row)
          },
        },
        {
          tooltip: '充值',
          icon: 'chongzhi0101',
          type: 'success',
          action({row}) {
            moneyAccountFormIns.value?.open(row)
          },
        },
        {
          tooltip: '调账',
          icon: 'tiaozhang',
          type: 'danger',
          action({row}) {
            moneyAccountFormIns.value?.open(row)
          },
        },
      ],
    },
  },
})

</script>
