<template>
	<view>
		<view class="contain">
			<view class="view-image-text">
				<image class="image-radius"
					:src="userInfo.url || 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/avatar.png'">
				</image>
				<view class="text-container">
					<view class="name">
						<text class="hasname">{{ userInfo.remark || userInfo.nick }}</text>
					</view>
					<view class="ID">id：{{  userInfo.id }}</view>
				</view>
			</view>
		</view>
		<view class="box">
			<block>
				<view class="list one" @tap="handleEditToggle" v-if="isMsg">
					<view class="list-name">备注名</view>
					<view class="remarkname">
						<text class="aside-right">{{ userInfo.remark }}</text>
						<u-icon class="listimage" name="arrow-right" color="#000000" size="20"></u-icon>
					</view>
					<view class="popup-mask" v-if="popupToggle" @tap.stop="handleEditToggle">
						<view class="popup-main" @tap.stop="handleCatchTap">
							<view class="popup-main-header">
								<label class="popup-main-header-title">修改备注</label>
								<button class="button" @tap.stop="handleEditSubmit" :disabled="!infoNick">确认</button>
							</view>
							<input class="popup-main-input" type="text" :value="infoNick" @input="bindEditInput" />
							<label class="text">仅限中文、字母、数字和下划线，2-20个字</label>
						</view>
					</view>
				</view>
				<view class="list one" v-else>
					<view class="list-name">昵称</view>
					<view class="remarkname">
						<text class="aside-right">{{ userInfo.nick || userInfo.id }}</text>
					</view>
				</view>
				<view class="list one">
					<view class="list-name">来源</view>
					<view class="remarkname">
						<text class="aside-right">API</text>
					</view>
				</view>
			</block>
		</view>
		<view class="quit-main" v-show="isAdd" @tap="handleAdd">
			<view class="quit-main-text">添加好友</view>
		</view>
		<view class="quit-main" @tap="navigateBack" v-show="isMsg">
			<view class="quit-main-text">发送消息</view>
		</view>
		<view class="quit-main" @tap="delFriend(userInfo.id)" v-show="dele">
			<view class="quit-main-text del">删除好友</view>
		</view>
		<view class="quit-main" @tap="join(userInfo.id)" v-if="isShow">
			<view class="quit-main-text del">加入黑名单</view>
		</view>
		<view class="quit-main" @tap="remove(userInfo.id)" v-else>
			<view class="quit-main-text del">移除黑名单</view>
		</view>
		<addFrien ref="addRef"></addFrien>
	</view>
</template>

<script>
	import addFrien from "@/components/IM/add-frien.vue"
	export default {
		// 在test.vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			// index 1 是好友  2加好友   3已拉黑
			console.log(option);
			if (option && option.id) {
				this.userInfo = option;
				this.checkFriend(option.id).then((res) => {
					switch (res) {
						// A 的好友表中有 B，B 的好友表中也有 A
						case 4:
							this.dele = true;this.isMsg = true;
							break;
							// A 的好友表中没有 B，B 的好友表中也没有 A
						case 1:
							this.isMsg = false;this.isAdd = true;
							break;
					}
					// isAdd:false, //是否加好友
					// dele: false,  //是否删除
					// isShow: true, //是否加入黑名单
					// isMsg:false, //是否可以发信息
					// - relation: TIM.TYPES.SNS_TYPE_NO_RELATION A 的好友表中没有 B，B 的好友表中也没有 A
					// - relation: TIM.TYPES.SNS_TYPE_A_WITH_B A 的好友表中有 B，但 B 的好友表中没有 A
					// - relation: TIM.TYPES.SNS_TYPE_B_WITH_A A 的好友表中没有 B，但 B 的好友表中有 A
					// - relation: TIM.TYPES.SNS_TYPE_BOTH_WAY A 的好友表中有 B，B 的好友表中也有 A
				})
				this.checkBlack(option.id)
			}
			this.getPer();
		},
		data() {
			return {
				display: false,
				show: true,
				popupToggle: false,
				popupToggleAvatar: false,
				popupAdd: false,
				userInfo: '',
				infoNick: '', //备注设置
				infoTest: '', //验证信息
				infoRemark: '', //申请备注
				own: '',
				isAdd: false, //是否加好友
				dele: false, //是否删除
				isShow: true, //是否加入黑名单
				isMsg: false, //是否可以发信息
			};
		},
		components: {
			addFrien
		},
		props: {},

		onShow() {},

		methods: {
			// 校验是否在黑名单
			checkBlack(id){
				uni.$TUIKit.getBlacklist().then((res)=>{
					if(res.data){
						if(res.data.includes(id)){
							this.isShow = false;
						}else{
							this.isShow = true;
						}
					}
				})
				// 
			},
			// 检测是否是好友
			checkFriend(id) {
				return new Promise((resolve, reject) => {
					let pcheckFriend = uni.$TUIKit.checkFriend({
						userIDList: [id],
						type: this.TIM.TYPES.SNS_CHECK_TYPE_BOTH, //多检查
						// type: this.TIM.TYPES.SNS_CHECK_TYPE_SINGLE,  //单检查
					});
					pcheckFriend.then((imResponse) => {
						const {
							successUserIDList,
							failureUserIDList
						} = imResponse.data;
						// 检查成功
						if (successUserIDList.length > 0) {
							let {relation} = successUserIDList[0];
							console.log(relation);
							if (relation == this.TIM.TYPES.SNS_TYPE_NO_RELATION) {
								resolve(1)
							}
							if (relation == this.TIM.TYPES.SNS_TYPE_A_WITH_B) {
								resolve(2)
							}
							if (relation == this.TIM.TYPES.SNS_TYPE_B_WITH_A) {
								resolve(3)
							}
							if (relation == this.TIM.TYPES.SNS_TYPE_BOTH_WAY) {
								resolve(4)
							}
						} else if (failureUserIDList.length > 0) {
							console.log('好友检测失败');
						}
					}).catch(function(imError) {
						console.warn('checkFriend error:', imError);
					});
				})
			},
			bindEditInput(e) {
				const val = e.detail.value;
				this.infoNick = val ? val : '';
				console.log(val);
			},
			testInput(e) {
				const val = e.detail.value;
				this.infoTest = val ? val : '';
				console.log(val);
			},
			remarksInput(e) {
				const val = e.detail.value;
				this.infoRemark = val ? val : '';
				console.log(val);
			},
			// 修改昵称 禁止冒泡
			handleCatchTap() {
				return;
			},
			// 修改昵称确认
			handleEditSubmit() {
				console.log(this.userInfo.id);
				console.log(this.userInfo.remark);
				const ID = this.userInfo.id;
				const remark = this.userInfo.remark;
				if (this.infoNick === this.remark) {
					return;
				}
				this.popupToggle = false;
				let promise = uni.$TUIKit.updateFriend({
					userID: ID,
					remark: this.infoNick,
				});
				promise
					.then(imResponse => {
						console.log(imResponse.data); // Friend 实例
						this.userInfo.remark = imResponse.data.remark;
						this.popupToggle = false;
					})
					.catch(function(imError) {
						console.warn('getFriendProfile error:', imError); // 更新失败
					});
			},
			// 添加好友确认
			friendApplication(id) {
				console.log(this.TIM); //添加的好友id
				console.log(this.own); //我的id
				let promise = uni.$TUIKit.addFriend({
					to: id,
					source: 'AddSource_Type_Web',
					remark: this.infoRemark,
					// groupName: '好友',
					wording: this.infoTest,
					type: this.TIM.TYPES.SNS_ADD_TYPE_BOTH,
				});
				promise.then(imResponse => {
						// 添加好友的请求发送成功
						const {
							code
						} = imResponse.data;
						console.log(code);
						if (code === 30539) {
							// 30539 说明 user1 设置了【需要经过自己确认对方才能添加自己为好友】，此时 SDK 会触发 TIM.EVENT.FRIEND_APPLICATION_LIST_UPDATED 事件
							uni.showModal({
								title: '提示',
								content: '申请添加好友成功',
								success: res => {
									if (res.confirm) {
										console.log('用户点击确定');
										this.setData({
											popupAdd: !this.popupAdd,
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								},
							});
						} else if (code === 0) {
							// 0 说明 user1 设置了【允许任何人添加自己为 好友】，此时 SDK 会触发 TIM.EVENT.FRIEND_LIST_UPDATED 事件
							uni.showModal({
								title: '提示',
								content: '添加好友成功',
								success: res => {
									if (res.confirm) {
										console.log('用户点击确定');
										this.display = false;
										this.dele = true;
										this.popupAdd = !this.popupAdd;
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								},
							});
						}
					}).catch(function(imError) {
						console.warn('addFriend error:', imError); // 添加好友失败的相关信息
					});
			},
			handleEditToggle() {
				this.popupToggle = !this.popupToggle;
				this.infoNick = this.userInfo.remark;
			},
			handleAdd() {
				if(!this.isShow){
					this.$msg('先将对方移除黑名单，再重试！',2500)
					return false;
				}
				let userID = this.userInfo.id
				let promise = uni.$TUIKit.getUserProfile({
					userIDList: [userID] // 请注意：即使只拉取一个用户的资料，也需要用数组类型，例如：userIDList: ['user1']
				});
				promise.then((imResponse)=> {
					let toUser = imResponse.data[0]
					/* 需要经过自己确认对方才能添加自己为好友 */
					if(toUser.allowType=='AllowType_Type_NeedConfirm'){
						this.$refs.addRef.open(toUser)
					}
					/* 允许任何人添加好友 */
					if(toUser.allowType=='AllowType_Type_AllowAny'){
						this.$refs.addRef.addID(toUser).then(()=>{
							this.dele = true;this.isMsg = true;this.isAdd = false;
						})
					}
					/* 不允许任何人添加自己为好友 */
					if(toUser.allowType=='AllowType_Type_DenyAny'){
						this.$msg('对方设置了，不允许添加为好友！')
					}
				}).catch(function(imError) {
					console.warn('getUserProfile error:', imError); // 获取其他用户资料失败的相关信息
				});
			},
			navigateBack() {
				uni.navigateTo({
					url: '/pages/im/chat/chat?conversationID=C2C' + this.userInfo.id,
				});
			},
			// 删除好友
			delFriend(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除好友',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							console.log(id);
							let promise = uni.$TUIKit.deleteFriend({
								userIDList: [id],
								type: this.TIM.TYPES.SNS_DELETE_TYPE_BOTH,
							});
							promise
								.then(imResponse => {
									const {
										successUserIDList,
										failureUserIDList
									} = imResponse.data;
									console.log(successUserIDList);
									// 删除成功的 userIDList
									successUserIDList.forEach(item => {
										const {
											userID
										} = item;
									});
									this.add = true;
									// 删除失败的 userIDList
									failureUserIDList.forEach(item => {
										const {
											userID,
											code,
											message
										} = item;
									});
									// 如果好友列表有变化，则 SDK 会触发 TIM.EVENT.FRIEND_LIST_UPDATED 事件
									let onFriendListUpdated = function(event) {
										console.log(event.data);
									};
									uni.navigateBack({
										delta: 2,
									});
									uni.$TUIKit.on(this.TIM.EVENT.FRIEND_LIST_UPDATED,
										onFriendListUpdated);
								})
								.catch(function(imError) {
									console.warn('removeFromFriendList error:', imError);
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				});
			},
			// 加入黑名单
			join(id) {
				uni.showModal({
					title: '提示',
					content: '确定是否加入黑名单',
					success: res => {
						if (res.confirm) {
							console.log('用户点击确定');
							console.log(id);
							let promise = uni.$TUIKit.addToBlacklist({
								userIDList: [id],
							}); // 请注意：即使只添加一个用户帐号到黑名单，也需要用数组类型，例如：userIDList: ['user1']
							promise
								.then(imResponse => {
									this.isShow = false;
									this.isMsg = false;this.dele = false;
									console.log(imResponse
										.data); // 成功添加到黑名单的账号信息，结构为包含用户 userID 的数组 - [userID]
								})
								.catch(function(imError) {
									console.warn('addToBlacklist error:', imError); // 添加用户到黑名单列表失败的相关信息
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				});
			},
			remove(id) {
				uni.showModal({
					title: '提示',
					content: '确定是否移除黑名单',
					success: res => {
						if (res.confirm) {
							let promise = uni.$TUIKit.removeFromBlacklist({
								userIDList: [id],
							}); // 请注意：即使只从黑名单中移除一个用户帐号，也需要用数组类型，例如：userIDList: ['user1']
							promise
								.then(imResponse => {
									this.isShow = true;
									this.isAdd = true;
									console.log(imResponse
										.data); // 从黑名单中成功移除的账号列表，结构为包含用户 userID 的数组 - [userID]
								})
								.catch(function(imError) {
									console.warn('removeFromBlacklist error:',
										imError); // 将用户从黑名单中移除失败的相关信息
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				});
			},
			// 获取个人ID
			getPer() {
				let promise = uni.$TUIKit.getMyProfile();
				promise
					.then(imResponse => {
						this.own = imResponse.data.userID;
					})
					.catch(function(imError) {
						console.warn('getMyProfile error:', imError); // 获取个人资料失败的相关信息
					});
			},
		},
	};
</script>

<style scoped>
	.add-url {
		display: flex;
	}

	.add-url text {
		line-height: 120rpx;
		text-align: center;
		margin-left: 20rpx;
	}

	.add-input {
		background: #f4f5f9;
		padding: 8px 12px;
		border-radius: 10px;
	}

	.test {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.test text {
		width: 34%;
		line-height: 80rpx;
		text-align: right;
		margin-right: 16rpx;
	}

	.contain {
		width: 100%;
		height: 100%;
	}

	.view {
		height: 358rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.view-image-text {
		display: flex;
		height: 189rpx;
		justify-content: left;
		align-items: center;
		background: #ffffff;
		z-index: 1;
		padding: 0 40rpx;
	}

	.image-radius {
		height: 120rpx;
		width: 120rpx;
		border-radius: 50%;
	}

	.ID {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #666666;
		letter-spacing: 0;
		margin-left: 10px;
		margin-top: 10px;
		padding-bottom: 40rpx;
	}

	.box {
		width: 100%;
	}

	.list {
		position: relative;
		display: flex;
		align-items: center;
		background-color: white;
		width: 100%;
		height: 56px;
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #333333;
		letter-spacing: 0;
		line-height: 24px;
		border-bottom: 1px solid #eef0f3;
	}

	.list-name {
		display: inline-block;
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #333333;
		letter-spacing: 0;
		line-height: 24px;
		margin: 0 50rpx;
	}

	.text-container {
		padding-top: 40rpx;
	}

	.hasname {
		margin-left: 20rpx;
	}

	.quit-main {
		margin-top: 36px;
		margin-left: 25px;
		margin-right: 20px;
		background-color: white;
		width: 85%;
		height: 46px;
		border: 1px solid #5856d5;
		border-radius: 24px;
		border-radius: 24px;
	}

	.quit-main-text {
		display: flex;
		justify-content: center;
		margin-top: 13px;
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #5856d5;
		letter-spacing: 0;
	}

	.one {
		justify-content: space-between;
	}

	.one .api {
		margin-right: 40rpx;
	}

	.icon {
		margin-right: 20rpx;
	}

	.aside-right {
		float: right;
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #999999;
		letter-spacing: 0;
		text-align: right;
		line-height: 56px;
		padding-right: 36px;
		z-index: 999;
	}

	.listimage {
		width: 16px;
		height: 16px;
		position: absolute;
		top: 20px;
		right: 10px;
	}

	.popup-mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 10;
		top: 0;
		/*  #ifdef  H5  */
		top: calc(88rpx + constant(safe-area-inset-top));
		top: calc(88rpx + env(safe-area-inset-top));
		/*  #endif  */
		right: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: flex-end;
	}

	.add-frien {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 10;
		top: 0;
		/*  #ifdef  H5  */
		top: calc(88rpx + constant(safe-area-inset-top));
		top: calc(88rpx + env(safe-area-inset-top));
		/*  #endif  */
		right: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: flex-end;
	}

	.popup-main {
		width: 100vw;
		background: #ffffff;
		padding: 20px 20px;
		height: 400rpx;
	}

	.add-main {
		width: 100vw;
		background: #ffffff;
		padding: 20px 20px;
		height: 450rpx;
	}

	.popup-main-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24px;
		color: #000000;
		letter-spacing: 0;
		line-height: 36px;
		margin-bottom: 10rpx;
	}

	.popup-main-header button {
		font-size: 16px;
		color: #5856d5;
		letter-spacing: 0;
		line-height: 28px;
		width: auto !important;
		background: transparent;
		margin: 0 !important;
	}

	.popup-main-input {
		background: #f4f5f9;
		padding: 14px 20px;
		margin: 20px 0;
		border-radius: 20px;
		border-radius: 20px;
	}

	.text {
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #999999;
		letter-spacing: 0;
	}

	.del {
		color: #dd524d;
	}
</style>