<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: space-between;
	}
	.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;
	}
</style>
<template>
	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh;">
		<view class="persondetails" >
			<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='mall_UserInfo.Photo' :src="mall_UserInfo.Photo" size="140" ></u-avatar>
							<image 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 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" >{{mall_UserInfo.Name?mall_UserInfo.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;">
										未认证
									</view>
								</view>
								<view class="guanzhu" :style="{background:mainColor}">
									已关注
								</view>
							</view>
						</view>
					</view>
					<!-- 基础资料 -->
					<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.NativePlace">籍贯:{{dataList.NativePlace}}</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.Job">{{dataList.Job}}</view>
						<view class="bubble" v-if="dataList.MotherInfo">母亲:{{dataList.MotherInfo}}</view>
						<view class="bubble" v-if="dataList.Weight">父亲:{{dataList.FatherInfo}}</view>
						<view class="bubble" v-if="dataList.CarInfo">车:{{dataList.CarInfo}}</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.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">理想中的爱情</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 class="edit" :style="{background:mainColor}" @click="goedit()">
						编辑资料
					</view>
				</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,
			}
		},
		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()
			}
		},
		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 
				});
			}
		}
	}
</script>

