<template>
    <div :style="{display: topBarDisplay}">
        <header-box :title="title" ref="header"></header-box>
    </div>
</template>

<style>
    .blk-header {
        transition: 0.3s all;
    }

    .ghost .blk-header {
        color: #fff;
    }
</style>

<script>
    import yoho from 'yoho';
    import $ from 'jquery';
    import HeaderBox from 'component/header.vue';
    import tip from 'common/tip';

    export default {
        name: 'top-bar',
        data() {
            return {
                isiOS: yoho.isiOS
            };
        },
        props: {
            shareData: {
                type: Object,
            },
            showTopBar: false
        },
        computed: {
            title() {
                return this.shareData.brandName;
            },
            topBarDisplay() {
                return this.showTopBar ? 'block' : 'none';
            }
        },
        components: {
            HeaderBox
        },
        methods: {
            goBack() {
                yoho.goBack();
            },
            showFilter() {
                this.$parent.$refs.filter.isVisible = !this.$parent.$refs.filter.isVisible;
            }
        }
    };
</script>