<script setup>
	/**
	 * 选择好友
	 */
	import {
		useStore,
	} from 'vuex'
	import {
		ref,
		computed,
		reactive,
		onMounted,
		inject,
		getCurrentInstance,
		watch,
	} from 'vue'
	// 工具库
	import util from '@/common/js/util.js'
	// 腾讯云聊天
	import TencentCloudChat from '@tencentcloud/chat';
	// 
	import api from '@/api/index.js'
	// 
	const props = defineProps({
		// 列表数据
		list: {
			type: Array,
		},
	})

	const {
		proxy
	} = getCurrentInstance();

	// 已选择的视频id
	const ids = defineModel('ids')
	// 
	const store = useStore()
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})

	/**
	 * 点击用户
	 * @param {Object} item 当前用户信息
	 */
	function handleUser(item) {
		console.log('handleUser', item)
		const findIndex = ids.value.findIndex(node => node == item.userID)
		if (findIndex >= 0) ids.value.splice(findIndex, 1)
		else ids.value.push(item.userID)
	}
</script>

<template>
	<view class="firendBox pr">
		<view class="list bfff">
			<view class="li" v-for="(item, index) in list" :key="index" @click="handleUser(item)">
				<view class="item rows ptb20 pl30 pr50">
					<image class="wh80 avatar  cir" :src="item.profile.avatar" mode="aspectFill" />
					<view class="name thd f1 ml20 c333 f32">{{item.remark || item.profile.nick}}</view>
					<uni-icons type="circle-filled" size="40rpx" color="#20D200" v-if="ids.includes(item.userID)" />
					<uni-icons type="circle" size="40rpx" color="#ccc" v-else />
				</view>
			</view>
		</view>

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

<style lang="scss" scoped>
	// 朋友列表
	.firendBox {
		height: 100%;

		.scroll {
			height: 100%;
		}

		// 列表项
		.li {
			.letter {
				background-color: #eee;
			}
		}

		// 子集
		.child {
			.item+.item {
				border-top: 2rpx solid #eee;
			}
		}
	}
</style>