<template>
	<view>
		<uni-nav-bar color="#999" :fixed="true" background-color="#ffffff" status-bar left-icon="left" @clickLeft="back">
			<view class="segmented-box">
				<uni-segmented-control :values="items" @clickItem="setActiveIndex" styleType="button" activeColor="#5fc08e" style="width:120px;"></uni-segmented-control>
			</view>
		</uni-nav-bar>
		<view class="content">
			<uni-search-bar :placeholder="activeIndex?'搜索群名称/群号':'搜索手机号/用户名/用户昵称'" :radius="100"
				bgColor="#eeeeee"
				v-model="keyword"
				@confirm="doSearch"
				@focus="searchFocus = true"
				@blur="searchFocus = false"
				@cancel="doClear"
				@clear="doClear"
			></uni-search-bar>
			
			<view v-if="activeIndex === 0">
				<!-- 搜索 -->
				<uni-list v-if="usersList.length">
					<uni-list-chat v-for="(item,index) in usersList" :key="index"
						:title="item.nickname" :avatarCircle="true"
						:avatar="item.avatar_file&&item.avatar_file.url ? item.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'"  
					>
						<text @click="addUser(index)" class="chat-custom-right">加为好友</text>
					</uni-list-chat>
					<!--
					v-if="keyword.length" 
					<template v-else>
						<uni-list-item v-for="(tab,index) in tabs" :key="index"
							class="tab-item" :title="tab.title" 
							:to="tab.url" showArrow :border="false"
						></uni-list-item>
					</template> -->
				</uni-list>
				<uni-load-more v-else :status="loading?'loading':(hasMore?'hasMore':'noMore')"></uni-load-more>
			</view>
			<view v-if="activeIndex === 1">
				<uni-list v-if="groupList.length">
					<uni-list-chat v-for="(item,index) in groupList" :key="index"
						 :title="item.name" :avatarCircle="true"
						:avatar="item.avatar_file && item.avatar_file.url ? item.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'" 
					>
						<text @click="addUser(index)" class="chat-custom-right">申请加入</text>
					</uni-list-chat>
				</uni-list>
				<uni-load-more v-else :status="loading?'loading':(hasMore?'hasMore':'noMore')"></uni-load-more>
			</view>
		</view>
		
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" :title="activeIndex?'申请加群':'申请添加好友'" 
				placeholder="请输入验证信息" confirmText="发送" message="成功消息" 
				:duration="2000" :before-close="true" :value="value"
				@close="close" @confirm="confirm"
			></uni-popup-dialog>
		</uni-popup>
	</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,
				activeIndex:0,
				value:'',
				items: ['找人', '找群'],
				searchFocus:false,//是否展示搜索列表
				keyword:'',
				tabs:[
					{
						'title':'添加手机联系人',
						'url':''
					},
					{
						'title':'扫一扫加好友',
						'url':''
					},
					{
						'title':'查找陌生人',
						'url':''
					}
				],
				usersData: [],
				checkIndex:'',//申请加的群index
				groupData:[]
			}
		},
		computed: {
			usersList() {
				let current_uid = uniCloud.getCurrentUserInfo().uid
				let friendList = uniIm.friend.dataList
				return this.usersData.filter(item=>{
					if(
						friendList.find(i=>i._id == item._id)
						||
						item._id == current_uid
					){
						return false
					}else{
						return true
					}
				}) 
			},
			groupList() {
				let groupList = uniIm.group.dataList
				// console.log('groupList',groupList);
				return this.groupData.filter(item=>{
					console.log('i.group_info._id == item._id',item.group_info ,item._id);
					if(
						item.group_info && groupList.find(i=>i.group_info._id == item._id)
					){
						return false
					}else{
						return true
					}
				}) 
			}
		},
		mounted() {
			this.getUserList()
			this.getGroupsList()
		},
		methods: {
			async getGroupsList(){
				const res =  await db.collection('uni-im-group').get()
				// console.log("uni-im-group: ",res);
				if(res.result.data.length){
					this.loading = false
					this.hasMore = true
					this.groupData = res.result.data
				}
			},
			async getUserList(){
				try{
					let res = await db.collection('uni-id-users')
										.field('_id,nickname,avatar_file')
										.get()
					let data = res.result.data
					// console.log("data: ",data);
					if(data.length){
						this.loading = false
						this.hasMore = true
						this.usersData = data
					}
				}catch(e){
					console.log(e);
					//TODO handle the exception
				}
			},
			back() {
				uni.navigateBack()
			},
			async doSearch(e){
				console.log("doSearch: ",e,this.keyword);
				if(this.activeIndex){
					let res = await db.collection('uni-im-group')
						.where(`
							"name" == "${this.keyword}" || 
							"_id" == "${this.keyword}"
						`)
						.get()
					console.log(res);
					this.groupData = res.result.data
				}else{
					let res = await db.collection('uni-id-users')
										.where(`
											"_id"		==	"${this.keyword}" || 
											"username"	==	"${this.keyword}" || 
											"nickname"	==	"${this.keyword}" || 
											"email"		==	"${this.keyword}" || 
											"mobile"	==	"${this.keyword}" 
										`)
										.field('_id,nickname,avatar_file')
										.get()
					console.log(res);
					this.usersData = res.result.data
				}
			},
			doClear() {
				this.keyword = ''
				this.getUserList()
				this.getGroupsList()
			},
			setActiveIndex(e) {
				// console.log("activeIndex: ",e);
				if (this.activeIndex != e.currentIndex) {
					this.activeIndex = e.currentIndex;
				}
			},
			addUser(index){
				this.checkIndex = index
				this.$refs.popup.open()
			},
			async confirm(value){
				// if(!value){
				// 	uni.showToast({
				// 		title: '验证信息不能为空！',
				// 		icon:'none'
				// 	});
				// 	return
				// }
				// console.log('提供的验证信息',value);
				this.value = value
				this.$refs.popup.close()
				if(this.activeIndex === 0){
					//添加好友
					const uniImCo = uniCloud.importObject("uni-im-co")
					await uniImCo.addFriendInvite({
						"to_uid": this.usersList[this.checkIndex]._id,
						"message": this.value
					}).then((res)=>{
						console.log("res: ",res);
						uni.showToast({
							title: '已申请',
							icon: 'none'
						});
					}).catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					})
					
				}else{
					// console.log('1233123132123132',this.groupData,this.checkIndex);
					//申请加群
					db.collection('uni-im-group-join').add({
						"group_id":this.groupList[this.checkIndex]._id,
						"message":this.value
					}).then((res) => {
						console.log("res: ",res);
						uni.showToast({
							icon: 'none',
							title: '已申请'
						})
					}).catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					})
				}
				setTimeout(()=> {
					this.value = ''
				}, 100);
				
			},
			close(){
				console.log('取消了');
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.segmented-box{
		flex: 1;
		justify-content: center;
		align-items: center;
	}
	
	/* #ifdef H5 */
	@media screen and (min-width:960px){
		::v-deep .uni-navbar__header-btns-left,
		::v-deep .uni-navbar__placeholder,
		{
			display: none;
		}
		::v-deep .uni-navbar--fixed{
			position: relative;
			left: 0	
		}
	}
	/* #endif */
	
	.content{
		/* #ifdef APP-NVUE */
		margin-top: 75px;
		/* #endif */
	}
	.tab-item{
		border-bottom: #f5f5f5 solid 1px;
		height:60px;
		justify-content: center;
		padding: 0 15rpx;
	}
	.uni-list-item{
		width:720rpx;
	}
	.background{
		background-color: #f5f5f5;
	}

	.grey{
		color: #ddd;
	}
	.chat-custom-right {
		width:70px;
		height:30px;
		line-height: 30px;
		color: #666;
		font-size: 12px;
		text-align: center;
		background-color: #efefef;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		border-radius: 100px;
	}
	.border{
		border: #ddd solid 1px;
	}
	.state-text{
		text-align: center;
		font-size: 28rpx;
	}
	
</style>
