<template>
  <div class="w-full h-[100vh]">
    <ChatHeaderBar title="选择互关好友" />

    <ChatSearch v-model:searchString="searchString" @search="search" placeholder="请输入关键词" />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <ChatEmpty v-if="!friendList?.length && !loading" title="请输入关键词,没有找到相关结果" />
      <van-list
        v-else-if="friendList.length"
        v-model:loading="loading"
        error-text="获取失败"
        finished-text="-- 没有更多了 --"
        :finished="finished"
        :immediate-check="false"
        @load="getLoadList"
      >
        <van-checkbox-group v-model="checked">
          <!-- <van-index-bar highlight-color="#FD9A00" index-list :sticky="false"> -->
          <template v-for="(item, index) in friendList" :key="item?.id">
            <!-- <van-index-anchor index="A" /> -->
            <van-cell
              v-for="(item, index) in friendList"
              :key="item?.id"
              center
              size="large"
              clickable
              @click="toggle(index)"
              disabled
            >
              <template #icon>
                <div class="flex justify-start">
                  <van-checkbox
                    checked-color="#FD9A00"
                    :name="item.id"
                    :ref="(el) => (checkboxRefs[index] = el)"
                    @click.stop
                  />

                  <div class="w-40 h-40 ml-13 mr-12 rounded-full overflow-hidden">
                    <img class="w-full h-full shrink-0 object-cover" :src="item?.img" alt="" />
                  </div>
                </div>
              </template>
              <template #title>
                <div class="flex items-center">
                  <h1 class="text-xl text-black-3 line-clamp-1">{{ item?.visaTitle }}</h1>
                </div>
              </template>
            </van-cell>
          </template>
          <!-- </van-index-bar> -->
        </van-checkbox-group>
      </van-list>
      <!-- <div class="relative">
        <van-cell center size="large" clickable title="123546" disabled></van-cell>
        <div class="w-full h-46 bg-white/[0.3] absolute top-0 left-0"></div>
      </div> -->
    </van-pull-refresh>

    <div
      class="w-full box-border p-16 pb-40 bg-white fixed bottom-0 left-0 flex justify-between items-center shadow-[0px_-4px_4px_0px_rgba(0,0,0,0.1)]"
    >
      <div class="shrink-0 flex justify-start items-center">
        <div
          v-for="(item, index) in 5"
          :key="index + 'avatar'"
          :class="`w-36 h-36  ${index == 0 ? '' : '-ml-16'} shrink-0 rounded-full overflow-hidden`"
        >
          <img class="w-full h-full object-cover" src="../../assets/img/chat/search.svg" alt="" />
        </div>

        <div v-if="checked.length > 5" class="shrink-0 w-24 h-24 ml-8">
          <img class="w-full h-full object-cover" src="~/assets/img/chat/ellipsis.svg" alt="" />
        </div>
      </div>
      <van-button
        @click="handleCreateGroup"
        style="width: 160px"
        class="shrink-0"
        block
        size="large"
        color="#FD9A00"
        round
      >
        新建
        <span v-if="checked.length">(16{{ checked.length }})</span>
      </van-button>
    </div>
  </div>
</template>
<script setup>
const userInfoStore = useUserInfoStore()
const { userInfo } = storeToRefs(userInfoStore)

definePageMeta({
  layout: false
})

useSeoMeta({
  title: '我的消息'
})

const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)

const checked = ref([])
const searchString = ref('')
const checkboxRefs = ref([])

const friendList = ref([])

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  searchString: ''
})

const toggle = (index) => {
  checkboxRefs.value[index].toggle()
}

const search = () => {
  friendList.value = []
  queryParams.pageNum = 1
  queryParams.searchString = searchString.value
  getList()
}

const onRefresh = () => {
  queryParams.pageNum = 1
  friendList.value = []
  getList()
}

// 触底加载
const getLoadList = () => {
  queryParams.pageNum++
  finished.value = true
  getList()
}

// 获取互关好友列表
const getList = () => {
  try {
    let {
      data: { dataList }
    } = request('/tourMember/memberLit', {
      query: {
        userId: userInfo?.value?.userInfo
      }
    })

    if (Array.isArray(dataList) && dataList?.length) {
      friendList.value = friendList.value.concat(dataList)
    } else {
      friendList.value = []
    }
  } catch (error) {}
}

// 创建多人聊天
async function handleCreateGroup() {
  try {
    showLoadingToast({
      message: '准备开始群聊...',
      duration: 100000
    })
    let { data } = request('/tourGroup/createGroup', {
      method: 'post',
      body: {
        createType: 2,
        creatUserId: userInfo.value.userId
      }
    })
    if (data) {
      navigateTo('/chat/group', {
        query: data?.groupId,
        replace: true
      })
    }
  } catch (error) {
  } finally {
    closeToast()
  }
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped></style>
