<!--
 * @Description  :
 * @Autor        : cl
 * @Date         : 2025-04-11 20:20:26
-->
<template>
  <div
    :class="classObj"
    class="Tmerclub app-wrapper"
  >
    <div :class="{'fixed-header':fixedHeader}">
      <Navbar v-if="isDecorate" />
    </div>
    <Sidebar
      v-if="isDecorate"
      class="sidebar-container"
    />
    <div
      :class="{'main-container': isDecorate}"
      :style="isDashboard ? {'margin-top': '20px'} : ''"
    >
      <AppMain />
    </div>
  </div>
</template>

<script setup>
import AppMain from './components/AppMain.vue'
import Navbar from './components/Navbar.vue'
import Sidebar from './components/sidebar/index.vue'
const appStore = useAppStore()
const fixedHeader = ref(true)
const classObj = computed(() => {
  return {
    withoutAnimation: appStore.sidebar.withoutAnimation,
    hideSidebar: !appStore.sidebar.opened
  }
})

const route = useRoute()
const isDecorate = !(route.path === '/multishop-decorate/decorate-create-edit' || route.path === '/multishop-feature/feature-create-edit' || route.path === '/multishop-decorate/decorate-select-decorate')
const isDashboard = computed(() => route.path === '/dashboard')

</script>

<style lang="scss" scoped>
@import "@/styles/mixin.scss";
@import "@/styles/variables.scss";

.app-wrapper {
  //@include clearfix;
  position: relative;
  width: 100%;
  height: 100%;
  background: #f9f9f9;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.mobile .fixed-header {
  z-index: 999;
  width: 100%;
}

// 弹框 全局头部样式
:deep(.el-dialog){
  .el-dialog__header{
    border-bottom: 1px solid #eee;
    margin-right: auto;
  }
}
</style>
