<template>
	<view class="page-user-detail">

		<view class="editor-item" style="margin-top: 50px;">
			<uni-forms ref="form" label-position="top">
				<uni-forms-item label="用户头像:">
					
					
					<button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="headerImg" mode="scaleToFill"></image> 
					</button>
				<!-- 	<view class="upload-box">
						<button class="btn-upload" @click="onUpload" v-if="headerImg==''">
							<text clas="text">+</text>
						</button>
						<button class="btn-upload" open-type="chooseAvatar" @click="onUpload" v-else>
							<image :src="headerImg" mode="scaleToFill" class="img"></image>
						</button>
						
					</view> -->
					
				</uni-forms-item >
				<uni-forms-item label="昵称:" >
					<uni-easyinput v-model="nickname"  :inputBorder="false" placeholder="请输入昵称"></uni-easyinput> 
				</uni-forms-item >
					<view class="border-b"></view>
				<uni-forms-item  label="性别"   >
					<uni-data-select 
						v-model="gender"
						:localdata="sexOption" 
						placeholder="请选择" 
					 ></uni-data-select>	 
				</uni-forms-item > 
				
				<uni-forms-item  label="生日" >
					
					
					<uni-datetime-picker  
						type="date"
						:value="born"  
						 placeholder="请选择" 
						 @change="onChangeBorn"
					/>
				 
 
				</uni-forms-item > 
				<uni-forms-item  label="手机号码" >
					<!-- #ifdef MP-WEIXIN -->
					<view class="mobile-item" >
						<view class="mobile">{{mobile}} </view>
						 <view style="margin-left: auto;"><button type="primary" class="btn-mobile" open-type="getPhoneNumber"
						:data-tel="mobile"  
							@getphonenumber="onGetphoneNumber"  
						
						>获手机号码</button></view>
						
					</view> 
					
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<uni-easyinput  v-model="mobile"  :inputBorder="false" placeholder="请输入手机号码"></uni-easyinput>
					 
					<!-- #endif -->
					
				</uni-forms-item > 
				<view class="border-b"></view>
				
				<!-- #ifdef MP-WEIXIN -->
				<!-- <uni-forms-item  label="所在城市" style="border-bottom:0px">
					
					  <picker 
						  mode="region"  
						  :value="region"
						  @change="onChangeRegion"
						  :custom-item="customItem">
					     <view class="picker" style="text-align:right;">
					       {{region[0]}}，{{region[1]}}，{{region[2]}}
					     </view>
					   </picker>
					
						 
				</uni-forms-item > -->
				<!-- #endif -->
				
				
			</uni-forms> 
			
			<view class="btn">
				<button type="primary" class="btn-save"  @click="onSave">保存更新</button>
			</view>
		</view>
		 
	</view>
</template>

<script>
	var siteinfo = require('../../siteinfo.js'); //require这个js模块
 	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
		  
		},
		data() {
			return {
				getPhonePop: true,
				dataRange:[], 
				headerPath:'',
				headerImg:'',
				nickname:'',
				born:'',
				mobile:'',
				gender:'',
				privince:'',
				city:'',
				district:'',
				endTime:'',
				startTime:'',
				region: ['', '', ''],
				customItem: '全部',
				sexOption:[
					{ value: 1, text: "先生" },
					{ value: 2, text: "女士" },
					{ value: 3, text: "保密" },
				],
			};
		},
		computed: {
			...mapState(['systemInfo', 'store_id', 'userInfo']), 
		}, 
		onShow() { 
			this.initInfo();
			let d=new Date();
			
			this.born=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
			
			let t=new Date();
			let t1=Date.parse(t.setFullYear(t.getFullYear()-60));
			 this.initLocation();
		},
		methods:{
			
			
			onHome(){
				uni.switchTab({
					url:'/pages/home/home'
				})
			},
			
			
			onChooseAvatar(e) {
				console.log(e)
				let _this=this;
				const { avatarUrl } = e.detail;
				this.avatar = avatarUrl;
				
				uni.uploadFile({
					url: siteinfo.siteroot + '/index.php?s=/api/upload/upload',
					filePath: avatarUrl,
					name: 'file',
					formData: {
						'openId': _this.userInfo.openid,
						'token': uni.getStorageSync('token'),
					},
					success: ({data}) => {
						let res = JSON.parse(data);
						console.log(res);
						if (res.code == 2) {
							this.userInfo.avatar = res.src;
						 
							this.headerImg = res.url;
							this.headerPath=res.src;
							
							
							console.log("res",res);
							
							
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								mask: true
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '头像上传失败，请稍后重试~',
							icon: 'none',
							mask: true
						});
					}
				});
			},
		 
			// 微信成为会员
			onGetphoneNumber(e) {
				let userInfo=uni.getStorageSync("userInfo"), 
				    store_id=uni.getStorageSync("store_id");
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.$http.request('xcx/Jiemi', {
						id:userInfo.id,
						data: e.detail.encryptedData,
						iv: e.detail.iv,
						sessionKey: uni.getStorageSync('user_xcx_info').session_key,
						store_id: store_id,
					}, "", "", true).then(res => {
						this.mobile = res.data.phoneNumber;
						uni.setStorageSync('phone', res.data.phoneNumber);
						uni.showModal({
							title: '授权成功',
							content: '享受更多优惠！',
							showCancel: false,
							cancelText: '',
							confirmText: '确定',
							success: res => { 
							},
							fail: () => {},
							complete: () => {}
						});
					})
				} else {
					uni.showToast({
						title: "授权失败,请重新授权",
						icon: 'none'
					})
				}
			},
		
		onHome(e){
			uni.switchTab({
				url:'/pages/home/home'
			})
		},	
		
		 
			onChangeRegion(e){
			 
				if(e.target.value.length==3){
					this.region=e.target.value; 
					this.province=e.target.value[0];
					this.city=e.target.value[1];
					this.district=e.target.value[2]; 
				} 
			},
			
			initInfo(){
				let _this=this;
				_this.$http.request('account/getInfo', {  
					id:_this.userInfo.id,					 
				}, "", "", true).then(res => { 
					this.headerImg='https://business.coffunity.cn/upload/default-avatar.jpg',
					this.nickname='微信用户',
					  // Only update headerImg if avatar from server is valid
					  this.headerImg=(res.data.avatar && res.data.avatar.trim() !== '' && res.data.avatar.trim() !== 'https://business.coffunity.cn') ? res.data.avatar : this.headerImg;
					  
					  
					  
					  console.log(this.headerImg);
					 this.headerPath=res.data.imgPath;
					 this.gender=res.data.gender;
					 this.born=res.data.born;
					// Only update nickname and mobile if they are valid
					 this.nickname = res.data.nickname ? res.data.nickname : this.nickname;
                     this.mobile = res.data.mobile ? res.data.mobile : this.mobile;
					 this.region=res.data.city;
					 this.province=res.data.province;
					 this.city=res.data.cityData;
					 this.district=res.data.district;
					 
					 if(this.province==''){
						 this.initLocation();
					 }
					 
				}).catch(err => {})
			},
			initLocation(){
				uni.getLocation({
					success:(res)=>{
						console.log("res",res);
					},
					fail:(res)=>{
						console.log("fail");
					},
					complete:(res)=>{
						console.log("component");
					},
				})
			},
			
			 
			onChangeBorn(e){
				this.born=e; 
			},
			
			onSave(e){
				let _this=this;
				let par={
					openid:_this.userInfo.openid,
					avatar:_this.headerPath,
					nickname:_this.nickname,
					gender:_this.gender,
					born:_this.born,
					province:_this.province,
					city:_this.city,
					district:_this.district, 
				}
				 
				_this.$http.request('member/saveMemberInfo',par, "", "", true).then(res => { 
					   uni.showToast({
						   title:'保存成功',
						   icon:'none',
					   })
				uni.switchTab({
							url: '/pages/home/home' // 返回首页
						});	   
				}).catch(err => {
					uni.showToast({
						   title:"保成失败",
						   icon:'none',
					})
				})
			},
			
			 
		}
	}
</script>

<style lang="scss">
@import './user-detail.scss'
</style>
