<template>
  <div class="p-4">
    <div>
      <XTTitle title="在线用户" :go-back="true" />
    </div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'tenantName'">
          <span>{{ record.sysUser?.tenantName }}</span>
        </template>
        <template v-if="column.key === 'lastLoginTime'">
          <span>{{ formatToDateTime(record.lastLoginTime) }}</span>
        </template>
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                tooltip: '列表',
                label: '列表',
                onClick: handletoken.bind(null, record),
              },
              {
                auth: 'monitor:online:forceLogout',
                tooltip: '强制退出',
                label: '强制退出',
                color: 'error',
                popConfirm: {
                  title: '是否确认强制退出',
                  confirm: handleForce.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <formDrawer @register="registerDrawer" @success="handleSuccessDrawer" />
  </div>
</template>
<script lang="ts" setup>
  import { onBeforeMount, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/TableCard';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { columns, searchFormSchema } from './data';
  import formDrawer from './FormDrawer.vue';
  import { onlineList, onlineForceLogout } from '/@/api/monitor/onlineApi';
  import { listDictModel } from '/@/api/common';
  import { formatToDateTime } from '/@/utils/dateUtil';
  import { useDrawer } from '/@/components/Drawer';

  import { XTTitle } from '/@/components/XTTitle/index';
  const [registerDrawer, { openDrawer }] = useDrawer();

  const sysUserPlatformOptions = ref([]);
  onBeforeMount(async () => {
    sysUserPlatformOptions.value = await listDictModel({ dictCode: 'sys_user_platform' });
  });

  const { createMessage } = useMessage();
  const [registerTable, { reload }] = useTable({
    api: onlineList,
    rowKey: 'token',
    columns,
    formConfig: {
      labelWidth: 180,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
      baseColProps: { xs: 24, sm: 12, md: 12, lg: 8 },
      resetButtonOptions: {
        preIcon: 'ant-design:delete-outlined',
      },
      submitButtonOptions: {
        preIcon: 'ant-design:search-outlined',
      },
    },
    showIndexColumn: true,
    showTableSetting: true,
    bordered: true,
    striped: true,
    actionColumn: {
      width: 160,
      title: '操作',
      dataIndex: 'action',
    },
    beforeFetch: handleBeforeFetch,
  });

  function handleBeforeFetch(params) {
    return { ...params, loginType: 'login' };
  }

  // 强制退出按钮事件
  async function handleForce(record: Recordable) {
    await onlineForceLogout({ sessionId: record.sessionId, loginType: 'login' });
    createMessage.success('强退成功！');
    await reload();
  }
  // 退出token
  async function handletoken(record) {
    openDrawer(true, {
      record,
    });
  }
  // 抽屉回调事件
  async function handleSuccessDrawer() {
    await reload();
  }
</script>
<style scoped>
  card {
    height: 200px !important;
  }

  img {
    width: 150px;
    height: 75px;

    /* text-align: center; */
    margin: auto;
  }
</style>
