<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view class="search-header" :style="{'height': height+'px','padding-top':statusBarHeight+'px'}">
			<view class="title">Epic Soul</view>
			<view class="subtitle">大运河非物质文化遗产</view>
		</view>
		<view :style="{'height':height+'px','flex-shrink':0}"></view>
	
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 权限申请卡片 -->
			<view class="permission-card">
				<view class="app-icon">
					<text class="icon-text">ES</text>
				</view>
				<view class="login-tip">Epic Soul 申请获得</view>
				<view class="login-tip2">以下权限</view>
				<view class="login-tip-box">
					<view class="permission-item">
						<text class="permission-icon">👤</text>
						<text class="permission-text">获得你的公开信息（昵称、头像、地区及性别）</text>
					</view>
				</view>
			</view>
			
			<!-- 按钮区域 -->
			<view class="btn-container">
				<view class="btn-box">
					<button class="cancel-btn" @click="redirectIndex">取消</button>
					<button class="confirm-btn" @click="getUserInfo">同意</button>
				</view>
				
				<!-- 协议同意区域 -->
				<view class="agreement-box">
					<radio-group @change="toggleAgreement">
						<label class="agreement-label">
							<radio value="1" :checked="isAgreed" class="agreement-radio"></radio>
							<text class="agreement-text">同意</text>
							<text class="agreement-link" @click="gotoInfo">《用户服务协议》、《隐私政策》</text>
						</label>
					</radio-group>
				</view>
			</view>
			
			<!-- 手机号授权弹窗 -->
			<uni-popup ref="popup" type="bottom" background-color="#fff">
				<view class="phone-auth-popup">
					<view class="popup-title">手机号授权</view>
					<view class="popup-desc">为了更好地为您提供服务，需要获取您的手机号</view>
					<button class="phone-auth-btn" open-type="getPhoneNumber" @getphonenumber="handlePhoneNumber">
						点击授权手机号
					</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
export default {
    name: "login",
    data() {
        return {
			// 导航栏参数
			height: 0,
			statusBarHeight: 0,
            isAgreed: false,
        };
    },
    onLoad(options) {
		this.initRectInfo()
        // 只需授权手机号
        if (options.needAuth === '1') {
            setTimeout(() => {
                this.$refs.popup.open('bottom');
            }, 400);
        }
    },
    methods: {
		initRectInfo () {
			const sysInfo = uni.getSystemInfoSync()
			this.statusBarHeight = sysInfo.statusBarHeight
			// 默认高度
			this.height = sysInfo.statusBarHeight + 40
		},
        // 处理手机号授权
        handlePhoneNumber(e) {
            if (e.detail.errMsg === "getPhoneNumber:ok") { // 成功
                this.$refs.popup.close();
                this.Post({
                    code: e.detail.code,
                    encryptedData: e.detail.encryptedData,
                    iv: e.detail.iv,
                    token: uni.getStorageSync('token1')
                }, '/api/mini_program/bindPhoneNumber')
               .then(res => {
                    this.$store.commit('changeUserInfo', res.data.userinfo);
                    this.navigateBasedOnPath();
                })
               .catch(error => {
                    console.error('绑定手机号失败:', error);
                    uni.showToast({
                        title: '绑定手机号失败，请稍后重试',
                        icon: 'none'
                    });
                });
            } else {
                console.error('获取手机号失败:', e.detail.errMsg);
                uni.showToast({
                    title: '获取手机号失败，请稍后重试',
                    icon: 'none'
                });
            }
        },
        // 跳转到协议页面
        gotoInfo() {
            uni.navigateTo({
                url: '/subPackages/user/privacy'
            });
        },
        // 切换协议同意状态
        toggleAgreement() {
            this.isAgreed = !this.isAgreed;
        },
        // 重定向到首页
        redirectIndex() {
            uni.switchTab({
                url: '/pages/index/index',
            });
        },
        // 获取用户信息
        getUserInfo() {
            if (!this.isAgreed) {
                uni.showToast({
                    title: '请先勾选同意《用户服务协议》、《隐私政策》',
                    icon: 'none'
                });
                return;
            }
            uni.login({
                provider: 'weixin',
                success: (loginRes) => {
                    uni.getUserInfo({
                        withCredentials: true,
                        success: (res) => {
                            this.Post({
                                code: loginRes.code,
                                userInfo: res.userInfo,
                                encryptedData: res.encryptedData,
                                iv: res.iv,
                                wechat_qrcode: uni.getStorageSync('wechat_qrcode') || ''
                            }, '/api/mini_program/login')
                           .then(resTwo => {
                                this.$store.commit('changeUserInfo', resTwo.data.userinfo);
                                if (resTwo.data.userinfo.mobile) {
                                    this.navigateBasedOnPath();
                                } else {
                                    uni.setStorageSync('token1', resTwo.data.userinfo.token);
                                    this.$refs.popup.open('bottom');
                                }
                            })
                           .catch(error => {
                                console.error('登录失败:', error);
                                uni.showToast({
                                    title: '登录失败，请稍后重试',
                                    icon: 'none'
                                });
                            });
                        },
                        fail: (err) => {
                            console.error('获取用户信息失败:', err);
                            uni.showToast({
                                title: '获取用户信息失败，请稍后重试',
                                icon: 'none'
                            });
                        }
                    });
                },
                fail: (err) => {
                    console.error('微信登录失败:', err);
                    uni.showToast({
                        title: '微信登录失败，请稍后重试',
                        icon: 'none'
                    });
                }
            });
        },
        // 根据路径进行导航
        navigateBasedOnPath() {
            if (this.$store.state.user.toPath.includes('user/user')) {
                uni.switchTab({
                    url: this.$store.state.user.toPath
                });
            } else {
                uni.navigateBack({});
            }
        }
    },
};
</script>

<style scoped lang="scss">
// 整体容器
.content {
	min-height: 100vh;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	position: relative;
}

// 顶部导航栏
.search-header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	text-align: center;
	z-index: 99;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	
	.title {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
		letter-spacing: 1rpx;
	}
	
	.subtitle {
		font-size: 24rpx;
		color: #7f8c8d;
		margin-top: 4rpx;
	}
}

// 主要内容区域
.main-content {
	padding: 120rpx 40rpx 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: calc(100vh - 120rpx);
}

// 权限申请卡片
.permission-card {
	background: white;
	border-radius: 24rpx;
	padding: 60rpx 40rpx;
	margin-bottom: 60rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	text-align: center;
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 8rpx;
		background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
		border-radius: 24rpx 24rpx 0 0;
	}
}

// 应用图标
.app-icon {
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 24rpx;
	margin: 0 auto 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
	
	.icon-text {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
}

// 权限申请文字
.login-tip {
	font-size: 32rpx;
	color: #2c3e50;
	margin-bottom: 16rpx;
	font-weight: 500;
}

.login-tip2 {
	font-size: 48rpx;
	color: #2c3e50;
	margin-bottom: 40rpx;
	font-weight: 600;
}

// 权限详情框
.login-tip-box {
	background: #f8f9fa;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-top: 32rpx;
	border-left: 6rpx solid #667eea;
}

.permission-item {
	display: flex;
	align-items: flex-start;
	gap: 16rpx;
	
	.permission-icon {
		font-size: 32rpx;
		line-height: 1;
		margin-top: 4rpx;
	}
	
	.permission-text {
		font-size: 28rpx;
		color: #5a6c7d;
		line-height: 1.6;
		flex: 1;
	}
}

// 按钮容器
.btn-container {
	margin-top: auto;
}

// 按钮组
.btn-box {
	display: flex;
	gap: 24rpx;
	margin-bottom: 40rpx;
	
	button {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		border: none;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		
		&::after {
			border: none;
		}
	}
	
	.cancel-btn {
		background: #f8f9fa;
		color: #6c757d;
		border: 2rpx solid #e9ecef;
		
		&:active {
			background: #e9ecef;
			transform: scale(0.98);
		}
	}
	
	.confirm-btn {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.4);
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
		}
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
			transition: left 0.5s;
		}
		
		&:active::before {
			left: 100%;
		}
	}
}

// 协议同意区域
.agreement-box {
	display: flex;
	justify-content: center;
	align-items: center;
	
	.agreement-label {
		display: flex;
		align-items: center;
		gap: 12rpx;
		cursor: pointer;
	}
	
	.agreement-radio {
		transform: scale(0.8);
		margin: 0;
	}
	
	.agreement-text {
		font-size: 26rpx;
		color: #6c757d;
	}
	
	.agreement-link {
		font-size: 26rpx;
		color: #667eea;
		text-decoration: underline;
		margin-left: 8rpx;
		
		&:active {
			color: #5a67d8;
		}
	}
}

// 手机号授权弹窗
.phone-auth-popup {
	padding: 60rpx 40rpx;
	text-align: center;
	border-radius: 24rpx 24rpx 0 0;
	
	.popup-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 24rpx;
	}
	
	.popup-desc {
		font-size: 28rpx;
		color: #6c757d;
		line-height: 1.6;
		margin-bottom: 60rpx;
	}
	
	.phone-auth-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border: none;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.4);
		transition: all 0.3s ease;
		
		&::after {
			border: none;
		}
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
		}
	}
}
</style>