<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"
	// 群组id
	const groupId = ref('')
	// 好友列表
	const friendList = reactive([])
	// 群成员列表
	const memberList = reactive([])
	// 新增成员
	const newMemberIds = reactive([])

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

	// 获取好友列表
	function getFriendList() {
		// 
		api.news.getFriendList().then(rs => {
			if (rs.code == 200) {
				const result = rs.data
				friendList.length = 0
				friendList.push(...result)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 获取群成员列表
	 * 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)
			console.log('memberList', memberList)
		})
	}

	/**
	 * 是否群成员
	 * @param {Object} userId 用户id
	 */
	function hasMamber(userId) {
		let result = memberList.find(node => node.userID == userId)
		return Boolean(result)
	}

	/**
	 * 选择人员
	 * @param {Object} item 人员信息
	 */
	function handleUser(item) {
		if (hasMamber(item.userId)) return
		let find_index = newMemberIds.findIndex(node => node === item.userId)
		if (find_index >= 0) newMemberIds.splice(find_index, 1)
		else newMemberIds.push(item.userId)
	}

	/**
	 * 添加群成员
	 * https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#addGroupMember
	 */
	function handleSubmit() {
		uni.$chat.addGroupMember({
			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 friendList" :key="item.userId" :id="item.userId"
				@click="handleUser(item)">
				<view class="checkBox">
					<template v-if="hasMamber(item.userId)">
						<uni-icons type="checkbox-filled" size="40rpx" color="#37B11166" />
					</template>
					<template v-else-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.remark || item.userNickname }}</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>