<script setup lang="ts">
definePageMeta({
    layout: 'home',
    pageTransition: {
        name: 'slide',
        mode: 'out-in',
    },
})
// 菜单数据
const menuList = ref([]);
// 菜单折叠
const menuCollapseStatus = ref(true)
// blog信息弹窗状态
const blogInfoPopupStatus = ref(false)
const blogInfoPopupStatus2 = ref(false)

const getMenuListFetch = async () => {
    const { data, pending, error } = await useFetch('/api/blog/blogMenu');
    if (error.value) {
        consola.error('数据获取失败:', error.value);
    }
    menuList.value = data.value?.filter(i => i.pid === '0')
}
const sendMessage = async () => {
    // nMessage.success('??')
}
const handleCloseBefore = (s) => {
    consola.info('要关闭啦', s)
}

const loading = ref(false)

setTimeout(() => {
    loading.value = true
}, 5000)

// SSR运行
await getMenuListFetch()
onMounted(() => {
    consola.log(menuList.value)

})
</script>

<template>
    <div class="homeBlog">
        <ResizeContent class="left" :class="!menuCollapseStatus && 'menuCollapse'">
            <div class="blogMenuContainer">
                <header class="contentBox">
                    <div class="title">博客目录</div>
                    <div class="bar add star-blogIconFont awaitShow a11 allCenter">&#xe608;</div>
                    <div class="bar star-blogIconFont awaitShow a11 allCenter" @click="menuCollapseStatus = !menuCollapseStatus">&#xe67f;</div>
                </header>
                <div class="line"/>
                <div class="blogMenuContent">
                    <div class="contentBox blogMenuItem" v-for="(item, index) in menuList" :key="item.id">
                        <div class="addIcon star-blogIconFont  a11 allCenter">&#xe608;</div>
                        <div class="text oneLineOverMore">{{item.name}}</div>
                        <div class="barBox" :class="item.pid === '0' && 'awaistShows'">
                            <div class="star-blogIconFont bar a11 allCenter">&#xe608;</div>
                            <div class="star-blogIconFont bar a11 allCenter">&#xe73a;</div>
                        </div>
                    </div>
                </div>
                <footer></footer>
            </div>
        </ResizeContent>
        <div class="main">
            <header>
                <div class="menuCollapse a11 allCenter point" :class="menuCollapseStatus && 'hide'">
                    <div class="star-blogIconFont" @click="menuCollapseStatus = !menuCollapseStatus">&#xe67f;</div>
                </div>
            </header>
            <main>
                <div @click="blogInfoPopupStatus = !blogInfoPopupStatus">点击</div>
                <div>默认</div>
                <div>
                    <NiButton>默认按钮</NiButton>
                    <NiButton type="tertiary">tertiary按钮</NiButton>
                    <NiButton loading type="primary">primary按钮</NiButton>
                    <NiButton strong type="info">info按钮</NiButton>
                    <NiButton loading type="success">success按钮</NiButton>
                    <NiButton type="warning">warning按钮</NiButton>
                    <NiButton type="error">error按钮</NiButton>
                </div>
                <div>grade 虚线边框</div>
                <div>
                    <NiButton>默认按钮</NiButton>
                    <NiButton grade="dotted" type="tertiary">tertiary按钮</NiButton>
                    <NiButton grade="dotted" loading type="primary">primary按钮</NiButton>
                    <NiButton grade="dotted" strong type="info">info按钮</NiButton>
                    <NiButton grade="dotted" loading type="success">success按钮</NiButton>
                    <NiButton grade="dotted" type="warning">warning按钮</NiButton>
                    <NiButton grade="dotted" type="error">error按钮</NiButton>
                </div>
                <div>grade 浅色</div>
                <div>
                    <NiButton>默认按钮</NiButton>
                    <NiButton grade="light" type="tertiary">tertiary按钮</NiButton>
                    <NiButton grade="light" loading type="primary">primary按钮</NiButton>
                    <NiButton grade="light" strong type="info">info按钮</NiButton>
                    <NiButton grade="light" loading type="success">success按钮</NiButton>
                    <NiButton grade="light" type="warning">warning按钮</NiButton>
                    <NiButton grade="light" type="error">error按钮</NiButton>
                </div>
                <div>grade halfTransparent</div>
                <div>
                    <NiButton>默认按钮</NiButton>
                    <NiButton grade="halfTransparent" type="tertiary">tertiary按钮</NiButton>
                    <NiButton grade="halfTransparent" loading type="primary">primary按钮</NiButton>
                    <NiButton grade="halfTransparent" strong type="info">info按钮</NiButton>
                    <NiButton grade="halfTransparent" loading type="success">success按钮</NiButton>
                    <NiButton grade="halfTransparent" type="warning">warning按钮</NiButton>
                    <NiButton grade="halfTransparent" type="error">error按钮</NiButton>
                </div>
                <div>grade Transparent</div>
                <div>
                    <NiButton>默认按钮</NiButton>
                    <NiButton grade="transparent" type="tertiary">tertiary按钮</NiButton>
                    <NiButton grade="transparent" loading type="primary">primary按钮</NiButton>
                    <NiButton grade="transparent" strong type="info">info按钮</NiButton>
                    <NiButton grade="transparent" loading type="success">success按钮</NiButton>
                    <NiButton grade="transparent" type="warning">warning按钮</NiButton>
                    <NiButton grade="transparent" type="error">error按钮</NiButton>
                </div>
                <div>disable</div>
                <div>
                    <NiButton>默认按钮</NiButton>
                    <NiButton disabled type="tertiary">tertiary按钮</NiButton>
                    <NiButton disabled type="primary">primary按钮</NiButton>
                    <NiButton loading disabled type="info">info按钮</NiButton>
                    <NiButton disabled type="success">success按钮</NiButton>
                    <NiButton disabled type="warning">warning按钮</NiButton>
                    <NiButton disabled type="error">error按钮</NiButton>
                </div>
                <div>半圆角</div>
                <div>
                    <NiButton>默认按钮</NiButton>
                    <NiButton angle="round" type="tertiary">tertiary按钮</NiButton>
                    <NiButton angle="round" type="primary">primary按钮</NiButton>
                    <NiButton :loading="loading" angle="round" type="info">info按钮</NiButton>
                    <NiButton angle="round" type="success">success按钮</NiButton>
                    <NiButton angle="round" type="warning">warning按钮</NiButton>
                    <NiButton angle="round" type="error">error按钮</NiButton>
                </div>
                <div>圆角</div>
                <div>
                    <NiButton>A</NiButton>
                    <NiButton angle="circle" type="tertiary">B</NiButton>
                    <NiButton angle="circle" type="primary">C</NiButton>
                    <NiButton :loading="loading" angle="circle" type="info">D</NiButton>
                    <NiButton loading angle="circle" type="success">E</NiButton>
                    <NiButton loading angle="circle" type="warning">F</NiButton>
                    <NiButton angle="circle" type="error">G</NiButton>
                </div>

            </main>
        </div>
        <div class="right"></div>
        <NiPopup v-model:status="blogInfoPopupStatus" width="900" @handleClose="handleCloseBefore">
            <div @click="blogInfoPopupStatus2 = true">关闭</div>
            <template #footer>
                关闭
            </template>
        </NiPopup>
        <NiPopup v-model:status="blogInfoPopupStatus2">
            <div @click="blogInfoPopupStatus2 = false">
            </div>
        </NiPopup>
    </div>
</template>

<style scoped lang="scss">
.homeBlog {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    & > div{
        position: relative;
        height: 100%;
        overflow: auto;
    }
    & > div.left{
        flex-shrink: 0;
        overflow: hidden;
        background: var(--blog-menu-background-color);
        border-right: 1px solid var(--bg-color-be);
        transition: width .3s ease-in-out;
        &.menuCollapse{
            width: 0;
        }
        .bar{
            position: relative;
            flex-shrink: 0;
            height: 100%;
            font-size: 1rem;
            opacity: 0;
            color: var(--font-color-top3-h2);
            transform: rotate(180deg);
            transition: color .3s, opacity .3s, background-color .3s;
            border-radius: .25rem;
            &:hover{
                background-color: #00000015;
            }
        }
        .awaitShow{
            height: 0;
            width: 0;
            opacity: 0;
            transition: opacity .3s;
            overflow: hidden;
        }
        &:hover{
            .awaitShow{
                height: 100%;
                width: auto;
                opacity: 1;
            }
        }
        .blogMenuContainer{
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: .5rem;
            & > *{
                position: relative;
                width: 100%;
            }


            & > header{
                flex-shrink: 0;
                display: flex;
                width: 100%;

                & > div.title{
                    position: relative;
                    flex: 1;
                    color: var(--font-color-top3-h1);
                }

                & > div.bar{
                    &:last-child{
                        font-size: 1.3rem;
                    }
                    &:hover{
                        color: var(--font-color-top3-h1);
                        opacity: 1;
                    }
                }
            }
            & > footer{
                flex-shrink: 0;
            }
            & > div.line{
                position: relative;
                width: 100%;
                height: 1px;
                margin: 0.5rem auto;
                background-color: var(--bg-color-be);
            }
            & > div.blogMenuContent{
                position: relative;
                flex: 1;
                overflow: hidden;
                & > div.blogMenuItem{
                    position: relative;
                    font-size: 1rem;
                    display: flex;
                    & > div{
                        position: relative;
                    }
                    & > div.addIcon{
                        font-size: 1rem;
                        margin-right: .5rem;
                    }
                    & > div.text{
                        height: 100%;
                        flex: 1;
                        display: flex;
                        align-items: center;
                    }
                    & > div.barBox{
                        margin-left: .2rem;
                        height: 0;
                        width: 0;
                        opacity: 0;
                        display: flex;
                    }
                    &:hover div.barBox{
                        height: 100% !important;
                        width: auto !important;
                        opacity: 1 !important;
                        & > div.bar{
                            opacity: 1;
                        }
                    }
                }
            }
            .contentBox{
                position: relative;
                height: 2rem;
                box-sizing: border-box;
                padding: .2rem .5rem;
                border-radius: .25rem;
                color: var(--font-color-top3-h2);
                user-select: none;
                cursor: pointer;
                transition: background-color .3s;
                &:hover{
                    background: var(--font-color-top3-hover);
                }
                &.active{
                    color: var(--font-color-top3-h1);
                    background: var(--font-color-top3-active);
                }

            }
        }
    }
    & > div.right{
        flex-shrink: 0;
    }
    & > div.main{
        flex: 1;
        & > header{
            position: relative;
            display: flex;
            height: 3rem;
            border-bottom: 1px solid var(--bg-color-be);

            & > div.menuCollapse{
                position: relative;
                height: 100%;
                transition: width .3s;
                width: 3rem;
                overflow: hidden;
                &:hover & > div{
                    color: var(--font-color-top3-h1);
                }
                &.hide{
                    width: 0;
                }

                & > div{
                    font-size: 1.3rem;
                    color: var(--font-color-top3-h2);
                    transition: color .5s, opacity .5s;
                }
            }
        }
    }
}
@media (max-width: 767px){

}
@media (min-width: 768px){

}
</style>
