<!-- #ifdef H5 -->
<!-- 可选：引入微信JS-SDK，用于更高级的微信功能 -->
<!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
<!-- #endif -->

<template>
	<view class="container">
		<view class="header">
			<div class="line">您好，</div>
			<div class="line">欢迎使用电梯图纸生成平台</div>
		</view>
		<div class="main">
			<view class="form">
				<uv-form labelAlign="right" labelWidth="50" labelPosition="top" :model="userInfo" :rules="rules"
					ref="form">
					<uv-form-item prop="phone">
						<div class="formLabel">
							<img class="img" src="/static/imgs/phone.png" alt="" />
							手机号
						</div>
						<uv-input v-model="userInfo.phone" color="#000" border="bottom"
							:placeholderStyle="{ color: '#666778' }" placeholder="请输入手机号"></uv-input>
					</uv-form-item>
					<uv-form-item prop="password">
						<div class="formLabel">
							<img class="img" src="/static/imgs/code.png" alt="" />
							验证码
						</div>
						<uv-input v-model="userInfo.password" color="#000" border="bottom"
							:placeholderStyle="{ color: '#666778' }" placeholder="请输入验证码">
							<template v-slot:suffix>
								<uv-code ref="codeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></uv-code>
								<text style="color: #4d82fd" @click="getCode">{{ tips }}</text>
							</template>
						</uv-input>
					</uv-form-item>
				</uv-form>
			</view>
			<uv-button @click="login" customStyle="margin-top:30px" text="登录" color="#3F70FF"></uv-button>
			<div class="wechatBox" v-if="showWechatLogin">
				<uv-divider text="第三方登录"></uv-divider>
				<uv-icon name="weixin-circle-fill" color="#5fc157" size="50" @click="wechatLogin"></uv-icon>
			</div>
		</div>

		<!-- 微信登录绑定手机号弹窗 -->
		<uv-popup ref="popup" mode="center" :closeOnClickOverlay="false" :round="10">
			<view class="bind-phone-modal">
				<view class="modal-header">
					<view class="modal-title">绑定手机号</view>
					<view class="modal-subtitle">为了您的账户安全，请绑定手机号</view>
				</view>

				<view class="modal-form">
					<uv-form :model="bindPhoneInfo" :rules="bindPhoneRules" ref="bindPhoneForm">
						<uv-form-item prop="phone">
							<uv-input v-model="bindPhoneInfo.phone" placeholder="请输入手机号" type="number" maxlength="11"
								border="surround"></uv-input>
						</uv-form-item>
						<uv-form-item prop="code">
							<uv-input v-model="bindPhoneInfo.code" placeholder="请输入验证码" border="surround">
								<template v-slot:suffix>
									<uv-code ref="bindCodeRef" @change="bindCodeChange" seconds="60"
										changeText="X秒重新获取"></uv-code>
									<text style="color: #4d82fd; font-size: 12px" @click="getBindCode">
										{{ bindCodeTips }}
									</text>
								</template>
							</uv-input>
						</uv-form-item>
					</uv-form>
				</view>

				<view class="modal-actions">
					<!-- <uv-button
            type="default"
            @click="closeBindPhoneModal"
            customStyle="margin-right: 12px;"
          >
            取消
          </uv-button> -->
					<uv-button type="primary" @click="confirmBindPhone" :loading="bindingPhone">
						确认绑定
					</uv-button>
				</view>
			</view>
		</uv-popup>
		<!-- 		<a style="display: none;" ref="ToLoginRef"
			href="weixin://dl/business/?appid=wxc504638e03981812&path=pages/login/login?from=h5ToWechat">
			打开小程序并登录
		</a> -->
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		HOME_PATH,
		LOGIN_PATH,
		isTabBarPath,
		removeQueryString,
	} from "@/router";
	import {
		useAuthStore,
		useUserStore
	} from "@/store";
	import {
		onLoad
	} from "@dcloudio/uni-app";

	import RPC from "@/utils/request";

	const authStore = useAuthStore();
	const userStore = useUserStore();

	// 环境判断
	const showWechatLogin = ref(false);

	// 微信登录绑定手机号相关
	// const showBindPhoneModal = ref(false);
	const popup = ref(null);
	const bindingPhone = ref(false);
	const bindCodeTips = ref("获取验证码");
	const bindCodeRef = ref(null);
	const bindPhoneForm = ref(null);
	const bindPhoneInfo = ref({
		phone: "",
		code: "",
	});
	const bindPhoneRules = ref({
		phone: [{
				required: true,
				message: "请输入手机号",
				trigger: ["blur", "change"],
			},
			{
				pattern: /^1[3-9]\d{9}$/,
				message: "请输入正确的手机号",
				trigger: ["blur", "change"],
			},
		],
		code: {
			required: true,
			message: "请输入验证码",
			trigger: ["blur", "change"],
		},
	});

	const ToLoginRef = ref(null)

	const tips = ref("获取验证码");
	const codeChange = (text) => {
		tips.value = text;
	};
	const codeRef = ref(null);
	const getCode = () => {
		if (!userInfo.value.phone) {
			uni.showToast({
				title: "请输入手机号",
				icon: "none",
			});
			return;
		}

		if (!/^1[3-9]\d{9}$/.test(userInfo.value.phone)) {
			uni.showToast({
				title: "请输入正确的手机号",
				icon: "none",
			});
			return;
		}
		if (codeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: "正在获取验证码",
			});
			RPC.post('/login/phone/send_code', {
				phone: userInfo.value.phone,
			}).then(() => {
				uni.hideLoading()
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				})
				codeRef.value.start()
			}).catch(() => {
				uni.hideLoading()
				uni.showToast({
					title: '发送失败，请重试',
					icon: 'none'
				})
			})
		} else {
			uni.showToast({
				title: "倒计时结束后再发送",
				icon: "none",
			});
		}
	};

	const form = ref(null);
	const userInfo = ref({
		phone: "",
		password: "",
	});
	const rules = ref({
		phone: [{
				required: true,
				message: "请输入手机号",
				trigger: ["blur", "change"],
			},
			// {
			// 	pattern: /^1[3-9]\d{9}$/,
			// 	message: "请输入正确的手机号",
			// 	trigger: ["blur", "change"],
			// },
		],
		password: {
			required: true,
			message: "请填写验证码",
			trigger: ["blur", "change"],
		},
	});
	let redirect = HOME_PATH;
	onLoad((options) => {
		if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
			if(decodeURIComponent(options.redirect) && decodeURIComponent(options.redirect) != 'undefined')
			redirect = decodeURIComponent(options.redirect);
		}
		if (options.from && options.from === 'h5ToWechat') {
			XcxLogin()
		}
	});

	// 检查运行环境
	const checkEnvironment = () => {
		// #ifdef MP-WEIXIN
		// 微信小程序环境
		showWechatLogin.value = true;
		// #endif

		// #ifdef H5
		// H5环境，检查是否在微信内
		// const ua = navigator.userAgent.toLowerCase();
		// const isWechat = ua.indexOf("micromessenger") !== -1;
		// showWechatLogin.value = isWechat;
		// #endif

		// #ifdef APP-PLUS
		// App环境，不显示微信登录
		showWechatLogin.value = false;
		// #endif
	};

	const XcxLogin = () => {
		uni.showLoading({
			title: "登录中...",
		});
		uni.login({
			success: function(loginRes) {
				console.log('loginRes', loginRes);
				RPC.post('/login/wechat_mini', {
					js_code: loginRes.code
				}).then(res => {
					console.log('phonelogin', res)
					if (res.user.phone) {
						authStore.setAccessToken(res.token)
						userStore.setUserInfo(res.user)
						uni.showToast({
							title: "登录成功",
							icon: "success",
						});
						uni.$uv.route({
							type: isTabBarPath(redirect || HOME_PATH) ? "switchTab" :
								"redirectTo",
							url: redirect || HOME_PATH,
						});
					} else {
						accessToken.value = res.token
						accessUserInfo.value = res.user
						uni.hideLoading()
						popup.value.open()
					}
				}).catch(() => {
					uni.showToast({
						title: "登录失败",
						icon: "error",
					});
				})
			},
			fail: () => {
				uni.hideLoading();
			}
		})
	}



	// 微信登录
	const wechatLogin = () => {
		// #ifdef MP-WEIXIN
		// 微信小程序登录
		XcxLogin()
		// popup.value.open();
		// #endif

		// #ifdef H5
		// H5微信登录
		if (typeof WeixinJSBridge !== "undefined") {
			// 在微信内，使用微信JS-SDK进行授权登录
			// wechatH5Login();
			ToLoginRef.value.click()
		} else {
			uni.showToast({
				title: "请在微信中打开",
				icon: "none",
			});
		}
		// #endif
	};

	// 获取绑定手机号验证码
	const getBindCode = () => {
		if (!bindPhoneInfo.value.phone) {
			uni.showToast({
				title: "请输入手机号",
				icon: "none",
			});
			return;
		}

		if (!/^1[3-9]\d{9}$/.test(bindPhoneInfo.value.phone)) {
			uni.showToast({
				title: "请输入正确的手机号",
				icon: "none",
			});
			return;
		}

		if (bindCodeRef.value.canGetCode) {
			uni.showLoading({
				title: "正在获取验证码",
			});
			// 调用发送验证码API
			RPC.post('/user/bind_phone/send_code', {
				phone: bindPhoneInfo.value.phone,
				token: accessToken.value
			}, {
				custom: {
					customToken: accessToken.value
				}
			}).then(() => {
				uni.hideLoading()
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				})
				bindCodeRef.value.start()
			}).catch(() => {
				uni.hideLoading()
				uni.showToast({
					title: '发送失败，请重试',
					icon: 'none'
				})
			})
		} else {
			uni.showToast({
				title: "倒计时结束后再发送",
				icon: "none",
			});
		}
	};

	// 绑定验证码倒计时回调
	const bindCodeChange = (text) => {
		bindCodeTips.value = text;
	};

	// H5微信登录方法
	const wechatH5Login = () => {
		// #ifdef H5
		// 构建微信授权URL
		const appId = "wxc504638e03981812"; // 替换为你的微信公众号AppID
		const redirectUri = encodeURIComponent(
			window.location.origin + "/pages/login/login"
		); // 授权回调地址
		const scope = "snsapi_userinfo"; // 授权作用域
		const state = "STATE" + Date.now(); // 防止CSRF攻击的随机字符串

		// 检查是否已经有授权码
		const urlParams = new URLSearchParams(window.location.search);
		const code = urlParams.get("code");

		if (code) {
			// 已经获得授权码，处理登录
			handleWechatH5Callback(code);
		} else {
			// 跳转到微信授权页面
			const authUrl =
				`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;

			uni.showLoading({
				title: "正在跳转微信授权...",
			});

			// 跳转到微信授权页面
			window.location.href = authUrl;
		}
		// #endif
	};

	const accessToken = ref('')
	const accessUserInfo = ref({})

	// 处理微信H5授权回调
	const handleWechatH5Callback = async (code) => {
		// #ifdef H5
		try {
			uni.showLoading({
				title: "正在获取用户信息...",
			});

			// 调用后端接口，通过code获取用户信息
			// const result = await RPC.post('/api/wechat/h5-login', {
			//   code: code
			// });
			RPC.post('/login/wechat_mini', {
				js_code: loginRes.code
			}).then(res => {
				console.log('phonelogin', res)
				if (res.user.phone) {
					authStore.setAccessToken(res.token)
					userStore.setUserInfo(res.user)
					uni.showToast({
						title: "登录成功",
						icon: "success",
					});
					uni.$uv.route({
						type: isTabBarPath(redirect || HOME_PATH) ? "switchTab" : "redirectTo",
						url: redirect || HOME_PATH,
					});
				} else {
					accessToken.value = res.token
					accessUserInfo.value = res.user
					popup.value.open()
				}
			}).catch(() => {
				uni.showToast({
					title: "登录失败",
					icon: "error",
				});
			})

			// 模拟获取用户信息
			// setTimeout(() => {
			// 	uni.hideLoading();

			// 	// 模拟获取到的用户信息
			// 	const userInfo = {
			// 		openid: "mock_openid_" + Date.now(),
			// 		nickname: "微信用户",
			// 		headimgurl: "/static/imgs/avatar.png",
			// 	};

			// 	console.log("微信H5登录成功，用户信息:", userInfo);

			// 	// 显示绑定手机号弹窗
			// 	popup.value.open();

			// 	// 清除URL中的code参数
			// 	const url = new URL(window.location);
			// 	url.searchParams.delete("code");
			// 	url.searchParams.delete("state");
			// 	window.history.replaceState({},
			// 		document.title,
			// 		url.pathname + url.search
			// 	);
			// }, 1500);
		} catch (error) {
			uni.hideLoading();
			console.error("微信H5登录失败:", error);
			uni.showToast({
				title: "微信登录失败，请重试",
				icon: "none",
			});
		}
		// #endif
	};

	// 初始化微信JS-SDK（可选，用于更高级的功能）
	const initWechatJSSDK = () => {
		// #ifdef H5
		// 如果需要使用微信JS-SDK的其他功能，可以在这里初始化
		// 需要先引入微信JS-SDK：https://res.wx.qq.com/open/js/jweixin-1.6.0.js
		// 示例配置（需要后端提供签名等信息）
		// if (typeof wx !== 'undefined') {
		//   wx.config({
		//     debug: false,
		//     appId: 'YOUR_WECHAT_APP_ID',
		//     timestamp: timestamp,
		//     nonceStr: nonceStr,
		//     signature: signature,
		//     jsApiList: ['chooseImage', 'uploadImage', 'getLocation'] // 需要使用的JS接口列表
		//   });
		//
		//   wx.ready(() => {
		//     console.log('微信JS-SDK初始化成功');
		//   });
		//
		//   wx.error((res) => {
		//     console.error('微信JS-SDK初始化失败:', res);
		//   });
		// }
		// #endif
	};

	// 确认绑定手机号
	const confirmBindPhone = async () => {
		try {
			await bindPhoneForm.value.validate();

			bindingPhone.value = true;

			// 调用绑定手机号API
			RPC.post('/user/bind_phone', {
				phone: bindPhoneInfo.value.phone,
				code: bindPhoneInfo.value.code,
				token: accessToken.value
			},{
				custom: {
					customToken: accessToken.value
				}
			}).then((res) => {
				console.log('bind_phone', res)
				bindingPhone.value = false;
				authStore.setAccessToken(accessToken.value)
				userStore.setUserInfo(accessUserInfo.value)
				uni.showToast({
					title: "绑定成功",
					icon: "success",
				});
				setTimeout(() => {
					closeBindPhoneModal()
					uni.$uv.route({
						type: isTabBarPath(redirect || HOME_PATH) ? "switchTab" :
							"redirectTo",
						url: redirect || HOME_PATH,
					});
				}, 500);
			})
		} catch (error) {
			console.error("绑定手机号失败:", error);
			bindingPhone.value = false;
		}
	};

	// 关闭绑定手机号弹窗
	const closeBindPhoneModal = () => {
		popup.value.close();
		bindPhoneInfo.value = {
			phone: "",
			code: "",
		};
		bindCodeTips.value = "获取验证码";
	};

	const login = async () => {
		await form.value.validate();
		console.log(userInfo.value);
		// RPC.post('/account/login', {
		// 	username: userInfo.value.name,
		// 	password: userInfo.value.password,
		// }, {
		// 	custom: {
		// 		loading: true,
		// 		loadingText: '正在登录...'
		// 	},
		// }).then(res => {
		// 	authStore.setAccessToken(res.token)
		// 	userStore.setUserInfo(res)
		// 	uni.$uv.route({
		// 		type: isTabBarPath(redirect) ? "switchTab" : "redirectTo",
		// 		url: redirect,
		// 	});
		// })
		RPC.post('/login/phone', {
				phone: userInfo.value.phone,
				code: userInfo.value.password,
			}, {
				custom: {
					loading: true,
					loadingText: '正在登录...'
				},
			})
			.then((res) => {
				authStore.setAccessToken(res.token);
				RPC.post('/user/info', {
						token: res.token,
					})
					.then((res) => {
						userStore.setUserInfo(res)
						uni.$uv.route({
							type: isTabBarPath(redirect || HOME_PATH) ? "switchTab" : "redirectTo",
							url: redirect || HOME_PATH,
						});
					})
					.finally(() => {
						loading.value = false
					})
			})
			.catch(() => {
				loading.value = false
			})
	};

	onMounted(() => {
		checkEnvironment();

		// // #ifdef MP-WEIXIN
		// // 检查是否是微信授权回调
		// const urlParams = new URLSearchParams(window.location.search);
		// const code = urlParams.get("code");
		// const from = urlParams.get("from");
		// console.log('from',from)
		// if (from && from === 'h5') {
		// 	handleWechatH5Callback(code);
		// }

		// // 可选：初始化微信JS-SDK
		// // initWechatJSSDK();
		// // #endif
	});
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(124.92deg,
				rgba(77, 130, 253, 1) 7.66%,
				rgba(85, 184, 254, 1) 89.55%);

		.header {
			height: 15vh;
			color: #fff;
			display: flex;
			flex-direction: column;
			padding-left: 7vw;
			font-size: 16px;
			justify-content: center;

			.line {
				margin: 6px 0;
			}
		}

		.main {
			flex: 1;
			background-color: #fff;
			border-radius: 20px 20px 0 0;
			padding: 7vw;

			.formLabel {
				display: flex;
				align-items: center;
				margin-bottom: 4px;

				.img {
					width: 20px;
					height: 20px;
					margin-right: 6px;
				}
			}

			.wechatBox {
				position: fixed;
				width: 100%;
				left: 0;
				bottom: 15vh;
				display: flex;
				flex-direction: column;
				align-items: center;

				.uv-icon {
					cursor: pointer;
					transition: transform 0.2s;

					&:active {
						transform: scale(0.95);
					}
				}
			}
		}
	}

	.bind-phone-modal {
		width: 320px;
		padding: 24px;

		.modal-header {
			text-align: center;
			margin-bottom: 24px;

			.modal-title {
				font-size: 18px;
				font-weight: bold;
				color: #333;
				margin-bottom: 8px;
			}

			.modal-subtitle {
				font-size: 14px;
				color: #666;
			}
		}

		.modal-form {
			margin-bottom: 24px;

			.uv-form-item {
				margin-bottom: 16px;
			}
		}

		.modal-actions {
			display: flex;
			gap: 12px;

			.uv-button {
				flex: 1;
			}
		}
	}
</style>

<style lang="scss">
	.wechatBox {
		.uv-divider {
			margin-bottom: 30px;
			width: 90%;
		}
	}
</style>