<script setup>
	// 移除群成员

	// 腾讯云聊天
	import TencentCloudChat from '@tencentcloud/chat';
	import {
		ref,
		reactive,
		nextTick,
		onUnmounted,
		onMounted,
		computed,
		getCurrentInstance,
		watch,
	} from 'vue'
	// api
	import api from '@/api/index.js'
	// 工具库
	import util from '@/common/js/util.js'
	import {
		onLoad,
		onReady,
		onPageScroll,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		useStore
	} from 'vuex'
import { filter } from 'lodash';
	// 群组id
	const groupId = ref('')
	// 好友列表
	const friendList = reactive([])
	// 群成员列表
	const memberList = reactive([])
	// 新增成员
	const newMemberIds = reactive([])
	const store = useStore()
	// 用户信息
	const userinfo = computed(() => store.state.userinfo)

	onLoad((option) => {
		if (option.groupId) groupId.value = option.groupId
		// 获取群成员列表
		getGroupMemberList()
	})

	/**
	 * 获取群成员列表
	 * https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#getGroupMemberList
	 */
	function getGroupMemberList() {
		uni.$chat.getGroupMemberList({
			groupID: groupId.value,
			count: 100,
		}).then(function(rs) {
			memberList.length = 0
			memberList.push(...rs.data.memberList.filter(item => {
				return item.userID !== userinfo.value.id
			}))
			console.log('memberList', memberList)
		})
	}

	/**
	 * 选择人员
	 * @param {String} id 群成员id
	 */
	function handleUser(id) {
		let find_index = newMemberIds.findIndex(node => node === id)
		if (find_index >= 0) newMemberIds.splice(find_index, 1)
		else newMemberIds.push(id)
	}

	/**
	 * 删除群成员
	 * https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#deleteGroupMember
	 */
	function handleSubmit() {
		uni.$chat.deleteGroupMember({
			groupID: groupId.value,
			userIDList: newMemberIds,
		}).then((rs) => {
			uni.navigateBack()
		}).catch((imError) => {
			console.warn('addGroupMember error:', imError); // 错误信息
		});
	}
</script>

<template>
	<view class="appbw">
		<view class="list pb30">
			<view class="item rows mlr20" v-for="(item, index) in memberList" :key="item.userID" :id="item.userID"
				@click="handleUser(item.userID)">
				<view class="checkBox">
					<template v-if="newMemberIds.includes(item.userID)">
						<uni-icons type="checkbox-filled" size="40rpx" color="#37B111" />
					</template>
					<template v-else>
						<uni-icons type="circle" size="40rpx" color="#999" />
					</template>
				</view>

				<view class="child pl30 pr50 f1">
					<view class="item rows ptb20">
						<image class="wh80 avatar  cir" :src="item.avatar" mode="aspectFill" />
						<view class="name thd f1 ml20 c333 f32">{{ item.nameCard || item.nick }}</view>
					</view>
				</view>
			</view>

			<view class="mtb20 nomore">到底啦~</view>
		</view>

		<view class="footer plr30 bfff">
			<view class="btn colourful" @click="handleSubmit">移除</view>
		</view>
	</view>
</template>

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