<template>
    <div class="mheader">
        <header class="m-nav-header" :class="[{fixed: isFixed}, {headerColor: isColor}]">
            <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 : $route.meta.description }}</slot>
            </div>
            <div class="m-nav-bar__right">
                <slot name="right"></slot>
            </div>
        </header>
    </div>
</template>

<script>
/**
 * 插槽使用方式
 *  <template v-slot:right>
        这里
    </template>
 */
export default {
    name: 'mheader',
    props: {
        name: String, // 标题名称
        isBack: { // 是否显示返回按钮
            type: Boolean,
            default: true
        },
        isFixed: { // 是否固定顶部
            type: Boolean,
            default: true
        },
		isColor: {
			type: Boolean,
			default: false
		},
        backUrl: { // 跳转指定的URL
            type: Object,
            default: () => {
                return {
                    callBack: null, // 方法
                    status: false, // 是否用指定的连接跳转
                    path: '', // 跳转路径
                    params: {}, // 跳转参数 目前只能用query的方式
                }
            }
        }
    },
    data() {
        return {
            title: this.name,
            backUrlParams: this.backUrl // 取参数
        }
    },
    methods: {
        goBack() { // 返回上层
            let urlObj = this.backUrlParams
            // console.log(typeof urlObj.callBack)
            if(typeof urlObj.callBack == 'function') {
                urlObj.callBack()
            } else {
                if(urlObj.status) {
                    this.$router.push({
                        path: urlObj.path,
                        query: urlObj.params
                    })
                } else {
                    history.go(-1)
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../assets/commonLess/variable');
.mheader {
    height: .44rem;
    overflow: hidden;
}

.m-nav-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: .44rem;
    line-height: .44rem;
    text-align: center;
    user-select: none;
    color: #1A1A1A;
	background: #ffffff;
    &.fixed {
        position: fixed;
        z-index: 99;
    }
	&.headerColor {
        background-color: #14928A;
        color: #ffffff;
		.m-nav-bar__title {
			color: #ffffff;
			font-size: .18rem;
		}
	}
    .m-nav-bar__title {
        max-width: 60%;
        margin: 0 auto;
        color: #333333;
        font-weight: 500;
        font-size: .18rem;
    }
    .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>