<template>
	<view class="content">

		<view class="kuang">
			<view class="land">您好，</view>
			<view class="land">欢迎登录驾悦同行</view>
		</view>
		<view style="text-align: center;">
			<image src="../../static/imgs/hh.png" style="width: 80%; height: 200px;  margin: 40px auto; "></image>
		</view>

		<view class="xiaoannoi">
			<u-button v-if="privacyPolicyChecked == true" text="手机号快捷登录" class="dl" :customStyle="{color:'#ffffff'}"
				color="#2c78f5" open-type='getPhoneNumber' @getphonenumber="getPhone"></u-button>
			<u-button v-else text="手机号快捷登录" class="dl" :customStyle="{color:'#ffffff'}" color="#2c78f5"
				@click="shibai()"></u-button>
		</view>
		<view class="dbottom">
			<view class="axquan" v-if="privacyPolicyChecked == false" @click="privacyPolicyChecked = true"></view>
			<view class="axquanl" v-if="privacyPolicyChecked == true" @click="privacyPolicyChecked = false">
				<uni-icons type="checkmarkempty" color="#ffffff" size="14"></uni-icons>
			</view>
			<text>请您认真阅读</text>
			<text class="lan" @click="goPolicy()">《用户协议》</text>
			<text>和</text>
			<text class="lan" @click="goPolicy()">《隐私政策》</text>
		</view>

		<!-- <u-popup :show="show" mode="center" @close="close" @open="open">
                <view class="cont-popup">
            <view class="popup-title">
              <text>请选择身份</text>
            </view>
                   <view class="dix"  @click="getshenfen('jcyh')">
             <text>用户</text>
             <view class="qiu" v-if="shenfen != 'jcyh'"></view>
             <view class="lqiu" v-if="shenfen == 'jcyh'">
               <uni-icons type="checkmarkempty" size="18" color="#ffffff"></uni-icons>
             </view>
             </view>
              <view class="dix"  @click="getshenfen('jcdb')">
              <text>代办</text>
              <view class="qiu" v-if="shenfen != 'jcdb'"></view>
              <view class="lqiu" v-if="shenfen == 'jcdb'">
                <uni-icons type="checkmarkempty" size="18" color="#ffffff"></uni-icons>
              </view>
            </view>
                </view>
          <view class="anniu" @click="getsxshenfen()">
            <text>确认选择</text>
          </view>
      </u-popup> -->
	</view>
</template>

<script>
	import request from '../../utils/request';
	import config from '@/config'
	import {
		getLocalUserInfo,
		setLocalUserInfo,
		setToken,
		setUserInfo
	} from '@/utils/auth.js'

	export default {
		data() {
			return {
				yd: false,
				shenfen: 'jcyh',
				show: false,
				baseUrl: this.$imagesUrl,
				loginUrl: this.$baseUrl,
				appId: this.$appId,
				appSecret: this.$appSecret,
				privacyPolicyChecked: false,
				phoneNumber: "",
				isButtonDisabled: false,
				countdownTime: 60,
				qh: [{
						text: '密码登录'
					},
					{
						text: '验证码登录'
					}
				],
				columns: [
					['用户', '代办']
				],
				tel: '',
				yzm: '',
				wrod: '',
				activeid: 0
			}
		},
		onLoad() {
			this.wxlogin()
		},
		computed: {
			buttonText() {
				if (this.isButtonDisabled) {
					return `${this.countdownTime}s 后重新发送`;
				} else {
					return "获取验证码";
				}
			},
		},
		methods: {
			wxlogin() {
				uni.login({
					provider: 'weixin',
					success(res) {
						if (res.code) {
							uni.setStorageSync('c1', res.code);

						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			async getsxshenfen() {
				let data = {
					roleCode: this.shenfen
				}
				let res = await request({
					url: '/appInspection/userOwn/updateRole',
					method: 'post',
					params: data
				})
				if (res.code == 200) {
					uni.redirectTo({
						url: '/pages/detection/my'
					})
				}
			},
			getshenfen(text) {
				this.shenfen = text
			},
			open() {},
			close() {},
			goPolicy() {
				uni.navigateTo({
					url: "/pages/login/PrivacyPolicy"
				})
			},

			async getAppinfo() {
				let res = await request({
					url: '/getAppInfo',
					method: 'get',
				})
				console.log('getappinfo', res);
			},
			//授权
			authorize() {
				uni.showToast({
					icon: "none",
					title: "请阅读并勾选用户协议",
					duration: 2000
				})
			},
			shibai() {
				uni.showToast({
					icon: "none",
					title: "请阅读并勾选用户协议",
					duration: 2000
				})
			},
			getPhone(e) {
				console.log('执行了');
				config.header = config.header || {}
				config.header['tenant-id'] = '180'
				if (this.privacyPolicyChecked == false) {
					uni.showToast({
						icon: "none",
						title: "请阅读并勾选用户协议",
						duration: 2000
					})
					return;
				}
				uni.checkSession({
					success: () => {
						uni.request({
							url: this.loginUrl + "/userClient/repair/wxLogin",
							method: "POST",
							header: config.header,
							data: {
								code: uni.getStorageSync('c1'),
								encryptedIv: e.detail.iv,
								encryptedData: e.detail.encryptedData,
								inviteId: uni.getStorageSync('inviteId') ? uni.getStorageSync(
									'inviteId') : null,
								type: 'jx',
							},
							success: (rex) => {
								console.log('yongdao返回', rex)
								if (rex.data.code == 0) {
									// if (this.loginStatus) {
									// 	clearInterval(this.loginStatus)
									// }
									setToken(rex.data.data.token)
									setLocalUserInfo(rex.data.data.userinfo)
									//uni.setStorageSync('App-Token', );
									if (this.returnUrl) {
										uni.navigateBack()
									} else {
										this.userinfo()
										console.log('跳转');
									}
								}
								if (rex.data.code == 500) {
									uni.clearStorageSync();
									uni.showToast({
										icon: 'none',
										title: rex.data.msg
									})
									console.log('走错误请求');
									this.wxlogin()
								}
							},
							fail: (res) => {
								console.log("fail", res);
								uni.showToast({
									icon: "error",
									title: "登录失败，请重新点击并授权！",
									duration: 2000
								})
							}
						})
					},
					fail: () => {
						uni.showToast({
							icon: 'error',
							duration: 2000,
							title: "登录状态过期，重新登录"
						});
					}
				})


			},

			userinfo() {
				console.log('执行了');
				request({
					url: '/app-api/jx/auth/getAppInfo',
					method: 'get',

				}).then((res) => {
					let userJson = {}
					userJson.userId = res.data.user.id
					uni.setStorageSync('role', res.data.role)
					uni.setStorageSync('userinfo', res.data.user)
					// uni.reLaunch({
					//   url: '/newPages/newIndex/index'
					// })
					uni.navigateBack()
				})
			},

			getxz(index) {
				this.activeid = index
			},
			goregister() {
				uni.redirectTo({
					url: '/pages/login/register'
				})
			},
			goforgot() {
				uni.redirectTo({
					url: '/pages/login/forgot'
				})
			},
			goselect() {
				console.log('执行');
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			// 验证码方法
			sendVerificationCode() {
				let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				if (!reg.test(this.tel)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的11位手机号'
					})
					this.tel = '';
					return false;
				}
				if (this.isButtonDisabled) {
					return; // 如果按钮已禁用，则直接返回
				}
				const data = {
					phone: this.tel,
				}
				request({
					url: '/loginSmsCode',
					method: 'post',
					params: data
				}).then((res) => {
					console.log('验证码', res);
					if (res.code == 200) {
						uni.showToast({
							title: '验证码已发送 请注意查收',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '网络不佳请稍后再试',
							icon: 'none'
						})
					}
				})


				this.disableButton(); // 禁用按钮
				this.startCountdown(); // 启动倒计时

			},
			disableButton() {
				this.isButtonDisabled = true;
			},
			enableButton() {
				this.isButtonDisabled = false;
			},
			startCountdown() {
				let countdown = setInterval(() => {
					this.countdownTime--;
					if (this.countdownTime === 0) {
						clearInterval(countdown);
						this.enableButton(); // 启用按钮
					}
				}, 1000);
			},


		}
	}
</script>

<style scoped lang="scss">
	.jsq {
		border: none !important;
		font-size: 14px;
		font-weight: 400;
		color: #0078FF;
	}

	.anniu {
		width: 150px;
		height: 40px;
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		background: #0D2E8D;
		color: #FFFFFF;
		margin: 0 auto;
	}

	.cont-popup {
		height: 250px;
		width: 300px;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 15px;
		border-radius: 10px;
	}

	.popup-title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		font-weight: bold;
		color: #0D2E8D;
	}

	.dix {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20px 0px;
		font-size: 18px;
		font-weight: bold;
	}

	.lqiu {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		border: 1px solid #0D2E8D;
		background: #0D2E8D;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qiu {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		border: 1px solid #E8E8E8;
	}

	button {
		border: none !important;
		background: none !important;
		margin: 0px;
		display: block;
	}

	button:focus {
		color: #0078FF;
		outline: none;
		box-shadow: none;
	}

	.content {
		box-sizing: border-box;
		padding-top: 1px;
		// background-image: url('http://www.nuoyunr.com/lananRsc/jdc-bj.png');

		background-size: cover;
		width: 100%;
		height: calc(100vh);
	}

	.top {
		box-sizing: border-box;
		padding: 0px 27px;
		padding-top: 100px;


		// background-color:lightseagreen;

		background-position: center;
		width: 100%;
		// height: 385px;
	}

	.touxiang {
		width: 88px;
		height: 88px;
		border-radius: 10px;
		background: #D7D7D7;
		margin: 0 auto;
		margin-bottom: 40px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.twotap {
		width: 100%;
		display: flex;
		align-items: center;

		view {
			font-size: 15px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
			margin-right: 38.5px;
		}
	}

	.blck {
		color: #333333 !important;
		font-weight: bold !important;
	}

	.inputs {
		box-sizing: border-box;
		padding: 16px 0px;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #E8E8E8;
		margin-top: 20px;
	}

	.wjworb {
		margin-top: 5px;
		width: 100%;
		display: flex;
		font-size: 12px;
		color: #0078FF;
		justify-content: flex-end;
		align-items: center;

	}

	.dl {
		width: 90%;
		height: 44px;
		background-color: #0D2E8D;
		border-radius: 50px;
		margin: 0 auto;
		font-size: 16px;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 300px;
	}

	.xiaoannoi {
		width: 90%;
		height: 40px;
		margin: 0 auto;
		border-radius: 50px;
		overflow: hidden;
		margin-top: 80px;
	}

	.hging {
		width: 100%;
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		color: #636363;
		margin-top: 20px;
	}

	.wx {
		width: 38px;
		height: 38px;
		overflow: hidden;
		box-sizing: border-box;
		margin: 0px auto;
		margin-top: 20px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.hui {
		font-size: 10px;
		width: 100%;
		text-align: center;
		font-weight: 400;
		color: #666666;
	}

	.dbottom {
		width: 100%;
		text-align: center;
		font-size: 12px;
		color: #333333;
		margin-top: 40px;
		position: fixed;
		bottom: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lan {
		color: #2c78f5;
	}

	.land {

		font-size: 25px;
		font-weight: bold;
		color: #2c78f5;
		margin-bottom: 5px;
	}

	.kuang {
		width: 90%;
		margin: 0 auto;
		margin-top: 100px;
	}

	.axquan {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 1px solid #AAAAAA;
		margin-right: 5px;
	}

	.axquanl {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 1px solid #AAAAAA;
		margin-right: 5px;
		background-color: #2c78f5;
	}
</style>