<script setup lang="ts">
import {useUserStore} from "@/store";
import {storeToRefs} from "pinia";

let store = useUserStore();
const {user, theme,isAdministrator} = storeToRefs(store);

function changeTheme(newTheme: string) {
    theme.value = newTheme;
    document.getElementById('app')!.className = newTheme + "-theme"
    document.documentElement.setAttribute('theme-mode', newTheme);
}

</script>

<template>
    <t-layout :class="{layout:true}">
        <t-header>
            <t-head-menu value="item1" height="120px">
                <template #logo>
                    <img style="width: 240px" class="logo"
                         :src="theme=='light'?'/src/assets/LOGO.png':'/src/assets/LOGO-dark.png'" alt="logo"/>
                </template>
                <div id="info-bar">
                    <div id="info">
                        <p>欢迎回来：{{ user }}</p>
                    </div>
                    <div id="identities">
                        <t-tag v-if="!isAdministrator" shape="round" theme="success" variant="light-outline" @click="isAdministrator = !isAdministrator">
                            <span>&nbsp &nbsp借阅者</span>
                        </t-tag>
                        <t-tag v-if="isAdministrator" shape="round" theme="primary" variant="light-outline" @click="isAdministrator = !isAdministrator">
                            <span>&nbsp &nbsp管理员</span>
                        </t-tag>
                    </div>
                </div>
                <template #operations>
                    <t-icon class="t-menu__operations-icon" :name="theme==='light'?'sunny':'moon'"
                            @click="changeTheme(theme==='light'?'dark':'light')"/>
                    <!--                    <a href="/#/base/homepage">-->
                    <!--                        <t-icon class="t-menu__operations-icon" name="home"/>-->
                    <!--                    </a>-->
                    <a href="/#/base/settings">
                        <t-icon class="t-menu__operations-icon" name="setting"/>
                    </a>
                    <a href="/#/login">
                        <t-icon class="t-menu__operations-icon" name="poweroff"/>
                    </a>
                </template>
            </t-head-menu>
        </t-header>
        <t-layout>
            <t-aside id="aside">
                <t-menu theme="light" default-value="homepage" style="margin-right: 50px">
                    <!--                    <t-menu-item value="homepage" :to="'/base/homepage'">-->
                    <!--                        <template #icon>-->
                    <!--                            <t-icon name="dashboard"/>-->
                    <!--                        </template>-->
                    <!--                        主页-->
                    <!--                    </t-menu-item>-->
                    <t-menu-item value="list" :to="'/base/list'">
                        <template #icon>
                            <t-icon name="search"/>
                        </template>
                        图书列表
                    </t-menu-item>
                    <t-menu-item value="reservation"
                                 :to="'/base/reservation'">
                        <template #icon>
                            <t-icon name="precise-monitor"/>
                        </template>
                        预定列表
                    </t-menu-item>
                    <t-menu-item value="record"
                                 :to="'/base/record'">
                        <template #icon>
                            <t-icon name="edit-1"/>
                        </template>
                        借阅记录
                    </t-menu-item>

                </t-menu>

            </t-aside>
            <div class="baseContent">
                <t-layout>

                    <t-content>
                        <router-view v-slot="{ Component }">
                            <transition name="fade" mode="out-in">
                                <component :is="Component"/>
                            </transition>
                        </router-view>
                    </t-content>

                    <t-footer style="text-align: center"> Copyright @ 2024-2024 AlexJR?. All Rights Reserved<br>由TDesign强力驱动
                    </t-footer>
                </t-layout>
            </div>
        </t-layout>
    </t-layout>
</template>

<style lang="less" scoped>
@import "@/index.less";

@basic-color: var(--basic-color);
#aside {
    border-top: 1px solid @basic-color;
}

.layout {
    height: calc(100vh - 56px);
}

#info-bar {
    * {
        display: inline;
    }

    width: 100%;
    text-align: right;
    padding-right: 40px;
}

#info {
    text-align: right;
    margin-right: 50px;
}

#identities {
    display: inline;
    width: 388px;

    * {
        margin-right: 5px;
        display: inline;
    }
}

.fade-leave-active,
.fade-enter-active {
    transition: opacity @anim-duration-slow @anim-time-fn-easing;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.baseContent {
    height: calc(100vh - 56px);
    width: 100%;
    overflow: auto;
}

/* 设置滚动条的宽度和高度 */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* 设置滚动条的背景色 */
::-webkit-scrollbar-track {
    background: @basic-color;
}

/* 设置滚动条滑块的颜色 */
::-webkit-scrollbar-thumb {
    background: #777;
    border-radius: 6px;
}

/* 设置滚动条滑块在悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
</style>