<template>
    <div id="main" class="main" @click="playBackgound" @contextmenu.prevent="playBackgound">
        <div class="infomation">
            <Message />
        </div>
        <Menu />
        <!-- <Healthy /> -->
    </div>
    <EquipTips />
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
// import Healthy from "./user-status/healthy.vue";
// import UserItem from "./user-item";
import Message from "./message";
import Menu from "./menu.vue";
import { EquipTips } from "@/components";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const playFlag = ref(false);

const playBackgound = () => {
    if (playFlag.value) {
        dispatch('play_music', 'backgound')
        playFlag.value = true;
    }
}

onMounted(() => {
});
</script>
<style lang="scss" scoped>
* {
    box-sizing: border-box;
    user-select: none;
}

.main {
    background: #111;
    box-sizing: border-box;
    margin: 0;
    padding: 0.5rem;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: #eee;
    height: 100%;
}

.infomation {
    height: calc(100% - 1rem);
    width: 52.5rem;
    position: absolute;
}
</style>