<script lang="ts" setup>

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



import { Tag } from 'ant-design-vue';



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

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



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

import FailDetailModal from '../components/fail-detail-modal.vue';

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

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



function formatTs(ts?: number) {

  if (!ts) return '-';

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

}



const statusColor: Record<string, string> = {
  waiting: 'orange',
  success: 'green',
  failed: 'error',
};



function callbackTagColor(status?: string) {

  return statusColor[status ?? ''] || 'default';

}



const [Grid, gridApi] = useVbenVxeGrid({

  formOptions,

  gridOptions: {

    ...baseGridOptions,

    proxyConfig: {

      ...baseGridOptions.proxyConfig,

      ajax: {

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

          const res = await getHyTransitRecordList({

            page: page.currentPage,

            pageSize: page.pageSize,

            ...formValues,

          });

          const callbackOpts = res?.form_options?.callback_status;

          if (callbackOpts?.length) {

            gridApi.formApi?.updateSchema([

              {

                fieldName: 'callback_status',

                componentProps: {

                  allowClear: true,

                  placeholder: '全部',

                  options: callbackOpts,

                },

              },

            ]);

          }

          return res;

        },

      },

    },

  },

});



const [DetailModal, detailModalApi] = useVbenModal({

  connectedComponent: FailDetailModal,

});



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

  detailModalApi.setData({ id: row.id });

  detailModalApi.open();

};

</script>



<template>

  <Page auto-content-height title="监管回调结果">

    <DetailModal />

    <Grid>

      <template #callback_status="{ row }">

        <Tag :color="callbackTagColor(row.callback_status)">

          {{ row.callback_status_txt || row.callback_status }}

        </Tag>

      </template>

      <template #error_summary="{ row }">
        <span :class="hasErrorTextClass(row.error_summary)">
          {{ row.error_summary || '-' }}
        </span>
      </template>

      <template #callback_at="{ row }">

        {{ formatTs(row.callback_at) }}

      </template>

      <template #action="{ row }">

        <TableAction

          :actions="[

            {

              label: '查看回调',

              type: 'link',

              onClick: () => showDetail(row),

            },

          ]"

        />

      </template>

    </Grid>

  </Page>

</template>

