<script setup lang="ts">
    // import { onMounted, onUnmounted, ref } from 'vue'
    import { getQueryByType } from '/@/api/model/dict'
    import { useUserStore } from '@/store/modules/user'

    const mediaUrl = ref('')
    const seconds = ref(4)
    let timer = null

    const userStore = useUserStore()
    const model = reactive({
        isLogin: false,
        show: false,
    })

    onLoad(async () => {
        try {
            await getServiceItems()
        } finally {
            // #ifdef APP-PLUS
            plus.navigator.closeSplashscreen()
            // #endif
        }
    })
    async function navigateToLogin() {
        // 检查是否有 token
        const token = userStore.getToken
        if (token) {
            model.isLogin = true
        }

        try {
            if (model.isLogin) {
                // 刷新用户信息
                await userStore.refreshUserInfo()

                // 跳转到登录页
                goHome()
                Message.toast(`欢迎回来~`)
            } else {
                // 跳转到登录页
                toLogin()
            }
        } catch (error) {
            // 跳转到登录页
            toLogin()
        }
    }

    /**
     * 跳转到门户页
     */
    function goHome() {
        uni.reLaunch({
            url: '/pages/shouye/shouye',
        })
    }

    /**
     * 跳转到登录页
     */
    function toLogin() {
        uni.reLaunch({
            url: '/pages/login/login',
        })
    }

    onMounted(() => {
        countdown()
    })

    onUnmounted(() => {
        clearTimerInterval()
    })

    function clearTimerInterval() {
        clearInterval(timer)
    }
    function getServiceItems() {
        return getQueryByType({ type: 2 }).then((res) => {
            mediaUrl.value = res[0].mediaUrl
        })
    }
    function countdown() {
        timer = setInterval(() => {
            if (seconds.value > 0) {
                seconds.value -= 1
            } else {
                clearTimerInterval()
                navigateToLogin()
            }
        }, 1000)
    }
</script>

<template>
    <view class="container">
        <image class="splash_bg" :src="mediaUrl" mode="aspectFill" />
        <!-- <view class="middle_logo_content">
		<view class="logo_view">
			<image class="splash_logo" src="/static/images/home/icon.png" />
		</view>
		<image class="logo_text_bg" src="/static/images/splash/logo_text.png"></image>
		<image class="server_text_bg" src="/static/images/splash/server_text.png"></image>
		<image class="outline_bg" src="/static/images/splash/outline.png"></image>
	</view> -->

        <view class="countdown_view">
            <image class="shadow_img" src="/static/images/splash/shadow.png" />
            <view class="countdown_val"
                ><text>{{ seconds }}s</text></view
            >
        </view>

        <view class="under_btn_view">
            <fui-button
                height="80rpx"
                background="linear-gradient(233.81deg, rgba(92, 181, 110, 1) 0%, rgba(100, 214, 62, 1) 100%)"
                size="28rpx"
                radius="40rpx"
                text="立即体验"
                @click="navigateToLogin"
            />
        </view>
    </view>
</template>

<style lang="less" scoped>
    .container {
        height: 100vh;
        width: 750rpx;
        position: relative;

        .splash_bg {
            width: 100%;
            height: 100vh;
        }

        .middle_logo_content {
            position: absolute;
            top: 250rpx;
            left: 0rpx;
            right: 0rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .logo_view {
                width: 136rpx;
                height: 136rpx;
                border-radius: 24rpx;
                background-color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;

                .splash_logo {
                    width: 110rpx;
                    height: 110rpx;
                }
            }

            .logo_text_bg {
                margin-top: 32rpx;
                width: 192rpx;
                height: 64rpx;
            }

            .server_text_bg {
                width: 528rpx;
                height: 116rpx;
            }

            .outline_bg {
                margin-top: -36rpx;
                width: 464rpx;
                height: 54rpx;
            }
        }

        .countdown_view {
            position: absolute;
            left: 612rpx;
            top: 118rpx;
            width: 108rpx;
            height: 52rpx;

            .shadow_img {
                width: 108rpx;
                height: 52rpx;
            }

            .countdown_val {
                width: 108rpx;
                height: 52rpx;
                position: absolute;
                left: 0rpx;
                top: 0rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 26rpx;
                color: #fff;
                font-weight: 400;
            }
        }

        .under_btn_view {
            width: 650rpx;
            position: absolute;
            bottom: 52rpx;
            left: 50rpx;
        }
    }
</style>
