
<template>
    <div
        class="content-container"
        :style="{ width: width, height: height }"
    >
        <div class="content-main">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ContentContainer',

    props: {
        layout: {
            type: Object,
            default () {
                return {}
            }
        }
    },

    data () {
        return {
            width: 433,
            height: 165
        }
    },

    created () {
        const { width = '', height = '' } = this.layout
        if (width && height) {
            this.width = width + 'px'
            this.height = height + 'px'
        }
    }
}
</script>

<style lang="less">
@width: 7px;
@height: 8px;

.content-container {
    position: relative;
    width: 100%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #1a4670;

    &:before, &:after {
        content: "";
        position: absolute;
        width: @width;
        height: @height;
        right: -1px;
        background-repeat: no-repeat;
        background-position: 0 0;
    }

    &:before {
        top: -1px;
        right: -1px;
        background-image: url('./images/angle-top-right.png');
    }

    &:after {
        right: -1px;
        bottom: -1px;
        background-image: url('./images/angle-bottom-right.png');
    }

    .content-main {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        &:before, &:after {
            content: "";
            position: absolute;
            width: @width;
            height: @height;
            left: -1px;
            background-repeat: no-repeat;
            background-position: 0 0;
        }

        &:before {
            top: -1px;
            background-image: url('./images/angle-top-left.png');
        }

        &:after {
            bottom: -1px;
            background-image: url('./images/angle-bottom-left.png');
        }
    }
}
</style>
