<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-03-23 09:21:00
-->
<template>
  <div class="app-wrapper">
    <navbar />
    <div class="main-container">
      <sidebar class="sidebar-container" />
      <div class="app-main">
        <tags-view v-if="needTagsView" />
        <app-main />
      </div>
    </div>
  </div>
</template>
<script>
import { AppMain, Navbar, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
export default {
  name: 'Layout',
  components: {
    AppMain,
    Navbar,
    Sidebar,
    TagsView
  },
  mixins: [ResizeMixin],
  created () {
    this.$store.dispatch("products/setData", "BDCSBPT");
  },
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    })
  }
}
</script>
<style lang="scss" scoped>
.app-main {
  height: calc(100vh - 74px);
  overflow-x: hidden;
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  background: #EAEBF0;
  padding: 10px;
}
</style>
<style lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/sbSidebar.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  // background-color: $containerbg;
  padding: 0;

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

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

.fixed-header {
  width: 100%;
  transition: width 0.28s;
}
</style>