<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form>
        <el-form-item>
          <el-button type="primary" icon="el-icon-refresh" size="small" @click="handleFilter">
            刷新
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list" size="small" fit highlight-current-row>
      <el-table-column type="index" align="center" label="序号" />
      <el-table-column label="用户名" prop="nickname">
        <template slot-scope="scope">
          {{ scope.row.nickname }}
          <el-tag v-if="scope.row.current" type="danger">
            当前用户
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="登录时间" prop="loginTime" />
      <el-table-column label="最后操作时间" prop="lastOperateTime" />
      <el-table-column label="网络地址" prop="requestIp" />
      <el-table-column label="所在地市" prop="address" />
      <el-table-column label="登录状态" prop="state">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state" type="success">
            在线
          </el-tag>
          <el-tag v-else type="info">
            离线
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130px" align="center">
        <template slot-scope="scope">
          <el-popover
            :ref="scope.$index"
            placement="top"
            width="180"
          >
            <p>确定踢出这个用户吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">
                取消
              </el-button>
              <el-button type="primary" size="mini" @click="subDelete(scope.$index, scope.row.cacheId)">
                确定
              </el-button>
            </div>
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="totalCount>0" :total="totalCount" :page-num.sync="listQuery.pageNum" :page-row.sync="listQuery.pageRow" @pagination="getList" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'OnlineUser',
  components: { Pagination },
  data() {
    return {
      totalCount: 0,
      list: [],
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        logType: true
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.api({
        url: '/redis/onlineList',
        method: 'get',
        params: this.listQuery
      }).then(data => {
        this.list = data.list
        this.totalCount = data.total
      })
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    subDelete(index, key) {
      this.api({
        url: '/redis/delByKey',
        method: 'post',
        data: { key }
      }).then(() => {
        this.$refs[index].doClose()
        this.getList()
        this.$notify({
          title: '踢出成功',
          type: 'success',
          duration: 2500
        })
      })
    }
  }
}
</script>
