<template>
    <div class="mheader" :style="{ height: `calc(${titleHeight}px + ${navBarHeight}px)` }">
        <header class="m-nav-header" :class="[isFixed ? 'fixed' : '']"  :style="[headStyle]">
            <div class="m-nav-bar__left" @click="goBack" v-show="isBack">
                <van-icon class="arrow-left" name="arrow-left"></van-icon>
            </div>
            <div class="m-nav-bar__title">
                <slot>{{ name ? name : this.$route.meta.descrition }}</slot>
            </div>
            <div class="m-nav-bar__right">
                <slot name="right"></slot>
            </div>
        </header>
    </div>
</template>

<script>
/**
 * 插槽使用方式
 *  <template v-slot:right>
        这里
    </template>
 */
import { postMessage } from '@/helpers/native-message'
export default {
    name: 'mheader',
    props: {
        name: String, // 标题名称
        isNative: {
            type: Boolean,
            default: true
        },
        isBack: { // 是否显示返回按钮
            type: Boolean,
            default: true
        },
        isFixed: { // 是否固定顶部
            type: Boolean,
            default: true
        },
        backUrl: { // 跳转指定的URL
            type: Object,
            default: () => {
                return {
                    callBack: null, // 方法
                    path: '', // 跳转路径
                    params: {}, // 跳转参数 目前只能用query的方式
                }
            }
        }
    },
    data() {
        return {
            navBarHeight: 0, // 顶部导航栏高度
            headStyle: {},
            titleHeight: 44, // 顶部导航高度（默认44px）
        }
    },
    mounted() {
        if (!this.isNative) {
            postMessage({ api: 'setBarStatus', content: { status: 0 }})
            this.getNav()
            this.isBack = false
        }
    },
    methods: {
        async getNav() {
            let sNavHeight = sessionStorage.getItem('navHeight')
            let sTitleHeight = sessionStorage.getItem('titleHeight')
            if(sNavHeight && sTitleHeight) {
                this.navBarHeight = sNavHeight
                this.headStyle = {
                    paddingTop: sNavHeight + 'px',
                    height: sTitleHeight + 'px',
                    lineHeight: sTitleHeight + 'px'
                }
            } else {
                await postMessage({ api: 'getNavHeight'}, (res) => {
                    const { content } = res
                    let headStyle = {}
                    const dpi = content.dpi || 2
                    if(content.navHeight) {
                        const navHeight = content.navHeight / dpi
                        sessionStorage.setItem('navHeight', navHeight)
                        this.navBarHeight = navHeight
                        headStyle = {
                            paddingTop: navHeight + 'px'
                        }
                    }
                    if(content.titleHeight) { // 导航栏的高度
                        const titleHeight = content.titleHeight / dpi
                        sessionStorage.setItem('titleHeight', titleHeight)
                        this.titleHeight = titleHeight
                        headStyle.height = titleHeight + 'px'
                        headStyle.lineHeight = titleHeight + 'px'
                    }
                    this.headStyle = headStyle
                })
            }
        },
        goBack() { // 返回上层
            let urlObj = this.backUrl
            // console.log(typeof urlObj.callBack)
            if(typeof urlObj.callBack == 'function') {
                urlObj.callBack()
            } else {
                if(urlObj.path) {
                    this.$router.push({
                        path: urlObj.path,
                        query: urlObj.params
                    })
                } else {
                    history.go(-1)
                }
            }
        }
    },
    beforeDestroy() {
        if (!this.isNative) {
            postMessage({ api: 'setBarStatus', content: { status: 1 }})
            this.isBack = true
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../assets/commonLess/variable');
.mheader {
    height: .46rem;
    overflow: hidden;
}
.m-nav-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: .46rem;
    line-height: .46rem;
    background-color:  @whiteColor;
    text-align: center;
    user-select: none;
    color: @blackColor;
    &.fixed {
        position: fixed;
        z-index: 99;
    }
    .m-nav-bar__title {
        max-width: 60%;
        margin: 0 auto;
        color: @blackColor;
        font-weight: 500;
        font-size: .16rem;
    }
    .m-nav-bar__left, .m-nav-bar__right {
        position: absolute;
        bottom: 0;
    }
    .m-nav-bar__left {
        left: .12rem;
        .arrow-left {
            font-size: .21rem;
            vertical-align: middle;
        }
    }
    .m-nav-bar__right {
        right: .12rem;
    }
}
</style>