<template>
	<view class="w-screen h-screen" :style="themeColor()">
		<view class="w-screen h-screen" :style="warpStyle">
			<!-- #ifdef MP-WEIXIN -->
			<view :style="{'height':headerHeight}">
				<top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header"/>
			</view>
			<!-- #endif -->
			<view class="mx-[var(--sidebar-m)] px-[var(--pad-sidebar-m)]">
				<view class="pt-[154rpx] flex justify-center">
					<view v-if="systemStore.site?.front_end_logo" class="h-[90rpx] w-[300rpx]">
						<image class="h-[90rpx] w-[300rpx]" :src="img(systemStore.site?.front_end_logo)" mode="aspectFit"/>
					</view>
					<view v-else-if="systemStore.site?.front_end_icon" class="h-[250rpx] w-[250rpx]">
						<image class="h-[250rpx] w-[250rpx]" :src="img(systemStore.site?.front_end_icon)" mode="aspectFit"/>
					</view>
					<view v-else class="h-[90rpx] w-[300rpx]"></view>
				</view>
				<view class="text-[var(--text-color-light6)]] text-[28rpx] text-center leading-[34rpx] min-h-[34rpx] mt-[40rpx]">{{ loginConfig.desc }}</view>
				<view class="mt-[181rpx]">

					<!-- #ifdef H5 -->
					<!-- 微信公众号快捷登录 -->
					<view v-if="isWeixinBrowser() && loginConfig.is_auth_register" class="w-full flex items-center justify-center mb-[40rpx]">
						<button class="w-[630rpx] h-[88rpx] !mx-[0] !bg-[var(--primary-color)] text-[26rpx] rounded-[44rpx] leading-[88rpx] font-500 !text-[#fff]" @click="oneClickLogin()">{{t('quickLoginOrLogout')}}</button>
					</view>
					<!-- #endif -->

					<!-- #ifdef MP-WEIXIN -->
					<!-- 微信小程序快捷登录 -->

					<!-- 优先显示第三方登录/注册 -->
					<view class="w-full flex items-center justify-center mb-[40rpx]" v-if="loginConfig.is_auth_register">

						<!-- 开启强制绑定手机号或者手机号登录的情况 -->
						<button v-if="!wapMemberMobile && loginConfig.is_bind_mobile"
						class="w-[630rpx] h-[88rpx] !bg-[var(--primary-color)] !mx-[0] text-[26rpx] rounded-[44rpx] leading-[88rpx] font-500 !text-[#fff]"
						:open-type="openType" @getphonenumber="mobileAuth" @click="checkWxPrivacy">{{t('quickLoginOrLogout')}}</button>

						<!-- 授权登录/注册 -->
						<button v-else class="w-[630rpx] h-[88rpx] !mx-[0] !bg-[var(--primary-color)] text-[26rpx] rounded-[44rpx] leading-[88rpx] font-500 !text-[#fff]" @click="oneClickLogin()">{{t('quickLoginOrLogout')}}</button>

					</view>

					<!-- 未开启第三方登录/注册，但是开启了手机号登录，则一键手机号登录/注册 -->
					<view class="w-full flex items-center justify-center mb-[40rpx]" v-else-if="!loginConfig.is_auth_register && loginConfig.is_mobile">
						<button v-if="!wapMemberMobile" class="w-[630rpx] h-[88rpx] !bg-[var(--primary-color)] !mx-[0] text-[26rpx] rounded-[44rpx] leading-[88rpx] font-500 !text-[#fff]" :open-type="openType" @getphonenumber="mobileAuth" @click="checkWxPrivacy">{{t('quickLoginOrLogout')}}</button>
						<button v-else class="w-[630rpx] h-[88rpx] !bg-[var(--primary-color)] !mx-[0] text-[26rpx] rounded-[44rpx] leading-[88rpx] font-500 !text-[#fff]" @click="oneClickLogin()">{{t('quickLoginOrLogout')}}</button>
					</view>

					<!-- 小程序隐私协议 -->
					<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>

					<!-- #endif -->

					<!-- 手机号登录 -->
					<view v-if="loginConfig.is_mobile" class="mb-[40rpx] w-full flex items-center justify-center">
						<!-- #ifdef H5 -->
						<button class="w-[630rpx] h-[88rpx] !mx-[0] !bg-[#fff] border-[var(--primary-color)] border-solid border-[2rpx] text-[26rpx] rounded-[44rpx] leading-[84rpx] !text-[var(--primary-color)]" @click="redirect({ url: '/app/pages/auth/login',param:{type:'mobile'}})">{{ t('mobileLogin') }}</button>
						<!-- #endif -->

						<!-- #ifdef MP-WEIXIN -->
						<button v-if="authRegisterLogin && loginConfig.is_mobile" class="w-[630rpx] h-[88rpx] !mx-[0] !bg-[#fff] border-[var(--primary-color)] border-solid border-[2rpx] text-[26rpx] rounded-[44rpx] leading-[84rpx] !text-[var(--primary-color)]" @click="redirect({ url: '/app/pages/auth/login',param:{type:'mobile'}})">{{ t('otherMobileLogin') }}</button>
						<button v-else class="w-[630rpx] h-[88rpx] !mx-[0] !bg-[#fff] border-[var(--primary-color)] border-solid border-[2rpx] text-[26rpx] rounded-[44rpx] leading-[84rpx] !text-[var(--primary-color)]" @click="redirect({ url: '/app/pages/auth/login',param:{type:'mobile'}})">{{ t('mobileLogin') }}</button>
						<!-- #endif -->
					</view>

					<view v-else-if="!loginConfig.is_mobile && loginConfig.is_username" class="w-full flex items-center justify-center">
						<button class="w-[630rpx] h-[88rpx] !mx-[0] !bg-[#fff] !border-[var(--primary-color)] border-solid border-[2rpx] text-[26rpx] rounded-[44rpx] leading-[84rpx] !text-[var(--primary-color)]" @click="redirect({ url: '/app/pages/auth/login',param:{type:'username'}})">{{t('accountLogin')}}</button>
					</view>
					<view v-if="loginConfig.agreement_show" class="w-full flex items-center justify-center mt-[28rpx]">
						<view  class="flex items-center justify-center mt-[28rpx] py-[14rpx] px-[50rpx]" @click.stop="agreeChange">
							<u-checkbox-group @change="agreeChange">
								<u-checkbox activeColor="var(--primary-color)" :checked="isAgree" shape="circle" size="30rpx"  />
							</u-checkbox-group>
							<view class="text-[24rpx] text-[var(--text-color-light6)] flex items-center flex-wrap leading-[30rpx]">
								<text>{{ t('agreeTips') }}</text>
								<text @click.stop="redirect({ url: '/app/pages/auth/agreement?key=privacy' })" class="text-primary">《{{t('privacyAgreement')}}》</text>
								<text>{{ t('and') }}</text>
								<text @click.stop="redirect({ url: '/app/pages/auth/agreement?key=service' })" class="text-primary">《{{t('userAgreement')}}》</text>
							</view>
						</view>
					</view>

					<view class="footer w-full" v-if="loginConfig.is_mobile && loginConfig.is_username">
						<view class="text-[26rpx] leading-[36rpx] text-[333] text-center mb-[30rpx] font-400">{{t('otherLogin')}}</view>
						<view class="flex justify-center">
							<view class="h-[80rpx] w-[80rpx] text-center leading-[78rpx] border-[2rpx] text-[#FF7100] rounded-[50%] border-solid border-[#ddd] nc-iconfont nc-icon-wodeV6mm3 text-[46rpx] overflow-hidden" @click="redirect({ url: '/app/pages/auth/login',param:{type:'username'}})"></view>
						</view>
						<view class="text-[24rpx] leading-[36rpx] text-[var(--text-color-light9)] text-center font-400 mt-[30rpx]">{{t('accountLogin')}}</view>
					</view>

				</view>
			</view>
		</view>
		<uni-popup ref="popupRef" type="dialog">
		    <view class="bg-[#fff] flex flex-col justify-between w-[600rpx] min-h-[280rpx] rounded-[var(--rounded-big)] box-border px-[35rpx] pt-[35rpx] pb-[8rpx] relative">
				<view class="flex justify-center">
					<text class="text-[33rpx] font-700"> 用户协议及隐私保护</text>
				</view>
		        <view class="flex items-center mb-[20rpx] mt-[20rpx] py-[20rpx]" @click.stop="agreeChange">
					<view class="text-[26rpx] text-[var(--text-color-light6)] flex items-center flex-wrap">
						<text>{{ t('agreeTips') }}</text>
						<text @click.stop="redirect({ url: '/app/pages/auth/agreement?key=privacy' })" class="text-primary">《{{t('privacyAgreement')}}》</text>
						<text>{{ t('and') }}</text>
						<text @click.stop="redirect({ url: '/app/pages/auth/agreement?key=service' })" class="text-primary">《{{t('userAgreement')}}》</text>
					</view>
		        </view>
				<view class="">
					<view class="w-[100%] flex justify-center bg-[var(--primary-color)] h-[70rpx] leading-[70rpx] text-[#fff] text-[26rpx] border-[0] font-500 rounded-[50rpx]"  @click="dialogConfirm">同意并登录</view>
					<view class="w-[100%] flex justify-center h-[70rpx] leading-[70rpx] text-[#999] text-[24rpx] border-[0] font-500 rounded-[50rpx]" @click="dialogClose">不同意</view>
				</view>
		    </view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed,nextTick } from 'vue'
	import { img,isWeixinBrowser,getToken,redirect,pxToRpx } from '@/utils/common'
	import { t } from '@/locale'
	import { useLogin } from '@/hooks/useLogin'
	import useConfigStore from '@/stores/config'
	import useMemberStore from '@/stores/member'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { topTabar } from '@/utils/topTabbar'
	import useSystemStore from '@/stores/system'
	
	let menuButtonInfo: any = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	/********* 自定义头部 - start ***********/
	const topTabarObj = topTabar()
	let param = topTabarObj.setTopTabbarParam({title:'',topStatusBar:{textColor: '#333'}})
	/********* 自定义头部 - end ***********/
	const headerHeight = computed(()=>{
		return Object.keys(menuButtonInfo).length ? pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8)+'rpx':'auto'
	})
	const wapMemberMobile = ref('');
	const isAgree = ref(false)

	const configStore = useConfigStore()
	const loginConfig = computed(() => {
		return configStore.login
	})
	const login = useLogin()

	const memberStore = useMemberStore()
	const memberInfo: any = computed(()=>{
		return useMemberStore().info;
	})
	const systemStore =useSystemStore()
	const openType: any = computed(()=>{
		if (!isAgree.value && configStore.login.agreement_show) return '';
		return 'getPhoneNumber';
	})

	const wxPrivacyPopupRef:any = ref(null)
	const authRegisterLogin: any = computed(()=> {
		return !configStore.login.is_auth_register;
	});
	const loginLoading = ref(false)
	
	const popupRef = ref()
	const dialogClose =()=>{
		popupRef.value.close();
	}
	const dialogConfirm =()=>{
		isAgree.value=true
		popupRef.value.close();
		oneClickLogin()
	}

	onLoad(async ()=> {
		await systemStore.getSiteInfoFn()
		await configStore.getLoginConfig()
		let normalLogin = !configStore.login.is_username && !configStore.login.is_mobile && !configStore.login.is_bind_mobile; // 未开启普通登录

		// #ifdef H5
		if (isWeixinBrowser()) {
			// 微信浏览器
			if (!getToken() && normalLogin && authRegisterLogin.value) {
				uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
				setTimeout(() => {
					redirect({ url: '/app/pages/index/index', mode: 'reLaunch' })
				}, 100)
			}
		} else {
			// 普通浏览器
			if (!getToken() && normalLogin) {
				uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
				setTimeout(() => {
					redirect({ url: '/app/pages/index/index', mode: 'reLaunch' })
				}, 100)
			}
		}
		// #endif

		// #ifdef MP
		if (!getToken() && normalLogin && authRegisterLogin.value) {
			uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
			setTimeout(() => {
				redirect({ url: '/app/pages/index/index', mode: 'reLaunch' })
			}, 100)
			return;
		}
		wapMemberMobile.value = uni.getStorageSync('wap_member_mobile');
		nextTick(() => {
			if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
		})

		// #endif
	})

	onShow(()=> {
		loginLoading.value = false;
	})

	const warpStyle = computed(()=>{
		var style = '';
		if(configStore.login.bg_url){
			style += 'background-image:url(' + img(configStore.login.bg_url) + ');';
			style += 'background-size: 100%;';
			style += 'background-position: top;';
			style += 'background-repeat: no-repeat;';
		}
		return style
	})

	// 检测是否同意小程序隐私协议和登录政策协议
	const checkWxPrivacy = ()=> {
		if (!isAgree.value && configStore.login.agreement_show) {
			popupRef.value.open();
			// uni.showToast({ title: t('isAgreeTips'), icon: 'none' })
			return true;
		}
		return false;
	}

	// 一键登录
	const oneClickLogin = (callback:any = null)=> {
		if (checkWxPrivacy()) return;

		if (loginLoading.value) return
		loginLoading.value = true

		if (!callback) {
			callback = () => {
				loginLoading.value = false
			}
		}

		// #ifdef H5
		wechatLogin();
		// #endif

		// 第三方平台自动登录
		// #ifdef MP
		weappLogin(callback)
		// #endif
	}

	// 微信公众登录
	const wechatLogin = ()=> {
		if (isWeixinBrowser()) {
		   login.getAuthCode({ scopes : 'snsapi_userinfo' })
			loginLoading.value = false
		}
	}

	// 微信小程序登录
	const weappLogin = (successCallback: any)=> {
		login.getAuthCode({ backFlag: true, successCallback })
	}

	const agreeChange = () => {
		isAgree.value = !isAgree.value
	}

	const mobileAuth = (e: any) => {
		if (e.detail.errMsg == 'getPhoneNumber:ok') {
			oneClickLogin((data: any) => {
				if (!data.mobile) {
					memberStore.bindMobile(e);
				} else {
					uni.setStorageSync('wap_member_mobile', memberInfo.value.mobile) // 存储会员手机号，防止重复请求微信获取手机号接口
				}
				loginLoading.value = false
			});
		}

		if (e.detail.errno == 104) {
			let msg = '用户未授权隐私权限';
			uni.showToast({ title: msg, icon: 'none' })
		}
		if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
			let msg = '用户拒绝获取手机号码';
			uni.showToast({ title: msg, icon: 'none' })
		}
	}
</script>

<style lang="scss" scoped>
	.footer{
		margin-top:200rpx;
		padding-bottom:calc(151rpx + constant(safe-area-inset-bottom));
		padding-bottom:calc(151rpx + env(safe-area-inset-bottom));
	}
	:deep(.u-checkbox){
		margin:0 !important;
	}
</style>