<template>
    <div :class="classes( { [`${span}`]: span, [ `offset-${offset}` ]: offset } )" :style="style">
        <slot></slot>
    </div>
</template>
<script>
import { classesMixin } from '../../../common/mixins/classname';
let classMixin = classesMixin('col');
export default {
    name: 'h-col',
    mixins: [classMixin],
    props: {
        span: [Number, String],
        offset: [Number, String]
    },  
    computed: {
        gutter() {
            return (this.$parent && Number(this.$parent.gutter)) || 0;
        },

        style() {
            const padding = `${this.gutter / 2}px`;
            return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>