<template>
	<!-- 登录页 -->
	<view class=" page">
		<!-- <view id="guide-2" class="preview" data-guide-text="请求结果">{{ result }}</view> -->

		<view class=" flex-auto group_2 space-y-19">
			<view class=" group_3 space-y-50">
				<view class="center-t">
					<image class="self-center image_6" src="../../static/login-头像.png" />
				</view>
				<view class=" space-y-26">
					<view class="space-y-12" id="text-br">
						<text class="text_2">快速授权登录</text>
						<text class="text_3">创建一个帐户成为认证的蜂农</text>
					</view>
					<!-- 输入框 -->
					<view class="space-y-16"  v-if="false">
						<view class="flex-row items-center section space-x-10 input-text" >
							<image class="image_5" src="../../static/login-手机.png" />
							<view>
								<input v-model="registerForm.mobile" placeholder="输入手机" />
							</view>

							<!-- <text class="text_4">15588881111</text> -->
						</view>
						<view class="flex-row items-center section_2 space-x-10 input-text"  >
							<image class="image_5" src="../../static/login-密码.png" />
							<view>
								<input v-model="registerForm.nicheng" placeholder="输入昵称" />
							</view>
							<!-- <text class="font_1 text_5">输入昵称</text> -->
						</view>
						<view class="flex-row justify-between items-center section_2 yzm-text" >
							<view class="flex-row items-center space-x-10 input-text">
								<image class="shrink-0 image_5" src="../../static/login-验证码.png" />
								<view>
									<input class="input-text-t" v-model="registerForm.captcha" placeholder="输入验证码" />
								</view>
								<!-- <text class="font_1">请输入验证码</text> -->
							</view>
							<!-- 获取验证码 -->
							<text v-if="anniukongjian" @click="huoquyanzheng" class="huoquyanzheng-class">获取验证码</text>
							<text v-else class="huoquyanzheng-class">{{count}}秒后重发</text>
						</view>
					</view>
					<!-- 按钮 -->
					<view @click="login" class="justify-start items-center text-wrapper text-go"   v-if="false"><text
							class="text_6">同意并登录</text></view>
							<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="justify-start items-center text-wrapper text-go" style="height:100rpx ;margin-top: 100rpx;"><text
												class="text_6">同意授权并登录</text></button>
				</view>
			</view>
			<view class="flex-row items-center group_5 space-x-6 xieyi-text" v-if="false">
				<image @click="flageFn" class="shrink-0 image_8"
					:src="flage ? '../../static/gouzi1.png' : '../../static/gouzi2.png'" />
				<view class="group_6" >
					<text class="font_2">已阅读并同意苏他AI云智慧蜂箱</text>
					<text class="font_3 text_7">使用条款</text>
					<text class="font_2">和</text>
					<text class="font_3 text_7">隐私声明</text>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<!-- <u-cell-group title-bg-color="rgb(243, 244, 246)">
			<u-cell :titleStyle="{fontWeight: 500}" :title="item.title" v-for="(item, index) in list" :key="index" v-show="false"
				isLink :icon="item.iconUrl" @click="showToast(item)">
			</u-cell>
		</u-cell-group> -->
		
	</view>

</template>

<script>
	import request from '../../utils/request'
	export default {
		data() {
			return {
				flage: true,
				title: '蜂箱项目！！！！！',
				registerForm: {
					mobile: '',
					nicheng: '',
					captcha: ''
				},
				count: 60,
				anniukongjian: true,
				show: false,
				list: [
					{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "一弦一柱思华年",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
					
				],
			}
		},
		async onLoad() {
			this.cheshi()
			// this.autoGetPhoneNumber();

			// console.log(code, 'codecode');
			console.log('页面加载了')
			// 遵循 err-first 规范 错误先行
			// const [err,res] = await uni.request({url:''})
			// 正常 propmise 规范
			// const res = await uni.request({url:''})
		},
		onShow() {
			console.log('页面显示')
		},

		methods: {
			showToast() {
				this.$refs.uToast.show({
					type:'error',
					duration:2000,
					position:'center',
					message:'暂未登录，请点击快速登录'
				})
			},
			getPhoneNumber(e) {
				console.log(this.flage,'that.flage');
				let that = this;
				if(that.flage==false){
					console.log('没确认');
				}else{
					
					console.log("eeeeeeee", e);
								
					const wxLoginAsync = () => {
					    return new Promise((resolve, reject) => {
					        wx.login({
					            success(res) {
									console.log(res,'codecode');
					                if (res.code) {
					                    console.log('登录！', res);
								
					                    let data = {
					                        code: res.code,
					                        mobile_code: e.detail.code,
					                    };
								
					                    resolve(data);
					                } else {
					                    reject(res.errMsg);
					                }
					            },
					            fail(err) {
					                reject(err);
					            }
					        });
					    });
					};
								
					wxLoginAsync()
					    .then(async (data) => {
					        try {
					            const res = await request.post('/api/user/wxlogin', data);
					            wx.setStorageSync('userToken', res.data.data.userinfo.token);
								
								that.cheshi()
					        } catch (error) {
					            console.error(error);
					        }
					    })
					    .catch((err) => {
					        console.error(err);
					    });
				}
			   
			},
			async cheshi() {
				try {
					const res = await request.get('/api/index') // 基本数据
					// console.log(res)
					// console.log(eres,'图')
					console.log(res.data, 'resres');
					if(res.data.code==0){
						console.log('进入跳转');
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
					// console.log(this.formData
				} catch (error) {
					console.log(error, 'aaa')
					if (error.data.code == 401) {
						// this.userlogin()
						// this.showToast()
					} else {
						
					}
				}
			},
			 async userlogin(){
				let code =  await this.wxLogin();
				try {
					let data = {
					    code: code.js_code,
					    // mobile_code: e.detail.code,
					};
				    const res = await request.post('/api/user/wxlogin', data);
					console.log(res,'resres');
					if(res.data.code==0){
						  wx.setStorageSync('userToken', res.data.data.userinfo.token);
						console.log('进入跳转');
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
					// that.cheshi()
				} catch (error) {
				    console.error(error);
				}
			},
			// 点击登录
			async login() {
				try {
					if (this.registerForm.mobile && this.registerForm.nicheng && this.registerForm.captcha) {
						if (this.flage) {
							// 发请求登录
							const res = await request.post('/api/user/mobilelogin', {
								mobile: this.registerForm.mobile,
								captcha: this.registerForm.captcha
							})
							// 提示用户
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							})
							// console.log(res.data.data.userinfo.token)
							// 判断 code 的值 1 失败 0 成功
							if (res.data.code === 0) {
								// 存储token
								wx.setStorageSync('userToken', res.data.data.userinfo.token);
								// 成功后跳转到首页
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						} else {
							uni.showToast({
								title: '请勾选用户协议',
								icon: 'none',
								duration: 2000
							})
						}
					}
				} catch (error) {
					console.log(error)
				}
			},
			// 获取验证码
			huoquyanzheng() {
				const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
				// 节流处理
				if (this.anniukongjian) {
					// 判断手机号是否正确
					if (reg.test(this.registerForm.mobile)) {
						this.anniukongjian = false
						this.toCount()
					} else {
						// 提示用户
						uni.showToast({
							title: '手机号填写不正确',
							icon: 'none',
							duration: 2000
						})
					}
				}
			},
			// 倒计时函数
			toCount() {
				const setintId = setInterval(() => {
					if (this.count !== 1) {
						this.count--
					} else {
						this.anniukongjian = true
						this.count = 60
						clearInterval(setintId)
					}
				}, 1000);
			},
			flageFn() {
				this.flage = !this.flage
			}
		}
	}
</script>

<style scoped lang="scss">
	.input-text-t {
		width: 250rpx;
	}

	.xieyi-text {
		display: flex;
		align-items: center;
	}

	.text-go {
		text-align: center;
	}

	.yzm-text {
		display: flex;
		justify-content: space-between;
	}

	.input-text {
		display: flex;
		align-items: center;
	}

	#text-br {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.center-t {
		width: 100%;
		text-align: center;
	}

	.huoquyanzheng-class {
		color: #23693f;
	}

	.page {
		background-color: #ffffff;
		filter: drop-shadow(0px 4rpx 4rpx #00000040);
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.space-y-16>view:not(:first-child),
	.space-y-16>text:not(:first-child),
	.space-y-16>image:not(:first-child) {
		margin-top: 32rpx;
	}

	.image_5 {
		width: 40rpx;
		height: 40rpx;
	}

	.group_2 {
		padding-top: 120rpx;
		padding-bottom: 314rpx;
		overflow-y: auto;
	}

	.space-y-19>view:not(:first-child),
	.space-y-19>text:not(:first-child),
	.space-y-19>image:not(:first-child) {
		margin-top: 38rpx;
	}

	.group_3 {
		padding: 50rpx 50rpx;
	}

	.space-y-50>view:not(:first-child),
	.space-y-50>text:not(:first-child),
	.space-y-50>image:not(:first-child) {
		margin-top: 100rpx;
	}

	.image_6 {
		width: 168rpx;
		height: 206rpx;
	}

	.space-y-26>view:not(:first-child),
	.space-y-26>text:not(:first-child),
	.space-y-26>image:not(:first-child) {
		margin-top: 52rpx;
	}

	.space-y-12>view:not(:first-child),
	.space-y-12>text:not(:first-child),
	.space-y-12>image:not(:first-child) {
		margin-top: 24rpx;
	}

	.text_2 {
		color: #23693f;
		font-size: 50rpx;
		font-family: Poppins;
		font-weight: 600;
		line-height: 46rpx;
	}

	.text_3 {
		color: #888888;
		font-size: 30rpx;
		font-family: Poppins;
		font-weight: 600;
		line-height: 28rpx;
	}

	.section {
		padding: 32rpx 20rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654c3cbd5a7e3f03102425f9/654c44a487ca550011b12cc1/16994974148140804523.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_4 {
		color: #000000;
		font-size: 30rpx;
		font-family: 微软雅黑;
		line-height: 22rpx;
	}

	.section_2 {
		padding: 32rpx 20rpx;
		background-color: #f7f7f7;
		border-radius: 50rpx;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 20rpx;
	}

	.font_1 {
		font-size: 30rpx;
		font-family: 微软雅黑;
		line-height: 28rpx;
		color: #888888;
	}

	.text_5 {
		color: #000000;
	}

	.group_4 {
		margin-right: 12rpx;
	}

	.image_7 {
		width: 32rpx;
		height: 32rpx;
	}

	.text-wrapper {
		padding: 10rpx 0;
		background-color: #23693f;
		border-radius: 50rpx;
	}

	.text_6 {
		color: #ffffff;
		font-size: 36rpx;
		font-family: Poppins;
		font-weight: 600;
		line-height: 34rpx;
	}

	.group_5 {
		padding: 0 40rpx;
	}

	.space-x-6>view:not(:first-child),
	.space-x-6>text:not(:first-child),
	.space-x-6>image:not(:first-child) {
		margin-left: 12rpx;
	}

	.image_8 {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
	}

	.group_6 {
		line-height: 24rpx;
		opacity: 0.99;
		height: 24rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: Poppins;
		line-height: 24rpx;
		color: #888888;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: Poppins;
		line-height: 24rpx;
		font-weight: 600;
		color: #23693f;
	}

	.text_7 {
		text-decoration: underline;
	}


	.preview {
		border-radius: 10rpx;
		margin: 0 30rpx;
		min-height: 16em;
		padding: 20rpx;
		background-color: #f5f5f5;
		color: #666666;
		font-size: 24rpx;
		white-space: break-spaces;
		line-height: 1.6;
	}
</style>