<template>
	<uni-popup ref="loginRef" type="bottom" :safe-area="false" @maskClick="close">
		<view v-if="!showPhoneLogin" class="container">
			<text class="title">登录并认证后体验完整功能</text>
			<button class="cu-btn wx-btn text-white" @click="toLogin">
				<image src="/static/icons/wechat-white.png" mode="aspectFit" class="wx-icon"></image>
				微信一键登录</button>
			<button class="cu-btn phone-btn" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
				手机号快捷登录</button>
				
			<!-- <button class="cu-btn phone-btn" @click="toPhoneLogin">
				其他手机号登录</button> -->
			<view class="agreement-box">
				<checkbox-group @change="checkboxChange" class="checkbox-group">
					<checkbox value="1" :checked="isAgree" color="#19367A" class="checkbox" />
					<text class="agreement-text">我已阅读并同意</text>
					<text class="link" @click="toAgreement">《软件使用协议》</text>
				</checkbox-group>
			</view>
		</view>
		<view v-else class="page-content padding">
			<view class="flex-col">
				<view class="label">手机号码</view>
				<input v-model="form.username" maxlength="11" placeholder="手机号码" class="zd-input"></input>
			</view>
			<view class="flex-col">
				<view class="label">密码</view>
				<view class="zd-input flex align-center justify-between">
					<input v-model="form.password" placeholder="密码" maxlength="8" :password="!showPassword">

					</input>
					<text style="font-size: 40rpx;" :class="[showPassword ? 'cuIcon-unlock' : 'cuIcon-lock']"
						@click="changePassword"></text>
				</view>


			</view>
			<button class="cu-btn bg-zd btn" @click="submitForm">登录</button>
		</view>
	</uni-popup>
</template>

<script>
	import {
		getOpenId,
		getUserInfo,
		barLogin,
		phoneCodeLoginApi
	} from '@/api/login.js'
	import {
		getBarInfo
	} from '@/api/bar.js'
	export default {
		name: "loginPopup",
		data() {
			return {
				showPhoneLogin: false,
				form: {
					username: '',
					password: ''
				},
				showPassword: false,
				isAgree: false
			};
		},
		methods: {
			open() {
					// uni.hideTabBar({
					// 	fail() {	
					// 	}
					// })
				this.$refs.loginRef.open()
			},
			close() {
				this.$refs.loginRef.close()
				this.showPhoneLogin = false
				this.form = {
					username: '',
					password: ''
				}
				this.showPassword = false
				// uni.showTabBar()
			},
			
			// 微信登录
			toLogin() {
				if (!this.isAgree) {
					uni.showToast({
						title: '请先同意商家入驻协议',
						icon: 'none'
					})
					return
				}
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (loginRes) => {
						console.log(loginRes.code);
						if (loginRes.code) {
							uni.showLoading({
								mask: true
							})
							getOpenId(loginRes.code).then(res => {
								console.log(res.token)
								this.openId = res.openId
								if (res.token) {
									uni.setStorageSync('token', res.token)
									// 获取用户信息
									this.getUserInfoFun()
									this.getBarInfoFun()
									// 登录成功后立即关闭弹窗
									this.close()
								}
							})
						}
					}
				})
			},
			decryptPhoneNumber(e) {
				if (!this.isAgree) {
					uni.showToast({
						title: '请先同意商家入驻协议',
						icon: 'none'
					})
					return
				}
				
				if (!e.detail.code) {
					uni.showToast({
						title: '获取手机号失败，请重试',
						icon: 'none'
					})
					return
				}
				
				const data = { 
					code: e.detail.code
				}
				uni.showLoading()
				phoneCodeLoginApi(data).then(res=>{
					console.log(res,'22222')
					if (res.token) {
						uni.setStorageSync('token', res.token)
						// 获取用户信息
						this.getUserInfoFun()
						this.getBarInfoFun()
						// 登录成功后立即关闭弹窗
						this.close()
					}
				})
			},
			// 获取用户信息
			getUserInfoFun() {
				getUserInfo().then(res => {
					if (res.user && res.user.barId) {
						this.userInfo = res.user
						uni.setStorageSync('userInfo', res.user)
						this.$emit('loginSuccess')
					} else {
						// 移除自动关闭弹窗的逻辑
						uni.showModal({
							title: '提示',
							content: '您还未认证门店，请先认证',
							showCancel: true,
							success: (res) => {
								if (res.confirm) {
									console.log('确定')
									uni.navigateTo({
										url: '/pages/index/registration?openId=' + this.openId
									})
								}
							}
						})
					}

					uni.hideLoading()
				})
			},
			toPhoneLogin() {
				this.showPhoneLogin = true
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			submitForm() {
				if (!this.form.username) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return
				}
				let reg = /^1[3456789]\d{9}$/
				if (!reg.test(this.form.username)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				if (!this.form.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '登录中'
				})
				barLogin(this.form).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('token', res.token)
						this.getUserInfoFun()
						this.getBarInfoFun()
					}
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},
			// 获取酒吧信息
			getBarInfoFun() {
				getBarInfo().then(res => {
					uni.setStorageSync('barInfo', res.data)
				})
			},
			// 协议勾选
			checkboxChange(e) {
				this.isAgree = e.detail.value.length > 0
			},
			// 跳转到协议页面
			toAgreement() {
				uni.navigateTo({
					url: '/pages/index/userAgreement'
				})
			},
			async handleLogin() {
				try {
					const result = await this.$http.post('/api/login', {
						code: this.code,
						userInfo: this.userInfo
					})
					
					// 保存登录信息，替换临时token
					uni.setStorageSync('token', result.data.token)
					uni.setStorageSync('userInfo', result.data.userInfo)
					
					this.$emit('login-success', result.data)
					this.close()
				} catch (error) {
					console.error('登录失败：', error)
					uni.showToast({
						title: '登录失败，请重试',
						icon: 'none'
					})
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		// height: 500rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 80rpx 32rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		
		.title {
			font-family: Roboto;
			font-size: 28rpx;
			font-weight: 500;
			color: #030303;
			margin-bottom: 92rpx;
		}
		
		.wx-btn {
			width: 100%;
			height: 88rpx;
			background-color: #4E63E0;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			margin-bottom: 46rpx;
			
			.wx-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}

		.phone-btn {
			width: 100%;
			height: 88rpx;
			background: #F2F2F2;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #030303;
			font-size: 28rpx;
			font-weight: 500;
			margin-bottom: 64rpx;
		}

		.sub-title {
			font-family: Roboto;
			font-size: 24rpx;
			font-weight: 500;
			color: #979797;
		}

		.agreement-box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
			
			.checkbox-group {
				display: flex;
				align-items: center;
				
				.checkbox {
					transform: scale(0.8);
					margin-right: 8rpx;
				}
				
				.agreement-text {
					font-size: 24rpx;
					color: #666666;
					margin-right: 4rpx;
				}
				
				.link {
					font-size: 24rpx;
					color: #19367A;
				}
			}
		}
	}
	.page-content {
		padding: 48rpx 32rpx;
		background-color: #ffffff;
		width: 100%;
	
		.label {
			color: #000;
			margin-bottom: 26rpx;
			font-size: 24rpx;
			font-weight: 500;
		}
	
		.zd-input {
			// width: 654rpx;
			height: 96rpx;
			border-radius: 16rpx;
			background-color: #FFF;
			padding: 0 30rpx;
			box-sizing: border-box;
			color: #000;
			margin-bottom: 56rpx;
			border: 1px solid #C8C8C8;
		}
	
		.btn {
			// width: 654rpx;
			width: 100%;
			height: 88rpx;
			border-radius: 12rpx;
			margin: 30rpx auto;
			color: #0B0E26;
			font-size: 28rpx;
			// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
		}
	}
</style>