<style lang="scss" scoped>
	.newpersondetails{
		width: 100%;
		height: 100%;
		background: #f5f5f5;
		font-family: aa;
		.box{
			width: 100%;
			height: 100%;
			padding: 15px;
			.box-jc-t-r{
				width: 60px;
				height: 25px;
				view{
					border-radius: 12px;
					font-size: 13px;
					color: #FFF;
					text-align: center;
					line-height: 25px;
				}
			}
			.box-photo{
				width: 100%;
				height: 480rpx;
				overflow: hidden;
				border-radius: 6px;
				margin-bottom: 15px;
				
			}
			.box-jc{
				width: 100%;
				padding: 15px;
				border-radius: 6px;
				margin-bottom: 15px;
				box-shadow: 0px 3px 6px 0px rgba(139, 115, 64, 0.16);
				background: #FFFFFF;
				.box-jc-top{
					width: 100%;
					display: flex;
					padding: 9px 0;
					align-items: flex-start;
					justify-content: space-between;
					border-bottom: 1px solid #E2E2E2;
					.box-jc-t-l{
						width: calc(100vw - 30px - 75px);
						display: flex;
						flex-wrap: wrap;
						
					}
					
				}
				.box-jc-c{
					width: 100%;
					padding:10px 0 0;
					.box-jc-c-t{
						width: 100%;
						display: flex;
						align-items: center;
						font-size: 12px;
						color: #111;
						.box-jc-c-t-i{
							width: 50%;
							display: flex;
							align-items: center;
							margin-bottom: 8px;
							image{
								width: 26rpx;
								height: 26rpx;
								margin-right: 4px;
							}
						}
					}
				}
				.box-jc-c-item{
					display: flex;
					flex-wrap: wrap;
					font-size: 12px;
					color: #111111;
					.box-jc-c-item-i{
						display: flex;
						align-items: center;
						margin-bottom: 8px;
						margin-right: 10px;
						image{
							width: 26rpx;
							height: 26rpx;
							margin-right: 4px;
						}
					}
				}
			}
			.box-sf,.box-grdt{
				width: 100%;
				padding: 15px;
				border-radius: 6px;
				margin-bottom: 15px;
				box-shadow: 0px 3px 6px 0px rgba(139, 115, 64, 0.16);
				background: #FFFFFF;
			}
			.box-sf-item{
				width: 33%;
				padding: 10px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.box-grdt-i-box{
				display: inline-block;margin-top: 15px;
			}
			.box-grdt-i-t{
				padding: 0 20rpx;
				height: 45rpx;
				border-radius: 22.5rpx;
				display: flex;
				align-items: center;
				font-size: 11px;
				background: rgba(0, 198, 193, 0.2);
				
				
			}
			.box-grdt-i-ty{
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				
			}
			.box-grdt-i-c{
				width: 100%;
				font-size: 12px;
				color: #111111;
				margin-top: 10px;
				line-height: 21px;
			}
			.box-grdt-i-c-w{
				width: 100%;
				height: 35px;
				display: flex;
				align-items: center;
				
				color: #999999;
			}
			.box-c-item{
				border-radius: 4px;
			}
			.ftBox-right-text{
				width: 100%;
				height: 100%;border-radius: 4px;
				overflow: hidden;
				background: #F5F5F5;
				font-size: 14px;
				color: #333333;
			}
		}
		.boxfixed{
			width: 100%;
			height: 88rpx;
			position: fixed;
			bottom: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.xboxfixed{
			width: 558rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.xboxfixed-item{
			width: 260rpx;
			height: 88rpx;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 15px;
			color: #FFFFFF;
			position: relative;
			button{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0
			}
		}
		
	}
</style>
<template>
	<view class="newpersondetails">
		<view class="box">
			<view class="box-photo">
				<u-swiper 
				:list="dataList.imgs"
				:effect3d="swipers.style == 2"
				:height="480"
				:interval="5000"
				:border-radius="12"
				name='url'
				@click="previewphoto"
				></u-swiper>
			</view>
			<view class="box-jc">
				<view class="box-jc-top">
					<view class="box-jc-t-l">
						<text style="margin-right: 5px;font-size: 14px;font-weight: bold;">{{dataList.Name}}</text>
						<image v-if="dataList.Sex==1" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan2.png" style="width: 36rpx;height: 36rpx;margin-top: 3rpx;"></image>
						<image v-if="dataList.Sex==2" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv2.png" style="width: 36rpx;height: 36rpx;margin-top: 3rpx;"></image>
						<u-tag text="未认证" bg-color='#e2e2e2' color='#FFF' size='mini' border-color='#e2e2e2' v-if="dataList.IsAttestation==0"/>
						<u-tag text="已认证" :bg-color='mainColor' color='#FFF' size='mini' :border-color='mainColor' v-if="dataList.IsAttestation==1"/>
					</view>
					<view class="box-jc-t-r">
						<view :style="{background:mainColor}" v-if="mall_UserInfo.UserId == dataList.Id" @click="goedit(1)">编辑</view>
						<view @click="dianjiguanzhu(dataList)" v-if="dataList.IsFollow!=-1 && mall_UserInfo.UserId != dataList.Id">
							<view  :style="{background:mainColor}" v-if="dataList.IsFollow==0" >关注</view>
							<view  :style="{background:mainColor}" v-if="dataList.IsFollow==1">已关注</view>
							<view  :style="{background:mainColor}" v-if="dataList.IsFollow==2">被关注</view>
							<view  :style="{background:mainColor}" v-if="dataList.IsFollow==3">互关</view>
						</view>
					</view>
				</view>
				<!-- 基本资料 -->
				<view class="box-jc-c">
					<view class="box-jc-c-t">
						<view class="box-jc-c-t-i">
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-sr.png" ></image>
							<text>{{dataList.BirthdayYear}}年</text>
							<text style="margin: 0 5px;">·</text>
							<text>{{dataList.ConoldBaseInfostellation}}</text>
						</view>
						<view class="box-jc-c-t-i">
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-rw.png"  style="width: 12rpx;height: 26rpx;"></image>
							<text>{{dataList.Height}}cm</text>
							<text style="margin: 0 5px;">·</text>
							<text>{{dataList.Weight}}kg</text>
						</view>
					</view>
					<view class="box-jc-c-item">
						<view class="box-jc-c-item-i">
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-fz.png" ></image>
							<text>现居{{dataList.DWCName}}</text>
							<text v-if="dataList.PName!=''" style="margin: 0 5px;">·</text>
							<text v-if="dataList.PName!=''">{{dataList.PName}}{{dataList.CName}}人</text>
						</view>
						<view class="box-jc-c-item-i" v-if="dataList.Job">
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-gz.png" ></image>
							<text>{{dataList.Job}}</text>
						</view>
						<view class="box-jc-c-item-i" v-if="dataList.MarriageStr">
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-hy.png" style="width: 30rpx;" ></image>
							<text>{{dataList.MarriageStr}}</text>
						</view>
						<view class="box-jc-c-item-i">
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-zc.png" style="width: 28rpx;"></image>
							<text>{{dataList.HouseInfoStr}}</text>
							<text style="margin: 0 5px;" v-if="dataList.CarInfoStr">·</text>
							<text v-if="dataList.CarInfoStr">{{dataList.CarInfoStr}}</text>
							<text style="margin: 0 5px;" >·</text>
							<text v-if="dataList.YearMoney">年收入{{dataList.YearMoney}}万元</text>
						</view>
						<view class="box-jc-c-item-i">
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-book.png" ></image>
							<text>{{dataList.EducationTypeStr}}</text>
							<text style="margin: 0 5px;" v-if="dataList.SchoolInfo">·</text>
							<text v-if="dataList.SchoolInfo">{{dataList.SchoolInfo}}</text>
						</view>
						
					</view>
					<view  class="box-jc-c-item">
						
					</view>
				</view>
			</view>
			<!-- 身份认证 -->
			<view class="box-sf">
				<text style="font-size: 13px;font-weight: bold;">身份认证</text>
				<view class="box-sf-item" @click="gosfzrenz" v-if="dataList.IsAttestation!=1">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-sfr-n.png" style="width: 50px;height: 50px;margin-bottom: 5px;"></image>
					未认证
				</view>
				<view class="box-sf-item" v-if="dataList.IsAttestation==1">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-sfr.png" style="width: 50px;height: 50px;margin-bottom: 5px;"></image>
					已认证
				</view>
			</view>
			<!-- 个人动态 -->
			<view class="box-grdt" @click="dynamicList.length>0?gogerendongtai():''">
				<view style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
					<view style="display: flex;">
						<text style="font-size: 13px;font-weight: bold;">个人动态</text>
						<text style="font-size: 13px;color: #888888;">({{count}})</text>
					</view>
					<u-icon  name="arrow"></u-icon>
				</view>
				<view v-if="dynamicList.length==0" class="box-grdt-i-c-w" style="justify-content: center;">
					暂无动态
				</view>
				<view style="display: flex;align-items: center;margin-top: 10px;" v-if="dynamicList.length>0">
					<view v-for="(x,y) in dynamicList" :key='y' class="box-c-item" :style="{width:pjwidth,height:pjwidth,'margin-right':dynamicList.length==(y+1)?'':'10px'}">
						<view class="ftBox-right-text" style="padding: 6px;overflow: hidden;width: 100%;height: 100%;text-overflow: ellipsis;display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						" v-if="x.fileType==0">	
							{{x.content}}
						</view>
						<view class="ftBox-right-text" v-if="x.fileType==1">
							<image :src="x.coverPhoto" mode='aspectFill' style="width: 100%;height: 100%;border-radius: 5px;"></image>
						</view>
						<view class="ftBox-right-text" v-if="x.fileType==2" style="position: relative;">
						
							<video id="myVideo" :src="x.coverPhoto" style="width: 100%;height: 100%;border-radius: 5px;" :controls='false'
							 :show-center-play-btn='false'></video>
							<view style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;">
								<u-icon name="play-circle-o" :size="50" color="#FFF"></u-icon>
							</view>
						</view>
						<view class="ftBox-right-text" v-if="x.fileType==3" style="display: flex;align-items: center;justify-content: center;background: #BBA16B;">
						
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mic.png" mode='aspectFill' style="width: 27px;height: 40px;border-radius: 5px;"></image>
						
						</view>
					</view>
				</view>
			</view>
			<!-- 关于我 -->
			<view class="box-grdt" style="margin-bottom: 100px;">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<text style="font-size: 13px;font-weight: bold;">关于我</text>
					<view class="box-jc-t-r" @click="goedit(2)" v-if="mall_UserInfo.UserId == dataList.Id">
						<view :style="{background:mainColor}">编辑</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">自我描述</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.About!=''">{{dataList.About}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">家庭背景</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.FamilyInfo!=''">{{dataList.FamilyInfo}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">兴趣爱好</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.Hobby!=''">{{dataList.Hobby}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">曾经旅游过的地方</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.ActivityRegion!=''">{{dataList.ActivityRegion}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">理想的另一半是什么样的</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.HopeYou!=''">{{dataList.HopeYou}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				
				<!-- TODO字段不确定 -->
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">期待的未来生活是怎样的</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.OtherInfo!=''">{{dataList.OtherInfo}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">最喜欢的一本书及原因</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.LikeBook!=''">{{dataList.LikeBook}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">最喜欢的电影及原因</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.LikeTV!=''">{{dataList.LikeTV}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">欣赏的名人爱情及原因</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.IdealLove!=''">{{dataList.IdealLove}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				
				
				
			</view>
			
		</view>
		<view class="boxfixed">
			<view class="xboxfixed" :style="{'justify-content':mall_UserInfo.UserId == dataList.Id?'center':'space-between'}">
				<view class="xboxfixed-item" style="background: #00C6C1;">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-fx.png" style="width: 54rpx;height: 54rpx;margin-right: 10px;"></image>
					<text>推给朋友</text>
					<button   open-type="share" ></button>
				</view>
				<view class="xboxfixed-item" style="background: #3183FE;" v-if="mall_UserInfo.UserId != dataList.Id">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-hi.png" style="width: 54rpx;height: 54rpx;margin-right: 10px;"></image>
					<text>想认识TA</text>
					<button   open-type="contact" :send-message-title="dataList.Name" :send-message-path="path" :send-message-img="dataList.Photo" :show-message-card="true"></button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageTitle: '个人详情',
				mainColor:'',
				dataList:{},
				Jumptype:0,
				UserId:0,
				isShowBtn:true, //跳过来不显示编辑按钮
				path:"",
				mall_UserInfo:null,
				count:0,
				dynamicList:[],
				pjwidth:0
			}
		},
		created(){
			this.mainColor = this.$uiConfig.mainColor;
			this.mall_UserInfo = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo"):null;
		},
		onShareAppMessage(res) {
		  let u = uni.getStorageSync("mall_UserInfo");
		  let uid = u.UserId ? u.UserId : 0;
			if(uid==0){
				uid = uni.getStorageSync("pid")?uni.getStorageSync("pid").pid:0
			}
		  let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
			if(SmallShopId == 0){//如果微店id为0 去找所属微店id
				SmallShopId = u.UserSmallShopId? u.UserSmallShopId:0
			}
			let Up = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;
		  return {
		    title:'个人资料',
		    path: "/pages/index/index?id=" + this.UserId + "&user_id=" + uid+ "&SmallShopId=" + SmallShopId+ "&Up=" + Up+'&JumpType=13',
		    imageUrl:'',
		  };
		},
		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';
				this.getMyDynamicList()
			}
			if(options && options.Jumptype){//判断跳到个人中心
				this.Jumptype = options.Jumptype
			}
			uni.setNavigationBarTitle({
			    title: this.pageTitle
			});
			let windowWidth = this.$utils.SystemInfo().windowWidth;
			
			this.pjwidth  = (windowWidth - 60 - 30)/4+'px'
			
		},
		onShow() {
			this.init()
		},
		onUnload() {
		      // 页面关闭后销毁实例
			  if(this.Jumptype==1){
				  uni.reLaunch({
				  	url:"/pages/user-center/user-center"
				  })
			  }
		      
		},
		methods:{
			
			init() {
			  this.request2(
			  	{
			  		url: '/api/AppletMiai/GetMiAiBaseIfo',
			  		data: {UserId:this.UserId}
			  	},
			  	res => {
			  		if(res.resultCode==1){
						this.dataList = res.data;
						this.dataList.imgs = []
						this.dataList.AlbumList.map(x=>{
							let obj = {
								url:x
							}
							this.dataList.imgs.push(obj)
						})
			  		}
			  	}
			  );
			},
			getMyDynamicList(){
				this.request2({
						url: '/api/AppletSchool/GetMiAiDynamicList',
						data: {pageIndex: 1,
							pageSize: 4,
							UserTeacher: 0,
							CreateBy: this.UserId,
							UserId:this.mall_UserInfo.UserId,
							TalkId:0,
						}
					},
					res => {
						if (res.resultCode == 1) {
							this.count = res.data.count;
							this.dynamicList = res.data.pageData;
						};
						
					}
				);
			},
			previewphoto(i) {
				uni.previewImage({
					urls: this.dataList.AlbumList,
					current: i,
				});
			},
			//图片预览
			previewImage(index, images) {
				uni.previewImage({
					urls: images,
					current: index,
				});
			},
			goedit(type){
				uni.navigateTo({
					url: '/pages/blindDate/editData?UserId='+this.UserId +'&type='+type
				});
			},
			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 
				})
			},
			gosfzrenz(){//身份证认证
				if(this.mall_UserInfo.UserId == this.UserId){
					uni.navigateTo({
						url: '/pages/blindDate/personal/IDidentification' 
					})
				}
				
			},
			gogerendongtai(){//跳入动态列表
				uni.navigateTo({
					url: '/pages/friendcircle/my-news?UserId='+this.UserId
				})
			}
		}
		
	}
</script>


