<template>
    <el-container style="height: 100%;background-color: #071635;">
        <el-header :class="{ 'fixed-header': true }"
            :style="`background-color:${settingsStore.currentLayoutColor.navrbarBackgroundColor}`" height="64px">
            <Header></Header>
        </el-header>

        <el-container class="app-main-content-container" :style="{ marginTop: fixedHeader ? '64px' : 0 }">
            <Transition name="aside">
                <el-aside v-show="appStore.sidebar.moduleNumber>1" :width="appStore.sidebar.opened ? sideBarConfig.sideBarWidth : sideBarConfig.sideBarHideWidth">
                    <Sidebar />
                </el-aside>
            </Transition>
            <el-main class="main-wrapper" style="overflow:inherit;width: 80%;">
                <!-- <div :class="{ 'fixed-tags': fixedTags && showTagsView }" :style="{width: fixedTags && showTagsView ? `calc(100% - ${appStore.sidebar.opened ? '248px' : '96px'})` : ''}"> -->
                <div :class="{ 'fixed-tags': fixedTags && showTagsView }" :style="{width: tagsViewWidth}">
                    <tags-view v-if="showTagsView" />
                </div>
                <app-main style="width: 100%;" />
                <el-backtop target=".app-main-content-container .main-wrapper" :right="30" :bottom="5" :visibility-height="50" />
            </el-main>
        </el-container>
        <WebsiteInfo></WebsiteInfo>
    </el-container>
    
</template>

<script setup lang="ts">
import { computed } from 'vue'
import sideBarConfig from '@/framework/styles/variables.module.scss'
import Header from "./components/Header/index.vue";
import Sidebar from "./components/Sidebar/index.vue";
import AppMain from "./components/AppMain.vue";
import TagsView from "./components/TagsView/index.vue";
import WebsiteInfo from "@/framework/layoutpublic/WebsiteInfo/index.vue"
import { useSettingsStore } from "@/framework/store/modules/settings";


const settingsStore = useSettingsStore();
const showTagsView = computed(() => settingsStore.tagsView);
const fixedHeader = computed(() => settingsStore.fixedHeader);
const fixedTags = computed(() => settingsStore.fixedTags);

import { useAppStore } from "@/framework/store/modules/app";
const appStore = useAppStore()

const tagsViewWidth = computed(() => {
    if(fixedTags && showTagsView){
        if(appStore.sidebar.opened){
            if(appStore.sidebar.moduleNumber>1){
                return 'calc(100% - 248px)'
            }
            return 'calc(100% - 32px)'
        }
        return 'calc(100% - 96px)'
    }
    return ''
})

</script>

<style scoped lang="scss">
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
}

.fixed-tags {
    // width: calc(100% - $sideBarWidth - 32px);
    position: fixed;
    top: 80px;
    z-index: 100;
    background-color: #f4f4f4;
}

.el-main {
    // height: calc(100vh - 64px);
    padding: 0;
}

.app-main-content-container{
    padding: 16px 12px;
    background-color: #F4f4f4;

    display: flex;

    .main-wrapper{
        flex: 1;
        margin-left: 8px;
        background-color: #F4f4f4;
    }
}

.aside-enter-active,
.aside-leave-active {
    transition: all 0.3s ease-out;
}

.aside-enter-from,
.aside-leave-to {
    transform: translateX(-100px);
    opacity: 0;
}
</style>