<template>
    <div :class="colClass"
         :style="colStyle">
        <slot></slot>
    </div>
</template>

<script>
import { prefix } from 'jdd-design/utils';
export default {
    name: `${prefix}-col`,
    props: {
        span: Number,
        offset: Number
    },
    inject: {
        jddRow: {
            default: null
        }
    },
    computed: {
        colClass() {
            let clsNames = [`${prefix}-col`];
            this.span && clsNames.push(`${prefix}-col-${this.span}`);
            this.offset && clsNames.push(`${prefix}-offset-${this.offset}`);
            return clsNames;
        },
        colStyle() {
            if (!this.jddRow.gutter) return null;

            return {
                padding: `0 ${this.jddRow.gutter / 2}px`
            };
        }
    }
};
</script>
