<template>
  <qu-table :tableData="tableData" :tableHeader="selectTableHead" :height="450" showSelect :showPage="true"
    :pageProps="pageProps" @select="selectChange" @pageChange="pageChange" ref="selectTableRef"
    v-loading="peopleLoading"></qu-table>
</template>
<script>
export default {
  name: "selected-people",
};
</script>
<script setup>
import { nextTick, onMounted, ref } from "vue";
import templateHooks from "@/Hooks/templateHooks.js";
import { selectTableHead } from "@/Apis/peopleTableHead.js";
import { authorService } from "@/ApiService/authorService";
const props = defineProps({
  groupId: Number || String,
  peopleScreenForm: Object,
});

const peopleLoading = ref(false);
const selectTableRef = ref();
onMounted(() => {
  fetchSelectUsers();
});
const fetchSelectUsers = () => {
  if (peopleLoading.value) {
    return;
  }
  peopleLoading.value = true;
  const { page, rows, sord, sidx } = pageProps;
  tableData.value = [];
  peopleLoading.value = false;
  authorService
    .getAuthorityUserList({
      page,
      rows,
      sord,
      sidx,
      ...props.peopleScreenForm,
      authorityId: props.groupId,
    })
    .then((res) => {
      peopleLoading.value = false;
      if (res.code == 0) {
        tableData.value = res.data.rows;
        pageProps.records = res.data.records;
        console.log(selectTableRef.value);
        nextTick(() => {
          res.data.rows.map((item) => {
            selectTableRef.value.toggleRowSelection(item);
          });
        });
      } else {
        $message.error(res.err);
      }
    });
};
const selectChange = (selection, row) => {
  let postData = {
    authorityId: 0,
    userIds: row.id,
  };
  authorService.setAuthorityUser(postData).then((res) => {
    if (res.code == 0) {
      fetchSelectUsers();
    } else {
      $message.error(res.err);
    }
  });
};
const {
  tableData,
  pageProps,
  $store,
  $route,
  $common,
  rowButtonClick,
  pageChange,
  sortChange,
  $message,
  $messageBox,
} = templateHooks(fetchSelectUsers);
defineExpose({
  pageProps,
  fetchSelectUsers,
});
</script>
