<template>
  <div :class="[wrapperClass]" :style="style">
    <div ref="layoutContentBox" class="layout-content-box" :class="[{'not-scroll': xLayout.notScroll}, className]">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { LIB_NAME } from '../../../../src/util'
const wrapperClass = `${LIB_NAME}-layout-content`

export default {
  name: 'xLayoutContent',
  inject: ['xLayout'],
  props: {
    className: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      wrapperClass
    }
  },
  computed: {
    style() {
      const sider = this.xLayout.sider; const style = {}
      if (sider) {
        style[sider.right ? 'marginRight' : 'marginLeft'] = sider.getWidth
      }
      if (this.xLayout.header) {
        style['paddingTop'] = this.xLayout.header.getHeight
      }

      if (this.xLayout.footer) {
        style['paddingBottom'] = this.xLayout.footer.getHeight
      }

      return style
    }
  },
  created() {

  }
}
</script>
