<template>
  <div class="app-container">
    <el-row :gutter="24">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form ref="queryForm" :inline="true" label-width="68px" size="small">
          <el-form-item label="用户状态" prop="status">
            <el-select
              v-model="queryParams.onLineStatus"
              clearable
              placeholder="请选择用户状态"
              style="width: 240px"
            >
              <el-option
                v-for="item in onLineStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">查询用户登陆状态
            </el-button>
          </el-form-item>
        </el-form>
        <div style="padding-top: 10px">
          <vxe-table
            ref="xTable"
            :data="userList"
            :loading="loading"
            :radio-config="{trigger: 'row'}"
            align="center"
            auto-resize
            border
            class="mytable-style"
            export-config
            highlight-current-row
            max-height="700"
            resizable
            show-overflow
          >
            <vxe-table-column field="username" title="用户账号"/>
<!--            <vxe-table-column field="nickname" title="用户姓名"/>-->
            <vxe-table-column :formatter="onlineStatusFormat" field="onlineStatus" title="账号在线状态"/>
          </vxe-table>
          <vxe-pager
            v-show="showTable"
            :current-page.sync="currentPage"
            :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
            :page-size.sync="pageSize"
            :page-sizes="[10,50,100]"
            :total="total"
            perfect
            @page-change="handlePageChange"
          >
          </vxe-pager>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {debounce} from 'lodash'

export default {
  name: "onLine",
  data() {
    return {
      isShow: false,
      // 遮罩层
      loading: false,
      showTable: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      currentPage: 1,
      pageSize: 10,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 默认密码
      initPassword: undefined,
      // 角色选项
      roleOptions: [],
      // 表单参数
      form: {
        type: "0",
      },
      onLineStatusOptions: [
        {value: '0', label: '在线'},
        {value: '1', label: '离线'},
      ],
      // 查询参数
      queryParams: {
        onLineStatus: undefined
      },
      username: '',
      typeOptions: [
        {value: '0', label: '永久'},
        {value: '1', label: '时间范围'}
      ],
      // 表单校验
      rules: {
        ip: [
          {required: true, message: "ip不能为空", trigger: "blur"},
          {pattern: /[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$/, message: "请输入正确的IP", trigger: "blur"}
        ]
      }
    };
  },
  watch: {},
  created() {
    //this.getList()
  },
  methods: {
    changeType(val) {
      if (val == "0") {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
    // 表单重置
    reset() {
      this.form = {
        ip: undefined,
        type: "0",
        limitTime: undefined,
        limitStartTime: undefined,
        limitEndTime: undefined,
        sysTime: undefined,
        lk: undefined
      };
      this.isShow = false;
    },
    // 列表用户状态格式化
    statusFormat({cellValue}) {
      let belongTo = ''
      if (cellValue === "0") {
        belongTo = "正常"
      } else if (cellValue === "1") {
        belongTo = "锁定（休眠）"
      }
      return belongTo
    },
    //用户在线状态格式化
    onlineStatusFormat({cellValue}) {
      let belongTo = ''
      if (cellValue === "0") {
        belongTo = "在线"
      } else if (cellValue === "1") {
        belongTo = "离线"
      }
      return belongTo
    },
    //用户类型格式化
    userTypeFormat({cellValue}) {
      let belongTo = ''
      if (cellValue === "0") {
        belongTo = "管理员"
      } else if (cellValue === "1") {
        belongTo = "业务用户"
      }
      return belongTo
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
      this.getList()
    },
    /** 查询用户列表 */
    async getList() {
      this.loading = true;
      var searchParams = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        onLineStatus: this.queryParams.onLineStatus,
      }
      await this.$axios.get('/sysUserController/getUserByHealthy',
        {params: searchParams}).then((res) => {
        this.userList = res.data.records
        this.total = res.data.total

        if (res.data.records === '') {
          this.showTable = false
        } else {
          this.showTable = true
        }
        this.loading = false
      }).catch((error) => {
        this.loading = false;
        // this.$message.error(error)
      })
    },
    /** 搜索按钮操作 */
    handleQuery: debounce(function () {
      this.currentPage = 1
      this.pageSize = 10
      this.getList()
    }, 1000),
  }
};
</script>
