<template>
  <qu-table
    :tableData="peopleTableData"
    v-model:tableHeader="tableHeader"
    :pageProps="pageProps"
    :height="450"
    :rowButtons="[
      {
        cnName: '加入该权限组',
        enName: 'join',
        theme: 'text',
        className: '',
      },
    ]"
    @rowButtonClick="rowButtonCall"
    @pageChange="pageChange"
    @sortChange="sortChange"
    v-loading="peopleLoading"
  >
  </qu-table>
</template>
<script>
export default {
  name: "people-list",
};
</script>
<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { mainHead } from "@/Apis/peopleTableHead.js";
import templateHooks from "@/Hooks/templateHooks.js";
import { authorService } from "@/ApiService/authorService";
const props = defineProps({
  peopleScreenForm: {
    type: Object,
    default: () => {},
  },
  tableHeader: {
    type: Array,
    default: () => [],
  },
});
const peopleTableHeader = ref(mainHead);
const peopleTableData = ref([]);
const peopleScreenFormRef = ref();
const peopleLoading = ref(false);
const $emit = defineEmits(["selectUser"]);
onMounted(() => {
  fetchUsers();
});
watch(props.peopleScreenForm, (val) => {
  console.log(val);
});
const fetchUsers = () => {
  const { page, rows, sord, sidx } = pageProps;
  peopleLoading.value = true;
  authorService
    .userPageList({
      page,
      rows,
      sord,
      sidx,
      ...props.peopleScreenForm,
    })
    .then(
      (res) => {
        peopleLoading.value = false;
        if (res.code == 0) {
          peopleTableData.value = res.data.rows;
          pageProps.records = res.data.records;
        } else {
          $message.error(res.err);
        }
      },
      (error) => {
        peopleLoading.value = false;
      }
    );
};
const rowButtonCall = ({ row, $column }) => {
  //   for (let i in row) {
  //     groupFormData[i] = row[i];
  //   }
  $emit("selectUser", row);
};
const {
  pageProps,
  $store,
  $route,
  $common,
  rowButtonClick,
  pageChange,
  sortChange,
  $message,
  $messageBox,
} = templateHooks(fetchUsers);
defineExpose({
  fetchUsers,
  pageProps,
});
</script>
