<script lang="ts" setup>

import { ref } from 'vue';

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

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

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

import FormModalDemo from './components/modal.vue';
import { formOptions } from './config/search';
import { gridOptions } from './config/table';

ref(false);
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});

const showModal = (data = {}, isUpdate = false) => {
  formModalApi.setData({
    // 表单值
    values: data,
    update: isUpdate,
    gridApi,
  });
  formModalApi.open();
};
</script>

<template>
  <Page auto-content-height title="Api访问日志管理">
    <FormModal />
    <Grid>
      <template #toolbar-buttons>
      </template>
      <template #type="{ row }">
        <Tag v-if="row.type === 0" color="green"> 访问成功 </Tag>
        <Tag v-else color="red"> 访问失败 </Tag>
      </template>
      <template #old_admin="{ row }">
        {{ row?.old_admin?.username || '获取失败' }}
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '查看',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              // auth: ['op-log', 'sys:role:detail'],
              onClick: showModal.bind(null, row, true),
            },
          ]"
          :drop-down-actions="[]"
        />
      </template>
    </Grid>
  </Page>
</template>
