<template>
	<view class="normal-login-container">
		<view class="logo-content">
			<!-- <image style="width: 100rpx;height: 100rpx;" src="" mode="widthFix">
			</image> -->
			<view class="imgs_bg">
				<image src="../../static/images/logo.png" mode="aspectFill" style="width: 100%; height: 100%;"></image>
			</view>
			<text class="title">佰安出行</text>
		</view>
		<view class="login-form-content">
			<uni-forms :modelValue="loginForm" ref="loginform" :rules="rules" validate-trigger="blur">
				<uni-forms-item name="phone">
					<view class="input-item flex align-center">
						<view class="icon iconfont icon-user"></view>
						<input v-model="loginForm.phone" class="input" type="number" placeholder="请输入手机号码"
							maxlength="11" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="password">
					<view class="input-item flex align-center" v-if="toggle_type">
						<view class="icon iconfont icon-password"></view>
						<input v-model="loginForm.password" class="input" placeholder="请输入验证码" maxlength="20" />
						<view :class="iscode == false? 'getCode': 'getCode dis_code' " @click="handleCode">
							{{getCodes}}
						</view>
					</view>
					<view class="input-item flex align-center" v-else>
						<view class="icon iconfont icon-password"></view>
						<input v-model="loginForm.password" class="input" placeholder="请输入密码" maxlength="20" />
						<!-- <view :class="iscode == false? 'getCode': 'getCode dis_code' " @click="handleCode">
							{{getCodes}}
						</view> -->
					</view>
				</uni-forms-item>
			</uni-forms>
			<text class="toggle_login" @click="toggle_login">{{toggle_title}}</text>
			<view class="action-btn">
				<button @click="loging_btn" class="login-btn cu-btn block bg-blue lg round">登录</button>
			</view>
		</view>

		<view class="xieyi text-center">
			<text class="text-grey1" style="font-size: 12px;">登录即代表同意</text>
			<text @click="handleUserAgrement" class="text-blue" style="font-size: 12px;">《用户协议》</text>
			<text @click="handlePrivacy" class="text-blue" style="font-size: 12px;">《隐私协议》</text>
		</view>
	</view>
</template>

<script setup>
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	import sheep from '@/sheep';
	import {
		ref
	} from 'vue'
	// import loginApi from '@/sheep/api/login/login';
	const loginForm = ref({
		phone: '',
		password: ''
	})
	const getCodes = ref('获取验证码')
	const toggle_type = ref(true)
	const toggle_title = ref('切换手机密码登录')
	const iscode = ref(false)
	const rules = {
		phone: {
			rules: [{
				required: true,
				errorMessage: '请输入',
			}]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '请输入',
			}]
		}
	}
	const loginform = ref(null)

	function handleUserAgrement() {}

	function handlePrivacy() {}

	// function handleLogin() {
	// 	uni.navigateTo({
	// 		url: '/pages/index/authentication'
	// 	});
	// }
	// 
	function loging_btn() {
	
		loginform.value.validate().then(res => {
			if (toggle_type.value) {
				handleLogin()
			} else {
				handlelogin_pass()
			}
		}).catch(err => {})

	}
	// 
	function handleLogin() {
		uni.request({
			url: `${baseUrl + apiPath}/member/auth/sms-login`,
			method: 'POST',
			data: {
				"mobile": loginForm.value.phone,
				"code": loginForm.value.password,
				"socialType": '',
				"socialCode": "1024",
				"socialState": "9b2ffbc1-7425-4155-9894-9d5c08541d62",
				"socialCodeValid": true
			},
			header: {
				'tenant-id': 1 //自定义请求头信息
			},
			success: (res) => {
				// console.log(res,'res')
				if (res.data.code == 0) {
					uni.showToast({
						icon: 'success',
						title: '登录成功'
					})
					uni.setStorageSync('token', res.data.data.accessToken);
					uni.setStorageSync('refresh-token', res.data.data.refreshToken);
					uni.setStorageSync('userId', res.data.data.userId);
					// uni.switchTab({
					// 	url: '/pages/subpackages/mapnvue'
					// });
					handle_isaauth(res.data.data.accessToken)
					// uni.navigateTo({
					// 	url: '/pages/index/authentication'
					// });
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'error'
					})
				}
			},
			fail: (error) => {
				console.log(error, 'error')
			}
		});
	}

	function handlelogin_pass() {
		uni.request({
			url: `${baseUrl + apiPath}/member/auth/login`,
			method: 'POST',
			data: {
				"mobile": loginForm.value.phone,
				"password": loginForm.value.password,
				"socialType": '',
				"socialCode": "1024",
				"socialState": "9b2ffbc1-7425-4155-9894-9d5c08541d62",
				"socialCodeValid": true
			},
			header: {
				'tenant-id': 1 //自定义请求头信息
			},
			success: (res) => {
				// console.log(res,'res')
				if (res.data.code == 0) {
					uni.showToast({
						icon: 'success',
						title: '登录成功'
					})
					uni.setStorageSync('token', res.data.data.accessToken);
					uni.setStorageSync('refresh-token', res.data.data.refreshToken);
					uni.setStorageSync('userId', res.data.data.userId);
					// uni.switchTab({
					// 	url: '/pages/subpackages/mapnvue'
					// });
					handle_isaauth(res.data.data.accessToken)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'error'
					})
				}
			},
			fail: (error) => {
				console.log(error, 'error')
			}
		});
	}

	function handleCode() {
		// console.log(loginForm.value.username,'loginform')
		if (iscode.value == false && loginForm.value.phone != '') {
			uni.request({
				url: `${baseUrl + apiPath}/member/auth/send-sms-code`, //仅为示例，并非真实接口地址。
				method: 'POST',
				data: {
					"mobile": loginForm.value.phone,
					"scene": 1
				},

				header: {
					'tenant-id': 1 //自定义请求头信息
				},
				success: (res) => {
					// console.log(res, 'res')
					if (res.data.code == 0) {
						iscode.value = true
						let num = 10
						const timer = setInterval(() => {
							num--
							getCodes.value = num + 's'
							if (num == 0) {
								clearInterval(timer)
								getCodes.value = '获取验证码'
								iscode.value = false
							}
						}, 1000)
					} else {
						uni.showToast({
							icon: 'error',
							title: '获取失败'
						})
					}
				}
			});
		}
	}
	// 切换密码登录
	function toggle_login() {
		toggle_type.value = !toggle_type.value
		if (toggle_type.value) {
			toggle_title.value = '切换密码登录'
		} else {
			toggle_title.value = '切换手机验证码登录'
		}
	}

	// 判断是否认证
	function handle_isaauth(data) {
		uni.request({
			url: `${baseUrl + apiPath}/member/user/get-ext`,
			method: 'GET',
			header: {
				'tenant-id': 1,
				'Authorization': data
			},
			success: (res) => {
				// console.log(res, 'res')
				if (res.data.code == 0) {
					uni.setStorageSync('avatar', res.data.data.avatar)
					if (res.data.data.realNameAuthFlag == 1) {
						uni.switchTab({
							url: '/pages/subpackages/mapnvue'
						});
					} else if (res.data.data.realNameAuthFlag == 2) {
						uni.showModal({
							title: '账号未审核',
							content: '您的账号当前处于待审核状态,请联系客服,审核后重试',
							success: (res) => {
								uni.redirectTo({
									url: '/pages/subpackages/login'
								})
							}
						});
						uni.removeStorageSync('token')
					} else {
						uni.navigateTo({
							url: '/pages/index/authentication'
						});
					}
				} else {
					uni.showToast({
						icon: 'error',
						title: res.data.msg
					})
				}
			},
			fail: (error) => {
				console.log(error, 'error')
			}
		});
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.getCode {
		font-size: 12px;
		width: 300rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: #2caeff;
		// border-top-right-radius: 45rpx;
		// border-bottom-right-radius: 45rpx;
		border-radius: 20px;
		color: #fff;
	}

	.dis_code {
		background: #ccc !important;
	}

	.normal-login-container {
		width: 100%;
		// background: #f6f6f6;
		background-image: linear-gradient(#e6eafa,#c3cbfa);
		height: 100vh;

		.logo-content {
			width: 100%;
			font-size: 12px;
			// text-align: center;
			padding-top: 15%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			// image {
			// 	border-radius: 4px;
			// }
			.imgs_bg {
				width: 100rpx;
				height: 100rpx;
				// background: #b5b5b5;
			}

			.title {
				margin-top: 15rpx;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 5px auto;
				background-color: #fff;
				height: 90rpx;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 15px;
				height: 45px;
			}

			.xieyi {
				color: #333;
				margin-top: 20px;

				>text {
					font-size: 12px;
				}
			}
		}

		.easyinput {
			width: 100%;
		}
	}

	.login-code-img {
		height: 45px;
	}

	.toggle_login {
		font-size: 12px;
		color: #2caeff;
		text-decoration: underline;
	}
</style>