<template>
  <div class="outer-layer manage-group-members-page">
    <div class="root">
      <ZPaging
        ref="zPaging"
        :show-scrollbar="false"
        :use-virtual-list="true"
        :virtual-list-col="5"
        v-model="state.memberList"
        @query="getGroupMembers"
        :auto="false"
        :refresher-enabled="false"
        :loading-more-enabled="false"
      >
        <template #top>
          <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
            <div class="navBar-title flex flex-col items-center justify-center">
              <span class="text-[34rpx] font-medium">
                {{ $t('chat.settings.groupMember') }}
              </span>
            </div>
          </tm-navbar>
        </template>
        <div class="group-members-list">
          <groupMemberList :memberList="state?.memberList"></groupMemberList>
        </div>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import groupMemberList from '../components/groupMembersList.vue'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive } from 'vue'
import { ServeQueryGroupMembers } from '@/api/chatSettings/index'

const state = reactive({
  memberList: [], //人员列表
})

const zPaging = ref()
useZPaging(zPaging)

onLoad((options) => {
  console.log(options)
  if (options.groupId) {
    state.groupId = Number(options.groupId)
    getGroupMembers()
  }
})

//查看群成员
const getGroupMembers = () => {
  let params = {
    group_id: state.groupId,
  }
  console.log(params)
  const resp = ServeQueryGroupMembers(params)
  console.log(resp)
  resp.then(({ code, data }) => {
    console.log(data)
    if (code == 200) {
      zPaging.value?.completeByNoMore(data.items, true)
    } else {
    }
  })

  resp.catch(() => {})
}
</script>
<style scoped lang="scss">
.outer-layer {
  flex: 1;
  background-image: url('@/static/image/clockIn/z3280@3x.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.group-members-list {
  margin: 20rpx 32rpx;
  padding: 0 0 32rpx;
  background-color: #fff;
}
</style>
