<template>
    <div class="layout-header-box">
        <div class="header-left">
            <slot name="left">
                <i class="icon icon-back go-back-btn" @click="goBack"></i>
            </slot>
        </div>
        <transition name="header-title">
            <div class="header-title brown-light" v-show="showTitle">
                <slot name="title">
                    {{yoho.title}}
                </slot>
            </div>
        </transition>
        <div class="header-right">
            <slot name="right"></slot>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
    name: 'HeaderBox',
    props: {
        autoHide: Boolean,
        className: [String, Object, Array]
    },
    computed: {
        ...mapState(['yoho'])
    },
    data() {
        return {
            showTitle: !this.autoHide
        };
    },
    methods: {
        goBack() {
            this.$yoho.goBack({}, function() {}, function() {});
        },
        switchBase() {
            this.showTitle = false;
        },
        switchNormal() {
            this.showTitle = true;
        }
    }
};
</script>
<style lang="scss">
@import "~scss/variable.scss";
.layout-header-box {
    position: relative;
    height: $header-height;
    font-size: $header-font-size;
    padding: 0px 20px;
    width: 100%;

    .icon {
        vertical-align: middle;
        display: inline-block;
        width: 80px;
        height: 100%;
        line-height: $header-height;
        font-size: $header-font-size;

        &.icon-back {
            font-size: 64px;
        }
    }
    .header-left, .header-right {
        z-index: 2;
        position: absolute;
        min-width: 80px;
    }
    .header-left {
        left: 20px;
        top: 0;
    }
    .header-right {
        text-align: right;
        right: 20px;
        top: 0;
    }
    .header-title {
        position: absolute;
        z-index: 1;
        background-color: #fff;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        line-height: $header-height;
        font-size: 17PX;
        color: #000000;
        letter-spacing: -0.41px;
        border-bottom: solid 1px #eee;
    }
}

.header-title-enter-active, .header-title-leave-active {
    transition: opacity 0.2s ease-in-out;
}
.header-title-enter, .header-title-leave-to {
    opacity: 0;
}
.header-title-enter-to, .header-title-leave {
    opacity: 1;
}
</style>