<template>
    <van-nav-bar
        title=""
        fixed
        left-text=" "
        right-text=" "
        :left-arrow="false"
        v-if="show"
        z-index="20"
        placeholder
        safe-area-inset-top
        :border="false"
    >
        <template #left>
            <van-popover
                v-model:show="showPopover"
                placement="bottom-start"
                theme="dark"
                :actions="actions"
                @select="onSelect"
            >
                <template #reference>
                    <van-icon size="24" color="#fff" name="bars" />
                </template>
            </van-popover>
        </template>
    </van-nav-bar>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            showPopover: false,
            actions: [
                { text: '首页', icon: require('../assets/menu1.png'), value: '/home' },
                { text: '发现', icon: require('../assets/menu2.png'), value: '/discover' },
                { text: '柜子', icon: require('../assets/menu3.png'), value: '/store' },
                { text: '我的', icon: require('../assets/menu4.png'), value: '/mine' },
                { text: '上一页', icon: 'arrow-left', value: 'back' }
            ]
        };
    },
    watch: {
        $route() {
            if (this.$route.meta.menuPage) {
                this.show = false;
            } else {
                this.show = true;
            }
        }
    },
    mounted() {
        if (this.$route.meta.menuPage) {
            this.show = false;
        } else {
            this.show = true;
        }
    },
    methods: {
        onSelect(val) {
            if (val.value === 'back') {
                this.$router.go(-1);
            } else {
                this.$router.push(val.value);
            }
        }
    }
};
</script>
