<template>
	<view>
		<view class="logo">
			<view class="img">
				<image mode="widthFix" src="../../static/img/cycLogoImg.jpg"></image>
			</view>
		</view>
		<!-- 登录方式 -->
		<view style="    width: 80%; display: flex; justify-content: space-around;  padding-bottom: 50upx; margin: auto;color: #b7cbcc;line-height: 70upx;">
			<view v-for="(grid,loginIndex) in orderType" :key="loginIndex" @tap="showType(loginIndex)">
				<view  :class="[loginIndex==tabIndex?'on':'']">{{grid}}</view>
			</view>
		</view>
		<!-- 账号密码输入框 -->
		<view class="form">
			<!-- 手机登录 -->
			<view v-if="tabIndex===0" class="username">
				<input placeholder="请输入手机号" v-model="username" placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<!-- 账号登录 -->
			<view v-else class="username">
				<input placeholder="请输入账号" v-model="username" placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="password">
				<input placeholder="请输入密码" v-model="password" password=true
					placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="btn" @tap="doLogin">登 录</view>
			<view class="wechartRegister">
				<image src="../../static/img/share/wechart.png" class="wechartRegisterImg" @click="wxLogin"></image>
				<view class="wechartRegisterText">微信登录</view>
			</view>
			<view class="res">
				<view class="textBtn" @tap="toPage('register')">用户注册</view>
				<view class="textBtn" @tap="toPage('resetpasswd')">找回密码</view>
			</view>
		</view>
		<!-- 第三方登录 -->
		<view class="oauth" v-if="isShowOauth">
			<view class="text">— 快速登录 —</view>
			<view class="list">
				<view @tap="oauthLogin('weixin')" v-if="showProvider.weixin" class="icon weixin"></view>
				<view @tap="oauthLogin('qq')" v-if="showProvider.qq" class="icon qq"></view>
				<view @tap="oauthLogin('sinaweibo')" v-if="showProvider.sinaweibo" class="icon sinaweibo"></view>
				<!-- <view @tap="oauthLogin('xiaomi')" v-if="showProvider.xiaomi" class="icon xiaomi"></view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	export default {
		data() {
			return {
				username: '',
				password: '',
				isShowOauth: false,
				showProvider: {
					weixin: false,
					qq: false,
					sinaweibo: false,
					xiaomi: false
				},
				tabIndex:0,
				orderType: ['手机登录','账号登录'],
			}
		},
		onShow() {

		},
		onLoad() {
			//APP显示第三方登录
			// #ifdef APP-PLUS
			this.isShowOauth = true;
			// #endif
			this.getProvider();
			uni.hideHomeButton();

		},
		methods: {
			showType(loginIndex){
				this.tabIndex = loginIndex;
			},
			wxLogin(){
				var that = this
					uni.login({
					  provider: 'weixin',
					  success: function (loginRes) {
						  console.log(loginRes)
						  uni.showLoading({
						  	title: '微信登录中...',
							mask: true
						  })
						  that.$u.api.login({
							code: loginRes.code
						  }).then(
						  	res => {
								if(res.data.token!==''&&res.data.token!==undefined&&res.data.token!==null){
									console.log(res)
									that.$u.vuex('vuex_token', res.data.token)
									that.$u.api.getInfo().then(res => {
										that.$u.vuex('vuex_user', res.data)
										if(res.data.icon===""){
											that.$u.vuex('vuex_user.icon', '/static/img/face.jpg')
										}else{
											that.$u.vuex('vuex_user.icon', that.vuex_host + 'public/' + res.data.icon)
										}
										debugger;
										uni.switchTab({
											url:'/pages/tabBar/home/home'
										})	
									})
									that.$u.api.getAddress({prePage:50}).then(res=>{
										for(var i=0;i<res.data.length;i++){
											if(res.data[i].often==1){
												uni.setStorageSync('selectAddress', res.data[i])
											}
										}
									})
									that.$u.api.getInvoice({prePage:50}).then(res=>{
										for(let key  in res.data){
										     if(res.data[key].often==1){
										     	uni.setStorageSync('selectInvoice', res.data[key])
										     } 
										  }
										
									})
								}else{
									uni.showModal({
											title: '温馨提示',
											content: '亲，您还没有微信注册哟，是否前往注册',
											success(modelRes) {
												//如果用户点击了确定按钮
												if (modelRes.confirm) {
													uni.navigateTo({
														url: 'register'
													});
												} else if (res.cancel) {
													//如果用户点击了取消按钮
													console.log(3);
													uni.showModal({
														title: '温馨提示',
														content: '您拒绝了请求,不能正常使用小程序',
														icon: 'error',
														duration: 2000
													});
													return;
												}
											}
										});
								}
								debugger;
								uni.hideLoading()	
						  	}
						  ).catch(res=>{
							  uni.showModal({
							  		title: '温馨提示',
							  		content: '亲，您还没有微信注册哟，是否前往注册',
							  		success(modelRes) {
							  			//如果用户点击了确定按钮
							  			if (modelRes.confirm) {
							  				uni.navigateTo({
							  					url: 'register'
							  				});
							  			} else if (res.cancel) {
							  				//如果用户点击了取消按钮
							  				console.log(3);
							  				uni.showModal({
							  					title: '温馨提示',
												content: '您拒绝了请求,不能正常使用小程序',
							  					icon: 'error',
							  					duration: 2000
							  				});
							  				return;
							  			}
							  		}
							  	});
							  
						  })
					  }
					});
				
			},
			oauthLogin(provider) {
				uni.showLoading();
				//第三方登录
				uni.login({
					provider: provider,
					success: (loginRes) => {
						console.log("success: " + JSON.stringify(loginRes));
						//案例直接获取用户信息，一般不是在APP端直接获取用户信息，比如微信，获取一个code，传递给后端，后端再去请求微信服务器获取用户信息
						uni.getUserInfo({
							provider: provider,
							success: (infoRes) => {
								console.log('用户信息：' + JSON.stringify(infoRes.userInfo));
								uni.setStorage({
									key: 'UserInfo',
									data: {
										username: infoRes.userInfo.nickName,
										face: infoRes.userInfo.avatarUrl,
										signature: '个性签名',
										integral: 0,
										balance: 0,
										envelope: 0
									},
									success: function() {
										uni.hideLoading()
										uni.showToast({
											title: '登录成功',
											icon: "success"
										});
										setTimeout(function() {
											uni.navigateBack();
										}, 300)
									}
								});
							}
						});
					},
					fail: (e) => {
						console.log("fail: " + JSON.stringify(e));
					}
				});
			},
			getProvider() {
				//获取第三方登录服务
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						let len = res.provider.length;
						for (let i = 0; i < len; i++) {
							//有服务才显示按钮图标
							this.showProvider[res.provider[i]] = true;
						}
						if (res.provider.length == 0) {
							this.isShowOauth = false;
						}
					}
				});
			},
			toPage(page) {
				uni.hideKeyboard()
				uni.navigateTo({
					url: page
				});
			},
			doLogin() {
				uni.hideKeyboard();
				//验证手机号码
				// if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.username))){ 
				// 	uni.showToast({title: '请填写正确手机号码',icon:"none"});
				// 	return false; 
				// }
				var that = this
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
					  //console.log(loginRes)
					  uni.showLoading({
					  	title: '提交中...'
					  })
					   let data = {};
					  if(that.tabIndex===0){
						 data={
						 	code: loginRes.code,
						 	type:'mobphone',
						 	username: that.username,
						 	password: that.password
						 }
					  }else{
						  data={
						  	code: loginRes.code,
						  	type:'username',
						  	username: that.username,
						  	password: that.password
						  }
					  }
					  that.$u.api.login(data).then(
					  	res => {
							uni.hideLoading()
					  		if(res.code==0){
								uni.showToast({
									title: '登录成功',
									icon: "success"
								});
								uni.reLaunch({
									url:'/pages/tabBar/home/home'
								})
								that.$u.vuex('vuex_token', res.data.token)
								that.$u.api.getInfo().then(res => {
									that.$u.vuex('vuex_user', res.data)
									if(res.data.icon===""){
										that.$u.vuex('vuex_user.icon', '/static/img/face.jpg')
									}else{
										that.$u.vuex('vuex_user.icon', that.vuex_host + 'public/' + res.data.icon)
									}
								})
								that.$u.api.getAddress({prePage:50}).then(res=>{
									for(var i=0;i<res.data.length;i++){
										if(res.data[i].often==1){
											uni.setStorageSync('selectAddress', res.data[i])
										}
									}
								})
								that.$u.api.getInvoice({prePage:50}).then(res=>{
									for(let key  in res.data){
									     if(res.data[key].often==1){
									     	uni.setStorageSync('selectInvoice', res.data[key])
									     } 
									  }
									
								})
							}else{
								uni.showToast({
									title: res.data.msg,
									icon:'none'
								});
							}
					  		// this.$u.vuex('vuex_cookie', res.header['Set-Cookie'])
					  		
					  		// uni.hideLoading()
					  		// uni.showToast({
					  		// 	title: '登录成功',
					  		// 	icon: "success"
					  		// });
					  		// uni.navigateBack({})
					  		
					  	}
					  )
				  }
				});
				
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";

	.form {
		.res {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100upx;
			padding:0 10px;
			color: rgba($color: #ffffff, $alpha: 0.8);
			
			.textBtn{
				text-decoration: underline;
			}
		}
	}
	.on{
		color: #ffffff;
		line-height: 70rpx;
		border-bottom: solid 4upx #ffffff;
	}

	.oauth {
		@media all and (max-height:150vw) {
			display: none;
		}

		position: absolute;
		bottom: 50upx;
		width: 100%;

		.text {
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba($color: #ffffff, $alpha: 0.8);
			font-size: 28upx;
		}

		.list {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20upx 0;

			.icon {
				font-size: 80upx;
				margin: 0 30upx;
			}
		}
	}
	.wechartRegister{
		text-align: center;
		color: #ffffff;
	}
	.wechartRegisterImg {
	    width: 100rpx;
	    height: 100rpx;
	    margin-top: 30rpx;
	}
</style>
