<template id="two-col-wrapper">
    <div class="two-col-wrapper">
        <div ref="left" class="left-wrapper">
            <slot name="left-wrapper"></slot>
        </div>
        <div ref="right" class="right-wrapper">
            <slot name="right-wrapper"></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: 'es-two-col-wrapper',
    props: {
        // 左侧栏占整体宽度百分比
        leftWrapperWidth: {
            type: String,
            required: false,
            default: '55%'
        }
    },
    data() {
        return {};
    },
    mounted() {
        let self = this;
        let width = Number(
            self.leftWrapperWidth.substr(0, self.leftWrapperWidth.length - 1)
        );
        self.$refs.left.style.width = self.leftWrapperWidth;
        self.$refs.right.style.marginLeft = 'calc(' + width + '% + 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;
}

.two-col-wrapper {
    @include main-wrapper;
    .left-wrapper {
        @include left-wrapper(55%);
    }
    .right-wrapper {
        @include right-wrapper(56%);
    }
}
</style>
