<route lang="jsonc" type="page">{
    "layout": "default",
    "style": {
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#fff"
    }
}</route>

<template>
    <view>
        <wd-popup v-model="showBindMobilePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
            <view class="relative pt-54rpx pb-74rpx">
                <view class="text-[#303133] text-36rpx leading-46rpx text-center">绑定手机号码</view>
				<view class="flex justify-center items-center mt-78rpx">
			        <wd-button type="text" open-type="getPhoneNumber" @getphonenumber="Login.handleBindMobile" custom-class="!p-0 !m-0 !bg-[#4C9F44] !h-90rpx !leading-90rpx !w-630rpx !text-[#fff] !rounded-8rpx">
                        一键绑定
                    </wd-button>
				</view>
            </view>
        </wd-popup>

        <view class="mx-48rpx mt-50rpx">
            <view class="text-[#303133] text-40rpx leading-56rpx">
                <text class="font-400 mr-24rpx">欢迎使用</text>
                <text class="font-700">茶址</text>
            </view>
            <view class="font-400 text-26rpx leading-36rpx text-[#606266] mt-20rpx">登录后可进行茶室预约，开启您的专属茶席</view>
        </view>
        <view class="mt-176rpx w-162rpx h-160rpx mx-auto">
            <wd-img :src="`${OSS}images/logo.png`" width="100%" height="100%" mode="aspectFill"></wd-img>
        </view>
        <view class="mt-124rpx mx-60rpx box-border">
            <wd-button custom-class="!bg-[#4C9F44] !rounded-8rpx !text-[#fff] !text-30rpx !leading-42rpx !h-90rpx !w-[100%] box-border" @click="Login.handleLogin">立即登录</wd-button>
            <wd-button 
                v-if="env === 'development'"
                custom-class="!bg-[#4C9F44] !rounded-8rpx !text-[#fff] !text-30rpx !leading-42rpx !h-90rpx !w-[100%] box-border" 
                @click="Login.handleMobileLogin">
                测试-账号登录
            </wd-button> 
            <!-- <wd-button open-type="getUserInfo" @getuserinfo="Login.handleWxLogin" custom-class="!bg-[#4C9F44] !rounded-8rpx !text-[#fff] !text-30rpx !leading-42rpx !h-90rpx !w-[100%] box-border">立即登录</wd-button> -->
            <!-- <view class="text-30rpx font-400 text-[#303133] leading-42rpx text-center mt-32rpx">其它手机号登录</view> -->
        </view>

        <view class="flex items-center mx-32rpx mt-64rpx">
            <view class="w-32rpx h-32rpx">
                <wd-checkbox v-model="agree" @change="Login.handleAgree" checked-color="#4C9F44" size="large"> </wd-checkbox>
            </view>
            <view class="font-400 text-26rpx leading-40rpx text-[#8F959E] ml-14rpx flex-1" @click="agree = !agree">
                我已阅读并同意 <text class="text-[#4C9F44]" @click.stop="Login.handleToService">《服务协议》</text> 和<text class="text-[#4C9F44]" @click.stop="Login.handleToPrivacy">《隐私政策》</text>，未注册手机号登录后将自动你为您创建账号
            </view>
        </view>
    </view>
</template>


<script lang="ts" setup>
	import { toast } from '@/utils/toast'
    import { getWxCode } from '@/api/login'
	import { useUserStore } from '@/store'
    import { router } from '@/utils/tools'
	import { getMobileByMnp } from '@/api/user'

    const OSS = inject('OSS')
    const env = import.meta.env.VITE_NODE_ENV 

    // 服务协议条款
    const agree = ref<boolean>(false)

    const redirectUrl = ref<string>('')
    const redirectParams = ref<string>('')

    // 绑定手机号码popup
    const showBindMobilePopup = ref<boolean>(false)

    onLoad((args) => {
        redirectUrl.value = args.redirect || ''
    })

    const Login = {
        // 获取手机号
        handleLogin: async (e: object) => {
            if (!agree.value) {
                toast.info('请同意服务协议和隐私政策')
                return
            }
            
            uni.showLoading({
                title: '登录中...',
                mask: true
            })
            try {
                const userStore = useUserStore()
                const res = await userStore.wxLogin()
                console.log("🚀 ~ res:", res)
                uni.hideLoading()
                if (!res.mobile) {
                    showBindMobilePopup.value = true
                    return false
                }

                Login.handleToLogin()

                // Login.handleToLogin()
                // if (res) {
                //     const decoded = decodeURIComponent(redirectUrl.value)
                //     console.log("🚀 ~ decoded:", decoded)
                //     if (decoded == '/bundle/order/tea-room/order-detail') {
                //         const transferOrderParams = uni.getStorageSync('transferOrderParams')
                //         uni.$emit('transferOrder', transferOrderParams)
                //     }

                //     toast.info('登录成功')
                //     router.navigateBack(1, 500)
                // }
            } catch(error) {
                uni.hideLoading()
            }
        },

        /**
         * 一键授权绑定手机号码
         */
        handleBindMobile: async (e: any) => {
            uni.showLoading({ title: '绑定中...', mask: true })
            try {
                await getMobileByMnp(e.code)
                showBindMobilePopup.value = false

                // 手动设置登录状态
                const userStore = useUserStore()
                userStore.isLoggedIn = true

                uni.hideLoading()
                Login.handleToLogin()
            } catch(error) {
                uni.hideLoading()
            }
        },

        /**
         * 测试-账号登录
         */
        handleMobileLogin: async () => {
            const userStore = useUserStore()
            console.log("🚀 ~ userStore:", userStore)
            const res = await userStore.mobileLogin('15005837859', 1, 2)
            if (res) {
                uni.setStorageSync('latitude', '30.74744')
                uni.setStorageSync('longitude', '120.78483')
                toast.info('登录成功')
                router.navigateBack(1, 500)
            }
        },

        /**
         * 登录成功跳转页面
         */
        handleToLogin: () => {
            const decoded = decodeURIComponent(redirectUrl.value)
            console.log("🚀 ~ decoded:", decoded)
            if (decoded == '/bundle/order/tea-room/order-detail') {
                const transferOrderParams = uni.getStorageSync('transferOrderParams')
                uni.$emit('transferOrder', transferOrderParams)
            }

            toast.info('登录成功')
            router.navigateBack(1, 500)
        },

        handleAgree: async (e: any) => {
        },

        // 跳转到服务协议页面
        handleToService: () => {
            router.navigateTo('/pages/webview/webview?type=service')
        },

        // 跳转到隐私政策页面
        handleToPrivacy: () => {
            router.navigateTo('/pages/webview/webview?type=privacy')
        },
    }
</script>

<style lang="scss">
    page {
        background-color: #fff;
    }

    .service {
        :deep() {
            .wd-checkbox {
                display: flex;
                align-content: flex-start;
            }

            .wd-checkbox__label {
                margin-left: 6rpx;
            }
        }
    }
</style>
