<template>
 <main class="sv-main" :class="{'has-header': hasHeader, 'has-subheader': hasSubheader, 'has-nav': hasNav, 'has-footer': hasFooter}" :style="style">
   <slot></slot>
 </main>
</template>

<script>
  import contants from '../../scripts/var'
  export default {
    name: 'svMain',
    props: {
      hasHeader: {
        type: Boolean,
        default: false
      },
      hasSubheader: {
        type: Boolean,
        default: false
      },
      hasNav: {
        type: Boolean,
        default: false
      },
      hasFooter: {
        type: Boolean,
        default: false
      },
      bottom: [String, Number]
    },
    computed: {
      style () {
        let style = {}
        if (this.bottom) {
          style.bottom = `${this.bottom / contants.getDesignDraftHtmlFontSize()}rem`
        }
        return style
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";

  .sv-main{
    position:absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 750px;
    min-width: 320px;
    overflow-x: hidden;
    overflow-y: scroll;
    transform: translateX(-50%);
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar{display: none;}
    &.has-header, &.has-nav{
      top: pxToRem(100);
    }
    &.has-subheader{
      top: pxToRem(200);
    }
    &.has-footer{
      bottom: pxToRem(100);
    }
  }
</style>
