<script lang="ts" setup>

import { Page, useVbenModal } from '@vben/common-ui';



import { useVbenVxeGrid } from '#/adapter/vxe-table';

import { TableAction } from '#/components/table-action';



import { getHyTransitBatchList } from '../api';

import RecordModal from '../components/record-list-modal.vue';

import { formOptions } from './config/search';

import { countErrorClass } from '../utils';
import { gridOptions as baseGridOptions } from './config/table';



function formatTs(ts?: number) {

  if (!ts) return '-';

  return new Date(ts * 1000).toLocaleString();

}



const [Grid, gridApi] = useVbenVxeGrid({

  formOptions,

  gridOptions: {

    ...baseGridOptions,

    proxyConfig: {

      ...baseGridOptions.proxyConfig,

      ajax: {

        query: async ({ page }, formValues) => {

          const res = await getHyTransitBatchList({

            page: page.currentPage,

            pageSize: page.pageSize,

            ...formValues,

          });

          const stepOpts = res?.form_options?.step;

          if (stepOpts?.length) {

            gridApi.formApi?.updateSchema([

              {

                fieldName: 'step',

                componentProps: {

                  allowClear: true,

                  options: stepOpts,

                },

              },

            ]);

          }

          return res;

        },

      },

    },

  },

});



const [RecordListModal, recordModalApi] = useVbenModal({

  connectedComponent: RecordModal,

});



const showRecords = (row: { id: number }) => {

  recordModalApi.setData({ batchId: row.id });

  recordModalApi.open();

};

</script>



<template>

  <Page auto-content-height title="监管拉取记录">

    <RecordListModal />

    <Grid>

      <template #failed_count="{ row }">
        <span :class="countErrorClass(row.failed_count)">
          {{ row.failed_count }}
        </span>
      </template>

      <template #started_at="{ row }">

        {{ formatTs(row.started_at) }}

      </template>

      <template #action="{ row }">

        <TableAction

          :actions="[

            {

              label: '查看明细',

              type: 'link',

              onClick: () => showRecords(row),

            },

          ]"

        />

      </template>

    </Grid>

  </Page>

</template>

