<!-- Created by henian.xu on 2018/7/18. -->

<template>
    <el-main class="page">
        <slot name="header">
            <div
                v-if="pageTitle || back"
                class="header"
            >
                <div class="label">
                    <el-button
                        v-if="back"
                        size="small"
                        type="primary"
                        @click="$router.back()"
                    >
                        {{ $$t('vmf_back', '返回') }}
                    </el-button>
                    {{ pageTitle }}
                </div>
                <slot name="headerExtra" />
            </div>
        </slot>
        <slot name="secondHeader" />
        <template
            v-if="isBodySlot"
        >
            <slot name="body" />
            <slot />
        </template>
        <template
            v-else
        >
            <div class="body">
                <slot />
            </div>
        </template>
    </el-main>
</template>

<script>
export default {
    name: 'Page',
    data() {
        return {};
    },
    props: {
        back: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        pageTitle() {
            return this.$$t(this.$route.meta.i18nKey || '', this.$route.meta.title);
        },
        isBodySlot() {
            return !!this.$slots.body;
        },
    },
};
</script>

<style lang="scss">
.page {
    background-color: $gray2;
    > .header,
    > .second-header,
    > .body {
        background-color: #fff;
        padding: $padding;
        border-radius: $padding-small/2;
    }
    > .header {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: $margin;
        > .label {
            flex: 1 1 auto;
            font-size: 16px;
            font-weight: bold;
        }
    }
    > .second-header {
        margin-bottom: $margin;
    }
    > .body {
        + .body {
            margin-top: $margin;
        }
    }
}
</style>
