<template>
  <div>

    <div style="margin: 10px 0">
      <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入用户名" v-model="username"></el-input>
      <el-button class="ml-5" type="primary" @click="onSearch(username)" style="height: 25px;">搜索</el-button>
      <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
    </div>
<!--    <div style="margin: 15px 0">-->
<!--      <el-button class="ml-5" type="primary" @click="handleAdd" style="height: 25px;">新增 <el-icon style="margin-left: 5px"><CirclePlus /></el-icon></el-button>-->

<!--      <el-popconfirm-->
<!--          class="ml-5"-->
<!--          confirm-button-text='确定'-->
<!--          cancel-button-text='取消'-->
<!--          icon="InfoFilled"-->
<!--          icon-color="red"-->
<!--          title="您确定批量删除这些数据吗？"-->
<!--          @confirm="delBatch"-->
<!--          width=180-->
<!--      >-->
<!--        <template #reference>-->
<!--          <el-button style="height: 25px" class="ml-5" type="danger" slot="reference">批量删除 <el-icon style="margin-left: 5px;"><Remove /></el-icon></el-button>-->
<!--        </template>-->
<!--      </el-popconfirm>-->
<!--    </div>-->
    <el-table :data="tableData" border stripe header-cell-class-name="headerBg" :cell-style="{textAlign: 'center'}"
              @selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" width="50"></el-table-column>
      <el-table-column prop="userName" label="用户昵称" ></el-table-column>
      <el-table-column prop="userAvatar" label="头像"></el-table-column>
      <el-table-column prop="userRole" label="身份"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column label="操作">
        <!-- <template slot-scope="scope">
          <el-button type="success" @click="detail(scope.row)">详情 <i class="el-icon-edit"></i></el-button>

          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button type="danger" slot="reference">封禁 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>

        </template> -->
      </el-table-column>
    </el-table>
    <!-- 分页查询 -->
    <div style="padding: 10px 0">
      <el-pagination
          :current-page="searchParams.current"
          :page-size="searchParams.pageSize"
          :page-sizes="[2, 5, 10, 20]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"          
          :small="null"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import myAxios from '@/api/myAxios';
import {ref, onMounted , inject} from 'vue'

//获取的所有数据
const tableData = ref([])
//筛选条数
const total = ref(0)
//请求参数
const searchParams: any = ref({
  //当前页码
  current: 1,
  //每页显示条数
  pageSize: 5
})
//导入组件刷新
const reload : any = inject("reload")
onMounted(() => {
  getUserList()
})
const username = ref('')
//重置按钮
const reset =()=>{
  reload()
}
//用户信息列表
const getUserList = async () => {
  //为什么要用展开表达式({...})，因为是POST请求，如果直接对象.value,传的是Object类型
  const res = await myAxios.post('/user/list/page/vo',{...searchParams.value})
    if(res.data.code === 1) {
      //给前端表格赋值   字段名一定要对应
      tableData.value = res.data.data.records
      //筛选条数
      total.value = parseInt(res.data.data.total)
    }else {
      ElMessage({
        type: 'info',
        message: '查询失败',
      })
    }
}
const handleSelectionChange  = (val:any)=>{
  console.log(val)
}
// 处理行数大小变化
const handleSizeChange = (newSize:any) => {
  searchParams.value.pageSize = newSize //新的页面条数
  getUserList() //重新发起请求
};

// 处理当前页变化
const handleCurrentChange = (Current:any) => {
  searchParams.value.current = Current //新的当前页面
  getUserList() //重新发起请求
};

//搜索按钮方法
const onSearch = (data : String)=>{
  searchParams.value.userName = data
  searchParams.value.current = 1
  getUserList()
}

</script>


<style scoped>
.headerBg{
  background-color: #eee !important;
}
</style>