<template>
    <div class="c-nav" :style="'height:' + (statusBarHeight + height) + 'px;'">
        <div class="c-nav__status-bar" :style="'height:' + statusBarHeight + 'px;'"></div>
        <div class="c-nav__fixed" :style="'top:' + statusBarHeight + 'px; height:' + height + 'px;'">
            <div class="c-nav__content">
                <div class="c-nav__left" @click="back()">
                    <img v-if="icon === 'back'" class="c-nav__icon" src="/static/icon/arrows_left.png" alt="">
                    <img v-if="icon === 'backGray'" class="c-nav__icon" src="/static/common/arrows_left.png" alt="">
                </div>
                <div v-if="title" class="c-nav__title">{{ title }}</div>
                <div class="c-nav__slot">
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>

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

        props: {
            // 左侧按钮
            icon: {
                type: String,
                default: 'back',
            },

            // 标题
            title: {
                type: String,
                default: '',
            },
        },

        // 数据
        data() {
            return {
                statusBarHeight: uni.getSystemInfoSync().statusBarHeight, //状态栏高度,
                height: 44,
            }
        },

        // 初始化
        created() {
            const self = this

            // #ifdef MP-WEIXIN
            let button = wx.getMenuButtonBoundingClientRect()
            self.height = (button.top - self.statusBarHeight) * 2 + button.height
            // #endif
        },

        // 函数
        methods: {
            // 返回上一页
            back() {
                const self = this
                self.router.back()
            },
        },

        // 数据计算
        computed: {},

        // 数据监听
        watch: {},
    }
</script>

<style lang="scss" scoped>
    @import "../../common/scss/public";

    .c-nav {
        background-color: #fff;

        &__status-bar {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 996;
            width: 100%;
            background-color: #fff;
        }

        &__fixed {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 996;
            width: 100%;
            background-color: #fff;
        }

        &__content {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            padding: 0 px2(30);

            /* #ifdef MP */
            padding-right: px2(200);
            /* #endif */
        }

        &__icon {
            width: px2(60);
            height: px2(60);
            margin-right: px2(30);
        }

        &__title {
            @include omit(px2(300));
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            width: px2(300);
            transform: translate(-50%, -50%);
            font-size: px2(30);
            font-weight: 700;
            text-align: center;
            color: #000;
        }

        &__slot {
            flex: 1;
        }
    }
</style>