<script setup lang="ts">
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { h } from 'vue';

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

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

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { postTableModelPacketInfoPage } from '#/api-client';
import { $t } from '#/locales';

import { querySchema, tableSchema } from './schema';

defineOptions({
  name: 'CollectionLog',
});

const formOptions: VbenFormProps = {
  schema: querySchema.value,
};
const gridOptions: VxeGridProps<any> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: tableSchema.value,
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  toolbarConfig: {
    custom: true,
  },
  customConfig: {
    storage: true,
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const { data } = await postTableModelPacketInfoPage({
          body: {
            ...formValues,
            pageIndex: page.currentPage,
            pageSize: page.pageSize,
          },
        });
        return data;
      },
    },
  },
};

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #isdeviceType="{ row }">
        {{ row.deviceType }}
      </template>
      <template #ismanualOrNot="{ row }">
        <component
          :is="
            h(Tag, { color: row.manualOrNot ? 'green' : 'red' }, () =>
              row.manualOrNot ? $t('common.yes') : $t('common.no'),
            )
          "
        />
      </template>
      <template #isTimeout="{ row }">
        <component
          :is="
            h(Tag, { color: row.isTimeout ? 'green' : 'red' }, () =>
              row.isTimeout ? $t('common.yes') : $t('common.no'),
            )
          "
        />
      </template>
      <template #isSend="{ row }">
        <component
          :is="
            h(Tag, { color: row.isSend ? 'green' : 'red' }, () =>
              row.isSend ? $t('common.yes') : $t('common.no'),
            )
          "
        />
      </template>
      <template #isReceived="{ row }">
        <component
          :is="
            h(Tag, { color: row.isReceived ? 'green' : 'red' }, () =>
              row.isReceived ? $t('common.yes') : $t('common.no'),
            )
          "
        />
      </template>
    </Grid>
  </Page>
</template>
