<template>
    <div :class="rowClass"
         :style="rowStyle">
        <slot></slot>
    </div>
</template>

<script>
import { prefix } from 'jdd-design/utils';
export default {
    name: `${prefix}-row`,
    props: {
        gutter: Number,
        justify: String,
        align: String
    },
    provide() {
        return { jddRow: this };
    },
    computed: {
        rowClass() {
            let clsNames = [`${prefix}-row`];
            this.justify &&
                clsNames.push([
                    `${prefix}-row--flex`,
                    `${prefix}-row--flex--justify__${this.justify}`
                ]);
            this.align &&
                clsNames.push([
                    `${prefix}-row--flex`,
                    `${prefix}-row--flex--align__${this.align}`
                ]);
            return [...new Set(clsNames)];
        },
        rowStyle() {
            if (!this.gutter) return null;
            return {
                marginLeft: `${-this.gutter / 2}px`,
                marginRight: `${-this.gutter / 2}px`
            };
        }
    }
};
</script>
