<template>
  <BasicDrawer
    v-bind="$attrs"
    destroyOnClose
    @register="registerDrawer"
    :showFooter="false"
    width="800px"
  >
    <BasicTable @register="registerTable" :columns="tokenColumns" @showOkBtn="false">
      <template #toolbar>
        <Button type="primary" danger @click="loginOut()">批量强退</Button>
      </template>
      <template #headerTop>
        <h1>Token列表</h1>
      </template>
      <template #tableTitle> 共 {{ total }} 条数据 </template></BasicTable
    >
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Button } from '/@/components/Button';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { onlineForceLogout, onlineListToken } from '/@/api/monitor/onlineApi';
  import { tokenColumns } from './data';
  import { useUserStore } from '/@/store/modules/user';

  const { createConfirm, createMessage } = useMessage();
  const userStore = useUserStore();
  // const setTableList = ref<any>([]);
  const sessionId = ref('');
  const total = ref('');
  const tokenList = ref<any>([]);

  const [registerDrawer] = useDrawerInner(async data => {
    // setDrawerProps({ confirmLoading: false });
    sessionId.value = data.record.sessionId;
  });
  //setTableData
  const [registerTable, { getSelectRows, reload }] = useTable({
    // title: '设备管理列表',
    api: onlineListToken,
    rowKey: 'tokenValue',
    rowSelection: {
      type: 'checkbox',
      getCheckboxProps: record => {
        return {
          disabled: record.tokenValue == userStore.getToken,
        };
      },
    },
    clickToRowSelect: true,
    showIndexColumn: false,
    bordered: true,
    pagination: false,
    // showTableSetting: true,
    beforeFetch: handleBeforeFetch,
    afterFetch: handleAfterFetch,
  });

  function handleBeforeFetch(params) {
    params.sessionId = sessionId.value;
    params.loginType = 'login';
    return params;
  }
  function handleAfterFetch(params) {
    total.value = params.length;
  }

  async function loginOut() {
    const rows = getSelectRows();
    for (const i of rows) {
      tokenList.value.push(i.tokenValue);
    }
    console.log('tokenList', tokenList);
    if (rows.length) {
      createConfirm({
        content: '你确定要删除?',
        iconType: 'warning',
        onOk: async () => {
          await onlineForceLogout({
            tokenValues: tokenList.value,
            loginType: 'login',
            sessionId: sessionId.value,
          });
          await reload();
          createMessage.success('删除成功！');
        },
      });
    } else {
      createMessage.warn('请选择');
    }
    await reload();
  }
</script>
