<template>
  <section class="AppOnlineManager">
    <ai-detail list>
      <ai-title slot="title" :title="menuName" isShowBottomBorder/>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" @click="getTableData">刷新数据</el-button>
          </template>
          <template #right>
            <el-input placeholder="姓名/部门" size="small" clearable v-model="search.name" @change="page.current=1,getTableData()"/>
          </template>
        </ai-search-bar>
        <el-row type="flex" class="fill userList">
          <div flex v-for="item in userList" :key="item.id" class="itemCard mar-b8 mar-r8" @click="handleLogoutTarget(item)">
            <el-avatar :src="item.avatar"/>
            <div class="fill mar-l8 mar-r8">
              <h4 v-text="item.name"/>
              <div class="dept" v-text="item.departName"/>
            </div>
            <i class="el-icon-switch-button"/>
          </div>
        </el-row>
      </template>
    </ai-detail>
  </section>
</template>

<script>
const label = "在线管理"
export default {
  name: "AppOnlineManager",
  label,
  props: {
    menuName: {default: label},
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      tableData: [],
      search: {name: ""},
    }
  },
  computed: {
    userList: v => {
      const reg = new RegExp(`${v.search.name}`, 'g')
      return v.tableData.filter(e => !v.search.name || reg.test(e.name) || reg.test(e.departName))
    }
  },
  methods: {
    getTableData() {
      this.instance.post("/admin/user/getOnlineSysUser").then(res => {
        if (res?.data) {
          this.tableData = res.data
        }
      })
    },
    handleLogoutTarget(item) {
      this.$confirm(`是否要登出${item.name}?`).then(() => {
        const {tokenValue, userKey} = item
        this.instance.post("/admin/user/kickUserByToken", null, {
          params: {tokenValue, userKey}
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("登出成功!")
            this.getTableData()
          }
        })
      }).catch(() => 0)
    }
  },
  created() {
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.AppOnlineManager {
  height: 100%;

  .userList {
    flex-wrap: wrap;
  }

  .itemCard {
    flex-shrink: 0;
    width: 180px;
    height: 60px;
    padding: 8px;
    border: 1px solid #eee;
    box-shadow: 0 4px 6px -2px rgb(15 15 21 / 15%);
    background-color: #fff;
    font-size: 16px;

    .el-icon-switch-button {
      font-weight: bold;
      font-size: 20px;
      cursor: pointer;
      color: rgba(#f46, .6);

      &:hover {
        color: #f46;
      }
    }

    h4 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dept {
      color: #999;
      font-size: 12px;
    }
  }
}
</style>
