<template>
    <view class="custom-class van-row" :style="viewStyle">
        <slot />
    </view>
</template>

<script>
import { VantComponent } from '../common/component';
export default {
    data() {
        return {
            viewStyle: ''
        };
    },
    '../col/index': {
        name: 'col',
        type: 'descendant',
        current: 'row',

        linked(target) {
            if (this.gutter) {
                target.setGutter(this.gutter);
            }
        }
    },
    props: {
        gutter: {
            type: Number
        }
    },
    mounted() {
        if (this.gutter) {
            this.setGutter();
        }
    },
    methods: {
        setGutter() {
            const { gutter } = this;
            const margin = `-${Number(gutter) / 2}px`;
            const viewStyle = gutter ? `margin-right: ${margin}; margin-left: ${margin};` : '';
            this.setData({
                viewStyle
            });
            this.getRelationNodes('../col/index').forEach((col) => {
                col.setGutter(this.gutter);
            });
        }
    },
    watch: {
        gutter: {
            handler: function () {
                const { gutter } = this;
                const margin = `-${Number(gutter) / 2}px`;
                const viewStyle = gutter ? `margin-right: ${margin}; margin-left: ${margin};` : '';
                this.setData({
                    viewStyle
                });
                this.getRelationNodes('../col/index').forEach((col) => {
                    col.setGutter(this.gutter);
                });
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
