<template>
	<view>
		<view>
			<u-navbar :custom-back="goback" title=" " :background="{ background: '#ffffff'  }" :border-bottom="false">
				<view class="slot-wrap" @click="toDetail()">
					<view>
						<u-icon name="more-dot-fill" color="#000000" :size="35"></u-icon>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="friendInfo">
			<view class="img">
				<u-image 	:src="friendInfo.avatar"
							mode="aspectFill" width="120" height="120" border-radius="12">
					<u-loading slot="loading"></u-loading>
					<view slot="error"
							class="u-flex u-row-center u-col-center  u-p-t-10"
							style="width: 90rpx;height: 90rpx;background-color: #f1f1f1;border-radius: 12rpx;">
						<view>
							<image src="/static/image/default/default-user/default-user.png" 
									style="width: 64rpx;height: 64rpx;"></image>
						</view>
					</view>
				</u-image>
			</view>

			<view class="friendInfo-desc">
				<view class="friendInfo-desc-name u-flex u-row-left u-col-center">
					<view class="u-line-2" style="font-size:42rpx;max-width: 400rpx;">
						<text>{{friendInfo.nickName}}</text>
					</view>
					<view  class="u-m-l-10 u-flex u-row-center u-col-center  u-p-b-10">
						<view>
							<u-image  v-if="friendInfo.sex==1" src="/static/image/chat/addFriend/woman.png" width="34rpx" height="34rpx"></u-image>
							<u-image  v-if="friendInfo.sex==0" src="/static/image/chat/addFriend/man.png"  width="34rpx" height="34rpx"></u-image>
						</view>
					</view>
				</view>
				<view class="friendInfo-desc-gray u-line-1  u-m-b-4" style="max-width: 500rpx;">微信号：{{friendInfo.chatNumber}}</view>
				<view v-if="friendInfo.address&&friendInfo.address!=0&&friendInfo.address.length>0" class="friendInfo-desc-gray">地区：{{friendInfo.address}}</view>
			</view>
		</view>
		<u-cell-group>
			<u-cell-item title="备注和标签" :title-style="titleStyle"></u-cell-item>
			<u-cell-item  :border-bottom="false"  title="朋友权限" 
				:title-style="titleStyle" @click="setFiendPermission"></u-cell-item>
			<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
			<u-cell-item  :title-style="titleStyle">
				<view slot="title" class="u-flex u-row-left u-col-center">
					<view>
						<text>朋友圈</text>
					</view>
					<view class="u-flex u-row-left u-col-center u-m-l-50" 
						 v-if="friendInfo.friendCircle&&friendInfo.friendCircle.length>0">
						<template v-for="(circle,index) in friendInfo.friendCircle.length">
							<view class="u-m-l-10" v-if="circle!=circle&&circle.length>0">
								<u-image :src="circle" :width="90" :height="90"></u-image>
							</view>
						</template>
					</view>
				</view>
			</u-cell-item>
			<u-cell-item title="视频号" :title-style="titleStyle"></u-cell-item>
			<u-cell-item  :border-bottom="false"  title="更多信息" :title-style="titleStyle" @click="linkToMoreInfoMation"></u-cell-item>
		</u-cell-group>
		<u-gap height="20" bg-color="#eee" margin-top="0" margin-bottom="1"></u-gap>
		<view  style="background-color: #ffffff;">
			<view 	class="u-flex u-row-center u-col-center u-p-30" 
					style="font-size: 32rpx;color: #335f83;">
					<view class="u-m-r-20">
						<!-- width="36rpx" height="36rpx" -->
						<u-image src="/static/image/chat/sms-send.png"  mode="aspectFit" width="40rpx" height="40rpx"></u-image>
					</view>
					<view  style="font-weight: 450;">
						<text>发信息</text>
					</view>
			</view>
			<u-gap height="1" bg-color="#eee"></u-gap>
			<view class="u-flex u-row-center u-col-center u-p-30" 
				  style="font-size: 32rpx;color: #335f83;">
				<view  class="u-m-r-20">
					<!--  src="/static/image/chat/yinshipin.jpg"  width="40rpx" height="40rpx"-->
					<u-image src="/static/image/chat/video-call.png" mode="aspectFit" width="50rpx" height="50rpx"></u-image>
				</view>
				<view style="font-weight: 450;">
					<text>音视频通话</text>
				</view>
			</view>
		</view>
		<u-action-sheet :list="callList" v-model="callShow" @click="callClick"></u-action-sheet>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					marginLeft: '10rpx',
					color: '#000000',
					fontSize: "34rpx",
				},
				friendInfo: {},
				callList:[
					{text: '视频通话'},
					{text: '语音通话'}
				],
				callShow:false,
			}
		},
		onLoad(option) {
			let that=this;
			/* let param=JSON.parse(decodeURIComponent(option.personInfo));
			this.friendInfo=param; */
			this.friendInfo=this.yyy_current_user;
			//往好友里面塞
			let arr=JSON.parse(JSON.stringify(this.vuex_yyyFriendList));
			let isExist = arr.some(item=>item.chatNumber===this.friendInfo.chatNumber);
			if(!isExist){
				arr.push(this.friendInfo);
			};
			this.$u.vuex("vuex_yyyFriendList",arr);
			console.log("this.vuex_yyyFriendList=======",this.vuex_yyyFriendList);
		},
		methods: {
			goback(){
				console.log("自定义返回");
				uni.navigateBack({  
				    delta:3,
					animationType:"slide-out-right"  
				});  
			},
			//创建单聊会话
			createSingleChat:function(){
			  let that=this;
			},
			//跳转聊天窗口
			linkToChatting:function(groupInfo) {
			  let that=this;
			},
			//音视频弹窗
			toCall() {
				return;
			},
			//确认发起音视频
			callClick:function(index){
				this.globalUtil.utilAlert("不能进,没完事~敬请期待");
			},
			//设置标签
			setFiendTag() {
				this.globalUtil.utilAlert("不能进,没完事~敬请期待");
				return;
			},
			//设置朋友权限
			setFiendPermission() {
				this.globalUtil.utilAlert("不能进,没完事~敬请期待");
				return;
			},
			//查看朋友的朋友圈
			viewHisFiendCircle() {
				this.globalUtil.utilAlert("不能进,没完事~敬请期待");
				return;
			},
			//更多信息
			linkToMoreInfoMation() {
				this.$u.route({
					url: "/pages/tabbar/contact/friends/friend-more-info",
					params: {
						signature: this.friendInfo.signature
					}
				})
			},
			toDetail:function(){
				this.$u.route({
					url: "/pages/tabbar/contact/friends/friend-home-detail",
					params: {
						friendInfo:encodeURIComponent(JSON.stringify(this.friendInfo))
					}
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		width: 100%;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
		flex-direction: row;
		justify-content: flex-end;
	}

	.perch {
		height: 10rpx;
	}

	.friendInfo {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 20rpx 30rpx 40rpx 40rpx;
		background-color: #FFFFFF;

		.img {
			display: block;
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
		}

		&-desc {
			padding-left: 30rpx;
			&-name {
				font-weight: bold;
				font-size: 36rpx;
				transform: translateY(-10rpx);
				color: #000000;
			}
			&-gray {
				color: #757575;
				font-size: 32rpx;
				font-weight: 420rpx;
			}
		}
	}
</style>
<style>
	page{
		background-color: #eeeeee;
	}
</style>
