<template>
    <div class="bl__navigationbar-container" :style="styleConfig" v-if="visible" :class="{'white': styleConfig.color === 'white'}">
        <div class="bl__navigation-area">
            <div v-if="backButtonVisible" class="nav-icon btn-back" @click="back"></div>
            {{title}}
            <div v-if="leftVisible" class="nav-icon left-config" :style="{background: `url(${leftConfig.iconPath}) no-repeat center/22px 22px`}" @click="clickOnLeftButton"></div>
            <div class="right-config-area">
                <div class="icon" v-if="rightConfig.type == 'icon'">
                    <div
                        class="icon-config" 
                        v-for="(item, index) in rightConfig.icon"
                        :key="index"
                        :style="{background: `url(${item}) no-repeat center/22px 22px`}"
                        @click="clickOnRightButton(index)"
                    ></div>
                </div>
                <div class="text" v-else-if="rightConfig.type == 'text'" :style="{color: rightConfig.color}" @click="clickOnRightButton(0)">{{rightConfig.text}}</div>
                <!-- TODO -->
                <!-- <div class="default" v-else-if="env === 'ide' && !rightConfig.type">
                    <div class="item-config share" @click="share"></div>
                    <div class="split"></div>
                    <div class="item-config close" @click="close"></div>
                </div> -->
            </div>
            <!-- <div class="bl__share-menulist-container" v-if="share.visible">
                <div class="menu-list">
                    <div class="share-btn btn" v-if="share.shareBtnIsvisible" @click="$emit('shareApp')">转发</div>
                    <div class="not-share-btn btn" @click="$emit('close')" v-else>当前页面未设置分享</div>
                    <div class="cancel-btn btn" @click="$emit('close')">取消</div>
                </div>
            </div> -->
        </div>
        <!-- <div class="bl__share-menulist-container" v-if="share.visible">
            <div class="menu-list">
                <div class="share-btn btn" v-if="share.shareBtnIsvisible" @click="$emit('shareApp')">转发</div>
                <div class="not-share-btn btn" @click="$emit('close')" v-else>当前页面未设置分享</div>
                <div class="cancel-btn btn" @click="$emit('close')">取消</div>
            </div>
        </div> -->
        <div v-if="rightArraryConfig && !rightConfig.type">
            <div class="right-config-area" v-for="(btn, index) in rightArraryConfig">
            <div class="icon" v-if="btn.type == 'icon'">
                <div
                    class="icon-config"
                    :style="{background: `url(${btn.icon}) no-repeat center/22px 22px`}"
                    @click="clickOnRightArraryButton(index)"
                ></div>
            </div>
            <div class="text" v-if="btn.type == 'text'" :style="{color: btn.color}" @click="clickOnRightArraryButton(index)">{{btn.text}}</div>
            <!-- TODO -->
            <!-- <div class="default" v-else-if="env === 'ide' && !rightConfig.type">
                <div class="item-config share" @click="share"></div>
                <div class="split"></div>
                <div class="item-config close" @click="close"></div>
            </div> -->
        </div>
            
        </div>
    </div>
</template>
<script>
const defaultColor = {
    navigationBarBackgroundColor: '#FB7299',
    backgroundColor: '#f4f4f4',
    navigationBarTextStyle: '#212121'
}

const defaultColorDarkMode = {
    navigationBarBackgroundColor: '#BB5B76',
    backgroundColor: '#1B1B1B',
    navigationBarTextStyle: '#E5E5E5'
}

export default {
    data() {
        return {
            visible: false,
            config: {},
            selected: {},
            backButtonVisible: false,
            leftConfig: {},
            leftVisible: false,
            rightConfig: {
                type: ''
            },
            env: window.env,
            rightArraryConfig: {}
        }
    },
    computed: {
        styleConfig: {
            get() {
                let config = this.config
                const currentPath = this.config.currentPath || ''
                const darkmode = !!config.darkmode
                let defaultStyle = defaultColor

                if (darkmode) {
                    config = this.config.darkConfig || {}
                    defaultStyle = defaultColorDarkMode
                }
                const { window:globalconfig, pages = [] } = config;
                const pageConfig = pages.find(p => p.path === currentPath) || {}

                const finalStyle = Object.assign({}, defaultStyle, globalconfig, pageConfig)
                    // colorMap = {
                    //     black: '#212121',
                    //     white: 'white'
                    // },
                    // color = this.selected.navigationBarTextStyle || globalconfig.navigationBarTextStyle || 'white';
                // }

                return {
                    'background-color': finalStyle.navigationBarBackgroundColor,
                    color: finalStyle.navigationBarTextStyle,
                    'padding-top': window.env === 'ide' ? `${bl.getSystemInfoSync().statusBarHeight}px` : '0'
                };
            }
        },
        title: {
            get() {
                const { navigationBarTitleText } = this.selected,
                    { navigationBarTitleText:navigationBarTitleTextDefault } = this.config.window || {};
                return navigationBarTitleText == undefined ? navigationBarTitleTextDefault : navigationBarTitleText;
            }
        }
    },
    methods: {
         getIconPath(url) {
            if (window.env == 'ide') {
                url = `file://${window.BUILD_SOURCE}${url}`;
            }
            return url;
        },
        back() {
            bl.navigateBack();
        },
        clickOnLeftButton() {
            this.leftConfig.onClick && this.leftConfig.onClick();
        },
        // share() {
        //     const onShareAppMessage = window.app.$refs.bl__app.$children[0].$options.onShareAppMessage;
        //     const { pagesMap = {} } = window.__blConfig || {};
        //     if (onShareAppMessage) {
        //         this.share.data = {...this.share.data, {path: pagesMap[window.app.$route.path].path}};
        //     }
        //     this.share.visible = true;
        // },
        // close() {},
        clickOnRightButton(index) {
            this.rightConfig.onClick && this.rightConfig.onClick(index);
        },
        clickOnRightArraryButton(index) {
            this.rightArraryConfig.onClick && this.rightArraryConfig.onClick(index);
        }
    }
}
</script>
<style>
.bl__navigationbar-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    border-bottom: 1px solid rgba(231,231,231,0.50);
}
.bl__navigation-area {
    position: relative;
    text-align: center;
    height: 44px;
    line-height: 44px;
    font-family: PingFangSC-Medium;
    font-size: 16px;
}
.bl__navigation-area .nav-icon {
    position: absolute;
    /* height: 22px; */
    width: 22px;
    cursor: pointer;
    top: 0;
    bottom: 0;

    /* top: 11px; */
}
.bl__navigation-area .btn-back {
    left: 12px;
    background: url('/static/icon_back_grey.svg') no-repeat center/20px 20px;
}
.bl__navigationbar-container.white .btn-back {
    background: url('/static/icon_back_white.svg') no-repeat center/20px 20px;
}
.bl__navigation-area .left-config {
    left: 55px;
}
.bl__navigation-area .right-config-area {
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}
.bl__navigation-area .right-config-area .icon {
    display: flex;
}
.bl__navigation-area .right-config-area .icon .icon-config {
    width: 22px;
    height: 22px;
    margin-right: 20px;
}
.bl__navigation-area .right-config-area .icon-config:last-child {
    margin-right: 0;
}
.bl__navigation-area .right-config-area .default {
    border-radius: 14px;    
    width: 75px;
    height: 26px;
    border: 1px solid #E0E0E0;
    top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bl__navigation-area .right-config-area .default .item-config {
    width: 22px;
    height: 22px;
    cursor: pointer;
}
.bl__navigation-area .right-config-area .default .item-config.share {
    background: url('/static/icon_share_grey.png') no-repeat center/22px 22px;
}
.bl__navigation-area .right-config-area .default .split {
    width: 0.5px;
    height: 14px;
    background: #E0E0E0;
    margin: 0 7.5px;
}
.bl__navigation-area .right-config-area .default .item-config.close {
    background: url('/static/icon_close_grey.png') no-repeat center/22px 22px;
}
.bl__navigationbar-container.white .right-config-area .default {
    background-color: rgba(0,0,0,0.20);
    border-color: rgba(255,255,255,0.30);
}
.bl__navigationbar-container.white .right-config-area .default .item-config.share {
    background: url('/static/icon_share_white.png') no-repeat center/22px 22px;
}
.bl__navigationbar-container.white .right-config-area .default .item-config.close {
    background: url('/static/icon_close_white.png') no-repeat center/22px 22px;
}

</style>