<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          size="mini"
          @click="handleUpdate"
          :disabled="multiple"
        >解除锁定
        </el-button>
      </el-col>
    </el-row>

    <el-table  ref="multipleTable" v-loading="loading" @row-click="handleRowClick" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column type="index" label="序号" width="50"/>
      <el-table-column label="用户名" align="center" prop="userName"/>
      <el-table-column label="锁定时长(分钟)" align="center" prop="time"/>
    </el-table>
  </div>
</template>

<script>
import { list,delLockUser} from '@/api/system/lockUser'
import { delWhitelist } from '@/api/system/ipWhitelist'
export default {
  name: 'LockUser',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      list:[],
      // 非多个禁用
      multiple: true,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      list().then(response => {
        this.list = response.data;
        this.loading = false
      })
    },
    handleRowClick(row, column, event) {
      const table = this.$refs.multipleTable;
      const selectedRows = table.selection;
      // Check if the row is already selected
      const isRowSelected = selectedRows.includes(row);
      if (isRowSelected) {
        // If the row is selected, unselect it
        table.toggleRowSelection(row, false);
      } else {
        // If the row is not selected, select it
        table.toggleRowSelection(row, true);
      }
    },
    handleUpdate(){
      const ids = this.ids
      this.$modal.confirm('是否确认解锁这些数据项？').then(function() {
        return delLockUser(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('解锁成功')
      }).catch(() => {
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userName)
      this.multiple = !selection.length
    },
  }
}
</script>
