<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" element-loading-spinner="page-loading" class="app-container">
    <page-title />
    <div class="search-form">
      <el-form ref="formRef" :model="formData" label-position="left" label-width="70px">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="所属组织">
              <el-select v-model="formData.companyNo">
                <el-option label="组织1" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="姓名">
              <el-input v-model="formData.username" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="用户名">
              <el-input v-model="formData.nickname" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="手机号">
              <el-input v-model="formData.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button round size="small" type="primary" icon="iconfont icon-search">搜索</el-button>
            <el-button round size="small" type="gray" icon="iconfont icon-clear">清除</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-list">
      <el-table ref="tableRender" :data="list">
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="account" label="账户" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="role" label="角色" />
        <el-table-column prop="status" label="用户状态" />
        <el-table-column prop="company" label="所属组织" />
        <el-table-column label="操作" width="200px">
          <el-button type="text">编辑</el-button>
          <el-button type="text">详情</el-button>
          <el-button type="text">重置密码</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[20, 50, 100, 200, 300]"
        :page-size="20"
        :total="1"
        :current-page="1"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseManagement',
  data() {
    return {
      fullscreenLoading: false,
      list: [
        { username: '张三', account: '11', phone: '17625907745', nickname: '张三不散', role: 'admin', status: '启用', company: '宝马' }
      ],
      formData: {},
      pagination: {
        total: 0,
        currentPage: 1,
        pageSize: 20
      }
    }
  }
}
</script>
