<template>
	<!-- 登录页 -->
	 <view style="padding-bottom: 60rpx;">
	     <uni-nav-bar border-bottom='false' fixed="true"  leftText="登录" @clickLeft='goBack' statusBar="true"  color="#ffffff" backgroundColor='transparent'></uni-nav-bar>
		  <view class="content flew-column flew-align-center" style="width: 100%;">
				<view class="login_bg" style="width: 100%;">
					<!-- <image style="width: 100%;" src="https://qsdp.qs163.cn/statics/shujuju_applet_static_path/2.png" mode=""></image> -->
					<image style="width: 100%;" :src="topimg" mode=""></image>
				</view>
				<view class="login_text">
					潜山市人口网格化管理 
				</view>
				<!-- 新修改的 -->
				<view class="nlogin">
					<view class="nlogin_tit"><image :src="phoimg"></image></view>
					<view class="nflexc nlogin_inp">
						<input placeholder="请输入您的账号" class="nlogin_int" v-model="formData.username"/>
						<image src="@/static/image/close.png" class="nlogin_img" @click="getClear(1)" v-if="formData.username"></image>
					</view>
					
				</view>
				<view class="nlogin" style="margin-bottom: 76rpx;">
					<view class="nlogin_tit"><image :src="pwdimg"></image></view>
					<view class="nflexc nlogin_inp">
						<input placeholder="请输入密码" type="password" class="nlogin_int" v-model="formData.password"/>
						<image src="@/static/image/close.png" class="nlogin_img" @click="getClear(2)" v-if="formData.password"></image>
					</view>
					
				</view>
					<button  type="primary" class="login_btn login_btna" @click="passwordlogin">
						<text class="btn-txt">立即登录</text>
					</button>
				<!-- </view> -->
				
				<!-- <view class="login_btn"> -->
					<button  type="primary" class="login_btn login_btnb" open-type="getUserInfo" @getuserinfo="getuserinfo">
						<text class="btn-txt">快捷登录</text>
					</button>
				<!-- </view> -->
		  </view>
		  <div class="box_hei" @click="btn" v-if="box_status">
		  	<div  @click.stop="btns" class="hei_box">
		  		<div class="box_top">
		  			<div class="box_title">
		  				<div>
		  					潜山人口网格化管理 申请使用
		  				</div>
		  			</div>
		  			<div class="box_nameq">你的手机号码</div>
		  		</div>
		  		<!-- <div class="boxs"></div> -->
		  		<div class="box_btns">
		  			<div @click="btn" class="box_btn box_btn1">拒绝</div>
		  			<button class="box_btn box_btn2" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">允许</button>
		  		</div>
		  	</div>
		  </div>
	  </view>
</template>

<script>
	export default {
		data() {
			return {
				topimg:require("@/static/image/ltop.png"),
				phoimg:require("@/static/image/pimg.png"),
				pwdimg:require("@/static/image/pwdimg.png"),
				
				formData: {
					username: '',
					password: ''
				},
				yqr_id: '',
				box_status: false,
				phone: '',
				openid: '',
				//用户名
				nickName:'',
				//用户头像
				avatarUrl:'',
				//code
				code:'',
				//userinfo
				userInfo:{},
				mode:''
				

			}
		},
		onLoad(option) {
			// console.log(option)
			this.mode = option.name
			// console.log(this.mode)
			// 默认地址
			// let {yq_id} = data
			var yqr_id = uni.getStorageSync('yqr_id')
			if(yqr_id){
				this.yqr_id = yqr_id
			}
			const _this = this
			// uni.authorize({
			// 	scope: 'scope.userLocation',
			// 	success: (ress) => {
					
			// 	}
			// })
		},
		
		methods: {
			getClear(idx){
				if(idx==1){
					this.formData.username=''
				}else{
					this.formData.password=''
				}
			},
			goBack() {
				console.log('-----------')
				uni.navigateBack()
			},
			btns() {
				
			},
			btn() {
				this.box_status = false
			},
			passwordlogin() {
				this.$http.post('boman-auth/login', this.formData).then(res=>{
					if(res.code == 200 ) {
						uni.setStorageSync('token', res.data.access_token)
						this.getUserInfoes();
						// uni.switchTab({
						// 	url: '/pages/index/index'
						// })
					} else{
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			async getPhoneNumber(e){
				console.log(e)
				const {iv,encryptedData} = e.detail
				console.log(iv,encryptedData)
				let res = await this.$http.uniApi({events: uni.login})
						if(res.code) {
							console.log(res,9876)
							this.$http.post("boman-wechat/applet/login",{
								iv: iv,
								encryptedData: encryptedData,
								code : res.code,
								// mode:this.mode,
								// userInfo:this.userInfo
							}).then(red => {
								console.log(red)
								if(red.code == 200){
									// console.log(JSON.parse(red.data).phoneNumber,9999)
									this.box_status = false
									uni.setStorageSync('token', red.data.access_token)
									this.getUserInfoes();
									// uni.switchTab({
									// 	url: '/pages/index/index'
									// })
								}else{
									uni.showToast({
										title: red.msg,
										duration: 1000,
										icon: 'none'
									});
								}
							})
						}
			},
			getUserInfoes() {
				
				this.$http.get('system/user/getInfo').then(res=>{
					// console.log(JSON.stringify(res))
					if(res.code == 200 ) {
						
						var roles=res.roles.some((ite,idx)=>{
							if(ite=='queryApp'){
								return true
							}
						})
						uni.setStorageSync('roles', roles)  
						uni.setStorageSync('phone', res.user.phonenumber)   
						 setTimeout(function(){
						 	uni.switchTab({
						 	  url: '../index/index'　　// 
						 	})
						 },1000)
					} 
				})
			},
			bindUserinfo(params) {
				const _this = this
				console.log(params)
				this.$http.post('user/login', {
					wxId: params.code,
					headImg: params.avatarUrl,
					userName:  params.nickName,
					inviteCode:'',
					phone:params.phone
					// pid: this.yqr_id || '',
				}).then(res => {
					if(res.code == '200') {
						console.log(res)
						this.openid = res.data
						
						console.log(this.openid)
						uni.setStorageSync('token', this.openid)
						uni.setStorageSync('yq_id', res.data.id)
						this.getUserInfoes();
						// setTimeout(function(){
						// 	uni.switchTab({
						// 	  url: '../index/index'　　// 
						// 	})
						// },1000)
						// this.box_status=true
						// uni.getLocation({
						// 	success: red => {
						// 		_this.$http.post("index/index/getDefaultStore",{
						// 			lng: red.longitude,
						// 			lat: red.latitude,
						// 			openid: res.data.openid,
						// 		}).then(res => {
						// 			let adss = {
						// 				id: res.data.id,
						// 				lat: res.data.lat,
						// 				lng: res.data.lng,
						// 				name: res.data.name
						// 			}
						// 			// uni.setStorageSync('adss', res)
						// 			// uni.setStorageSync('zx_adss', adss)
						// 			// uni.setStorageSync('xz_adss', adss)
						// 			uni.request({
						// 				// url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${adss.lat},${adss.lng}&key=3YYBZ-KBURK-3QTJG-AK2RC-KBBRS-T4FVR`,
						// 				success: function (result) {
						// 					// uni.setStorageSync('city', result.data.result.address_component.city)
						// 				}
						// 			})
						// 		})
						// 	}
						// })
						// this.$http.post('app_user/findUserDetail').then((red) => {
						// 	uni.setStorageSync('userInfo',red.data)
						// })
					}
				})
			},
			async getuserinfo(e) {
				console.log(e,9999)
				const {nickName, avatarUrl, ...userInfo} = e.detail.userInfo
				// uni.navigateTo({
				// 	url: `login_phone?nickName=${nickName}&avatarUrl=${avatarUrl}`
				// })
				try{
					let res = await this.$http.uniApi({events: uni.login})
					if(res.code) {
						// console.log(res)
						// console.log(res.code)
						// console.log(nickName)
						// console.log(avatarUrl)
						this.avatarUrl = avatarUrl
						this.nickName = nickName
						this.code = res.code
						this.userInfo =e.detail.userInfo
						uni.setStorageSync('userInfo', e.detail.userInfo)
						// this.bindUserinfo({code: res.code, nickName, avatarUrl})
						this.box_status=true
					}
				} catch(e){
					//TODO handle the exception
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nflexc{display: flex;align-items: center;}
	.nlogin{width: 616rpx;margin: 0 auto 50rpx;box-sizing: border-box;display: flex;align-items: center;border-bottom: 2rpx solid #A7A7A7;padding: 10rpx 20rpx;
		.nlogin_tit{
			flex: 0 0 auto;
			image{width: 42rpx;height: 50rpx;margin-right: 30rpx;}
		}
		
		.nlogin_inp{
			flex: 1;
			.nlogin_int{font-size: 28rpx;color: #343434;flex: 1;}
			.nlogin_img{
				width: 40rpx;height: 40rpx;flex: 0 0 auto;
			}
		}
	}
	.login_btn{width: 616rpx;margin: 0 auto;height: 84rpx;font-size: 34rpx;box-sizing: border-box;border-radius: 42rpx;}
	.login_btna{background: linear-gradient(-40deg, #3C6AF8, #5E8AC6);
box-shadow: 2rpx 2rpx 6rpx 0px rgba(184,187,194,0.1500);color: #fff;}
	.login_btnb{border: 1px solid #3C6AF8;margin-top: 30rpx;background: #FFFFFF;}
	.login_btnb .btn-txt{color: #3C6AF8;}
	
	/deep/.uni-navbar {
	  .uni-navbar__content {
	    border: 0 none !important;
	  }
	}
	.login_text {
		text-shadow: 2rpx 2rpx 6rpx rgba(184,187,194,0.1500);
		
		background: linear-gradient(0deg, #3C6AF8 0%, #5E8AC6 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #343434;
		line-height: 60rpx;
		margin: 40rpx 0 80rpx;
	}
	.btn-txt{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 18rpx;
	}
	.my_img{
		width: 100%;
		height: 426upx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.box_hei{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.8);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
		.hei_box{
			background: #fff;
			border-radius:22upx 22upx 0 0;
			height: 440upx;
			padding: 52upx 28upx 104upx;
			position: absolute;
			bottom:0;
			width: 100%;
			box-sizing: border-box;
			.box_top{
				padding: 0 18upx 62upx;
				.box_title{
					display: flex;
					justify-content: space-between;
					font-size: 30upx;
					margin-bottom: 30upx;
					div{
						display: flex;
						align-items: center;
						color: #333333;
					}
					.img{
						margin-right: 14upx;
						width: 180upx;
						height: 48upx;
					}
					.imgs{
						width: 40upx;
						height: 40upx;
					}
				}
				.box_nameq{
					color: #333333;
					font-size: 44upx;
					font-weight: bold;
				}
			}
			.box_phone{
				height: 106upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;
				color: #A6A6A6;
				border-bottom: 1upx solid #EBEBEB;
				border-top: 1upx solid #EBEBEB;
				div{
					display: flex;
					align-items: center;
				}
				.img{
					width: 26upx;
					height: 22upx;
				}
				span{
					color: #333333;
					font-size: 32upx;
					padding-right: 18upx;
					font-weight: bold;
				}
			}
			.box_qita{
				height: 106upx;
				font-size: 28upx;
				color: #7CA4FC;
				line-height: 106upx;
			}
			.boxs{
				height: 50upx;
			}
			.box_btns{
				margin-top: 10upx;
				display: flex;
				justify-content: space-between;
				.box_btn{
					width: 324upx;
					height: 82upx;
					font-size: 32upx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 4upx;
				}
				.box_btn1{
					background: #F3F3F3;
					color: #33B925;
				}
				.box_btn2{
					background: #37962B;
					color: #FFFFFF;
				}
			}
		}
	}
	.login-box{
		border-top: 1px solid #f5f5f5;
		box-sizing: border-box;
		height: 100%;
		position: absolute;
		width: 100%;
		.wrapper{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100%;
			padding-top: 150upx;
			.logo-box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				.img{
					width: 198upx;
					height: 113upx;
					margin-bottom: 32upx;
				}
				p{
					text-align: center;
					color: #100E0E;
					font-weight: bold;
					margin-bottom: 104upx;
				}
			}
			.btn-wrapper{
				flex: 0 0 400upx;
				.btn{
					width: 676upx;
					height: 96upx;	
					background-color: #12C469;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					.img{
						width: 52upx;
						height: 42upx;
						margin-right: 10upx;
					}
					&:after{
						border:none
					}
				}
			}
		}
	}
	.imguy{
		width: 22upx;
		height: 22upx;
	}
</style>
