<template>
    <div class="h-full bg-[#090A20] relative">
        <game />
        <div @click="enterMoments" class="enter-btn animate__tada animate__animated animate__infinite">
            <img src="@/assets/enter.png" alt="" />
        </div>

        <n-modal :show="show" @update:show="newValue => updateShow(newValue)" transform-origin="center">
            <div class="box flex flex-col" :style="{ height: boxHeight + 'px' }">
                <div class="top flex justify-between" :style="{ backgroundImage: `url(${topImg})` }">
                    <img src="@/assets/game/left-top.png" alt="" />
                    <img src="@/assets/game/right-top.png" alt="" />
                </div>
                <div class="content flex-1 flex overflow-hidden">
                    <div class="left" :style="{ backgroundImage: `url(${leftImg})` }"></div>
                    <div class="center flex-1 p-4 overflow-auto flex flex-col">
                        <div class="text1 text-black text-base font-semibold">{{ showInfo.name }}:</div>
                        <div class="text2 text-black mt-1 indent-8 text-sm">
                            {{ showInfo.describe }}
                        </div>
                        <div class="flex-1"></div>
                        <div class="flex justify-end mt-2">
                            <n-button color="#394466" size="small" @click="chat">看看他的动态</n-button>
                        </div>
                    </div>
                    <div class="right" :style="{ backgroundImage: `url(${rightImg})` }"></div>
                </div>
                <div class="bottom flex justify-between" :style="{ backgroundImage: `url(${bottomImg})` }">
                    <img src="@/assets/game/left-bottom.png" alt="" />
                    <img src="@/assets/game/right-bottom.png" alt="" />
                </div>
            </div>
        </n-modal>
    </div>
</template>
<script setup lang="ts">
import robot1Img from '@/assets/robot1.gif'
import Game from '@/components/game/Game.vue'
import { onMounted, ref } from 'vue'
import '@/styles/animate.css'
import { useUserStore } from '@/store'
import { useRouter } from 'vue-router'
import { NModal, NButton } from 'naive-ui'
import { emitter } from '@/plugins'
import topImg from '@/assets/game/top.png'
import bottomImg from '@/assets/game/bottom.png'
import leftImg from '@/assets/game/left.png'
import rightImg from '@/assets/game/right.png'

onMounted(() => {
    const splash = document.getElementById('splash-screen')
    if (splash) {
        splash.setAttribute('isHold', 'true')
        splash.style.opacity = '1'
        splash.style.display = 'block'
    }
})

const router = useRouter()
const userStore = useUserStore()
function enterMoments() {
    if (!userStore.userInfo.id) {
        router.push({ name: 'login' })
    } else {
        router.push({ name: 'moments' })
    }
}

const show = ref(false)
function updateShow(val: boolean) {
    show.value = val
}

const boxHeight = ref(32)

const showInfo = ref({
    id: 0,
    name: '',
    describe: ''
})
emitter.on('chooseRole', (info: any) => {
    boxHeight.value = 32
    updateShow(true)
    showInfo.value = info
    setTimeout(() => {
        boxHeight.value = 500
    }, 1000)
})

function chat() {
    if (!userStore.userInfo.id) {
        router.push({
            name: 'login',
            query: {
                angentId: showInfo.value.id
            }
        })
    } else {
        router.push({
            name: 'agent',
            query: {
                id: showInfo.value.id
            }
        })
    }
}
</script>

<style lang="less" scoped>
.page {
    width: 100vw;
    height: 100vh;
    position: relative;
}

#robot1 {
    position: absolute;
    right: 0;
}

.enter-btn {
    position: absolute;
    z-index: 20;
    bottom: 100px;
    left: 50%;
    margin-left: -50px;

    img {
        width: 100px;
    }
}

.box {
    width: 300px;
    max-height: 50vh;
    transition: height ease-in-out 1s;
    overflow: hidden;
    height: 500px;

    .top {
        background-repeat: repeat-x;
        background-size: contain;
        img {
            width: 16px;
            height: 16px;
        }
    }

    .bottom {
        background-repeat: repeat-x;
        background-size: contain;
        margin: 0 2px;
        img {
            width: 16px;
            height: 16px;
        }
    }

    .left,
    .right {
        width: 16px;
        background-repeat: repeat-y;
        background-size: contain;
    }

    .center {
        background-color: #ebd4aa;
    }
}
</style>
