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

    const mediaUrl = ref('')
    const seconds = ref(4)
    let timer = null
    onLoad(() => {
        getServiceItems()
    })
    onMounted(() => {
        countdown()
    })
    onUnmounted(() => {
        clearTimerInterval()
    })
    function clearTimerInterval() {
        clearInterval(timer)
    }
    function getServiceItems() {
        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)
    }
    function navigateToLogin() {
        uni.redirectTo({
            url: '/pages/login/login',
        })
    }
</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>
