<template>
  <div :class="$style.content">
    <a-card :class="$style.top">
      <a-row :class="$style.inner">
        <div v-if="spin" :class="$style.spin">
          <a-spin />
        </div>
        <a-col v-for="(item, index) in userList" v-else :key="index" :class="$style.item" :span="8">
          <h3>{{ item.label }}</h3>
          <h3>{{ item.value }}</h3>
        </a-col>
      </a-row>
    </a-card>
    <a-card :class="$style.bottom">
      <div :class="$style.userSelect">
        <span>用户姓名：</span>
        <sd-user-picker v-model="user" single :class="$style.userPicker" :hierarchical="false" />
      </div>
      <sd-data-table-ex
        ref="dataTable"
        :class="$style.dataTable"
        form-id="oaOnlineUserRecords"
        :columns="columns"
        :filter-expressions="expressions"
        show-selection
        :actions="actions"
      >
      </sd-data-table-ex>
    </a-card>
  </div>
</template>

<script>
import TableColumnTypes from '@/common/services/table-column-types'
import axios from '@/common/services/axios-instance'
import { Message, Modal } from 'ant-design-vue'
import TableActionTypes from '@/common/services/table-action-types'
import components from './_import-components/sd-online-user-list-import'
const columns = [
  {
    dataIndex: 'jti',
    sdHidden: true,
  },
  {
    dataIndex: 'account',
    title: '用户账号',
  },
  {
    dataIndex: 'userName',
    title: '用户姓名',
  },
  {
    dataIndex: 'deptName',
    title: '所属部门',
  },
  {
    dataIndex: 'device',
    title: '客户端类型',
  },
  {
    dataIndex: 'creationTime',
    title: '登录时间',
    sdRender: TableColumnTypes.dateTime,
    defaultSortOrder: 'descend',
  },
  {
    dataIndex: 'ip',
    title: 'IP',
  },
]
export default {
  name: 'SdOnlineUserList',
  metaInfo: {
    title: '在线用户列表',
  },
  components,
  data() {
    return {
      columns,
      spin: false,
      userList: [
        {
          label: '在线用户',
          name: 'onlineUserTotal',
          value: 0,
        },
        {
          label: '移动在线',
          name: 'onlineUserMobile',
          value: 0,
        },
        {
          label: 'PC在线',
          name: 'onlineUserPcNum',
          value: 0,
        },
      ],
      actions: [
        {
          label: '强制签退',
          id: 'logout',
          permission: null,
          type: TableActionTypes.batch,
          callback: (keys, records) => this.forceLogout(records),
        },
        {
          label: '刷新',
          id: 'refresh',
          permission: null,
          callback: () => {
            this.$refs.dataTable.refresh()
            this.getOnlineUser()
          },
        },
      ],
      user: [],
    }
  },
  computed: {
    expressions() {
      if (this.user.length) {
        return [
          {
            dataType: 'str',
            name: 'account',
            op: 'eq',
            stringValue: this.user[0].code,
          },
        ]
      }
      return []
    },
  },
  created() {
    this.getOnlineUser()
  },
  methods: {
    getOnlineUser() {
      this.spin = true
      axios.get('api/framework/v1/online-user/getOnlineUserStatistics').then((res) => {
        if (res.data) {
          const data = res.data
          this.userList.forEach((item) => {
            if (Object.keys(data).find((r) => item.name === r)) item.value = data[item.name]
          })
          this.spin = false
        }
      })
    },
    forceLogout(records) {
      const jtiArr = records.map((record) => record.jti)
      Modal.confirm({
        content: '确认强制签退选定的对话吗？',
        onOk: () => {
          axios.post('api/framework/v1/online-user/forcedToLogout', jtiArr).then((res) => {
            if (res.data) Message.success('签退成功')
            this.$refs.dataTable.refresh()
            this.getOnlineUser()
          })
        },
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  .top {
    height: 100px;
    margin-bottom: 20px;
    .inner {
      display: flex;
      width: 40%;
      height: 100%;
      margin: 0 auto;
      .spin {
        width: 100%;
        height: 100px;
        text-align: center;
      }
      .item {
        text-align: center;
      }
      h3 {
        font-weight: bold;
      }
    }
  }
  .bottom {
    position: relative;
    flex: 1;
    .user-select {
      position: absolute;
      top: 20px;
      left: 17px;
      z-index: 1;
      .user-picker {
        display: inline-block;
        width: 200px;
        :global(.ant-select) {
          width: 100%;
        }
      }
    }
  }
}
.data-table {
  :global(.ant-pagination-total-text .ant-btn) {
    display: none;
  }
}
</style>
