<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>{{sexes[info.gender]}}</view> -->
				<radio-group @change="changesex">
					<label style="margin-right: 15rpx;" v-for="(item,index) in sexes" :key="index">
						<radio color="#248BAA" :value="item.value" :checked="index === info.gender-1" />{{item.text}}
					</label>
				</radio-group>
			</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>
			<view class="btn-tao" @click="submit">保存</view>
		</view>
	</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: '女'
					}
				],
				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/userInfo").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/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/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(value) {
				this.gender = value.detail.value
			},
			submit() {
				uni.showModal({
					title: '提示',
					content: '确认修改您的信息？',
					success: res => {
						if (res.confirm) {
							this.Post({
								nickname: this.nickname,
								gender: this.gender,
								birthday: this.birthday
							}, '/api/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>
	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{
		font-family: "iconfont";
		content: "\e62e";
		font-size: 26rpx;
		font-weight: bold;
		margin-left: 6rpx;
	}
	.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 0;
		height: 48rpx;
		color: #333;
	}

	.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;
	}

	.userinfo-item view:after,
	.birthday-box:after {
		font-family: "iconfont";
		content: "\e62e";
		font-size: 26rpx;
		font-weight: bold;
		margin-left: 6rpx;
	}

	.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: #248BAA;
		border-radius: 40rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		position: fixed;
		left: 26rpx;
		bottom: 100rpx;
	}
</style>
