<template>
  <div class="app-container onlineUser">
    <div class="page-container onlineUserPage">
      <div class="page-form-title-box">
        <el-form :model="queryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <el-form-item label="" prop="userName" label-width="90px">
            <el-input
              maxLength="30"
              v-model="queryParams.userName"
              placeholder="请输入用户名称"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="" prop="ipAddr">
            <el-input
              maxLength="30"
              v-model="queryParams.ipAddr"
              placeholder="请输入IP地址"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" v-loading="loading" border :data="tableList" ref="multipleTable">
          <el-table-column label="序号" type="index" align="center" width="50"/>
          <el-table-column label="登录令牌" align="center" prop="token" show-overflow-tooltip/>
          <el-table-column label="用户ID" align="center" prop="userId" show-overflow-tooltip width="180"/>
          <el-table-column label="用户名" align="center" prop="userName" show-overflow-tooltip width="140"/>
          <el-table-column label="账号" align="center" prop="account" show-overflow-tooltip width="140"/>
          <el-table-column label="登录IP" align="center" prop="ipAddr" show-overflow-tooltip width="140"/>
          <el-table-column label="登录时间" align="center" prop="loginTime" show-overflow-tooltip width="180">
            <template slot-scope="scope">
              {{parseTime(scope.row.loginTime,"{y}-{m}-{d} {h}:{i}:{s}")}}
            </template>
          </el-table-column>
          <el-table-column label="过期时间" align="center" prop="expiresIn" show-overflow-tooltip width="180">
            <template slot-scope="scope">
              {{parseTime(scope.row.expiresIn,"{y}-{m}-{d} {h}:{i}:{s}")}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" prop="deptName" width="140">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   @click="tableButton(scope.row)"
                   v-hasPermiRouter="['system:online:del']"
                >踢出</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import { onlineList,onlineLogout } from "@/api/serviceCenter/index";
  export default {
    name: 'index',
    data(){
      return{
        loading:false,
        optionList:[{label:"启用",value:true},{label:"禁用",value:false}],
        queryParams:{
          page:1,
          pageSize:20,
          userName:"",
          ipAddr:"",
        },
        dateRange:[],
        tableList:[],
        total:0,
        //dialog弹层数据
        dialogTitle:"",
        dialogType:false,
      }
    },
    mounted(){
      this.getList();
    },
    methods:{
      handleQuery(){
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      resetQuery(){
        this.$set(this,'dateRange',[])
        this.$set(this,'queryParams',{
          page:1,
          pageSize:20,
          userName:"",
          ipAddr:"",
        });
        this.getList();
      },
      //获取数据列表
      getList(){
        this.$set(this,'loading',true);
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        if(this.dateRange[0]){
          obj.startTime = this.dateRange[0]+'T00:00:00'
          obj.endTime = this.dateRange[1]+'T23:59:59'
        }else{
          obj.startTime = "";
          obj.endTime = "";
        }
        onlineList(obj).then(response => {
          this.$set(this,'loading',false);
          this.$set(this,'tableList',response.data.records);
          this.$set(this,'total',response.data.total);
        });
      },
      //预览
      tableButton(row){
        onlineLogout({token:row.token}).then(response => {
          this.msgSuccess(response.message)
          this.getList();
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  .onlineUser{
    .onlineUserPage{

    }
  }
</style>
