<template>
	<view class="page">
		<!-- <view class="header" style="padding-top: 44px;">
			<view class="arrow" @click="redirectPrev">
				<u-icon name="arrow-left" size="48" color="#111"></u-icon>
			</view>
			<text>
				编辑个人主页
			</text>
		</view> -->
		<view class="dataBox">
			<view v-for="(item,index) in dataList" :key="index">
				<view class="itemBox">
					<view class="tip" v-if="item.tip">
						{{item.tip}}
					</view>
					<view class="name">
						{{item.name}} <text v-if="item.tip2" class="tip2">{{item.tip2}}</text>
					</view>
					<view class="imgBox" v-if="item.type==1">
						<view class="left">
							<!-- 大照片 -->
							<view class="img1Box" :style="{'border-color': `${mainColor}`}" @click="chooseImg(0,'img1')">
								<image :src="data.AlbumList[0]" mode="aspectFill" v-if="AlbumListShow.img1"></image>
								<image :src="photoDemo" mode="widthFix" v-if="!AlbumListShow.img1" class="imgDemo"></image>
							</view>
							
							 <view class="subImgBox">
								 <!-- 下面三张照片 -->
								 <view class="img2Box" @click="chooseImg(1,'img2')" :style="{'border-color': `${mainColor}`}">
								 	<image :src="data.AlbumList[1]" mode="aspectFill" class="img2" v-if="AlbumListShow.img2"></image>
									<image :src="photoDemo" mode="widthFix" v-if="!AlbumListShow.img2" class="imgDemo"></image>
								 </view>
							 	<view class="img2Box" @click="chooseImg(2,'img3')" :style="{'border-color': `${mainColor}`}">
							 		<image :src="data.AlbumList[2]" mode="aspectFill" class="img2" v-if="AlbumListShow.img3"></image>
									<image :src="photoDemo" mode="widthFix" v-if="!AlbumListShow.img3" class="imgDemo"></image>
							 	</view>
								<view class="img2Box" @click="chooseImg(3,'img4')" :style="{'border-color': `${mainColor}`}">
									<image :src="data.AlbumList[3]" mode="aspectFill" class="img2" v-if="AlbumListShow.img4"></image>
									<image :src="photoDemo" mode="widthFix" v-if="!AlbumListShow.img4" class="imgDemo"></image>
								</view>
								
							 </view>
						</view>
						<view class="right">
							<!-- 右边四张照片 -->
							<view class="img2Box" @click="chooseImg(4,'img5')" :style="{'border-color': `${mainColor}`}">
								<image :src="data.AlbumList[4]" mode="aspectFill" class="img2" v-if="AlbumListShow.img5"></image>
								<image :src="photoDemo" mode="widthFix" v-if="!AlbumListShow.img5" class="imgDemo"></image>
							</view>
							<view class="img2Box" @click="chooseImg(5,'img6')" :style="{'border-color': `${mainColor}`}">
								<image :src="data.AlbumList[5]" mode="aspectFill" class="img2" v-if="AlbumListShow.img6"></image>
								<image :src="photoDemo" mode="widthFix" v-if="!AlbumListShow.img6" class="imgDemo"></image>
							</view>
							<view class="img2Box" @click="chooseImg(6,'img7')" :style="{'border-color': `${mainColor}`}">
								<image :src="data.AlbumList[6]" mode="aspectFill" class="img2" v-if="AlbumListShow.img7"></image>
								<image :src="photoDemo" mode="widthFix" v-if="!AlbumListShow.img7" class="imgDemo"></image>
							</view>
							<view class="img2Box" @click="chooseImg(7,'img8')" :style="{'border-color': `${mainColor}`}">
								<image :src="data.AlbumList[7]" mode="aspectFill" class="img2" v-if="AlbumListShow.img8"></image>
								<image :src="photoDemo" mode="widthFix" v-if="!AlbumListShow.img8" class="imgDemo"></image>
							</view>
						</view>
					</view>
					<view class="conBox" v-if="item.type==2">
						<view v-for="(item1,index1) in item.childDataList" :key="index1">
							<view class="subItemBox">
								 <view class="subName">
									{{item1.name}}
								 </view>
								 <input type="text" :placeholder="item1.placehloder" v-model="data[item1.field]" :type="item1.showType" class="subInput" v-if="item1.subType==1"/>
								 <view class="unit" v-if="item1.unit">
								 	{{item1.unit}}
								 </view>
								 <view class="subpicker" v-if="item1.subType==2">
								 	<picker :mode ="item1.mode" class="subpicker" :range="item1.array" @change="changPicker($event,item1.field,item1.mode,item1.array)">
								 	       <input class="subInput" disabled type="text" :placeholder="item1.placehloder" v-model="data[item1.field]" />
								 	</picker>
								 </view>
								 
							</view>
						</view>
					</view>
					<view class="conBox" v-if="item.type==3">
						<textarea v-model="data[item.field]" class="textareaBox" :placeholder="item.placehloder" />
					</view>
					
				</view>
			</view>
		</view>
		<view class="saveBtn" :style="{'background-color': `${mainColor}`}" @click="saveData">
			保存
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				UserId:0,
				pageTitle:"编辑个人主页",
				mainColor: "",
				dataList:[{
					name:"相册",
					data:{},
					type:1
				},{
					name:"基础资料",
					tip:"基本资料（实名认证通过后，部分资料无法修改）",
					data:{},
					//subType:1输入框，2选择框
					childDataList:[{
						name:"昵称",
						field:"Name",
						placehloder:"请填写昵称",
						subType:1,
						showType:"text"
					},{
						name:"性别",
						field:"Sex",
						placehloder:"请选择性别",
						subType:2,
						array:['男','女'],
						mode:"selector"
					},{
						name:"出生日期",
						field:"Birthday",
						placehloder:"请填写出生日期",
						subType:2,
						array:"",
						mode:"date"
					},{
						name:"身高",
						field:"Height",
						placehloder:"请填写身高",
						subType:1,
						unit:"厘米",
						showType:"number"
					},{
						name:"体重",
						field:"Weight",
						placehloder:"请填写体重",
						subType:1,
						unit:"公斤",
						showType:"number"
					},{
						name:"学历",
						field:"EducationType",
						placehloder:"请选择学历",
						subType:2,
						array:['高中及以下','大专','本科','研究生及以上'],
						mode:"selector"
					},{
						name:"毕业院校",
						field:"SchoolInfo",
						placehloder:"请填写毕业院校",
						subType:1,
						showType:"text"
					},{
						name:"婚姻",
						field:"Marriage",
						placehloder:"请选择婚姻状况",
						subType:2,
						array:['未婚','离异','丧偶'],
						mode:"selector"
					},{
						name:"职位",
						field:"Job",
						placehloder:"请填写职位",
						subType:1,
						showType:"text"
					},{
						name:"工作单位",
						field:"WorkUnit",
						placehloder:"请填写工作单位",
						subType:1,
						showType:"text"
					},{
						name:"年收入",
						field:"YearMoney",
						placehloder:"请填写年收入",
						subType:1,
						unit:"万",
						showType:"number"
					},{
						name:"籍贯",
						field:"nativePlace",
						placehloder:"请选择籍贯",
						subType:2,
						array:[],
						mode:"region"
					},{
						name:"资产",
						field:"HouseInfo",
						placehloder:"请填写资产",
						subType:1,
						showType:"text"
					}],
					type:2
				},{
					name:"家庭背景",
					field:"FamilyInfo",
					placehloder:"家庭成员、工作、成长环境等",
					type:3
				  },{
					name:"业余爱好",
					field:"Hobby",
					placehloder:"唱歌、跳街舞、拍照、旅游、看电影、画画、自驾游、等",
					type:3
				  },{
					name:"喜欢的食物",
					field:"LikeFood",
					placehloder:"草莓、西瓜、蛋糕、奶油、牛排、奶茶等",
					type:3
				  },{
					name:"喜欢的书",
					field:"LikeBook",
					placehloder:"写下你喜欢的书的名称",
					type:3
				  },{
					name:"喜欢的电影和电视剧",
					field:"LikeTV",
					placehloder:"写下你喜欢的电影和电视剧的名称",
					type:3
				  },{
					name:"喜欢的一首情歌",
					field:"LikeSong",
					placehloder:"写下你喜欢的歌曲名称",
					type:3
				  },{
					name:"欣赏哪对名人的爱情，原因是什么",
					field:"IdealLove",
					placehloder:"快来说说吧",
					type:3
				  },{
					name:"你听过最美的情话",
					field:"LoveTalk",
					placehloder:"曾经有一份爱情摆在我面前...",
					type:3
				  },{
					name:"为什么单身",
					field:"SingleReason",
					placehloder:"写下自己单身的原因",
					type:3
				  },{
					name:"自我介绍",
					field:"About",
					placehloder:"介绍自己",
					type:3
				  },{
					name:"希望的TA是...",
					field:"HopeYou",
					placehloder:"希望心中的TA是一个什么样的人",
					type:3
				  },{
					name:"约会档期",
					tip2:"（方便约见的时间和地点）",
					field:"",
					// placehloder:"希望心中的TA是一个什么样的人",
					type:2,
					childDataList:[{
						name:"时间",
						field:"Appointment",
						placehloder:"请选择约见的时间",
						subType:2,
						array:[],
						mode:"date"
					},{
						name:"地点",
						field:"AppointmentAddress",
						placehloder:"请填写方便的地点",
						subType:1,
						showType:"text"
					},]
				  },
				],
				photoDemo:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/camera.png",//占位图片
				data:{
					Name:"",
					Sex:"",
					Birthday:"",
					Height:"",
					Weight:"",
					EducationType:"",
					SchoolInfo:"",
					Marriage:"",
					Job:"",
					WorkUnit:"",
					YearMoney:"",
					// NativePlace:"",//籍贯（省）
					// HuKou:"",//籍贯（国家）
					HouseInfo:"",
					nativePlace:"",//自定义籍贯
					addCode:"",//行政编码
					FamilyInfo:"",
					Hobby:"",
					LikeFood:"",
					LikeBook:"",
					LikeTV:"",
					LikeSong:"",
					IdealLove:"",
					LoveTalk:"",
					SingleReason:"",
					HopeYou:"",
					About:"",
					Appointment:"",
					AppointmentAddress:"",
					CName:"",//市名称
					DName:"",//区名称
					PName:"",//省名称
					Province:0,//省行政编码
					City:0,//市行政编码
					District:0,//区行政编码
					AlbumList:[],//照片墙
					Age:0
				},
				//控制图片显示
				AlbumListShow:{
					img1:false,
					img2:false,
					img3:false,
					img4:false,
					img5:false,
					img6:false,
					img7:false,
					img8:false,
				}
			}
		},
		methods:{
			changPicker(arg,e,mode,arr){
				if(mode=="selector"){
					this.data[e]=arr[arg.detail.value]
				}else if(mode=="date"){
					this.data[e]=arg.detail.value
				}else if(mode=="region"){
					this.data.nativePlace=JSON.parse(JSON.stringify(arg.detail.value)).join(",")
					this.data.addCode=JSON.parse(JSON.stringify(arg.detail.code)) 
					this.$forceUpdate()
				}
			},
			chooseImg(index,key) {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						 that.upFile(res.tempFilePaths[0],(_res)=>{
							  let resData=JSON.parse(_res.data)
							  that.data.AlbumList[index]=resData.data
							  that.AlbumListShow[key]=true 
						 })
					}
				});
				
			},
			upFile(img, resCall) {
				var that = this;
				wx.showLoading({
					title: '上传中'
				})
				let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo")
					.MallBaseId : 1;
				let action = that.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
				uni.uploadFile({
					url: action,
					filePath: img,
					name: 'field',
					formData: {
						user: 'test'
					},
					success: (uploadFileRes) => {
						uni.hideLoading()
						resCall(uploadFileRes)
					},
					fail: function(res) {
						uni.hideLoading()
						wx.showToast({
							title: '上传失败!',
							icon: 'none',
							duration: 1000
						})
					}
				});
			},
			saveData(){
				let msg=JSON.parse(JSON.stringify(this.data))
				if(msg.Age==""){
					msg.Age=0
				}
				if(msg.nativePlace&&msg.nativePlace.length>0){
					let newPlace=msg.nativePlace.split(",")
					msg.PName=newPlace[0]
					msg.CName=newPlace[1]
					msg.DName=newPlace[2]
				}
				if(this.data.addCode&&this.data.addCode.length>0){
					console.log(this.data.addCode)
					msg.Province=parseInt(this.data.addCode[0]) 
					msg.City=parseInt(this.data.addCode[1])
					msg.District=parseInt(this.data.addCode[2])
				}
				delete msg.nativePlace
				delete msg.addCode
			
				if(this.data.Sex=="男"){
					msg.Sex=1
				}else{
					msg.Sex=2
				}
				
				if(this.data.EducationType=="高中及以下"){
					msg.EducationType=1
				}else if(this.data.EducationType=="大专"){
					msg.EducationType=2
				}else if(this.data.EducationType=="本科"){
					msg.EducationType=2
				}else if(this.data.EducationType=="研究生及以上"){
					msg.EducationType=4
				}
				
				if(this.data.Marriage=="未婚"){
					msg.Marriage=1
				}else if(this.data.Marriage=="离异"){
					msg.Marriage=2
				}else if(this.data.Marriage=="丧偶"){
					msg.Marriage=3
				}
				
				if(this.data.Birthday==""){
					uni.showToast({
					    title: '请选择出生日期',
					    duration: 2000,
						icon:"none"
					});
					return
				}
				if(this.data.Height ==""){
					uni.showToast({
					    title: '请填写身高',
					    duration: 2000,
						icon:"none"
					});
					return
				}
				if(this.data.Weight==""){
					uni.showToast({
					    title: '请填写体重',
					    duration: 2000,
						icon:"none"
					});
					return
				}
				if(this.data.EducationType==""){
					uni.showToast({
					    title: '请选择学历',
					    duration: 2000,
						icon:"none"
					});
					return
				}
				if(this.data.Marriage==""){
					uni.showToast({
					    title: '请选择婚姻状况',
					    duration: 2000,
						icon:"none"
					});
					return
				}
				if(this.data.nativePlace==""){
					uni.showToast({
					    title: '请选择籍贯',
					    duration: 2000,
						icon:"none"
					});
					return
				}
				console.log(this.data)
				this.request2({
						url: '/api/AppletMiai/GetSetMiAiBaseInfo',
						data: msg
					},
					res => {
						if (res.resultCode == 1) {
							console.log(res)
						}
					}
				);
			},
			getEnumList(){
				this.request2(
					{
						url: '/api/AppletMiai/GetEducationTypeEnumList',
						data: {}
					},
					res => {
						if(res.resultCode==1){
							
							}
					}
				);
			},
			getMarriage(){
				this.request2(
					{
						url: '/api/AppletMiai/GetMarriageEnumList',
						data: {}
					},
					res => {
						if(res.resultCode==1){
							
						}
					}
				);
			},
			//获取个人资料
			getInfo(){
				this.request2(
					{
						url: '/api/AppletMiai/GetMiAiBaseIfo',
						data: { UserId:this.UserId}
					},
					res => {
						if(res.resultCode==1){
							this.data=res.data
							if(res.data.PName&&res.data.DName&&res.data.CName){
								// this.data.nativePlace=[res.data.PName,res.data.DName,res.data.CName]
								this.data.nativePlace=JSON.parse(JSON.stringify([res.data.PName,res.data.DName,res.data.CName])) .split(",")
							}else{
								this.data.nativePlace=""
							}
							
							this.data.addCode=""
							if(res.data.Sex==1){
								this.data.Sex="男"
							}else if(res.data.Sex==2){
								this.data.Sex="女"
							}else{
								this.data.Sex=""
							}
							if(res.data.AlbumList){
								res.data.AlbumList.map((item,index)=>{
										this.AlbumListShow[`img${index+1}`]=true
								})
							}
							
							
						}
					}
				);
			},
			redirectPrev() {
				uni.navigateBack({
					delta: 1,
				});
			},
		},
		onLoad(options) {
			this.UserId=options.UserId
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			// this.secondary = this.$uiConfig.secondary;
			// this.pricecolor = this.$uiConfig.pricecolor;
		},
		mounted() {
		this.getEnumList();
		this.getMarriage();
		this.getInfo();
		uni.getStorage({
		    key: 'basedata',
		    success: (res) =>{
				let data= res.data.user_info
		        this.data.Name=data.nickname
				if(data.Sex==1){
					this.data.Sex="男"
				}else if(data.Sex==2){
					this.data.Sex="女"
				}else{
					this.data.Sex=""
				}
		    },
			fail:(err)=> {
				// console.log(err);
			}
		});
		uni.setNavigationBarTitle({
		    title: this.pageTitle
		});
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding: 0 30rpx 65rpx;
		.header{
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: 800;
			color: #111111;
			position: relative;
			.arrow{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 30rpx;
			}
		}
		.dataBox{
			.img2Box{
				width: 147rpx;
				height: 147rpx;
				border-width:1rpx;
				border-style:solid;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				.img2{
					width: 100%;
				}
				
			}
			.imgDemo{
				width: 54rpx;
				height: auto;
			}
			.itemBox{
				margin-bottom: 40rpx;
				.tip{
					font-size: 24rpx;
					font-weight: 500;
					color: #C1C1C1;
				}
				
				.name{
					font-size: 30rpx;
					font-weight: bold;
					color: #111111;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					.tip2{
						font-size: 24rpx;
						font-weight: bold;
						color: #111111;
						margin-left: 4rpx;
					}
				}
				
			}
			.imgBox{
				position: relative;
				display: flex;
				justify-content: space-between;
				.left{
					width: 492rpx;
					.img1Box{
						width: 492rpx;
						height: 492rpx;
						border-width:1rpx;
						border-style:solid;
						border-radius: 30rpx;
						margin-bottom: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						.img1{
							width: 100%;
						}
					}
					.subImgBox{
						width: 492rpx;
						height: 147rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
				.right{
					width: 147rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;
				}
				
			}
			.conBox{
				.subItemBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100rpx;
					width: 100%;
					border-bottom: 1rpx solid #E2E2E2FF;
					.subName{
						width: 130rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #666666;
					}
					.subInput{
						flex-grow: 5;
						font-size: 24rpx;
						font-weight: bold;
						color: #111111;
					}
					.subpicker{
						flex-grow: 5;
						font-size: 24rpx;
						font-weight: bold;
						color: #111111;
						// background-color: #008000;
					}
					.unit{
						font-size: 24rpx;
						font-weight: bold;
						color: #B6B6B6;
					}
				}
				.textareaBox{
					height: 180rpx;
					width: 100%;
					border-bottom: 1rpx solid #E2E2E2FF;
				}
			}
		}
		
	}
	.saveBtn{
		margin: 0 auto;
		width: 690rpx;
		height: 88rpx;
		// background-color: #00C6C1;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 50rpx;
	}
	/deep/.input-placeholder{
		font-size: 24rpx;
		font-weight: bold;
		color: #999999;
	}
	/deep/.textarea-placeholder{
		font-size: 24rpx;
		font-weight: bold;
		color: #999999;
	}
</style>
