<template>
  <div>
    <ChatHeaderBar title="管理员审核成员"></ChatHeaderBar>
    <ChatSearch placeholder="请输入关键词" v-model:searchString="searchString" @search="search" />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- <ChatEmpty v-if="!addDataList?.length && !loading" image="search" title="暂无数据" /> -->
      <van-list
        v-model:loading="loading"
        error-text="获取失败"
        finished-text="-- 没有更多了 --"
        :finished="finished"
        :immediate-check="false"
        @load="getLoadList"
      >
        <!-- addDataList v-else-if="addDataList.length" -->
        <!--  v-for="(item, index) in addDataList"
              :key="item?.id" -->
        <van-checkbox-group v-model="checked">
          <template v-for="(item, index) in 12" :key="item?.id">
            <van-cell center clickable @click="toggle(item?.id)" disabled>
              <template #icon>
                <div class="flex justify-start">
                  <van-checkbox
                    checked-color="#FD9A00"
                    :ref="(el) => (checkboxRefs[item?.id] = el)"
                    :name="item"
                    @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">{{ item?.visaTitle }}</h1> -->
                  <h1 class="text-xl text-black-3">{{ item }}</h1>
                </div>
              </template>
            </van-cell>
          </template>
        </van-checkbox-group>
      </van-list>
    </van-pull-refresh>

    <div class="fixed bottom-0 left-0 w-full flex justify-between items-center p-16 pb-40 bg-white">
      <van-button
        @click="handleCancel"
        size="large"
        style="color: #ff9300; margin-right: 8px"
        class="font-semibold w-[48%]"
        round
        color="#FEF4E6"
      >
        取消
      </van-button>
      <van-button
        @click="handlePass"
        size="large"
        class="font-semibold w-[48%]"
        round
        color="#FF9300"
      >
        通过
      </van-button>
    </div>
  </div>
</template>
<script setup>
const route = useRoute()
definePageMeta({
  layout: false
})

useSeoMeta({
  title: '群聊'
})

const refreshing = ref(false)

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

const checkedId = ref(['1877552279941410817'])

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

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

const addDataList = ref([])
const filterDataList = ref([])

const toggle = (index) => {
  // console.log(index)
  checkboxRefs.value[index].toggle()

  console.log(checked.value, 'checked')
  console.log(checkboxRefs.value, 'checkboxRefs')
}

const search = () => {
  searchString.value
  addDataList.value = filterDataList.value.map((item) => {
    if (item.groupName.includes(searchString.value)) {
      return item
    }
  })
}

const onRefresh = () => {
  getList()
}

// 获取数据
const getList = async () => {
  try {
    let url = `/website/tourGroup/getApplicationsList`

    loading.value = true
    let { data } = await request(url, {
      method: 'post',
      query: {
        groupId: route.query.groupId
      }
    })

    if (Array.isArray(data) && data?.length) {
      addDataList.value = data
      filterDataList.value = data
    } else {
      addDataList.value = []
      filterDataList.value = []
    }

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

// 通过成员
async function handlePass() {
  let { data } = await request('/website/tourGroup/applyIsPass', {
    query: {
      id: checkedId.value,
      isPass: 2 //2 同意 3 不同意
    }
  })

  if (data) {
    showSuccessToast('审核通过')
  } else {
    showSuccessToast('审核失败')
  }
}
// 取消
function handleCancel() {
  // checked.value = []
  // navigateTo('/chat/group', {
  //   replace: true
  // })
}
</script>
<style lang="scss" scoped></style>
