<style lang="scss" scoped>
	.login-ctn{
		width: 100%;
		height: 100%;
		padding-top: 500rpx;
		background: #fff;
		:not(not) {
			box-sizing: border-box;
		}
	}
	.login-bg{
		width: 100%;
		height: 515rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.login-header{
		// text-align: center;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		.login-header-img-box{
			margin-top: 132rpx;
			margin-left: 2rpx;
			border-radius: 50%;
			background: #FFFFFF;
		}
		&-img{
			display: block;
			// width: 502rpx;
			// height: 226rpx;
			width: 198rpx;
			height: 198rpx;
			// border-radius: 50%;
			// margin-top: 40rpx;
		}
		&-text{
			font-size: 40rpx;
			line-height: 40rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 40rpx;
		}
	}
	
	
	.login-form-ctn{
		// padding: 0rpx 60rpx;
		// margin-top: 30rpx;
		margin-bottom: 20rpx;
		.login-form{
			// box-shadow: $box-shadow;
			background-color: #fff;
			// border-radius: 20rpx;
			margin-top: 120rpx;
			padding: 20rpx 60rpx;
			&-title{
				text-align: center;
				font-size: 40rpx;
				font-family: Source Han Sans CN;
				font-weight: 800;
				color: #262626;
			}
		}
	}
	.login-button-ctn{
		// padding: 0rpx 0;
		margin-top: 20rpx;
	}
	.register-box{
		text-align: center;
		margin-top: 20rpx;
		color: #848484;
		font-weight: 500;
	}
	.login-function-ctn{
		display: flex;
		justify-content: flex-end;
		padding: 30rpx 0rpx;
	}
	.login-version-info{
		position: absolute;
		left: 0;
		bottom: 40rpx;
		width: 100%;
		text-align: center;
		font-size: $uni-font-size-sm;
		color: #aaa;
	}
	.protocol-box{
		padding: 20rpx 0;
		color: #f5f5f5;
		font-size: 26rpx;
		text{
			color: #0066cc;
		}
	}
	.other-login-box{
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.other-login-item{
			.other-login-bg{
				width:100rpx;
				height: 100rpx;
				border-radius: 50%;
				background: #0066cc;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 10rpx;
			}
			.other-login-name{
				color: #7d7d7d;
				font-weight: bold;
			}
		}
	}
</style>

<template>
	<view class="login-ctn">
		<view class="login-bg">
			<image src="http://static.drgyen.com/app/hc-app-power/images/login-header.png" mode=""></image>
		</view>
		<view class="login-header">
			<view class="login-header-img-box">
				<!-- #ifdef APP-PLUS -->
				<image class="login-header-img" :src="appConfig.logo" mode=""></image>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<image class="login-header-img" :src="appConfig.logo" mode=""></image>
				<!-- #endif -->
			</view>
			<view class="login-header-text">{{appConfig.name}}</view>
		</view>
		<view class="login-form-ctn">
			<view class="login-form" v-if="checkLoading" style="display: flex;justify-content: center;padding-top: 20px;align-items: center;">
				<u-loading mode="flower" size="50"></u-loading>
				<text>加载中</text>
			</view>
			<view class="login-form" v-else>
				<u-button v-if="loginToken" type="primary" shape="circle" :custom-style="{ background: 'linear-gradient(270deg, #0066CC 8%, #1890FF 100%)',height:'100rpx' }" @click="wxLogin()">一键登录</u-button>
				<u-button v-else type="primary" shape="circle" :custom-style="{ background: 'linear-gradient(270deg, #0066CC 8%, #1890FF 100%)',height:'100rpx' }" open-type="getPhoneNumber" @getphonenumber="wxPhoneLogin">一键手机号注册</u-button>
				<view class="protocol-box">
					<u-checkbox v-model="protocolStatus">阅读并同意以下协议<text @click.stop="goPolicy">《用户协议》</text></u-checkbox>
				</view>
			</view>
			<view class="other-login-box">
				<view class="other-login-item" @click="goPasswordLogin">
					<view class="other-login-bg">
						<u-icon name="lock-fill" color="#fff" size="56"></u-icon>
					</view>
					<text class="other-login-name">密码登录</text>
				</view>
			</view>
			
		</view>
		<view class="login-version-info">
			<view>Copyright 2022-2024 {{appConfig.companyName}} Powered By DSservice</view>
			<view>{{appConfig.contractRecordNumber || ''}}</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	let userToken = '';
	import config from "@/common/api/config.js"
	export default{
		data(){
			return {
				protocolStatus:false,
				usetTypeValue: '企业用户',
				list: [
					{
						name: '普通用户',
					},
					{
						name: '企业用户',
					}
				],
				captchaData:null,
				current: 0,
				form:{
					username:"",
					password:"",
					code:""
				},
				rules: {
					// 字段名称
					username: [
						{
							required: true, 
							message: '请输入手机号/账号',
							trigger: ['change','blur'],
						},
					],
					password: [
						{
							required: true, 
							message: '请输入密码',
							trigger: ['change','blur'],
						}
					],
					code: [
						{
							required: true, 
							message: '请输入验证码',
							trigger: ['change','blur'],
						}
					]
				},
				// 用户openid
				wxOpenid:'',
				// 后端是否有该用户
				IsUser:false,
				loginToken:'',
				checkLoading:true,
				isInit:true,
			}
		},
		computed:{
			appConfig() {
				return this.$store.state.app.appConfig
			},
		},
		onLoad(e) {
			userToken = uni.getStorageSync('userToken');
			console.log("userToken",userToken)
			if(userToken){
				uni.switchTab({
					url:"../tabBar/project"
				})
			}
			console.log("logo",this.$store.state.app.appConfig)
			this.usetTypeValue = e.userType=="user"?"普通用户":"企业用户";
			
		},
		onShow() {
			// #ifdef MP-WEIXIN
			if(!userToken){
				this.getWxCode();
			}
			// #endif
		},
		methods:{
			// 跳转密码登录页
			goPasswordLogin(){
				uni.reLaunch({
					url: './passwordLogin'
				});
			},
			goPolicy(){
				uni.navigateTo({
					url:'/pages/tabBar/my/userPolicy'
				})
			},
			getWxCode(){
				this.loginToken = '';
				uni.login({
				  provider: 'weixin', //使用微信登录
				  success: (loginRes) => {
				    console.log("loginCode",loginRes.code);
						this.wxOpenid = loginRes.code;
						this.checkWxUserStatus(loginRes.code)
				  }
				});
			},
			// 这里向后端获取用户注册状态
			checkWxUserStatus(code){
				this.$post('/checkWxRegister',{loginCode:code}).then(res=>{
					console.log("用户注册状态",res)
					if(res.code == 200){
						// 有token直接登录
						if(res.token){
							this.loginToken = res.token;
						}else{
							this.loginToken = '';
							if(this.isInit){
								uni.navigateTo({
									url:'/pages/auth/defalut'
								})
							}
						}
						
					}else{
						this.loginToken = '';
						if(this.isInit){
							uni.navigateTo({
								url:'/pages/auth/defalut'
							})
						}
					}
					this.isInit = false;
					this.checkLoading = false;
				}).catch(err=>{
					this.loginToken = '';
					this.checkLoading = false;
					if(this.isInit){
						uni.navigateTo({
							url:'/pages/auth/defalut'
						})
					}
					this.isInit = false;
				})
			},
			// 微信登录，使用token直接登录
			wxLogin(){
				if(!this.protocolStatus){
					this.$refs.uToast.show({
						title: '请先阅读并同意用户协议',
					})
				}else if(this.loginToken){
					this.$tui.toast('登录成功', 3000, true);
					this.$store.dispatch('setLogin', this.loginToken);
					uni.setStorage({
						key:'userType',
						data: this.loginToken,
					}).then(res => {
						if (this.usetTypeValue=="普通用户") {
							uni.reLaunch({
								url:"../oneselfUser/index"
							})
						} else{
							uni.switchTab({
								url:"../tabBar/project"
							})
						}
					})
				}else{
					this.$refs.uToast.show({
						title: '登录失败请再次尝试',
						type: 'error',
					})
					this.wxLogin();
				}
			},
			// 微信获取手机号登录，openid + 手机号code
			wxPhoneLogin(e){
				const { errMsg = '', errno = '', code = '' } = e.detail;
				console.log("phonecode",code);
				if (errMsg === 'getPhoneNumber:ok') { // 用户同意授权
					if(!this.protocolStatus){
						this.$refs.uToast.show({
							title: '请先阅读并同意用户协议',
						})
					}else{
						uni.login({
							provider: 'weixin', //使用微信登录
							success: (loginRes) => {
								console.log("loginCode",loginRes.code);
								this.$post('/wxLogin',{loginCode:loginRes.code,phoneCode:code}).then(res=>{
									console.log(res)
									if(res.code == 200 && res.token){
										this.$refs.uToast.show({
											title: '登录成功',
											type: 'success',
										})
										this.$store.dispatch('setLogin', res.token);
										uni.setStorage({
											key:'userType',
											data: this.loginToken,
										}).then(res => {
											if (this.usetTypeValue=="普通用户") {
												uni.reLaunch({
													url:"../oneselfUser/index"
												})
											} else{
												uni.switchTab({
													url:"../tabBar/project"
												})
											}
										})
									}else if(!res.token){
										this.$refs.uToast.show({
											title: '获取token失败',
											type: 'error',
										})
									}else{
										this.$refs.uToast.show({
											title: res.msg,
											type: 'error',
										})
									}
									
								}).catch(error=>{
									this.$refs.uToast.show({
										title: error.msg,
										type: 'error',
									})
								})
							}
						});
					}
          
				} else {
					if (errno === 1400001) { // 手机号授权购买次数不足跳转账密登录页面
						this.triggerEvent('cancel')
						this.$refs.uToast.show({
							icon:	false,
							title: '手机号授权次数不足，请更换登录方式或联系管理员充值',
							type: 'error',
							duration: 3500
						})
					} else { // 用户取消授权
						this.$refs.uToast.show({
							title: '您取消了授权',
							type: 'error',
						})
					}
				}
			},
		}
	}
</script>
