<script setup lang="tsx">
import { computed, ref } from 'vue';
import dayjs from 'dayjs';
import { NButton, NPopconfirm } from 'naive-ui';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { forceLogout, list } from '@/service/api/monitor/online';
import OnlineSearch from '@/views/monitor/online/modules/online-search.vue';
import { usePagination } from '@/hooks/common/pagination';

defineOptions({
  name: 'MonitorOnline'
});

const appStore = useAppStore();
const data = ref<Api.SystemManage.Online[]>([]);

const {
  loading,
  mobilePagination,
  searchParams,
  startLoading,
  endLoading,
  updatePagination,
  resetSearchParams,
  resetPagination,
  getDataByPage
} = usePagination({
  queryParams: {
    userName: null,
    ipaddr: null
  }
});

const columns = [
  {
    key: 'userName',
    title: '用户名',
    align: 'center'
  },
  {
    key: 'browser',
    title: '浏览器类型',
    align: 'center'
  },
  {
    key: 'os',
    title: '操作系统',
    align: 'center'
  },
  {
    key: 'ipaddr',
    title: '登录IP',
    align: 'center'
  },
  {
    key: 'loginLocation',
    title: '登录地点',
    align: 'center'
  },
  {
    key: 'deptName',
    title: '部门名称',
    align: 'center',
    render: row => row.deptName || '/'
  },
  {
    key: 'loginTime',
    title: '登录时间',
    align: 'center',
    render: row => {
      return dayjs(row.loginTime).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'operate',
    title: $t('common.operate'),
    align: 'center',
    width: 120,
    render: row => (
      <NPopconfirm onPositiveClick={() => handleForceLogout(row.tokenId)}>
        {{
          default: () => `是否确认强退名称为" ${row.userName} "的数据项`,
          trigger: () => (
            <NButton type="error" ghost size="small">
              强退
            </NButton>
          )
        }}
      </NPopconfirm>
    )
  }
];

const dataFilter = computed(() => {
  return data.value.slice(
    (mobilePagination.value!.page! - 1) * mobilePagination.value!.pageSize!,
    mobilePagination.value!.pageSize! * mobilePagination.value!.page!
  );
});

function getData() {
  startLoading();
  list(searchParams.value)
    .then(res => {
      if (!res.error) {
        data.value = res.data.data as Api.SystemManage.Online[];
        updatePagination({ itemCount: res.data?.length || 0 });
      }
    })
    .finally(() => {
      endLoading();
    });
}

function handleForceLogout(id: Api.SystemManage.Online['tokenId']) {
  forceLogout(id).then(res => {
    if (!res.error) {
      resetPagination();
      getData();
    }
  });
}

getData();
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <OnlineSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <NCard title="操作日志" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>
        <TableHeaderOperation :show-column-setting="false" :loading="loading" :show-arr="[]" @refresh="getData" />
      </template>
      <NDataTable
        :columns="columns"
        :data="dataFilter"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="702"
        :loading="loading"
        remote
        :row-key="({ operId }) => operId"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </NCard>
  </div>
</template>

<style scoped></style>
