<template>
	<view class="container">

		<view class="info_list">
			<view class="list_item">
				<view class="list_item_left">头像</view>
				<view class="list_item_right flex-center">
					<!-- #ifdef MP-WEIXIN -->
					<button class="list_item_right_head" type="default" open-type="chooseAvatar"
						@chooseavatar="onChooseAvatar">
						<image class="list_item_right_head" :src="userHeadImg" mode="aspectFill"></image>
					</button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<button class="list_item_right_head" @click="onChooseAvatar">
						<image class="list_item_right_head" :src="userHeadImg" mode="aspectFill"></image>
					</button>
					<!-- #endif -->

					<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
				</view>
			</view>
			<view class="list_item">
				<view class="list_item_left">昵称</view>
				<view class="list_item_right" style="width: 100%;">
					<u-input v-model="nickName" type="text" input-align="right" placeholder="请输入不支持特殊字符10个字以内"
						:custom-style="{color:'#333',fontSize: '28rpx',border:'none'}"
						placeholder-style="color:#999;font-size: 28rpx" />
				</view>
			</view>
			<view class="list_item">
				<view class="list_item_left">账号</view>
				<view class="list_item_right ">
					<!-- #ifdef H5 -->
					<button class="phone" v-if="!mobile" open-type="getAuthorize" scope='phoneNumber'
						@getAuthorize="getPhone" @error="getPhoneError">
					<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<button class="phone" v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getPhone">
						<!-- #endif -->
							<!-- #ifdef MP-ALIPAY -->
							<button class="phone" v-if="!mobile" open-type="getAuthorize" scope='phoneNumber'
								@getAuthorize="getPhone" @error="getPhoneError">
							<!-- #endif -->
								<view class="flex-colum-end">
									<view class="text">请授权手机号</view>
								</view>
							</button>
							<view v-else>
								<view class="flex-colum-end">
									<view class="text">{{phonetitle }}</view>
									<view class="place">绑定的手机号不能修改</view>
								</view>
							</view>
				</view>
			</view>
			<view class="list_item">
				<view class="list_item_left">性别</view>
				<view class="list_item_right flex-center">
					<view class="place r" @click="sexShow = true">{{sexText}}</view>
					<u-picker @cancel="sexShow = false" itemHeight="66" :show="sexShow" :columns="sexList"
						keyName="label" @confirm="confirmSex"></u-picker>
					<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
				</view>
			</view>
			<view class="list_item">
				<view class="list_item_left">生日</view>
				<view class="list_item_right flex-center">
					<view class="place r" @click="calendarShow = (birthDay ? false : true)">
						{{ birthDay || '生日一旦填写不能修改'}}
					</view>
					<!-- <u-calendar  @close="calendarShow = false" monthNum="99" minDate="1945-01-01" maxDate="2055-12-12" :show="calendarShow" mode="single" @confirm="confirmCalendar"></u-calendar> -->
					<!-- <u-picker :show="calendarShow" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker> -->
					<!-- <picker :show="calendarShow" mode="date"></picker> -->
					<u-datetime-picker mode="date" itemHeight="90" visibleItemCount="5" @cancel="calendarShow = false"
						:show="calendarShow" :minDate="-2208988800000" v-model="value1"
						@confirm="confirmTime"></u-datetime-picker>
					<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
				</view>
			</view>
			<view class="list_item" @click="boxClick">
				<view class="list_item_left">绑定微信</view>
				<view class="list_item_right flex-center">
					<view class="text r">已绑定</view>
					<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
				</view>
			</view>
		</view>

		<view class="save active" @click="$u.debounce(sumbit, 500)">保存</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';


	const sexShow = ref(false)
	const calendarShow = ref(false)
	const sexText = ref('请选择')
	const value1 = ref(Number(new Date()))
	const listinfo = reactive({
		form: {
			sex: 1,
			address: '', //地址
			type: '', //品类
			orderBy: '', //1.理我最近 2.销量优先 3.价格优先
			other: '', //附近1KM 1选中 0不选中
			page: 1, //页数
			size: 10, //页容量
			status: 'loadmore',
		},
		sexList: [
			[{
					value: 1,
					label: '男'
				},
				{
					value: 0,
					label: '女'
				},
			]
		],
	})

	const userInfo = uni.cache.get('shopUserInfo')
	// this.userInfo = uni.cache.get('userInfo')
	// this.userHeadImg = this.userInfo.headImg;
	// this.nickName = this.userInfo.nickName;
	// this.sex = this.userInfo.sex;
	// if (this.userInfo.sex != null) {
	// 	this.sexText = this.userInfo.sex == 1 ? '男' : '女';
	// }
	// this.birthDay = this.userInfo.birthDay;
	// this.phonetitle = this.userInfo.telephone ? (this.userInfo.telephone.substr(0, 3) + "****" + this.userInfo
	// 	.telephone.substr(7)) : ""
	// this.mobile = this.userInfo.telephone;
	// this.date = this.getDate({
	// 	format: true
	// })
	const confirmTime = (e) => {
		this.calendarShow = false;
		this.birthDay = this.getDate(e.value);
	}

	const confirmSex = (e) => {
		this.sexShow = false;
		this.sex = e.value[0].value;
		this.sexText = e.value[0].label;
	}

	const getDate = (time) => { //年月日
		const date = new Date(time);
		// const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}

	// 获取手机号
	const getPhone = (d) => {
		console.log(d)
		// #ifdef MP-WEIXIN
		if (d.detail.iv) {
			uni.login({
				provider: 'weixin',
				success: async (data) => {
					// 微信小程序环境
					console.log(data)
					let res = await this.api.userwxlogins({
						code: data.code,
						encryptedData: d.detail.encryptedData,
						iv: d.detail.iv,
						source: "wechar"
					})
					this.phonetitle = res.data.substr(0, 3) + "****" + res.data.substr(7)
					this.mobile = res.data;
				}
			});
		}
		// #endif
		// #ifdef MP-ALIPAY
		// 支付宝小程序环境
		my.getAuthCode({
			scopes: 'auth_user',
			success: (res) => {
				console.log(res)
				let authCode = res.authCode;
				my.getPhoneNumber({
					success: async (data) => {
						let res = await this.api.userwxlogins({
							// code: authCode,
							encryptedData: JSON.parse(data.response).response,
							source: "alipay"
						})
						this.phonetitle = res.data.substr(0, 3) + "****" + res.data
							.substr(7)
						this.mobile = res.data;
					}
				});
			}
		});
		// #endif
	}

	const boxClick = () => {
		uni.showModal({
			title: '注意',
			content: '确定要取消绑定吗？',
			success: async (res) => {
				if (res.confirm) {
					try {
						await this.api.loginOut();
					} catch (e) {
						//TODO handle the exception
					}
					uni.cache.clear();
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			}
		});
	}

	// 上传头像
	const onChooseAvatar = (e) => {
		let _this = this;
		//#ifdef MP-WEIXIN
		let avatarUrl = e.detail.avatarUrl
		uni.uploadFile({
			url: uni.conf.baseUrl + '/common/upload',
			// url: uni.conf.baseUrl + '/common/upload',
			filePath: avatarUrl,
			header: {
				environment: 'app',
				type: 'android',
				version: '1.7.3',
				'content-type': 'multipart/form-data'
			},
			fileType: 'image',
			name: "file",
			formData: {
				file: avatarUrl,
			},
			success: (uploadFileRes) => {
				let {
					data
				} = JSON.parse(uploadFileRes.data)
				this.userHeadImg = data
			},
			fail: (res) => {
				console.log(res)
			}
		});
		// #endif
		//#ifdef MP-ALIPAY
		uni.chooseImage({
			count: 1, // 默认9，设置图片的数量
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success: function(res) {
				// 成功选择图片后
				let avatarUrl = res.tempFilePaths[0]; // 获取文件路径

				my.uploadFile({
					url: uni.conf.baseUrl + '/common/upload',
					// url: uni.conf.baseUrl + '/common/upload',
					filePath: avatarUrl,
					header: {
						environment: 'app',
						type: 'android',
						version: '1.7.3',
						'content-type': 'multipart/form-data'
					},
					fileType: 'image',
					name: "file",
					formData: {
						file: avatarUrl,
					},
					success: (uploadFileRes) => {
						let {
							data
						} = JSON.parse(uploadFileRes.data)
						_this.userHeadImg = data
					},
					fail: (res) => {
						console.log(res)
					}
				});
			},
			fail: (res) => {
				console.log(res)
			}
		});
		// #endif
	}

	const sumbit = async () => {
		let res = await this.api.upUserInfo({
			headImg: this.userHeadImg,
			nickName: this.nickName,
			sex: this.sex,
			birthDay: this.birthDay,
			telephone: this.mobile,
		})
		if (res.code == 0) {
			uni.navigateBack()
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #fff;
	}

	.container {

		::v-deep .u-input input {
			background-color: transparent;
		}

		.info_list {
			display: flex;
			flex-direction: column;
			padding: 0 20rpx;

			.list_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #E5E5E5;

				.list_item_left {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					flex-shrink: 0;
				}

				.list_item_right {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;

					.list_item_right_head {
						width: 98rpx;
						height: 98rpx;
						border-radius: 50rpx;
						margin-right: 16rpx;
						padding: 0;
					}

					.phone {
						border: none;
						background-color: transparent;
						// #ifdef MP-ALIPAY
						display: initial;
						// #endif
					}

					.place {
						font-size: 28rpx;
						color: #999;
						line-height: initial;
					}

					.text {
						font-size: 28rpx;
						color: #333;
						line-height: initial;
					}

					.r {
						margin-right: 16rpx;
					}

					button {
						outline: none;

						text {
							color: #fff !important;
						}
					}

					button::after {
						border: none;
					}

					button:active {
						background-color: inherit;
					}
				}
			}
		}

		.save {
			width: 502rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			background-color: #E0E0E0;
			border-radius: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
			position: fixed;
			bottom: 100rpx;
			left: 0;
			right: 0;
			margin: auto;
		}

		.save.active {
			background-color: #E3AD7F;
			color: #fff;
		}
	}
</style>