<template>
  <div class="table_page">
    <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)" size="default">搜索</el-button>
      <el-button type="warning" @click="reset" size="default">重置</el-button>
    </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">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户昵称"></el-table-column>
      <el-table-column prop="userAvatar" label="头像">
        <template #default="scope"><img :src="downloadUrl + scope.row.userAvatar" alt="" style="height: 50px;"></template>
      </el-table-column>
      <el-table-column prop="userRole" label="身份">
        <template #default="scope">
          {{ scope.row.userRole === 'boss' ? '管理员' : '小程序用户' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="checkDetail(scope.row,0)">详情</el-button>
          <el-button size="small" type="primary" @click="checkDetail(scope.row,1)">编辑</el-button>
        </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 { downloadUrl } from '@/utils/formatImgUpload'
import { ref, onMounted, inject } from 'vue'
import { useRouter } from "vue-router";

//获取的所有数据
const tableData = ref([])
//筛选条数
const total = ref(0)
//请求参数
const searchParams: any = ref({
  //当前页码
  current: 1,
  //每页显示条数
  pageSize: 5
})
const reload: any = inject("reload") //导入组件刷新
const router = useRouter()

onMounted(() => {
  getUserList()
})
const username = ref('')
//重置按钮
const reset = () => {
  reload()
}

//用户信息列表
const getUserList = async () => {
  //为什么要用展开表达式({...})，因为是POST请求，如果直接对象.value,传的是Object类型
  const res = await myAxios.post('/user/list/page', { ...searchParams.value })
  if (res.data.code === 1) {
    console.log(res.data.data)
    //给前端表格赋值   字段名一定要对应
    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()
}
const checkDetail = (obj: any, flag : any) => {   //查看详情方法
  console.log('用户对象--->',obj)
  router.push({
    name: '用户详情',
    params: {
      id: obj.id,
      flag: flag
    }
  })
}

</script>


<style scoped>
.headerBg {
  background-color: #eee !important;
}
.table_page {
  min-width: 800px;
  overflow: auto;
}
</style>