<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-03-16 11:15:48
-->
<template>
  <div class="app-wrapper jgWrapper">
    <navbar />
    <div class="appMain">
      <app-main />
    </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
    },
    created () {
      console.log("hhh");
      this.$store.dispatch("products/setData", "BDCJGPT");
    },
    mixins: [ResizeMixin],
    computed: {
      ...mapState({
        sidebar: state => state.app.sidebar,
        needTagsView: state => state.settings.tagsView,
        fixedHeader: state => state.settings.fixedHeader
      })
    }
  }
</script>
<style lang="scss">
  @import "~@/styles/jgSidebar.scss";
</style>
<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    min-width: 1280px;
    background: url("~@/image/bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 12px;
    box-sizing: border-box;

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

  .appMain {
    // min-width: 1280px;
    height: calc(100vh - 101px) !important;
    box-sizing: border-box;

    .app-main {
      height: 100%;
    }
  }
</style>