<template>
	<view v-if="info">
		<view class="user-other-info">
			<div class="info-avatar-top">
				<span>头像</span>
				<view @click="uploadImg()">
					<image :src="showImg(info.avatar)" mode="aspectFill"
						style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
				</view>
			</div>
			<navigator url="/subPackages/user/changeNickname" tag="view" class="userinfo-item">
				<span>姓名</span>
				<view>{{nickname}}</view>
			</navigator>
			<view class="userinfo-item" @click="showSexSelect = true">
				<span>性别</span>
				<view  @click="$refs.popup.open()">{{gender == 1 ? '男' : (gender == 2 ? '女' : '保密')}}</view>
			</view>
			<view class="userinfo-item">
				<span>手机号</span>
				<view>{{info.mobile}}</view>
			</view>
			<view class="userinfo-item">
				<span>生日</span>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{birthday}}</view>
				</picker>
			</view>
			<navigator url="/subPackages/user/logout" tag="view" class="userinfo-item">
				<span>注销账号</span>
				<i>注销后账号无法恢复，请谨慎操作</i>
			</navigator>
			<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/uservice/user/getMyInfo").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() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// // #ifdef MP-WEIXIN
						// uni.getFileSystemManager().readFile({
						// 	filePath: tempFilePaths[0],
						// 	encoding: 'base64',
						// 	success: res => {
						// 		this.Post({
						// 			method: 'POST',
						// 			base64: 'data:image/png;base64,' + res.data
						// 		}, '/api/common/base64').then(res => {
						// 			if (res.data) {
						// 				this.Post({
						// 					avatar: res.data
						// 				}, '/api/uservice/user/profile').then(res => {
						// 					uni.showModal({
						// 						title: '提示',
						// 						content: res.msg,
						// 						showCancel: false,
						// 						success: res => {
						// 							if (res.confirm) {
						// 								this.getList()
						// 							}
						// 						}
						// 					})
						// 				})
						// 			}
						// 		})
						// 	}
						// })
						// // #endif
						
						pathToBase64(tempFilePaths[0]).then(base64 => {
							this.Post({
								method: 'POST',
								base64: base64
							}, '/api/common/base64').then(res => {
								if (res.data) {
									this.Post({
										avatar: res.data
									}, '/api/uservice/user/profile').then(res => {
										uni.showModal({
											title: '提示',
											content: res.msg,
											showCancel: false,
											success: res => {
												if (res.confirm) {
													this.getList()
												}
											}
										})
									})
								}
							})
						})
					}
				});
			},
			//生日
			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() {
				uni.showModal({
					title: '提示',
					content: '确认修改您的信息？',
					success: res => {
						if (res.confirm) {
							this.Post({
								nickname: this.nickname,
								gender: this.gender,
								birthday: this.birthday
							}, '/api/uservice/user/profile').then(res => {
								console.log(res)
								if (res.code == 1) {
									uni.showModal({
										title: '提示',
										content: res.msg,
										showCancel: false,
										success: res => {
											if (res.confirm) {
												this.getList()
											}
										}
									})
								}
							})
						}
					}
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	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: 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 {
		& 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-weight: 500;
		font-size: 36rpx;
		width: 697rpx;
		height: 80rpx;
		background: #6A8A27;
		border-radius: 11rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		position: fixed;
		left: 26rpx;
		bottom: 100rpx;
	}
	
	.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;
		}
	}
</style>
