<template>
    <div class="scroll-wrapper" ref="scroll">
        <app-bar ref="bar"></app-bar>
        <router-view v-slot="{ Component }">
            <keep-alive :include="keeps">
                <component :is="Component" class="scroll-content" ref="content" />
            </keep-alive>
        </router-view>
    </div>
</template>

<script>
import AppBar from './components/AppBar.vue';
import { computed } from 'vue';
export default {
    components: { AppBar },
    name: 'App',
    provide() {
        return {
            setKeeps: this.setKeeps,
            bar: computed(() => this.$refs.bar),
            content: computed(() => this.$refs.content),
            scrollWrapper: computed(() => this.$el),
            changeScroll: this.changeScroll,
            keeps: computed(() => this.keeps)
        };
    },
    data() {
        return {
            checkEvent: null,
            keeps: []
        };
    },
    watch: {
        $route() {
            this.$nextTick(() => {
                this.$el.scrollTop = 0;
            });
        }
    },
    mounted() {
        // this.$dialog
        //     .confirm({
        //         title: '提示',
        //         message: '您的藏品室有一个新资产哦！',
        //         confirmButtonText: '立即查看'
        //     })
        //     .then(() => {
        //         this.$router.push('/store');
        //     });
    },
    methods: {
        setKeeps(keep = [], isAdd = true) {
            let keeps = [...this.keeps];
            if (isAdd) {
                keeps = [...keeps, ...keep];
            } else {
                keeps = keeps.filter(item => {
                    return !keep.includes(item);
                });
            }
            this.keeps = keeps;
        },
        changeScroll(scrollTop) {
            console.log(scrollTop);
            this.$el.scrollTop = scrollTop;
        }
    }
};
</script>

<style lang="less" scoped>
.scroll-content {
    min-height: 100vh;
    box-sizing: border-box;
    // padding-top: 46px;
}
.scroll-wrapper {
    background-color: @bg;
}
</style>
