<template>
  <div id="layout">
    <navbar/>
    <breadcrumb-diy/>
    <div class="layout-bottom-box">
      <Sidebar/>
      <div class="main-container">
        <app-main />
      </div>
    </div>
  </div>
</template>

<script>
  import { AppMain, Navbar, Sidebar } from './components'
  import { mapState } from 'vuex'
  import BreadcrumbDiy from './components/BreadcrumbDiy'
  import store from '@/store'

  export default {
    name: 'Layout',
    data() {
      return {
        tagsType:true,
      }
    },
    components: {
      AppMain,
      Sidebar,
      Navbar,
      BreadcrumbDiy
    },
    computed: {
      ...mapState({
        theme: state => state.settings.theme,
        sideTheme: state => state.settings.sideTheme,
        device: state => state.app.device,
        needTagsView: state => state.settings.tagsView,
        fixedHeader: state => state.settings.fixedHeader
      }),
    },
    mounted(){
      if(localStorage.getItem('setSmartAlarmType')){
        store.dispatch('settings/setSmartAlarmType', localStorage.getItem('setSmartAlarmType'))
      }
    },
    methods: {
      setTagsType(type){
        this.tagsType = type != '/index';
      },
    }
  }
</script>

<style lang="scss" scoped>
  #layout{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .layout-bottom-box{
      flex:1;
      display: flex;
      overflow: hidden;
      .main-container{
        transition: margin-left .28s;
        flex:1;
        display: flex;
        margin-left: 0;
        position: relative;
        overflow: hidden;
      }
    }
  }
</style>
