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

        <el-container class="content-wrapper" style="height: 100%;" :style="{ marginTop: fixedHeader ? '50px' : 0 }">
            <el-main class="ab-p-0 main-wrapper" >
                <div :class="{ 'fixed-tags': fixedTags && showTagsView }">
                    <tags-view v-if="showTagsView" />
                </div>
                <app-main style="width: 100%;padding-left: 10px;padding-right: 10px;"/>
                <el-backtop target=".content-wrapper .main-wrapper" :right="30" :bottom="5" :visibility-height="50" />
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Header from "./components/Header/index.vue";
import AppMain from "./components/AppMain.vue";
import TagsView from "./components/TagsView/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);



</script>

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

.fixed-tags {
    width: 100%;
    position: fixed;
    top: 50px;
    z-index: 100;
}

.el-main {
    height: calc(100vh - 64px);
}
</style>