<template>
    <div :class="classes( { flex, [`align-${align}`]: flex && align,  [`justify-${justify}`]: flex && justify } )" :style="style">
        <slot></slot>
    </div>
</template>
<script>
import { classesMixin } from '../../../common/mixins/classname';
let classMixin = classesMixin('row');
export default {
    name: 'h-row',
    mixins: [classMixin],
    props: {
        type: String,
        align: String,
        justify: String,
        gutter: {
            type: [Number, String],
            default: 0
        }
    },  
    computed: {
        flex() {
            return this.type === 'flex';
        },
        style() {
            const margin = `-${Number(this.gutter) / 2}px`;
            return this.gutter ? { marginLeft: margin, marginRight: margin } : {};
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>