<template>
  <div class="layout-container-vertical">
    <div
      v-if="device === 'mobile' && !collapse"
      class="mask"
      @click="handleFoldSideBar"
    ></div>
    <vab-side-bar />
    <div :class="collapse ? 'is-collapse-main' : ''" class="vab-main">
      <div class="layout-header fixedHeader">
        <vab-nav-bar />
        <vab-breadcrumb class="hidden-xs-only" />
        <vab-tabs-bar />
      </div>
      <vab-app-main />
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  name: 'VabVertical',
  props: {
    collapse: {
      type: Boolean,
      default() {
        return false;
      },
    },
    device: {
      type: String,
      default() {
        return 'desktop';
      },
    },
  },
  methods: {
    ...mapActions({
      handleFoldSideBar: 'settings/foldSideBar',
    }),
  },
};
</script>

<style lang="scss" scoped>
.layout-header {
  box-shadow: $base-box-shadow;
}

.layout-container-vertical {
  position: relative;

  .hidden-xs-only {
    padding: 0 $base-padding 0 $base-padding;
  }

  .tabs-bar-container {
    margin: 0 20px;
    display: none;
  }

  .mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $base-z-index - 1;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
    opacity: 0.5;
  }

  &.fixed {
    padding-top: calc(#{$base-nav-bar-height} + #{$base-tabs-bar-height});
  }

  &.fixed.no-tabs-bar {
    padding-top: $base-nav-bar-height;
  }

  .vab-main {
    position: relative;
    width: auto;
    min-height: 100%;
    margin-left: $base-left-menu-width;

    :deep {
      .fixed-header {
        position: fixed;
        top: 0;
        right: 0;
        left: $base-left-menu-width;
        z-index: $base-z-index - 2;
        width: $base-right-content-width;
        overflow: hidden;
      }
    }

    &.is-collapse-main {
      margin-left: $base-left-menu-width-min;

      :deep {
        .fixed-header {
          left: $base-left-menu-width-min;
          width: calc(100% - 65px);
        }
      }
    }
  }
}
</style>
