<template>
	<view v-if="info" class="bg flex-column">
		<view class="user-other-info flex-1">
			<div class="info-avatar-top">
				<span>头像</span>
				<view @click="uploadImg()" class="edit">
					<image :src="showImg(info.avatar)" mode="aspectFill"
						style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
				</view>
			</div>
			<view  class="userinfo-item">
				<span>昵称</span>
				<view>
					<input type="text" v-model="nickname" placeholder="请填写"/>
				</view>
			</view>
			<view class="userinfo-item edit" @click="showSexSelect = true">
				<span>性别</span>
				<view  @click="$refs.popup.open()">{{gender == 1 ? '男' : (gender == 2 ? '女' : '保密')}}</view>
			</view>
			<view  class="userinfo-item">
				<span>邮箱</span>
				<view>
					<input type="text" v-model="email" placeholder="请填写"/>
				</view>
			</view>
<!-- 			<view class="userinfo-item">
				<span>手机号</span>
				<view>{{info.mobile}}</view>
			</view> -->
			<view class="userinfo-item edit">
				<span>生日</span>
				<view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<text class="uni-input">{{birthday}}</text>
					</picker>
				</view>
				
			</view>
			<!-- <navigator url="/subPackages/user/logout" tag="view" class="userinfo-item edit">
				<span>注销账号</span>
				<view>
					<i>注销后账号无法恢复，请谨慎操作</i>
				</view>
			</navigator> -->
			
		</view>
		
		<view class="flex-shrink-0" style="height: 200rpx;">
			<view class="btn-tao" @click="submit">保存</view>
		</view>
		
		
		<!-- 性别弹框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup-box">
				<view class="popup-item flex-center" v-for="(item,index) in sexes" :key="index" @click="changesex(index)">{{item.text}}</view>
				<view class="popup-items flex-center" @click="$refs.popup.close()">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {pathToBase64} from  "@/static/js/mmmm-image-tools/index.js"
	export default {
		name: "Profile",
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				info: null,
				showSexSelect: false,
				sexes: [{
						value: '1',
						text: '男'
					},
					{
						value: '2',
						text: '女'
					},
					{
						value: '0',
						text: '保密'
					}
				],
				today: null,
				showCropper: false,
				nickname: '',
				gender: '',
				birthday: '',
				email: '',
				fileList1: [],
				startDate: '1900-1-1',
				endDate: '2050-1-1'
			}
		},
		onShow() {
			console.log(this.$store.state.user.userInfo,uni.getStorageSync('userInfo'))
			this.getList()
		},
		computed: {
			// startDate() {
			// 	return this.getDate('start');
			// },
			// endDate() {
			// 	return this.getDate('end');
			// }
		},
		methods: {
			getFile(e) {
				console.log(e)
			},
			getList() {
				let today = new Date();
				today = today.getFullYear() + "/" + (today.getMonth() + 1) + "/" + today.getDate();
				this.today = today;
				this.Post({}, "/api/user/getUserDetails").then(res => {
					if (!res.data.birthday) {
						let date = new Date();
						res.data.birthday = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date
							.getDate();
					}
					this.info = res.data;
					this.nickname = this.info.nickname
					this.email = this.info.email
					this.birthday = this.info.birthday
					this.gender = this.info.gender
					this.info.token = JSON.parse(uni.getStorageSync('userInfo')).token || this.$store.state.user.userInfo.token
					console.log(this.info)
					this.$store.commit('changeUserInfo', this.info)
				})
			},
			uploadImg() {
				let _this = this
					let url = this.NEWAPIURL
					// #ifdef H5
					 url = '/api'
					// #endif
					url+='/api/Common/upload'
					uni.chooseImage({
						count:1,
						success: (res) => {
							const tempFilePaths = res.tempFilePaths;
							const uploadTask = uni.uploadFile({
								url: url,
								filePath: tempFilePaths[0],
								name: 'file',
								success: (uploadFileRes) => {
									try {
										let res = JSON.parse(uploadFileRes.data)
										if (res.code == 1) {
											_this.info.avatar = res.data.url
										}
									} catch(e) {}
									
									
								},
								fail:()=> {
									uni.showToast({
										title:'上传失败',
										icon:'none'
									})
								}
							});
							
						},
						fail:()=> {
							uni.showToast({
								title:'上传失败',
								icon:'none'
							})
						}
					});
				
			},
			//生日
			bindDateChange: function(e) {
				this.birthday = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}/${month}/${day}`;
			},
			changesex(index) {
				this.gender = this.sexes[index].value
				this.$refs.popup.close()
			},
			submit() {
				try {
				this.nickname = this.nickname.trim()
				this.email = this.email.trim()
				} catch(e) {}
				
				if (!this.nickname) {
					uni.showToast({
						title:"请输入昵称",
						icon:"none"
					})
				}
				if (this.email && !this.IsMail(this.email)) {
					uni.showToast({
						title:"请输入正确的邮箱",
						icon:"none"
					})
				}
				
				
				uni.showModal({
					title: '提示',
					content: '确认修改您的信息？',
					confirmColor: '#000000',
					success: res => {
						if (res.confirm) {
							this.Post({
								method: 'POST',
								nickname: this.nickname,
								gender: this.gender,
								birthday: this.birthday,
								avatar: this.info.avatar,
								email: this.email
							}, '/api/user/profile').then(res => {
								console.log(res)
								if (res.code == 1) {
									uni.showModal({
										title: '提示',
										content: res.msg || '修改成功',
										showCancel: false,
										confirmColor: '#000000',
										success: res => {
											if (res.confirm) {
												this.getList()
											}
										}
									})
								}
							})
						}
					}
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.bg {
		min-height: calc(100vh - 44px);
		background-color: #FFFFFF;
		position: relative;
	}
	view {
		box-sizing: content-box;
	}
	.info-avatar-top {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		border-bottom: 1rpx solid #D8D8D8;
		padding: 40rpx 0;
		height: 48rpx;
		color: #333;
		align-items: center;
	}
	.info-avatar-top view{
		display: flex;
		align-items: center;
	}
	.info-avatar-top view:after{
		content: "";
		width: 20rpx;
		height: 20rpx;
		margin-left: 6rpx;
		background-image: url('https://static.ticket.sz-trip.com/tongli/images/user/rightIcon-gray.png');
		background-size: 100% 100%;
	}
	.info-avatar-top img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.change-avatar-btn {
		color: #FFF;
		width: 220rpx;
		margin: 0 auto;
		line-height: 70rpx;
		border-radius: 20rpx;
		background: #4C93FF;
		position: relative;
		font-size: 34rpx;
	}

	.change-avatar-btn input {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		opacity: 0;
	}

	.user-other-info {
		margin:0 30rpx;
	}

	.userinfo-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		border-bottom: 1rpx solid #D8D8D8;
		padding: 40rpx 30rpx 40rpx 0;
		height: 48rpx;
		color: #333;
		position: relative;
	}

	.info-avatar-top span {
		font-weight: 500;
		font-size: 31rpx;
		flex-shrink: 0;
	}

	.userinfo-item span {
		font-weight: 500;
		font-size: 31rpx;
		flex-shrink: 0;
		color: #000;
	}
	
	.userinfo-item i {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.userinfo-item {
		&.edit view::after {
			content: "";
			width: 20rpx;
			height: 20rpx;
			margin-left: 6rpx;
			background-image: url('https://static.ticket.sz-trip.com/tongli/images/user/rightIcon-gray.png');
			background-size: 100% 100%;
			position: absolute;
			right: 0;
			margin: auto;
			top: 0;
			bottom: 0;
		}
	}

	.birthday-box {
		text-align: right;
	}

	.cropper {
		width: auto;
		height: 100%;
	}

	.cropper-content {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1000;
	}

	.dialog-footer .change-avatar-btn {
		position: fixed;
		text-align: center;
		bottom: 80rpx;
		left: 50%;
		margin-left: -110rpx;
	}

	.btn-tao {
		text-align: center;
		font-size: 30rpx;
		width: 697rpx;
		height: 80rpx;
		background: #96684F;
		border-radius: 7rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		margin: 0 auto;
	}
	
	.popup-box {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: #fff;
		overflow: hidden;
		
		.popup-item {
			width: 697rpx;
			height: 99rpx;
			font-weight: 500;
			font-size: 31rpx;
			color: #12293C;
			margin: auto;
		}
		.popup-item:nth-child(2) {
			border: none;
			border-bottom: 1rpx solid #D8D8D8;
			border-top: 1rpx solid #D8D8D8;
		}
		
		.popup-items {
			width: 100%;
			height: 99rpx;
			font-weight: 500;
			font-size: 31rpx;
			color: #12293C;
			border-top: 13rpx solid #F2F2F2;
		}
	}
	
	input{
		text-align: right;
	}
</style>
