<template>
  <div class="w-full h-[100vh]">
    <ChatHeader title="群成员" />
    <ChatSearch v-model:searchString="searchString" @search="search" />

    <Empty
      v-if="!groupMember?.length && !loading"
      :title="`没有找到&quot;${searchString}&quot;相关成员`"
    />

    <div
      v-if="groupMember?.length && !searchString"
      class="box-border w-full min-h-400 mt-16 mb-12 pt-12 pl-12"
    >
      <van-row>
        <van-col
          style="width: 54px"
          v-for="(item, index) in groupMember"
          :key="index"
          span="4"
          class="mb-12 mr-10"
        >
          <div class="w-40 h-40 rounded-full mx-auto overflow-hidden mb-4">
            <img class="w-full h-full object-cover" :src="item?.avatar" alt="" />
          </div>
          <p class="w-full line-clamp-1 lin text-sm text-center text-black-6">{{ item?.name }}</p>
        </van-col>
        <van-col span="4" class="mb-12 mr-10" @click="navigateTo('/chat/group-add')">
          <div
            class="w-40 h-40 rounded-full flex justify-center items-center bg-[#F3F3F3] border mx-auto overflow-hidden mb-4"
          >
            <van-icon name="plus" size="20" />
          </div>
          <p class="w-full line-clamp-1 lin text-sm text-center text-black-6">添加成员</p>
        </van-col>
        <van-col v-if="isRankAndFiler(setData?.groupRole)" span="4 mb-12 mr-10">
          <div
            class="w-40 h-40 rounded-full flex justify-center items-center bg-[#F3F3F3] border mx-auto overflow-hidden mb-4"
          >
            <van-icon name="minus" size="20" />
          </div>
          <p class="w-full line-clamp-1 lin text-sm text-center text-black-6">删除成员</p>
        </van-col>
      </van-row>
    </div>
    <!-- 搜索后的结果 -->
    <div v-if="searchMember?.length && searchString" class="w-full border-box min-h-400 pl-16">
      <van-cell
        v-for="(item, index) in searchMember"
        :key="item?.id"
        center
        clickable
        size="large"
        class="border-b-[1px]"
        :title="item?.nickname"
      >
        <template #icon>
          <div class="w-40 h-40 rounded-full mr-12 overflow-hidden">
            <img class="w-full h-full object-cover" :src="item?.avatar" alt="" />
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script setup>
const route = useRoute()
const queryParams = reactive({
  groupRole: computed(() => route.query?.groupRole ?? '')
})

const loading = ref(false)
const searchString = ref('')

onMounted(() => {
  getList()
})

// 全部成员
const groupMember = ref([])

// 搜索的成员
const searchMember = ref([])

const setData = ref(null)

// 搜索
const search = () => {
  getList()
}

// 获取群设置的配置信息
const getList = async () => {
  try {
    loading.value = true
    let {
      data: { dataList, totalCount }
    } = await request('/website/tourism/visa/list/page')
    // // query: {
    //   groupId: '0'
    // }

    if (Array.isArray(dataList) && dataList?.length) {
      searchString.value ? (searchMember.value = dataList) : (groupMember.value = dataList)
    } else {
      searchString.value ? (searchMember.value = []) : (groupMember.value = [])
    }

    loading.value = false
  } catch (err) {
  } finally {
    loading.value = false
  }
}

// 是否是普通成员
const isRankAndFiler = (role) => {
  return role == 1 || role == 2 ? true : false
}

definePageMeta({
  layout: false
})

useSeoMeta({
  title: '群成员'
})
</script>
<style lang="scss" scoped></style>
