<template>
  <div class="app-container">
    <el-dialog
      :title="`[ ${detailItem.username || ''} ]  用户在线系统列表`"
      :close-on-click-modal="false"
      width="88%"
      :visible.sync="visible"
      :append-to-body="isAppendBody"
      top="4%"
    >

      <vxe-grid
        ref="vxe"
        highlight-hover-row
        border
        resizable
        sync-resize
        auto-resize
        class="vxe-table-element"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        :toolbar="tableToolbar"
      >
        <template v-slot:role_toolbar_btns>
          <el-button type="danger" :disabled="btnDisabled" :loading="btnLoading" @click="allOffline()">{{ $t('ec.table.offline') }}</el-button>
        </template>
        <template v-slot:token_tip="{row}">
          <span style="font-size: 12px;">{{ row.token }}</span>
        </template>
        <template v-slot:user_operation="{row}">
          <el-button type="danger" @click="offlineSystem(row)">{{ $t('ec.table.offline') }}</el-button>
        </template>
      </vxe-grid>
    </el-dialog>
  </div>
</template>

<script>

import { getOnlineAppList, forceOffline } from 'ecip-web/api/vue/user/sysrUserApi'
export default {
  name: 'OnlineSystem',
  components: { },
  data() {
    return {
      btnDisabled: false,
      btnLoading: false,
      isAppendBody: false,
      visible: false,
      detailItem: '',
      tableData: [],
      loading: false,
      tableToolbar: {
        id: 'vue.flow.myStartedView-toolbar',
        slots: {
          buttons: 'role_toolbar_btns'
        },
        resizable: {
          storage: true
        },
        // 列操作记录
        setting: {
          storage: true
        }
      },
      columns: [
        { type: 'checkbox', width: 40, fixed: 'left', align: 'center' },
        { title: 'ec.user.realName', field: 'realName', minWidth: 50 },
        { title: 'ec.user.userName', field: 'username', minWidth: 100 },
        { title: 'ec.app.name', field: 'appName', minWidth: 80 },
        { title: 'ec.log.loginTime', field: 'date', minWidth: 80, slots: { default: 'insider' }},
        { title: 'token', field: 'token', minWidth: 300, slots: { default: 'token_tip' }},
        { title: 'ec.table.actions', minWidth: 100, align: 'center', slots: { default: 'user_operation' }}
      ]
    }
  },
  methods: {
    init(item) {
      this.detailItem = item
      this.visible = true
      this.getData()
    },
    getData() {
      this.loading = true
      this.btnDisabled = false
      getOnlineAppList({
        ...this.detailItem
      }).then((res) => {
        this.tableData = res.data
        if (this.tableData.length == 0) {
          this.btnDisabled = true
        }
        this.loading = false
      })
    },
    async offlineSystem(item) {
      let params = []
      let str = ''
      if (item instanceof Array) {
        params = item
        str = `确定在选中系统中下线？`
      } else {
        params.push(item)
        str = `确定在 [ ${item.appName} ] 下线?`
      }
      this.$confirm(str, '确认').then(async() => {
        this.btnLoading = true
        await forceOffline(params)
        this.$notify.success('操作成功')
        this.getData()
        this.btnLoading = false
      })
    },
    allOffline() {
      if (this.$refs.vxe.getCheckboxRecords().length == 0) {
        this.$message({ message: '请勾选', type: 'warning' })
        return false
      }
      const item = this.$refs.vxe.getCheckboxRecords()
      this.offlineSystem(item)
    }

  }
}
</script>

<style scoped>

</style>
