<template>
  <div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'userPlatform'">
          <Tag :color="record.userPlatform === 'WEB' ? 'processing' : 'default'">
            {{ record.userPlatform }}
          </Tag>
        </template>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'ant-design:delete-outlined',
              tooltip: '强制退出',
              color: 'error',
              popConfirm: {
                title: '是否确认强制退出',
                confirm: handleForce.bind(null, record)
              }
            }
          ]"
        />
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { Tag } from 'ant-design-vue';
  import { BasicTable, TableAction } from '@jdlinker/ui';
  import { useMessage } from '@jdlinker/func';
  import { columns, searchFormSchema } from './data';
  import { fetchList, forceLogout } from './onlineUserApi';
  import { useListPage } from '@jdlinker/ui';

  const { createMessage } = useMessage();
  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      api: fetchList,
      rowKey: 'token',
      columns,
      formConfig: {
        schemas: searchFormSchema
      },
      actionColumn: {
        width: 80
      }
    }
  });

  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

  // 强制退出按钮事件
  async function handleForce(record: any) {
    await forceLogout({
      userPlatform: record.userPlatform,
      token: record.token
    });
    createMessage.success('强退成功！');
    await reload();
  }
</script>
