<template>
    <div class="nav-content"  :style="{'height': `${placeholderHeight}px` }">
        <div class="hanzo-nav" id="hanzo-nav">
            <div class='hanzo-nav__title' v-if="hasTitle">
                <div class='nav-title'>
                    <slot name="title"></slot>
                    <h-icon type="jiantou-left" class='back' @click='navBack' v-if="isShowBack>=0"></h-icon>
                    <span class="nav-btn" v-if="btnText" @click="handleClick">{{btnText}}</span>
                </div>
            </div>
            <div class='hanzo-nav__content'>
                <slot name="content"></slot>
            </div>
            <div class="hanzo-nav-bg">
                <slot name="background"></slot>
            </div>
        </div>
        <div v-if="hasPlaceholder" class="nav-placeholder"  :style="{'height': `${placeholderHeight}px`}"></div>
    </div>
</template>
<script>
import hIcon from '../icon/index';
export default {
    name: 'h-head',
    components: {
        hIcon
    },
    props:{
        isShowBack: {
            type: Boolean,
            default: true
        },
        backDelta: {
			type: Number,
			default: 1
        },
        hasPlaceholder: {
            type: Boolean,
            default: true
        },
        hasTitle: {
            type: Boolean,
            default: true
        },
        btnText: {
            type: String,
            default: ''
        }
    },

	/**
	 * 组件的初始数据
	 */
	data() {
        return {
            height: '',
            placeholderHeight: 0
        }
    },
    mounted() {
        this.$nextTick(() => {
            const dom = document.getElementById('hanzo-nav');
            this.placeholderHeight = dom.offsetHeight;
        });
    },
    methods: {
        navBack(e) {
            if ( this.backDelta === 0 ) {
                this.$emit('onBack',e);
            } else if (window.history.length <= 1) {
                this.$router.push({path:'/'})
                return false
            } else if ( this.backDelta > 0 ) {
                this.$router.go(-1);
            }
            
        },
        handleClick() {
            this.$emit('click');
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
