<template>
	<view class="login-page" :style="{ paddingTop: statusBarHeight + 'px' }">
		<view class="brand-area">
			<view class="logo-icon">
				<text class="logo-symbol">✦</text>
			</view>
			<text class="app-name">Novalon 健身房</text>
			<text class="app-slogan">专业预约 · 科学训练</text>
		</view>

		<view class="login-btn-area">
			<button class="wechat-login-btn" @click="handleLogin">
				<text class="wechat-symbol">微</text>
				<text class="btn-text">微信一键登录</text>
			</button>

			<view class="agreement-row">
				<view class="checkbox-wrapper" @click="toggleAgree">
					<view class="checkbox" :class="{ checked: agreed }">
						<text v-if="agreed" class="check-mark">&#10003;</text>
					</view>
				</view>
				<text class="agreement-text">
					已阅读并同意
					<text class="link">《用户协议》</text>
					和
					<text class="link">《隐私政策》</text>
				</text>
			</view>
		</view>

		<view class="other-login">
			<text class="divider-text">其他登录方式</text>
			<view class="other-icons">
				<view class="other-item">
					<view class="other-icon-circle">
						<text class="other-symbol">&#9743;</text>
					</view>
					<text class="other-label">手机号</text>
				</view>
			</view>
		</view>

		<view class="footer-tip">
			<text>首次登录将自动注册账号</text>
		</view>
	</view>
</template>

<script>
	const authApi = require('../../api/auth')
	const store = require('../../store/index')

	export default {
		data() {
			return {
				statusBarHeight: 0,
				agreed: false,
				loading: false
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 20
			// 已登录则直接跳转首页
			if (store.isLoggedIn) {
				uni.switchTab({ url: '/pages/index/index' })
			}
		},
		methods: {
			toggleAgree() { this.agreed = !this.agreed },
			handleLogin() {
				if (!this.agreed) {
					uni.showToast({ title: '请先同意用户协议', icon: 'none' })
					return
				}
				if (this.loading) return
				this.loading = true

				// 微信小程序登录
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						authApi.miniappLogin(loginRes.code)
							.then((res) => {
								store.setLogin(res.accessToken, { memberId: res.memberId, isNewUser: res.isNewUser })
								uni.switchTab({ url: '/pages/index/index' })
							})
							.catch((err) => {
								console.error('登录失败:', err)
								uni.showToast({ title: '登录失败，请重试', icon: 'none' })
							})
							.finally(() => { this.loading = false })
					},
					fail: (err) => {
						console.error('wx.login 失败:', err)
						uni.showToast({ title: '获取微信授权失败', icon: 'none' })
						this.loading = false
					}
				})
				// #endif

				// #ifndef MP-WEIXIN
				// H5 / App 环境：使用模拟登录（开发调试）
				uni.showToast({ title: '非小程序环境，使用模拟登录', icon: 'none' })
				setTimeout(() => {
					store.setLogin('dev-token-' + Date.now(), { memberId: 1, isNewUser: false })
					uni.switchTab({ url: '/pages/index/index' })
					this.loading = false
				}, 500)
				// #endif
			}
		}
	}
</script>

<style scoped>
	.login-page { min-height: 100vh; background: #F5F7FA; display: flex; flex-direction: column; align-items: center; padding: 0 32px; overflow-x: hidden; }

	.brand-area { display: flex; flex-direction: column; align-items: center; margin-top: 60px; margin-bottom: 80px; }
	.logo-icon { width: 80px; height: 80px; background: rgba(0,230,118,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
	.logo-symbol { font-size: 36px; color: #00C853; }
	.app-name { font-size: 28px; font-weight: 700; color: #1E1E1E; letter-spacing: 1px; }
	.app-slogan { font-size: 14px; color: #7A7E84; margin-top: 8px; letter-spacing: 2px; }

	.login-btn-area { width: 100%; display: flex; flex-direction: column; align-items: center; }
	.wechat-login-btn { width: 100%; height: 52px; background: #00E676; border-radius: 40px; display: flex; align-items: center; justify-content: center; border: none; padding: 0; box-shadow: 0 4px 16px rgba(0,230,118,0.35); }
	.wechat-login-btn::after { border: none; }
	.wechat-symbol { font-size: 18px; font-weight: 700; color: #1A1A1A; margin-right: 8px; }
	.btn-text { font-size: 17px; font-weight: 700; color: #1A1A1A; }

	.agreement-row { display: flex; align-items: center; margin-top: 16px; }
	.checkbox-wrapper { margin-right: 6px; }
	.checkbox { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #BDBDBD; display: flex; align-items: center; justify-content: center; }
	.checkbox.checked { background: #00E676; border-color: #00E676; }
	.check-mark { font-size: 12px; color: #1A1A1A; font-weight: 700; }
	.agreement-text { font-size: 12px; color: #7A7E84; }
	.link { color: #00C853; }

	.other-login { margin-top: 60px; width: 100%; display: flex; flex-direction: column; align-items: center; }
	.divider-text { font-size: 13px; color: #BDBDBD; margin-bottom: 20px; }
	.other-icons { display: flex; }
	.other-item { display: flex; flex-direction: column; align-items: center; }
	.other-icon-circle { width: 48px; height: 48px; background: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
	.other-symbol { font-size: 22px; color: #7A7E84; }
	.other-label { font-size: 12px; color: #7A7E84; }

	.footer-tip { position: absolute; bottom: 60px; font-size: 12px; color: #BDBDBD; }
</style>
