<template>
	<view class="index" :style="[theme]">
		<view class="onecontent">
			个人信息
		</view>
		<view class="towcontent">
			<view class="towcontent_item flex-between">
				<view class="towcontent_item_text">
					头像
				</view>
				<view class="towcontent_item_box">
					<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar' style="padding: 0;margin: 0;">
						<image class="towcontent_item_box_imge" :src="urlavatar" mode="aspectFill"></image>
						<!-- <image v-else class="towcontent_item_box_imge" src="@/static/logo.png" mode="aspectFill"></image> -->
					</button>
					<!-- <image v-if="userlist.avatar" class="towcontent_item_box_imge" :src="userlist.avatar" mode="aspectFill">
					</image>
					 -->
				</view>
			</view>
			<view class="towcontent_item flex-between">
				<view class="towcontent_item_text">
					UID
				</view>
				<view class="towcontent_item_box flex-start">
					<text class="towcontent_item_box_text">ID:{{userlist.user_id}}</text>
					<!-- <u-icon name="arrow-right" color="#909399" size="14"></u-icon> -->
				</view>
			</view>
			<view class="towcontent_item flex-between">
				<view class="towcontent_item_text">
					昵称
				</view>
				<view class="towcontent_item_box flex-start">
					<input class="towcontent_item_box_text" style="text-align: right;" type="nickname" @blur="blurname"
						v-model="userlist.nickname" placeholder="请输入昵称">
					<!-- <text class="towcontent_item_box_text">{{userlist.nickname||'暂无您称'}}</text> -->
				</view>
			</view>
			<view class="towcontent_item flex-between">
				<view class="towcontent_item_text">
					性别
				</view>
				<view class="towcontent_item_box flex-start">
					<u-radio-group v-model="userlist.gender" placement="row" @change="groupChange">
						<u-radio shape="circle" label="男" name="1"></u-radio>
						<u-radio style="margin-left: 10rpx;" shape="circle" label="女" name="2"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="towcontent_item flex-between" @click="datetimeshow = true">
				<view class="towcontent_item_text">
					生日
				</view>
				<view class="towcontent_item_box flex-start">
					<text class="towcontent_item_box_text">{{userlist.birthday || ''}}</text>
					<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
				</view>
			</view>
			<view class="towcontent_item flex-between">
				<view class="towcontent_item_text">
					手机号
				</view>
				<view class="towcontent_item_box flex-start" v-if="userlist.mobile">
					<text
						class="towcontent_item_box_text">{{userlist.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</text>
					<!-- <navigator :url="'/pages/my/setup/phone'" class="towcontent_item_box_ghbd">
						更换绑定
					</navigator> 
					<button class="towcontent_item_box_ghbd" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">获取电话</button>-->
				</view>
				<!-- <navigator :url="'/pages/my/setup/phone'" v-else class="towcontent_item_box flex-start">
					<text class="towcontent_item_box_text">去绑定</text>
					<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
				</navigator> -->
				<view v-else class="towcontent_item_box flex-start">
					<button class="towcontent_item_box_ghbd" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">获取电话</button>
				</view>

			</view>
		</view>
		<view class="thereconse thereconses" @click="useruserinfoedit">
			保存
		</view>
		<u-datetime-picker :minDate="-946800000000" :maxDate="2240409600000" :show="datetimeshow"
			v-model="datetimevalue" @cancel='datetimeshow = false' @confirm="confirmdatetime"
			mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
	import WXBizDataCrypt from "@/common/js/WXBizDataCrypt.js" // 需要引入
	export default {
		data() {
			return {
				urlavatar: '',
				userlist: {},
				datetimeshow: false,
				datetimevalue: '',
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			};
		},
		onLoad() {},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
		},
		onShow() {
			this.useruserinfo()

		},
		watch: {},
		methods: {
			// / 更换头像
			onChooseAvatar(e) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				console.log(e.detail.avatarUrl)
				let file = e.detail.avatarUrl;
				uploadImage(file, '',
					result => {
						//将上传后的图片以对象（官方要求的格式）的形式存入uni-file-picker的value值imageValue（imageValue值的结构为数组包对象）用于图片回显
						// let objAge = {
						// 	'url': result,
						// 	'extname': 'png',
						// 	'name': 'imgss.png'
						// };
						// this.userlist.avatar.push(objAge)
						this.urlavatar = result
						console.log(this.urlavatar)
						uni.hideLoading()
					}, result => {
						uni.hideLoading()
					})
			},
			// 获取昵称
			blurname(e) {
				console.log(e);
				this.userlist.nickname = e.detail.value
			},
			async useruserinfo() {
				let res = await this.api.useruserinfo()
				uni.cache.set('loginuser', res);
				this.userlist = res.userinfo
				this.userlist.gender = String(res.userinfo.gender)
				this.urlavatar = res.userinfo.avatar

			},
			async useruserinfoedit() {
				if (this.userlist.mobile == '' || this.userlist.mobile == null) {
					uni.showToast({
						icon: 'none',
						title: '请先绑定手机号'
					});
					return;
				}
				if (this.urlavatar == '' || this.urlavatar == null) {
					uni.showToast({
						icon: 'none',
						title: '头像不能为空'
					});
					return;
				}
				if (this.userlist.gender == '' || this.userlist.gender == null) {
					uni.showToast({
						icon: 'none',
						title: '性别不能为空'
					});
					return;
				}
				if (this.userlist.birthday == '' || this.userlist.birthday == null) {
					uni.showToast({
						icon: 'none',
						title: '生日不能为空'
					});
					return;
				}
				let res = await this.api.useruserinfoedit({
					avatar: this.urlavatar,
					nickname: this.userlist.nickname,
					gender: this.userlist.gender,
					birthday: this.userlist.birthday
				})
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 2000);
				console.log(res)
			},
			confirmdatetime(e) {
				console.log(e)
				this.datetimeshow = false
				this.userlist.birthday = uni.$u.date(e.value, 'yyyy-mm-dd')
			},
			groupChange(n) {
				console.log(n)
				this.userlist.gender = n
			},
			async getPhoneNumber(res) { // 获取手机号 
				var resdataa = res
				console.log(res)
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: async (data) => {
						let resdata = await this.api.usergetwechatphone({
							code: data.code,
							iv: resdataa.detail.iv,
							encryptedData: resdataa.detail.encryptedData
						})
						this.userlist.mobile = resdata.mobile
					}
				});
				// #endif
				// #ifdef MP-WEIXIN

				// #endif
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}
	::v-deep .u-radio{
		margin-left: 10rpx;
	}
	.index {
		padding: 28rpx;

		.onecontent {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
		}

		.towcontent {
			padding: 0 32rpx;
			margin-top: 24rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx;

			.towcontent_item:nth-child(1) {
				border-top: none;
			}

			.towcontent_item {
				padding: 22rpx;
				border-top: 1rpx dotted #ccc;

				.towcontent_item_text {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.towcontent_item_box {
					.towcontent_item_box_imge {
						width: 64rpx;
						height: 64rpx;
					}

					.towcontent_item_box_text {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.towcontent_item_box_ghbd {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #9397C1;
						border-radius: 10rpx;
					}
				}
			}
		}

		.thereconse {
			width: 630rpx;
			height: 80rpx;
			background: #999999;
			border-radius: 40rpx;
			font-size: 36rpx;
			text-align: center;
			margin: 84rpx auto;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 80rpx;
		}

		.thereconses {
			background: var(--bg-color-button);
		}
	}
</style>