<template>
	<view class="create-group-box">
		<view class="header-box">
			<uni-search-bar v-model="keyword"
				placeholder="搜索" bgColor="#fff"
				:radius="100"
				@confirm="getFriendsData"
				@cancel="doClear"
				@clear="doClear"
			></uni-search-bar>
			<!--
			checkFriendsSearchWidth
			<view v-if="checkFriendIds.length" class="image-box"
				:style="{'width':checkFriendsWidth + 'rpx','transform':'translateX' + ( translateXWidth + 'rpx')}">
				<image v-for="(img,index) in checkFriendImg" :key="index" 
					class="avatar" :src="img && img.url ? img.url : '/uni_modules/uni-im/static/avatarUrl.png'"
				></image>
			</view> -->
		</view>
		<view class="content-box">
			<checkbox-group @change="checkboxChange">
				<label v-for="(item,index) in friendList" :key="index" class="label-box" >
					<checkbox :value="item._id" class="checkbox" />
					<view>
						<uni-list :border="false">
							<uni-list-chat :avatar-circle="true" 
								:title="item.nickname" 
								:avatar="item.avatar_file && item.avatar_file.url ? item.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'"
							>
							</uni-list-chat>
						</uni-list>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view class="foot-box">
			<!-- 创建新群可以不选择好友直接创建，要求好友进群必须选择好友 -->
			<button :disabled="group_id? !checkFriendIds.length : false " class="btn" type="primary" @click="createGroup">{{btnText}}{{checkFriendNum}}</button>
		</view>
		<uni-load-more :status="loading?'loading':(hasMore?'hasMore':'noMore')"
			:contentText='{"contentnomore": friendList.length?"没有更多好友":"没有可以选择的好友"}'
		></uni-load-more>
	</view>
</template>

<script>
import uniIm from '@/uni_modules/uni-im/lib/main.js';
	const db = uniCloud.database();
	export default {
		data() {
			return {
				loading:true,
				hasMore: false,
				keyword:'',
				checkFriendIds: [],
				friendData: [],
				groupMemberUid:[] ,//选人进群时，已经在群里的人的id
				group_id:false
			}
		},
		computed: {
			friendList(){
				return this.friendData.filter(item=>!this.groupMemberUid.includes(item._id))
			},
			checkFriendNum() {
				return this.checkFriendIds.length > 0 ? '（'+ this.checkFriendIds.length  +'）': ''
			},
			btnText(){
				return this.group_id ? '立即邀请' : '立即创建'
			},
			checkFriendsWidth() {
				return this.checkFriendIds.length > 6 ? '360' : this.checkFriendIds.length * 65
			},
			// checkFriendsSearchWidth() {
			// 	return this.checkFriendIds.length > 6 ? '360' : 720 - (this.checkFriendIds.length * 60)
			// },
			translateXWidth() {
				return this.checkFriendIds.length > 6 ? this.checkFriendIds.length * 65 : '60'
			},
			checkFriendImg(){
				return this.friendList.reduce((sum,current)=>{
					if(this.checkFriendIds.includes(current._id)){
						sum.push(current)
					}
					return sum
				},[]).map(item=>item.avatar_file)
			}
		},
		async onLoad(options) {
			this.setParam(options)
		},
		methods: {
			async setParam(options = {}){
				console.log("group_id",options);
				if(options.group_id){
					this.group_id = options.group_id
					uni.setNavigationBarTitle({
						title:'邀请新成员'
					})
					//查本群，成员，
					let res = await db.collection('uni-im-group-member').where({
							group_id: options.group_id
						})
						.get()
					console.log("res:查本群，成员 ",res);
					this.groupMemberUid = res.result.data.map(item=>item.user_id)
					console.log('this.groupMemberUid',this.groupMemberUid);
				}
				this.getFriendsData()
			},
			async getFriendsData(){
				let whereString = {}
				if(this.keyword){
					whereString = `
						"_id"		== 	"${this.keyword}" ||
						"username"	== 	"${this.keyword}" || 
						"nickname"	== 	"${this.keyword}" || 
						"email"		== 	"${this.keyword}" || 
						"mobile"	== 	"${this.keyword}" 
					`
				}
				let res = await db.collection(
					db.collection('uni-im-friend').where('"user_id" == $cloudEnv_uid').field('friend_uid,mark,class_name').getTemp(),
					db.collection('uni-id-users').where(whereString).field('_id,nickname,avatar_file').getTemp()
				).get()
				// console.log(res);
				let data = res.result.data
				data.forEach((item,index)=>{
					if(item.friend_uid[0]){
						data[index] = item.friend_uid[0]
					}else{
						delete data[index]
					}
				})
				this.friendData = data
				this.loading = false
				this.hasMore = this.friendList.length != 0
			},
			doClear() {
				this.keyword = ''
				this.getFriendsData()
			},
			checkboxChange(e) {
				// console.log("checkboxChange-value",e.detail.value);
				this.checkFriendIds = e.detail.value
			},
			async createGroup() {
				// console.log('创建', this.checkFriendIds.length)
				const uniImCo = uniCloud.importObject("uni-im-co")
				let res = await uniImCo.chooseUserIntoGroup({
					user_ids:this.checkFriendIds,
					group_id:this.group_id
				})
				this.checkFriendIds = []
				// console.log('createGroup',res);
				if(this.group_id){
					uni.navigateBack({
						delta:1
					})
				}else{
					// #ifdef H5
					if(uniIm.isWidescreen){
						uni.$emit('uni-im-toChat','group_' + res.data.group_id)
					}else{
						uni.redirectTo({
							url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + 'group_' + res.data.group_id,
							animationDuration: 300,
							fail: (e) => {
								console.log(e);
							}
						})
					}
					// #endif
					
					// #ifndef H5
					uni.redirectTo({
						url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + 'group_' + res.data.group_id,
						animationDuration: 300,
						complete: (e) => {
							console.log(e);
						}
					})
					// #endif
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.create-group-box {
		flex: 1;
		flex-direction: column;
		position: relative;
		background-color: #f5f5f5;
		/* #ifdef H5 */
		align-items: center;
		height: 100vh;
		padding-top: 60px;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */
	}
	
	/* #ifdef H5 */
	.create-group-box * {
		max-width: 950px;
	}
	/* #endif */

	.header-box {
		width: 750rpx;
		/* #ifdef H5 */
		position: fixed;
		top: 44px;
		z-index: 99;
		display: flex;
		width: 100%;
		/* #endif */
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.image-box {
		flex-direction: row;
		align-items: center;
		/* #ifndef APP-NVUE */
		transition: 0.3s;
		display: flex;
		white-space: nowrap;
		overflow-x: scroll;
		/* #endif */
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50px;
		/* #ifndef APP-NVUE */
		flex-shrink: 0;
		/* #endif */
	}
	.content-box .label-box .uni-list-chat__content-title{
		line-height: 41px;
	}
	
	/* #ifdef H5 */
	.content-box ::v-deep .uni-list-chat__content-title {
	    position: relative;
	    top: 8px;
	}
	/* #endif */
	
	.content-box {
		/* #ifdef H5 */
		// margin-top: 58px;
		width: 100%;
		/* #endif */
		background-color: #fff;
		z-index: 10;
	}
	.label-box{
		flex-direction: row;
		align-items: center;
		height: 80px;
		margin-right: 20rpx;
	}
	.checkbox{
		margin: 0 20rpx 0 30rpx;
		transform: scale(1.2);
	}
	.foot-box {
		width: 750rpx;
		height: 80px;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		z-index: 99;
		background-color: #f5f5f5;
		/* #ifdef H5 */
		width: 100%;
		@media screen and (min-width:960px){
			bottom: 10vh;
			// right: 25vw;
		}
		/* #endif */
	}

	.btn {
		width: 300px;
	}
</style>
