<template id="three-col-wrapper">
    <div class="three-col-wrapper">
        <div ref="left" class="left-wrapper">
            <slot name="left-wrapper"></slot>
        </div>
        <div ref="multiple" class="multiple-wrapper">
            <div ref="center" class="center-wrapper">
                <slot name="center-wrapper"></slot>
            </div>
            <div ref="right" class="right-wrapper">
                <slot name="right-wrapper"></slot>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'es-three-col-wrapper',
    props: {
        // 左侧栏占整体宽度百分比
        leftWrapperWidth: {
            type: String,
            required: false,
            default: '16%'
        },
        // 中间栏占（中间栏+右侧栏）宽度百分比
        centerWrapperWidth: {
            type: String,
            required: false,
            default: '55%'
        }
    },
    data() {
        return {};
    },
    mounted() {
        let self = this;
        let leftWidth = Number(
            self.leftWrapperWidth.substr(0, self.leftWrapperWidth.length - 1)
        );
        let centerWidth = Number(
            self.centerWrapperWidth.substr(
                0,
                self.centerWrapperWidth.length - 1
            )
        );
        self.$refs.left.style.width = self.leftWrapperWidth;
        self.$refs.multiple.style.marginLeft =
            'calc(' + leftWidth + '% + 14px)';
        self.$refs.center.style.width = self.centerWrapperWidth;
        self.$refs.right.style.marginLeft = 'calc(' + centerWidth + '% + 14px)';
    }
};
</script>
<style lang="scss" scoped>
@mixin main-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

@mixin left-wrapper($width: 100%) {
    width: $width;
    height: 100%;
    position: relative;
    overflow: hidden;
    float: left;
    background: #fff;
    border-radius: 4px;
}

@mixin right-wrapper($marginLeft: 100%) {
    margin-left: $marginLeft;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
}

.three-col-wrapper {
    @include main-wrapper;
    .left-wrapper {
        @include left-wrapper(240px);
    }
    .multiple-wrapper {
        @include right-wrapper(254px);
        background: #f2f2f2;
        .center-wrapper {
            @include left-wrapper(55%);
        }
        .right-wrapper {
            @include right-wrapper(55%);
        }
    }
}
</style>
