<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">
					<button class="list_item_right_head" type="default" open-type="chooseAvatar" @chooseavatar="uploadImg">
						<image class="list_item_right_head" :src="userHeadImg" mode="aspectFill"></image>
					</button>
					<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 ">
					<button open-type="getPhoneNumber" @getphonenumber="getPhone">
						<view class="flex-colum-end">
							<view class="text">{{phonetitle || '请授权手机号'}}</view>
							<view class="place" v-if="phonetitle">绑定的手机号不能修改</view>
						</view>
					</button>
				</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" :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 = true">生日一旦填写不能修改</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"
						@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" @click="sumbit">保存</view>
	</view>
</template>

<script>
	export default {
		components: {
		},

		data() {
			return {
				sexShow: false,
				calendarShow: false,
				sexText: '请选择',
				value1: Number(new Date()),
				form: {
					sex: 1,
					address: '', //地址
					type: '', //品类
					orderBy: '', //1.理我最近 2.销量优先 3.价格优先
					other: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					status: 'loadmore',
				},
				sexList: [
					[{
						value: 1,
						label: '男'
					},
					{
						value: 2,
						label: '女'
					},]
				],
				
				userInfo: uni.cache.get('userInfo'),
				userHeadImg: "",
				nickName: '',
				phonetitle: ""
			};
		},
		computed:{
		     
		},
		onLoad() {
			this.userInfo = uni.cache.get('userInfo')
			this.userHeadImg = this.userInfo.headImg;
			this.nickName = this.userInfo.nickName;
			this.sex = this.userInfo.sex;
			this.phonetitle = this.userInfo.telephone ? (this.userInfo.telephone.substr(0, 3) + "****" + this.userInfo.telephone.substr(7)) : ""
			this.date = this.getDate({ format: true})
		},
		
		methods: {
			
			/**
			 * 确定生日
			 * @param {Object} e
			 */
			confirmTime(e) {
				console.log(e);
				console.log(this.getDate(e.value))
			},
			
			/**
			 * 确定性别
			 * @param {Object} e
			 */
			confirmSex(e) {
				this.sexShow = false;
				this.sex = e.value[0].value;
				this.sexText = e.value[0].label;
				console.log(e)
			},
		
			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}`;
			},
			
			/**
			 * 获取手机号
			 * @param {Object} d
			 */
			async getPhone(d) {
				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,
							})
							this.phonetitle = res.data
						}
					})
				}
			},
			
			/**
			 * 取消绑定/退出登录
			 */
			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'
							});
						}
					}
				});
			},
			
			/**
			 * 上传头像
			 * @param {Object} e
			 */
			uploadImg(e) {
				console.log(e)
				const {
					avatarUrl
				} = e.detail
				console.log(e)
				console.log(e.detail)
				// this.userHeadImg = avatarUrl
				uni.uploadFile({
					url: 'https://wxcashiertest.sxczgkj.cn/cashierService/common/upload',
					// url: uni.conf.baseUrl + '/common/upload',
					filePath: avatarUrl,
					header: {
						environment: 'app',
						type: 'android',
						version: '1.7.3',
					},
					name: "file",
					formData: {
						file: avatarUrl,
					},
					success: (uploadFileRes) => {
						let {
							data
						} = JSON.parse(uploadFileRes.data)
						this.userHeadImg = data
					},
				});
			},
			
			/**
			 * 保存
			 */
			async sumbit() {
				let res = await this.api.upUserInfo({
					headImg: this.userHeadImg,
					nickName: this.nickName,
					sex: this.sex,
					telephone: this.phonetitle == '请授权手机号' ? '' : this.phonetitle
				})
				if (res.code == 0) {
					uni.navigateBack()
				}
			}
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
	};
</script>

<style scoped lang="scss">
	page {
		background: #fff;
	}
	.container{
		.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;
					}
					.place{
						font-size: 28rpx;
						color: #999;
						line-height: initial;
					}
					.text{
						font-size: 28rpx;
						color: #333;
						line-height: initial;
					}
					
					.r{
						margin-right: 16rpx;
					}
					button{
						text{
							color: #fff!important;
						}
					}
					button::after{
						border: none;
					}
				}
			}
		}
		.save{
			width: 502rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			background: #E0E0E0;
			border-radius: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
			position: fixed;
			bottom: 100rpx;
			left: 0;
			right: 0;
			margin: auto;
		}
	}

	
</style>
