<template>
  <div :style="style">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'QfCol',

  props: {
    span: {
      type: Number,
      default: 24
    },
    offset: Number
  },

  computed: {
    style() {
      let style = {};
      if (this.gutter) {
        style.paddingLeft = this.gutter / 2 + 'px';
        style.paddingRight = style.paddingLeft;
      }
      style.width = (this.span / 24 * 100) + '%';
      if (this.offset) {
        style.marginLeft = (this.span / 24 * 100) + '%';
      }
      return style;
    },

    gutter() {
      let parent = this.$parent;
      while (parent && parent.$options.componentName !== 'QfRow') {
        parent = parent.$parent;
      }
      return parent ? parent.gutter : 0;
    }
  }
};
</script>
