<template>
  <el-row>
    <el-row>
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <search-white-board :show-more="true" @search="search">
          <div slot="base">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">昵称</label></el-col>
              <el-col :span="5">
                <el-input v-model.trim="searchForm.nickname" placeholder="输入昵称搜索" clearable @keyup.enter.native="search" />
              </el-col>
            </el-row>
          </div>
        </search-white-board>
      </el-form>
    </el-row>

    <el-row>
      <white-board>
        <el-row>
          <el-col :span="4" :offset="20" style="text-align: right;">
            <el-button icon="el-icon-refresh" type="primary" plain @click="list">刷新</el-button>
          </el-col>
        </el-row>

        <el-row style="padding: 10px 0px;">
          <el-table :data="tableData" style="width: 100%;" highlight-current-row stripe>
            <el-table-column prop="nickname" label="昵称" show-overflow-tooltip />
            <el-table-column prop="dept.name" label="部门" show-overflow-tooltip />
            <el-table-column label="性别">
              <template slot-scope="scope">
                <label v-if="scope.row.gender === 0">未知</label>
                <label v-if="scope.row.gender === 1">男</label>
                <label v-if="scope.row.gender === 2">女</label>
              </template>
            </el-table-column>
            <el-table-column label="类型">
              <template slot-scope="scope">
                <label v-if="scope.row.type === 1">平台</label>
                <label v-if="scope.row.type === 2">租户管理员</label>
                <label v-if="scope.row.type === 3">普通账号</label>
              </template>
            </el-table-column>
            <el-table-column prop="ip" label="IP" width="115" />
            <el-table-column prop="ipAddress" label="地址" show-overflow-tooltip />
            <el-table-column label="系统-浏览器-版本号" width="140">
              <template slot-scope="scope">
                {{ scope.row.os }} - {{ scope.row.browser }} - {{ scope.row.browserVersion }}
              </template>
            </el-table-column>
            <el-table-column prop="loginDateTime" label="登录时间" width="135" />
            <el-table-column label="操作" width="100px" fixed="right">
              <template slot-scope="scope">
                <el-popconfirm
                  confirm-button-text="是的"
                  cancel-button-text="不用了"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定强制退出该用户吗？"
                  @onConfirm="kickOffLine(scope.row.id)"
                >
                  <el-button slot="reference" type="danger" plain>踢下线</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-row>
          <el-pagination :current-page="searchForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="50" layout="total, sizes, prev, pager, next, jumper" :total="total" small @size-change="changeSizeChange" @current-change="changeCurrentChange" />
        </el-row>
      </white-board>
    </el-row>
  </el-row>
</template>

<script>
import onlineApi from '@/api/platform/onlineApi'

export default {
  name: 'OnlineIndex',
  components: {
  },
  data() {
    return {
      searchForm: {
        nickname: '',
        page: 1,
        size: 50
      },
      total: 0,
      tableData: []
    }
  },
  mounted() {
    this.list()
  },
  methods: {
    search() {
      this.searchForm.page = 1
      this.list()
    },
    kickOffLine(id) {
      onlineApi.kickOffLine({ 'id': id }).then(() => {
        this.list()
      })
    },
    list() {
      onlineApi.page(this.searchForm).then(d => {
        this.total = d.total
        this.tableData = d.data
      })
    }
  }
}
</script>

<style scoped>
</style>
