<template>
  <n-space class="layout" :size="0" vertical>
    <Header />
    <n-layout has-sider>
      <SideBar v-if="menuMode === 'sidebar'" />
      <n-layout>
        <Tags v-if="tagsMenuSetting.show" />
        <n-layout class="layout__content" :class="{'layout__content--fix': tagsMenuSetting.fixed, 'hidden-tags': !tagsMenuSetting.show }">
          <router-view />
        </n-layout>
      </n-layout>
    </n-layout>
    <!-- <div class="right_img">copyright©2022拓恒技术有限公司</div> -->
  </n-space>
</template>

<script setup>
// import { reactive } from 'vue'
import Header from './components/Header/index.vue'
import SideBar from './components/Sidebar/index.vue'
import Tags from './components/Tags/index.vue'
import { useSettingStore } from '@/store/modules/setting.js'
import { computed } from 'vue'
const settingStore = useSettingStore()
const menuMode = computed(() => settingStore.getMenuMode)
const tagsMenuSetting = computed(() => settingStore.getTagsMenuSetting)

</script>

<style lang="scss" scoped>
.layout {
  position: relative;
}
.layout__content--fix{
  padding-top: 44px;
  padding-left: 16px;
  &.hidden-tags{
    padding: 16px;
  }
}
.right_img {
  font-size: 10px;
  color: rgba(129, 129, 129, 1);
  position: absolute;
  bottom: 10px;
  left: 50%;
}
</style>
