<template>
  <div class="ipub-col"
       :style="{
        width,
        margin,
        'margin-left': marginLeft
      }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'IpubCol',
  props: {
    span: {
      type: Number,
      default: 12
    },
    offset: {
      type: Number,
      default: 0
    }
  },
  inject: ['gutter'],
  data () {
    return {
    }
  },
  computed: {
    width () {
      if (this.span < 1 || this.span > 12) {
        return `100%`
      }
      let width = 100.0 / 12 * this.span
      if (this.gutter) {
        return `calc(${width}% - ${parseFloat(this.gutter[0] || this.gutter)}px)`
      } else {
        return `${width}%`
      }
    },
    margin () {
      return `0 ${parseFloat(this.gutter[0] || this.gutter) / 2}px`
    },
    marginLeft () {
      if (!this.offset) {
        return `${parseFloat(this.gutter[0] || this.gutter) / 2}px`
      } else {
        return `calc(${(100.0 / 12) * this.offset}% + ${parseFloat(this.gutter[0] || this.gutter) / 2}px)`
      }
    }
  },
  methods: {
  }
}
</script>

