<template>
	<uni-nav-bar title="登录" fixed color="#8B2316" height="160rpx" :border="false" backgroundColor="#eeeeee"></uni-nav-bar>
	<view class="login-container">
	   
		<!-- 主要内容区域 -->
		<view class="main-content" >
			
			<!-- 应用图标和名称 -->
			<view class="app-info">
				<view class="app-icon">
					
						<up-image  :src="logo" width="164rpx" height="167rpx" ></up-image>
					
				</view>
				<text class="app-name">专家端</text>
			</view>
           
			<!-- 手机号输入 -->
			<view class="input-section">
				<view class="input-group">
					<up-image  :src="phoneImg" width="36rpx" height="36rpx" ></up-image>
					<input 
						class="phone-input" 
						type="number" 
						placeholder="请输入手机号" 
						v-model="phoneNumber"
						maxlength="11"
					/>
				</view>
				
				<!-- 密码输入 -->
				<view class="input-group">
					<up-image  :src="pwdImg" width="36rpx" height="36rpx" ></up-image>
					<input 
						class="password-input" 
						type="text" 
						placeholder="请输入密码" 
						:password="!showPassword"
						v-model="password"
					/>
					<view class="password-toggle" @click="togglePassword">
						<up-image  :src="showPassword ? eyeOpenImg : eyeCloseImg" width="36rpx" height="36rpx" ></up-image>
					</view>
				</view>
			</view>
           
			<!-- 登录按钮 -->
			<view class="login-button" @click="onPasswordLogin" >
				<text class="button-text">登录</text>
			</view>
            <view class="sms-login" @click="goSmsLogin">
				<text class="sms-text">短信验证码登录</text>
			</view>
			<!-- 其他登录方式 -->
			<view class="other-login">
				
				
				<!-- 微信登录 -->
				<view class="wechat-login" @click="onWechatLogin">
					<view class="wechat-icon">
						<up-image  :src="wxImg" width="100rpx" height="100rpx" ></up-image>
					</view>
					<text class="wechat-text">微信登录</text>
				</view>
			</view>
			
		</view>
		

		<!-- 底部协议 -->
		<view class="agreement-section">
			<view class="agreement-content">
				
				<view class="checkbox"  @click="toggleAgreement">
					<up-image  :src="checkImg" width="45rpx" height="45rpx" v-if="!isAgreed"></up-image>
					<up-image  :src="checkOnImg" width="45rpx" height="45rpx" v-else></up-image>
				</view>
				<view class="agreement-text">
					<text class="text-content">我已阅读并同意</text>
					<text class="link-text" @click="onServiceTerms">《中国移动认证服务条款》</text>
					<text class="text-content">和</text>
					<text class="link-text" @click="onPrivacyPolicy">《肝胆相照隐私政策》</text>
					<text class="text-content">、</text>
					<text class="link-text" @click="onUserAgreement">《肝胆相照用户服务协议》</text>
					<text class="text-content">并使用本机号码登录并注册</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted, computed } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import auth from "@/utils/auth";
    import logo from "@/static/icon_login_logo.png"
	import wxImg from "@/static/weixin_login.png"
	import checkImg from "@/static/login_new_unselect.png"
	import checkOnImg from "@/static/login_new_select.png"
	import phoneImg from "@/static/phone.png"
	import pwdImg from "@/static/pwd.png"
	import eyeOpenImg from "@/static/eye_open.png"
	import eyeCloseImg from "@/static/eye_close.png"
	import api from "@/api/api.js"
	import BASE_URL from "@/utils/config.js";

	const customStyle = reactive({
	  height: "100rpx",
	  fontSize: "36rpx",
	  backgroundColor:'#8B2316',
	  borderRadius: '50rpx'
	});
	
	// 协议同意状态
	const isAgreed = ref(false);
	
	// 手机号和密码
	const phoneNumber = ref('');
	const password = ref('');
	
	// 密码显示状态
	const showPassword = ref(false);
	
	// 是否可以登录
	const canLogin = computed(() => {
		return isAgreed.value && phoneNumber.value.length === 11 && password.value.length >= 6;
	});
	const goSmsLogin=()=>{
		uni.redirectTo({
			url:'/pages_app/smsLogin/smsLogin'
		})
	}
	const alertAgree=()=>{
	  uni.showToast({
		title: '请先同意用户协议',
		icon:'none'
	  })
	};
	
	// 切换密码显示
	const togglePassword = () => {
		showPassword.value = !showPassword.value;
	};

	// 密码登录
	const onPasswordLogin = () => {
		if (!isAgreed.value) {
			uni.showToast({
				title: '请先同意相关协议',
				icon: 'none'
			});
			return;
		}
		
		if (!phoneNumber.value) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return;
		}
		
		if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return;
		}
		
		if (!password.value) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			});
			return;
		}
		
		if (password.value.length < 6) {
			uni.showToast({
				title: '密码长度不能少于6位',
				icon: 'none'
			});
			return;
		}
		
		console.log('密码登录');
		uni.showLoading({
			title: '登录中...'
		});
		
		api.pwdLogin({
			mobile: phoneNumber.value,
			password: password.value,
			client_type:"A",
			current_spec:"Iphone15"
		}).then(result => {
			console.log(result)
			
			
				// 保存用户信息到本地存储
				if (process.env.UNI_PLATFORM == "h5") {
					if (window.location.href.indexOf('dev') > -1) {
						uni.setStorageSync('AUTH_TOKEN_App',result.access_token);
						uni.setStorageSync('AUTH_YX_ACCID_App', result.YX_accid);
						uni.setStorageSync('AUTH_YX_TOKEN_App', result.YX_token);
						uni.setStorageSync('userInfo', result.data);
						
					} else {
						uni.setStorageSync('DEV_AUTH_TOKEN_App', result.access_token);
						uni.setStorageSync('DEV_AUTH_YX_ACCID_App', result.YX_accid);
						uni.setStorageSync('DEV_AUTH_YX_TOKEN_App', result.YX_token);
						uni.setStorageSync('userInfo', result.data);
					}
				} else if(process.env.UNI_PLATFORM == "mp-weixin") {
					const {
						envVersion
					} = uni.getAccountInfoSync().miniProgram;
					if (envVersion == "release") {
						uni.setStorageSync('AUTH_TOKEN_App',result.access_token);
						uni.setStorageSync('AUTH_YX_ACCID_App', result.YX_accid);
						uni.setStorageSync('AUTH_YX_TOKEN_App', result.YX_token);
						uni.setStorageSync('userInfo', result.data);
					} else {
						uni.setStorageSync('DEV_AUTH_TOKEN_App', result.access_token);
						uni.setStorageSync('DEV_AUTH_YX_ACCID_App', result.YX_accid);
						uni.setStorageSync('DEV_AUTH_YX_TOKEN_App', result.YX_token);
						uni.setStorageSync('userInfo', result.data);
					}
				}else{
					if (BASE_URL.indexOf('dev') == -1) {
						uni.setStorageSync('AUTH_TOKEN_App',result.access_token);
						uni.setStorageSync('AUTH_YX_ACCID_App', result.YX_accid);
						uni.setStorageSync('AUTH_YX_TOKEN_App', result.YX_token);
						uni.setStorageSync('userInfo', result.data);
						
					} else {
						uni.setStorageSync('DEV_AUTH_TOKEN_App', result.access_token);
						uni.setStorageSync('DEV_AUTH_YX_ACCID_App', result.YX_accid);
						uni.setStorageSync('DEV_AUTH_YX_TOKEN_App', result.YX_token);
						uni.setStorageSync('userInfo', result.data);
					}
				}
			

				console.log(uni.getStorageSync('userInfo'))
				console.log(1)
			uni.hideLoading();
			console.log(2)
			uni.showToast({
				title: '登录成功',
				icon: 'none'
			});
			console.log(3)
			uni.redirectTo({
				url:'/pages/index/index'
			})
			console.log(4)
		})
		// 模拟登录过程
		// setTimeout(() => {
		// 	uni.hideLoading();
		// 	uni.showToast({
		// 		title: '登录成功',
		// 		icon: 'none'
		// 	});
			
		// 	// 跳转到首页
		// 	setTimeout(() => {
		// 		uni.switchTab({
		// 			url: '/pages/index/index'
		// 		});
		// 	}, 1500);
		// }, 2000);
	};

	// 微信登录
	const onWechatLogin = () => {
		if (!isAgreed.value) {
			uni.showToast({
				title: '请先同意相关协议',
				icon: 'none'
			});
			return;
		}
		
		console.log('微信登录');
		uni.showToast({
			title: '微信登录功能开发中',
			icon: 'none'
		});
	};

	// 切换协议同意状态
	const toggleAgreement = () => {
		isAgreed.value = !isAgreed.value;
	};

	// 查看服务条款
	const onServiceTerms = () => {
		console.log('查看服务条款');
		uni.navigateTo({
			url: '/pages_app/agreement/service-terms'
		});
	};

	// 查看隐私政策
	const onPrivacyPolicy = () => {
		console.log('查看隐私政策');
		uni.navigateTo({
			url: '/pages_app/agreement/privacy-policy'
		});
	};

	// 查看用户协议
	const onUserAgreement = () => {
		console.log('查看用户协议');
		uni.navigateTo({
			url: '/pages_app/agreement/user-agreement'
		});
	};
	
	// 页面加载
	onLoad(() => {
		console.log('密码登录页面加载完成');
	});

	// 页面显示
	onShow(() => {
		console.log('密码登录页面显示');
	});

	// 组件挂载后
	onMounted(() => {
		console.log('密码登录页面组件已挂载');
	});
</script>

<style>
	.login-container {
		min-height: calc(100vh - 160rpx);
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
	}

	/* 主要内容区域 */
	.main-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 60rpx 0;
	}

	/* 应用信息 */
	.app-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 80rpx;
	}

	.app-icon {
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		position: relative;
	}

	.app-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #8B2316;
	}

	/* 输入区域 */
	.input-section {
		width: 100%;
		margin-bottom: 60rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 8rpx;
	}

	.input-group {
		display: flex;
		padding-left: 20rpx;
		align-items: center;
	}
	
	.input-group:first-child{
	   border-bottom: 2rpx solid #e5e5e5;
	}

	.phone-input {
		width: 100%;
		height: 80rpx;
		padding: 0 40rpx;
		font-size: 32rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.password-input {
		flex: 1;
		height: 80rpx;
		padding: 0 40rpx;
		font-size: 32rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.password-toggle {
		width: 60rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	/* 登录按钮 */
	.login-button {
		width: 100%;
		height: 80rpx;
		background-color: #8B2316;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.login-button:active {
		background-color: #6B1A0F;
	}

	.button-text {
		font-size: 32rpx;
		color: white;
		font-weight: bold;
	}

	/* 其他登录方式 */
	.other-login {
		width: 100%;
		margin-bottom: 40rpx;
	}

	/* 微信登录 */
	.wechat-login {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
		cursor: pointer;
	}

	.wechat-icon {
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.wechat-text {
		font-size: 28rpx;
		color: #8B2316;
	}

	/* 底部协议 */
	.agreement-section {
		padding: 40rpx 60rpx 60rpx;
	}

	.agreement-content {
		display: flex;
		align-items: flex-start;
		gap: 20rpx;
	}

	.checkbox {
		width: 45rpx;
		height:45rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-top: 4rpx;
		cursor: pointer;
		transition: all  0.3s ease-in-out;
	}

	.agreement-text {
		flex: 1;
		font-size: 24rpx;
		color: #666;
		line-height: 1.6;
	}

	.text-content {
		color: #666;
	}

	.link-text {
		color: #8B2316;
	}

	/* 响应式调整 */
	@media (max-width: 750rpx) {
		.main-content {
			padding: 80rpx 40rpx 0;
		}

		.app-icon {
			width: 100rpx;
			height: 100rpx;
		}

		.phone-input,
		.password-input {
			height: 90rpx;
		}

		.login-button {
			height: 90rpx;
		}

		.button-text {
			font-size: 30rpx;
		}

		.agreement-section {
			padding: 30rpx 40rpx 50rpx;
		}

		.agreement-text {
			font-size: 22rpx;
		}
	}
	.sms-login {
		width:100%;
		margin-bottom: 0rpx;
		cursor: pointer;
	}
	
	.sms-text {
		font-size: 28rpx;
		color: #8B2316;
	}
</style>