<template>
	<view class="login-container">
	   <uni-nav-bar title="登录" color="#8B2316" height="160rpx" :border="false" backgroundColor="#eeeeee"></uni-nav-bar>
		<!-- 主要内容区域 -->
		<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>
           
			<!-- 手机号显示 -->
			<!-- #ifdef APP -->
			<view class="phone-display">
				<text class="phone-number">176****8628</text>
			</view>
           
			<!-- 登录按钮 -->
			<view class="login-button" @click="onOneClickLogin">
				<text class="button-text">本机号码一键登录</text>
			</view>

			<!-- 短信验证码登录 -->
			<view class="sms-login" @click="onSmsLogin">
				<text class="sms-text">短信验证码登录</text>
			</view>

			<!-- 微信登录 -->
			<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>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<up-button
			  v-if="isAgreed"
			  :customStyle="customStyle"
			  class="login-button"
			  type="success"
			  @getphonenumber="getPhoneNumber"
			  open-type="getPhoneNumber"
			  text="手机号快捷登录"
			  color="#3cc7c0"
			  size="large"
			></up-button>
			 <up-button
			  v-else
			  :customStyle="customStyle"
			  class="login-button"
			  type="success"
			  @click="alertAgree"
			  text="手机号快捷登录"
			  color="#3cc7c0"
			  size="large"
			></up-button>
			<view class="sms-login" @click="onSmsLogin" style="margin-top: 20rpx;">
				<text class="sms-text">短信验证码登录</text>
			</view>
			
			<!-- 微信登录 -->
			<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>
			
			<!-- #endif -->
			
		</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 } 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 api from "@/api/api.js"
	
	const customStyle = reactive({
	  height: "100rpx",
	  fontSize: "36rpx",
	  backgroundColor:'#8B2316',
	  borderRadius: '50rpx'
	});
	// 协议同意状态
	const isAgreed = ref(false);
		const alertAgree=()=>{
		  uni.showToast({
			title: '请先同意用户协议',
			icon:'none'
		  })
		};
	// 一键登录
	const onOneClickLogin = () => {
		if (!isAgreed.value) {
			uni.showToast({
				title: '请先同意相关协议',
				icon: 'none'
			});
			return;
		}
		
		console.log('一键登录');
		uni.showLoading({
			title: '登录中...'
		});
		
		// 模拟登录过程
		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({
				title: '登录成功',
				icon: 'none'
			});
			
			// 跳转到首页
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}, 1500);
		}, 2000);
	};

	// 短信验证码登录
	const onSmsLogin = () => {
		
		uni.redirectTo({
			url: '/pages_app/smsLogin/smsLogin'
		});
	};

	// 微信登录
	const onWechatLogin = () => {
		if (!isAgreed.value) {
			uni.showToast({
				title: '请先同意相关协议',
				icon: 'none'
			});
			return;
		}
		
		console.log('微信登录');
		wx.login({
		  success(res) {
		    if (res.code) {
		      // 发送 res.code 到后台换取 openId, sessionKey, unionId
		      api.expertWxLogin(res.code).then((data) => {
				  console.log(data)
				  if (data.data.openid) {
				  	if (process.env.NODE_ENV === 'development') {
				  		uni.setStorageSync('DEV_APPID', data.data.openid);
				  	} else {
				  		uni.setStorageSync('AUTH_APPID', data.data.openid);
				  	}
				  }
				  
				  
				  let openid = ""
				  if (process.env.NODE_ENV === 'development') {
				  	openid = uni.getStorageSync('DEV_APPID');
				  } else {
				  	openid = uni.getStorageSync('AUTH_APPID');
				  }
				  console.log("openid: ", openid)
			  })
		    } else {
		      console.log('登录失败！' + res.errMsg);
		    }
		  }
		});
		
	};

	// 切换协议同意状态
	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'
		});
	};
	const getPhoneNumber = (e) => {
	  if (e.detail.errMsg === "getPhoneNumber:ok") {
	    console.log(e.target.code)
	    auth().then((res) => {
	      console.log(res);
	      api.wxLogin({
	          phone_code: e.target.code,
	          wx_code: res,
	          source:1
	        })
	        .then((data) => {
				uni.hideKeyboard()
	         let result=data.data.data;
	      if(process.env.UNI_PLATFORM =="h5"){
				if(window.location.href.indexOf('//casedata.igandan.com')>-1){
				   uni.setStorageSync("AUTH_TOKEN_CASEDATA",result.token);
				}else{
					 uni.setStorageSync("DEV_AUTH_TOKEN_CASEDATA",result.token);
				}
			}else{
	         const { envVersion } = uni.getAccountInfoSync().miniProgram;
	          if (envVersion == "release") {
	            uni.setStorageSync("AUTH_TOKEN_CASEDATA",result.token);
	          } else {
	            uni.setStorageSync("DEV_AUTH_TOKEN_CASEDATA",result.token);
	          };
	    }
	          
	         
	            uni.setStorageSync("userInfo",{
	            avatar:result.avatar,
	            user_id:result.user_id,
	            status:result.status,
	            user_name:result.user_name,
	            doctor_id:result.doctor_id,
	           });
	          goPage()
	        })
	    });
	  }
	};
	const goPage=()=>{
		uni.redirectTo({
			url:'/pages/index/index'
		})
	}
	// 页面加载
	onLoad(() => {
		console.log('登录页面加载完成');
	});

	// 页面显示
	onShow(() => {
	  // #ifdef APP
		// uni.login({
		// 	provider: 'univerify',
		// 	univerifyStyle: {
		//     fullScreen: true
		//   }
		// })
	// #endif 
		console.log('登录页面显示');
	});

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

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

	/* 状态栏 */
	.status-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		height: 60rpx;
	}

	.status-left {
		display: flex;
		align-items: center;
	}

	.signal-bars {
		display: flex;
		align-items: flex-end;
		gap: 2rpx;
	}

	.bar {
		width: 4rpx;
		background-color: #333;
		border-radius: 2rpx;
	}

	.bar:nth-child(1) { height: 8rpx; }
	.bar:nth-child(2) { height: 12rpx; }
	.bar:nth-child(3) { height: 16rpx; }
	.bar:nth-child(4) { height: 20rpx; }

	.status-right {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.battery-text {
		font-size: 24rpx;
		color: #333;
	}

	.battery-icon {
		width: 40rpx;
		height: 20rpx;
		border: 2rpx solid #333;
		border-radius: 4rpx;
		position: relative;
		display: flex;
		align-items: center;
	}

	.battery-level {
		width: 32rpx;
		height: 12rpx;
		background-color: #333;
		margin: 2rpx;
		border-radius: 2rpx;
	}

	.battery-tip {
		position: absolute;
		right: -6rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 4rpx;
		height: 8rpx;
		background-color: #333;
		border-radius: 0 2rpx 2rpx 0;
	}

	.charging-icon {
		font-size: 20rpx;
		color: #333;
	}

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

	/* 页面标题 */
	.page-title {
		margin-bottom: 80rpx;
	}

	.title-text {
		font-size: 48rpx;
		font-weight: bold;
		color: #8B2316;
	}

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

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

	.icon-content {
		position: relative;
		width: 80rpx;
		height: 80rpx;
	}

	.liver-shape {
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #FF6B35, #FF8C00);
		border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
		position: relative;
	}

	.bird-shape {
		position: absolute;
		top: 20rpx;
		left: 25rpx;
		width: 30rpx;
		height: 20rpx;
		background-color: white;
		border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
		transform: rotate(-15deg);
	}

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

	/* 手机号显示 */
	.phone-display {
		margin-bottom: 60rpx;
	}

	.phone-number {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

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

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

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

	/* 短信验证码登录 */
	.sms-login {
		width:100%;
		margin-bottom: 80rpx;
		cursor: pointer;
	}

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

	/* 微信登录 */
	.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;
	}

	.chat-bubble {
		position: absolute;
		background-color: white;
		border-radius: 50%;
	}

	.chat-bubble-1 {
		width: 16rpx;
		height: 16rpx;
		top: 20rpx;
		left: 20rpx;
	}

	.chat-bubble-2 {
		width: 20rpx;
		height: 20rpx;
		top: 30rpx;
		right: 20rpx;
	}

	.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: 2rpx solid #ccc; */
		border-radius: 50%;
		display: flex;
		/* background-size:cover;
		background: url("@/static/login_new_unselect.png") no-repeat center center; */
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-top: 4rpx;
		cursor: pointer;
		transition: all  0.3s ease-in-out;
	}

	/* .checkbox.checked {
		background-size:cover;
		background: url("@/static/login_new_select.png") no-repeat center center;
	} */

	.checkbox-inner {
		width: 16rpx;
		height: 16rpx;
		background-color: white;
		border-radius: 50%;
	}

	.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;
		}

		.title-text {
			font-size: 44rpx;
		}

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

		.phone-number {
			font-size: 36rpx;
		}

		.login-button {
			height: 90rpx;
		}

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

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

		.agreement-text {
			font-size: 22rpx;
		}
	}
</style>

