<template>
    <div class="bgo-flex-box" :style="style">
        <slot />
    </div>
</template>

<script>
import { ParentMixin } from "../../mixins/relation";

const FLEX_DIRECTION = ["row", "column", "row-reverse", "column-reverse"];

export default {
    name: "BgoFlexBox",
    mixins: [ParentMixin("FlexBox")],
    provide() {
        return {
            gap: this.gap,
            direction: this.direction
        };
    },
    props: {
        direction: {
            type: String,
            default: "row",
            validator(value) {
                return ~FLEX_DIRECTION.indexOf(value);
            }
        },
        // flex item 间距
        gap: {
            type: [String, Number],
            default: "8px"
        }
    },
    computed: {
        style() {
            return {
                flexDirection: this.direction
            };
        }
    },
    watch: {
        direction() {
            this.calcChildrenStyle();
        },
        children() {
            this.calcChildrenStyle();
        }
    },
    methods: {
        calcChildrenStyle() {
            this.children.forEach(item => item.calcItemStyle());
        }
    }
};
</script>

<style lang="scss" scoped>
.bgo-flex-box {
    display: flex;
}
</style>
