<style>
	.persondetails{
		width: 100%;
		height: 100vh;
		
	}
	.persondetails .pd-box{
		background:linear-gradient( #9EE3E1,5%, #FFF);
		height: 100%;
		
	}
	.persondetails .titlenav {
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: #FFFFFF;
	}
	.persondetails .headStatus {
		overflow: hidden;
		position: relative;
		width: 140vw;
		padding-right: 40vw;
		padding-bottom: 10px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		background: #FFFFFF;
		align-items: center;
		justify-content: space-between;
	}
	.persondetails .headStatus .arrow {
		height: 24px;
		margin: 5px 10px;
		width: 24px;
	}
	.persondetails .sharebox_top_nav {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		padding: 0 10px;
	}
	.persondetails .headStatus .title {
		font-size: 16px;
		color: #000;
		flex: 1;
		width: 1px;
		margin-left: 10px;
		line-height: 34px;
	}
	.persondetails .pd-box-center{
		padding: 0 15px;
		margin-bottom: 30px;
	}
	.persondetails .pd-portrait{
		display: flex;
		flex-direction: row;
		margin-top: 15px;
	}
	.persondetails .pd-portrait-l{
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		position: relative;
	}
	.persondetails .pd-portrait-c{
		width: calc(100vw - 30px - 70px - 15px);
		height: 66px;
		margin-left: 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.persondetails .pd-portrait-ct{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-end;
	}
	.persondetails .pd-p-text{
		width: 100%;
		font-size: 20px;
		color: #000000;
		overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;
	}
	.persondetails .guanzhu{
		width: 70px;
		height: 25px;
		border-radius: 12px;
		font-size: 13px;
		color: #FFF;
		text-align: center;
		line-height: 25px;
	}
	.persondetails .pd-title{
		margin-top: 20px;
		font-size: 15px;
		color: #111111;
	}
	.persondetails .pd-bubble{
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}
	.pd-bubble .bubble{
		height: 27px;
		border-radius: 13px;
		line-height: 27px;
		padding: 0 16px;
		margin: 15px 15px 0 0;
		background: #EDEDED;
	}
	.pd-abouthim{
		width: 100%;
		border-radius: 13px;
		font-size: 12px;
		color: #000000;
		padding: 15px;
		margin-top: 15px;
		background: #EDEDED;
	}
	.persondetails .zhezao{
		width: 100%;
		height: 100%;
		border-radius: 15px;
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40px;
		color: #FFFFFC;
		font-family: aa;
	}
	.persondetails .edit{
		width: 100%;
		height: 44px;
		border-radius: 22px;
		margin: 45px 0 20px;
		font-size: 16px;
		color: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bwytBtn{
		position: fixed;
		right: 20rpx;
		bottom: 140rpx;
		z-index: 50;
		width: 63px;
		height: 63px;
		
	}
</style>
<template>
	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh;position: relative;">
		<view class="persondetails" >
			<view class="bwytBtn" v-if="mall_UserInfo.UserId != dataList.Id">
				<image src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/blindDate_yueta.png' style="width: 100%;height: 100%;"></image>
				<button style='position: absolute;left: 0;top: 0;opacity: 0;width: 100%;height: 100%;'  open-type="contact" :send-message-title="dataList.Name" :send-message-path="path" :send-message-img="dataList.Photo" :show-message-card="true"></button>
			</view>
			
			
			<view class="headStatus" v-if="scrollTop > 50" :style="[headStyle,
				{
				  zIndex: scrollTop < 10 ? 'unset' : 2,
				  opacity: scrollTop < 10 ? '100' : scrollTop,
				},
			  ]">
				
				<view class="arrow" @click="redirectPrev">
					<u-icon name="arrow-left" size="48" color="#000"></u-icon>
				</view>
				<view class="title" v-if="scrollTop > 50">{{pageTitle}}</view>
				<view class="arrow"></view>
			</view>
			<view class="pd-box" >
				<view class="sharebox_top_nav" :style="{paddingTop:nav}">
					<view class="arrow" @click="redirectPrev">
						<u-icon name="arrow-left" size="48" color="#111"></u-icon>
					</view>
					<view class="title" style="color: #111111;font-size: 16px;">{{pageTitle}}</view>
					<view style="width: 24px;height: 24px;"></view>
				</view>
				<view class="pd-box-center">
					<view class="pd-portrait">
						<view class="pd-portrait-l">
							<u-avatar v-if='dataList.Photo' :src="dataList.Photo" size="140" ></u-avatar>
							<image v-if="dataList.Sex==1" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan.png" style="width: 36rpx;height: 36rpx;position: absolute;right: 0;bottom: 0;"></image>
							<image v-if="dataList.Sex==2" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv.png" style="width: 36rpx;height: 36rpx;position: absolute;right: 0;bottom: 0;"></image>
						</view>
						<view class="pd-portrait-c">
							<view class="pd-portrait-ct">
								<view class="pd-p-text" >{{dataList.Name?dataList.Name:'无'}}</view>
							</view>
							<view class="pd-portrait-ct">
								<view style="display: flex;flex-direction: row;align-items: center;">
									<view style="width: 40px;height: 15px;font-size: 10px;color: #555555;border-radius: 7px;border: 1px solid #999999;display: flex;align-items: center;justify-content: center;" v-if="dataList.IsAttestation==0">
										未认证
									</view>
								</view>
								
								<view @click="dianjiguanzhu(dataList)" v-if="dataList.IsFollow!=-1">
									<view class="guanzhu" :style="{background:mainColor}" v-if="dataList.IsFollow==0" >
										关注
									</view>
									<view class="guanzhu" :style="{background:mainColor}" v-if="dataList.IsFollow==1">
										已关注
									</view>
									<view class="guanzhu" :style="{background:mainColor}" v-if="dataList.IsFollow==2">
										被关注
									</view>
									<view class="guanzhu" :style="{background:mainColor}" v-if="dataList.IsFollow==3">
										互关
								</view>
									
								</view>
							</view>
						</view>
					</view>
					<view v-if="dataList.IsAttestation==0 && mall_UserInfo.UserId != dataList.Id" style="width: 100%;margin-top: 50px;text-align: center;color: #999999;">
						此用户还未实名认证
					</view>
					<view v-if="dataList.IsAttestation==1">
						<!-- 基础资料 -->
						<view class="pd-title">基础资料</view>
						<view class="pd-bubble">
							<view class="bubble" v-if="dataList.SexStr">{{dataList.SexStr}}</view>
							<view class="bubble" v-if="dataList.Birthday">{{dataList.Birthday}}</view>
							<view class="bubble" v-if="dataList.Age">{{dataList.Age}}</view>
							<view class="bubble" v-if="dataList.ShenXiao">{{dataList.ShenXiao}}</view>
							<view class="bubble" v-if="dataList.ConoldBaseInfostellation">{{dataList.ConoldBaseInfostellation}}</view>
							<view class="bubble" v-if="dataList.Height">{{dataList.Height}}cm</view>
							<view class="bubble" v-if="dataList.Weight">{{dataList.Weight}}kg</view>
							<view class="bubble" v-if="dataList.Marriage">{{dataList.Marriage}}</view>
							<view class="bubble" v-if="dataList.YearMoney">年收入(税后)：{{dataList.YearMoney}}万元</view>
							
						</view>
						<view class="pd-title">其他资料</view>
						<view class="pd-bubble">
							<view class="bubble" v-if="dataList.HuKou">户口:{{dataList.HuKou}}</view>
							<view class="bubble" v-if="dataList.PName&&dataList.CName&&dataList.DName">籍贯:{{dataList.PName,dataList.CName,dataList.DName}}</view>
							<view class="bubble" v-if="dataList.SchoolInfo">学校:{{dataList.SchoolInfo}}</view>
							<view class="bubble" v-if="dataList.EducationType">学历:{{dataList.EducationType}}</view>
							<view class="bubble" v-if="dataList.HouseInfo">{{dataList.HouseInfo}}</view>
							<view class="bubble" v-if="dataList.MajorInfo">{{dataList.MajorInfo}}</view>
							<view class="bubble" v-if="dataList.MotherInfo">母亲:{{dataList.MotherInfo}}</view>
							<view class="bubble" v-if="dataList.FatherInfo">父亲:{{dataList.FatherInfo}}</view>
							<view class="bubble" v-if="dataList.CarInfo">车:{{dataList.CarInfo}}</view>
							<view class="bubble" v-if="dataList.Job">职位:{{dataList.Job}}</view>
							<view class="bubble" v-if="dataList.WorkUnit">工作单位:{{dataList.WorkUnit}}</view>
							
						</view>
						<view class="pd-title">家庭背景</view>
						<view class="pd-abouthim">
								<u-read-more show-height="100" :toggle="true" :shadow-style="shadowStyle" close-text='展开查看全部'>
									<rich-text v-if="dataList.FamilyInfo==''" nodes="无"></rich-text>
									<rich-text v-if="dataList.FamilyInfo!=''" :nodes="dataList.FamilyInfo" style="font-size: 12px;color: #000;"></rich-text>
								</u-read-more>
						</view>
						<view class="pd-title">业余爱好</view>
						<view class="pd-abouthim">
								<u-read-more show-height="100" :toggle="true" :shadow-style="shadowStyle" close-text='展开查看全部'>
									<rich-text v-if="dataList.Hobby==''" nodes="无"></rich-text>
									<rich-text v-if="dataList.Hobby!=''" :nodes="dataList.Hobby" style="font-size: 12px;color: #000;"></rich-text>
								</u-read-more>
						</view>
						<view class="pd-title">喜欢的食物</view>
						<view class="pd-abouthim">
								<u-read-more show-height="100" :toggle="true" :shadow-style="shadowStyle" close-text='展开查看全部'>
									<rich-text v-if="dataList.LikeFood==''" nodes="无"></rich-text>
									<rich-text v-if="dataList.LikeFood!=''" :nodes="dataList.LikeFood" style="font-size: 12px;color: #000;"></rich-text>
								</u-read-more>
						</view>
						<view class="pd-title">喜欢的书</view>
						<view class="pd-abouthim">
								<u-read-more show-height="100" :toggle="true" :shadow-style="shadowStyle" close-text='展开查看全部'>
									<rich-text v-if="dataList.LikeBook==''" nodes="无"></rich-text>
									<rich-text v-if="dataList.LikeBook!=''" :nodes="dataList.LikeBook" style="font-size: 12px;color: #000;"></rich-text>
								</u-read-more>
						</view>
						<view class="pd-title">喜欢的电影和电视剧</view>
						<view class="pd-abouthim">
								<u-read-more show-height="100" :toggle="true" :shadow-style="shadowStyle" close-text='展开查看全部'>
									<rich-text v-if="dataList.LikeTV==''" nodes="无"></rich-text>
									<rich-text v-if="dataList.LikeTV!=''" :nodes="dataList.LikeTV" style="font-size: 12px;color: #000;"></rich-text>
								</u-read-more>
						</view>
						<view class="pd-title">喜欢的一首情歌</view>
						<view class="pd-abouthim">
								<u-read-more show-height="100" :toggle="true" :shadow-style="shadowStyle" close-text='展开查看全部'>
									<rich-text v-if="dataList.LikeSong==''" nodes="无"></rich-text>
									<rich-text v-if="dataList.LikeSong!=''" :nodes="dataList.LikeSong" style="font-size: 12px;color: #000;"></rich-text>
								</u-read-more>
						</view>
						<view class="pd-title">欣赏的名人的爱情和原因</view>
						<view class="pd-abouthim">
								<u-read-more show-height="100" :toggle="true" :shadow-style="shadowStyle" close-text='展开查看全部'>
									<rich-text v-if="dataList.IdealLove==''" nodes="无"></rich-text>
									<rich-text v-if="dataList.IdealLove!=''" :nodes="dataList.IdealLove" style="font-size: 12px;color: #000;"></rich-text>
								</u-read-more>
						</view>
						<view class="pd-title">听过最美的情话</view>
						<view class="pd-abouthim">
								<u-read-more show-height="100" :toggle="true" :shadow-style="shadowStyle" close-text='展开查看全部'>
									<rich-text v-if="dataList.LoveTalk==''" nodes="无"></rich-text>
									<rich-text v-if="dataList.LoveTalk!=''" :nodes="dataList.LoveTalk" style="font-size: 12px;color: #000;"></rich-text>
								</u-read-more>
						</view>
						<view class="pd-title">单身原因</view>
						<view class="pd-abouthim">
								<u-read-more show-height="100" :toggle="true" :shadow-style="shadowStyle" close-text='展开查看全部'>
									<rich-text v-if="dataList.SingleReason==''" nodes="无"></rich-text>
									<rich-text v-if="dataList.SingleReason!=''" :nodes="dataList.SingleReason" style="font-size: 12px;color: #000;"></rich-text>
								</u-read-more>
						</view>
						
						<view class="pd-title">自我介绍</view>
						<view class="pd-abouthim">
								<u-read-more show-height="100" :toggle="true" :shadow-style="shadowStyle" close-text='展开查看全部'>
									<rich-text v-if="dataList.About==''" nodes="无"></rich-text>
									<rich-text v-if="dataList.About!=''" :nodes="dataList.About" style="font-size: 12px;color: #000;"></rich-text>
								</u-read-more>
						</view>
						<view class="pd-title">希望的TA是...</view>
						<view class="pd-abouthim">
								<u-read-more show-height="100" :toggle="true" :shadow-style="shadowStyle" close-text='展开查看全部'>
									<rich-text v-if="dataList.HopeYou==''" nodes="无"></rich-text>
									<rich-text v-if="dataList.HopeYou!=''" :nodes="dataList.HopeYou" style="font-size: 12px;color: #000;"></rich-text>
								</u-read-more>
						</view>
						<!-- <view class="pd-title">理想中的爱情</view>
						<view class="pd-abouthim">
							{{dataList.IdealLove?dataList.IdealLove:'暂无'}}
						</view> -->
						<view class="pd-title">相册</view>
						<view class="pd-img" style="margin-top: 15px;" >
							<view v-if="dataList.AlbumList.length==0" style="width: 100%;height: 50px;line-height: 50px;text-align: center;color: #666666;">
								暂无照片墙
							</view>
							<view v-if="dataList.AlbumList.length==1" style="width: 100%;height: 690rpx;border-radius: 15px;" @click="previewImage(0,dataList.AlbumList)">
								<image :src="dataList.AlbumList[0]"  style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
							</view>
							
							<view v-if="dataList.AlbumList.length==2" style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
								<view v-for='(x,y) in dataList.AlbumList' :key='y' style="width: calc(50vw - 20px);height: 335rpx;border-radius: 15px;" @click="previewImage(y,dataList.AlbumList)">
									<image  :src="x" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
								</view>
								
							</view>
							<view v-if="dataList.AlbumList.length==3" style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
								<view style="width: 448rpx;height: 448rpx;border-radius: 15px;" @click="previewImage(0,dataList.AlbumList)">
									<image :src="dataList.AlbumList[0]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
								</view>
								
								<view style="margin-left: 20rpx;">
									<view style="width: 220rpx;height: 214rpx;border-radius: 15px;" @click="previewImage(1,dataList.AlbumList)">
										<image :src="dataList.AlbumList[1]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
									</view>
									<view style="width: 220rpx;height: 214rpx;border-radius: 15px;margin-top: 20rpx;" @click="previewImage(2,dataList.AlbumList)">
										<image :src="dataList.AlbumList[2]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
									</view>
								</view>
							</view>
							<view v-if="dataList.AlbumList.length>3" style="display: flex;flex-direction: row;align-items: center;">
								<view >
									<view style="width: 448rpx;height: 448rpx;border-radius: 15px;" @click="previewImage(0,dataList.AlbumList)">
										<image :src="dataList.AlbumList[0]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
									</view>
									<view style="width: 448rpx;height: 260rpx;border-radius: 15px;margin-top: 20rpx;" @click="previewImage(2,dataList.AlbumList)">
										<image :src="dataList.AlbumList[2]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
									</view>
								</view>
								<view style="margin-left: 20rpx;">
									<view style="width: 220rpx;height: 260rpx;border-radius: 15px;position: relative;" @click="previewImage(1,dataList.AlbumList)">
										<image :src="dataList.AlbumList[1]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
										<view class="zhezao" v-if="dataList.AlbumList.length>4">+{{dataList.AlbumList.length}}</view>
									</view>
									<view style="width: 220rpx;height: 458rpx;border-radius: 15px;margin-top: 20rpx;" @click="previewImage(3,dataList.AlbumList)">
										<image :src="dataList.AlbumList[3]" style="width: 100%;height: 100%;border-radius: 15px;" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<template v-if="isShowBtn">
						<view class="edit" v-if="dataList.IsAttestation==1" :style="{background:mainColor}" @click="goedit()">
							编辑资料
						</view>
						<view class="edit" v-if="dataList.IsAttestation==0 && mall_UserInfo.UserId == dataList.Id" :style="{background:mainColor}" @click="gorenz()">
							去认证
						</view>
					</template>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default{
		
		data(){
			return{
				pageTitle: '个人详情',
				headStyle: {},
				scrollTop: 0,
				nav:0,
				mainColor: '',
				secondary: '',
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx",
					
				},				
				dataList:{},
				mall_UserInfo:null,
				UserId:0,
				isShowBtn:true, //跳过来不显示编辑按钮
				path:""
			}
		},
		created() {
			this.nav = uni.getMenuButtonBoundingClientRect().top + 'px';
			this.headStyle.background = `linear-gradient(#9EE3E1 5%, #f3f4f6)`;
			this.headStyle.paddingTop = this.nav;
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.mall_UserInfo = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo"):null;
		},
		onLoad(options) {			
			if(options && options.UserId){
				this.UserId = options.UserId
				this.init()
				if(this.UserId!=this.mall_UserInfo.UserId){
					this.isShowBtn=false;
				}else{
					this.isShowBtn=true;
				}
				let u = uni.getStorageSync("mall_UserInfo");
				let uid = u.UserId ? u.UserId : 0;
				let Up = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;
				this.path = '/pages/index/index?id=' + options.UserId + "&user_id=" + uid+ "&Up=" + Up+'&JumpType=11';
				console.log(this.path)
			}
			
		},
		onShow() {
			this.init()
		},
		methods:{
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrollTopHandler() {
				this.scrollTop = 0;
			},
			redirectPrev() {
				uni.navigateBack({
					delta: 1,
				});
			},
			init() {
			  this.request2(
			  	{
			  		url: '/api/AppletMiai/GetMiAiBaseIfo',
			  		data: {UserId:this.UserId}
			  	},
			  	res => {
			  		if(res.resultCode==1){
						console.log(res,'数据');
						this.dataList = res.data;
			  		}
			  	}
			  );
			},
			//图片预览
			previewImage(index, images) {
				uni.previewImage({
					urls: images,
					current: index,
				});
			},
			goedit(){
				uni.navigateTo({
					// url: '/pages/blindDate/personal/editmaterial?UserId='+this.UserId 
					url: '/pages/blindDate/editData?UserId='+this.UserId 
				});
			},
			dianjiguanzhu(x){//关注操作
				let ID=0;
				if(x.IsFollow!=0){
					ID = x.MyFollowId
				}
				this.request2({
						url: '/api/AppletMiai/GetFollowMember',
						data: {
							ID:ID,
							UserId:x.Id,
						}
					},
					res => {
						uni.showToast({
							title:res.message,
							icon:'none'
						})
						
						this.init()
						
					}
				);
			},
			gorenz(){//去认证
				uni.navigateTo({
					// url: '/pages/blindDate/basicdata' 
					url: '/pages/blindDate/editData?UserId='+this.UserId 
				})
			},
		}
	}
</script>

