<template>
    <div :class="classes">
        <slot></slot>
    </div>
</template>
<script>
    import { findComponentUpward } from '../../utils/assist';
    const prefixClass = 'column';

    export default {
        name: 'Column',
        props: {
            span: [Number, String],
            order: [Number, String],
            offset: [Number, String],
            push: [Number, String],
            pull: [Number, String],
            className: String,
            even: Boolean,
            sm: Boolean,
            md: Boolean,
            lg: Boolean
        },
        data () {
            return {
                gutter: 0,
                dataMd:this.md
            };
        },
        computed: {
            classes () {

                if(!this.sm&&!this.md&&!this.lg){
                    this.dataMd=true;
                }
                let classList = [
                    {
                        [`${prefixClass}-even`]: this.even,
                        [`${prefixClass}-${this.span}`]: this.span,
                        [`${prefixClass}-order-${this.order}`]: this.order,
                        [`${prefixClass}-offset-${this.offset}`]: this.offset,
                        [`${prefixClass}-push-${this.push}`]: this.push,
                        [`${prefixClass}-pull-${this.pull}`]: this.pull,
                        [`${this.className}`]: !!this.className,
                        [`sm`]: !!this.sm,
                        [`md`]: !!this.dataMd,
                        [`lg`]: !!this.lg
                    }
                ];
                return classList;
            },
        },
        methods: {
            updateGutter () {
                const Row = findComponentUpward(this, 'Row');

                if (Row) {
                    Row.updateGutter(Row.gutter);
                }
            }
        },
        mounted () {
            this.updateGutter();
        },
        beforeDestroy () {
            this.updateGutter();
        }
    };
</script>
