<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="nav-title">微信账号绑定</view>
			<view class="nav-close" @click="closePage">
				<fui-icon name="close" :size="40" color="#333"></fui-icon>
			</view>
		</view>

		<!-- 微信授权webview -->
		<web-view 
			v-if="authUrl" 
			:src="authUrl" 
			@message="handleWebviewMessage"
			@error="handleWebviewError">
		</web-view>

		<!-- 绑定表单 -->
		<view class="bind-form" v-if="showBindForm">
			<view class="form-title">完成账号绑定</view>
			<view class="form-subtitle">请输入手机号和验证码完成绑定</view>

			<view class="form-item">
				<fui-input 
					placeholder="请输入手机号" 
					v-model="phone" 
					type="number"
					backgroundColor="#f8f8f8">
				</fui-input>
			</view>

			<view class="form-item">
				<fui-input 
					placeholder="请输入验证码" 
					v-model="smsCode" 
					backgroundColor="#f8f8f8">
					<fui-button 
						:background="canSendSms ? '#00be8c' : '#ccc'" 
						:disabled="!canSendSms"
						width="200rpx" 
						height="60rpx" 
						:size="24"
						@click="sendSmsCode">
						{{ smsButtonText }}
					</fui-button>
				</fui-input>
			</view>

			<view class="form-item">
				<fui-button 
					background="#00be8c" 
					radius="5rpx" 
					@click="submitBind"
					:disabled="!canSubmit">
					确认绑定
				</fui-button>
			</view>
		</view>
	</view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
	data() {
		return {
			authUrl: '',
			miniOpenid: '',
			wechatOpenid: '',
			phone: '',
			smsCode: '',
			showBindForm: false,
			smsCountdown: 0,
			smsTimer: null
		}
	},
	computed: {
		canSendSms() {
			return this.phone.length === 11 && this.smsCountdown === 0;
		},
		canSubmit() {
			return this.phone.length === 11 && this.smsCode.length > 0 && this.wechatOpenid;
		},
		smsButtonText() {
			return this.smsCountdown > 0 ? `${this.smsCountdown}s` : '获取验证码';
		}
	},
	onLoad(options) {
		this.authUrl = decodeURIComponent(options.auth_url || '');
		this.miniOpenid = options.mini_openid || '';

		if (!this.authUrl || !this.miniOpenid) {
			uni.showToast({
				title: '参数错误',
				icon: 'none'
			});
			setTimeout(() => {
				this.closePage();
			}, 1500);
			return;
		}

		// 监听URL变化，检测是否完成授权
		this.checkAuthCallback();
	},
	onShow() {
		// 页面显示时检查是否有授权回调参数
		this.checkUrlParams();
	},
	onUnload() {
		if (this.smsTimer) {
			clearInterval(this.smsTimer);
		}
	},
	methods: {
		// 检查授权回调
		checkAuthCallback() {
			// 定时检查URL变化，模拟检测授权完成
			setTimeout(() => {
				// 模拟授权完成，显示绑定表单
				// 实际项目中这里应该通过webview的URL变化或消息来判断
				this.showBindFormWithDelay();
			}, 3000); // 3秒后显示绑定表单，给用户足够时间完成微信授权
		},

		// 检查URL参数
		checkUrlParams() {
			// 这里可以检查页面参数，判断是否从微信授权回调返回
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			if (currentPage && currentPage.options) {
				const { code, state } = currentPage.options;
				if (code && state) {
					// 有授权回调参数，处理授权结果
					this.handleAuthCallback(code, state);
				}
			}
		},

		// 延迟显示绑定表单
		showBindFormWithDelay() {
			// 模拟获取到微信公众号openid
			this.wechatOpenid = 'mock_wechat_openid_' + Date.now();
			this.showBindForm = true;

			uni.showToast({
				title: '微信授权成功，请完成绑定',
				icon: 'success'
			});
		},

		// 处理授权回调
		async handleAuthCallback(code, state) {
			try {
				// 这里应该调用后端接口处理授权回调
				// 暂时模拟处理
				this.wechatOpenid = 'wechat_openid_from_callback';
				this.showBindForm = true;
			} catch (error) {
				console.error('处理授权回调失败:', error);
				uni.showToast({
					title: '授权失败',
					icon: 'none'
				});
			}
		},

		// 处理webview消息
		handleWebviewMessage(event) {
			console.log('收到webview消息:', event);
			// 这里可以处理来自webview的消息
		},

		// 处理webview错误
		handleWebviewError(event) {
			console.error('webview错误:', event);
			uni.showToast({
				title: '授权页面加载失败',
				icon: 'none'
			});
		},

		// 发送短信验证码
		async sendSmsCode() {
			if (!this.canSendSms) return;

			try {
				const res = await apiRoute.common_forgetPassword({
					phone: this.phone,
					type: 'bind' // 绑定类型
				});

				if (res && res.code === 1) {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});
					this.startCountdown();
				} else {
					uni.showToast({
						title: res.msg || '发送失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('发送验证码失败:', error);
				uni.showToast({
					title: '发送失败，请重试',
					icon: 'none'
				});
			}
		},

		// 开始倒计时
		startCountdown() {
			this.smsCountdown = 60;
			this.smsTimer = setInterval(() => {
				this.smsCountdown--;
				if (this.smsCountdown <= 0) {
					clearInterval(this.smsTimer);
					this.smsTimer = null;
				}
			}, 1000);
		},

		// 提交绑定
		async submitBind() {
			if (!this.canSubmit) return;

			try {
				uni.showLoading({
					title: '绑定中...'
				});

				const params = {
					mini_openid: this.miniOpenid,
					wechat_openid: this.wechatOpenid,
					phone: this.phone,
					code: this.smsCode
				};

				const res = await apiRoute.wechatBind(params);
				uni.hideLoading();

				if (res && res.code === 1) {
					uni.showToast({
						title: '绑定成功',
						icon: 'success'
					});

					setTimeout(() => {
						// 绑定成功后返回登录页面并自动登录
						uni.navigateBack();
						// 通知登录页面绑定成功
						uni.$emit('wechatBindSuccess');
					}, 1500);
				} else {
					uni.showToast({
						title: res.msg || '绑定失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.hideLoading();
				console.error('绑定失败:', error);
				uni.showToast({
					title: '绑定失败，请重试',
					icon: 'none'
				});
			}
		},

		// 关闭页面
		closePage() {
			uni.navigateBack();
		}
	}
}
</script>

<style lang="less" scoped>
.container {
	height: 100vh;
	background-color: #fff;
}

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #eee;
	position: relative;
	z-index: 999;
}

.nav-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.nav-close {
	padding: 10rpx;
}

.bind-form {
	padding: 60rpx 30rpx;
}

.form-title {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
	margin-bottom: 20rpx;
}

.form-subtitle {
	font-size: 28rpx;
	color: #666;
	text-align: center;
	margin-bottom: 60rpx;
}

.form-item {
	margin-bottom: 40rpx;
}
</style>
