<template>
    <div class="header-nav-bar fixed" v-if="showNavBar">
        <van-nav-bar :class="{'no-arrow': !isLeftArrow}"
                     :title="title"
                     :fixed="fixed"
                     :left-arrow="isLeftArrow"
                     :left-text="leftText"
                     @click-left="onBack">
            <span v-if="isShare"
                  slot="right"
                  @click="share">分享</span>
            <span v-else slot="right">
                <slot></slot>
            </span>
        </van-nav-bar>
    </div>
</template>

<script>

    import { isInDingTalkContainer, setTitle } from "@bingoit/dingtalk";

    export default {
        name: "BgoHeaderNavBar",
        props:{
            title: String,
            leftText: {
                type: String,
                default: null
            },
            isLeftArrow: {
                type: Boolean,
                default: true
            },
            isCustomBack: {
                type: Boolean,
                default: false
            },
            isBack: {
                type: Boolean,
                default: true
            },
            isShare: {
                type: Boolean,
                default: false
            }
        },
        data: function() {
            return {
                fixed: true
            }
        },
        watch: {
            title(newVal) {
                this.setDocumentTitle(newVal);
            }
        },
        computed: {
            showNavBar: function() {
                return !isInDingTalkContainer();
            }
        },
        created() {
            this.setDocumentTitle(this.title);
        },
        methods: {
            share: function () {
            },
            onBack: function () {
                if(this.isBack)  {
                    if(this.isCustomBack) {
                        this.$emit('back');
                    } else {
                        this.$router.back();
                    }
                }
            },
            setDocumentTitle(title) {
                if (isInDingTalkContainer()) {
                    setTitle(title || '');
                } else {
                    document.title = title || '';
                }
            }
        }
    }
</script>

<style>
    .header-nav-bar.fixed {
        padding-bottom: 45px;
    }
    .no-arrow .van-nav-bar__left {
        display: none;
    }
</style>
