<template>
    <van-nav-bar
        fixed
        left-text=" "
        right-text=" "
        :left-arrow="false"
        v-if="show"
        z-index="20"
        :placeholder="!fullPage"
        :border="false"
        id="navBar"
        ref="navBar"
        :class="{ fullBar: fullPage }"
    >
        <template #left>
            <div class="back">
                <van-icon @click="back" size="24" name="arrow-left" :color="fontColor || $colors.font1" />
            </div>
            <!-- <van-popover
                v-model:show="showPopover"
                placement="bottom-start"
                theme="dark"
                :actions="actions"
                @select="onSelect"
            >
                <template #reference>
                    <van-icon size="24" :color="fontColor || $colors.font1" name="bars" />
                </template>
            </van-popover> -->
        </template>

        <template #title>
            <span class="title" :style="{ color: fontColor || $colors.font1 }">{{ title }}</span>
        </template>

        <template #right>
            <span class="bar-right" @click="goNext(rightInfo.path)">{{ rightInfo.text }}</span>
        </template>
    </van-nav-bar>
</template>

<script>
import { mapState } from 'vuex';
import { useCssVar } from '@vueuse/core';
import { Capacitor } from '@capacitor/core';
import { StatusBar, Style } from '@capacitor/status-bar';
export default {
    inject: ['setKeeps', 'safeTop', 'barHeight', 'keeps'],
    data() {
        return {
            show: false,
            showPopover: false,
            tabColor: '',
            title: '',
            rightInfo: {
                text: '',
                path: ''
            },
            fullPage: false,
            darkBar: true
        };
    },
    computed: {
        ...mapState(['showConsole']),
        fontColor() {
            return this.darkBar ? '' : '#fff';
        },
        actions() {
            if (this.showConsole) {
                return [
                    { text: '首页', icon: require('@assets/tabbar_icon_01.png'), value: '/home' },
                    { text: '发现', icon: require('@assets/tabbar_icon_02.png'), value: '/shop' },
                    { text: '我的', icon: require('@assets/tabbar_icon_04.png'), value: '/mine' },
                    { text: '刷新', icon: 'replay', value: 'reload' }
                ];
            } else {
                return [
                    { text: '首页', icon: require('@assets/tabbar_icon_01.png'), value: '/home' },
                    { text: '发现', icon: require('@assets/tabbar_icon_02.png'), value: '/shop' },
                    { text: '我的', icon: require('@assets/tabbar_icon_04.png'), value: '/mine' }
                ];
            }
        },
        height() {
            return this.barHeight;
        }
    },
    watch: {
        $route() {
            this.rightInfo = {
                text: '',
                path: ''
            };
            if (this.$route.meta.menuPage) {
                this.show = false;
            } else {
                this.show = true;
            }
            this.getColor();
            this.setTitle();
        },
        tabColor() {
            this.$nextTick(() => {
                if (this.$el) {
                    let children = this.$el.children;
                    if (children && children.length > 0) {
                        children[0].style.backgroundColor = this.tabColor;
                    }
                }
            });
        },
        show() {
            this.safeTop = useCssVar('--safe-top').value;
        }
    },
    mounted() {
        if (this.$route.meta.menuPage) {
            this.show = false;
        } else {
            this.show = true;
        }
        this.getColor();
        this.setTitle();
        this.emitter.on('setRightBar', info => {
            this.rightInfo = info;
        });
    },
    methods: {
        setTitle(title) {
            console.log(this.$route.meta.title);
            if (this.$route.meta.title) {
                this.title = this.$route.meta.title;
            } else if (title) {
                this.title = title;
            } else {
                this.title = '';
            }
        },
        getColor(color = '') {
            if (this.$route.meta.fullPage) {
                this.fullPage = true;
                this.tabColor = '';
            } else {
                this.fullPage = false;
                this.tabColor = '#1A1C2B';
            }
            if (this.$route.meta.darkBar) {
                if (window.isNativePlatform) {
                    StatusBar.setStyle({ style: Style.Default });
                }
                this.darkBar = true;
            } else {
                if (window.isNativePlatform) {
                    StatusBar.setStyle({ style: Style.Light });
                }
                this.darkBar = false;
            }
        },
        onSelect(val) {
            console.log(val);
            if (val.value === 'back') {
                this.$router.go(-1);
            } else if (val.value === 'reload') {
                location.reload();
            } else {
                setTimeout(() => {
                    this.setKeeps([], true, true);
                }, 10);
                this.$router.push(val.value);
            }
        },
        back() {
            if (window.history.length <= 1) {
                this.$router.push({ path: '/' });
                return false;
            } else {
                this.$router.go(-1);
            }
            //上面都没执行就说明卡在当前页不是最后一条， histroy记录数量大于1，又没有回退记录，只能返回首页，
            //如果上面都执行了 页面都跳走了，这个也就不用管了
            // setTimeout(() => {
            //     this.$router.push({ path: '/' });
            // }, 500);
        },
        goNext(path) {
            if (path) {
                this.$router.push(path);
            }
        }
    }
};
</script>

<style lang="less">
#navBar {
    .van-nav-bar__content {
        padding-top: var(--safe-top);
    }
    .van-nav-bar__left {
        top: var(--safe-top) !important;
    }
    .van-nav-bar {
        line-height: initial !important;
    }
}
.fullBar {
    background: transparent !important;
}
</style>
<style lang="less" scoped>
.back {
    padding-right: 12px;
}
.title {
    font-size: 16px;
    font-weight: bold;
}
.bar-right {
    font-size: 14px;
    color: #6a6d83;
    line-height: 24px;
}
</style>
