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

<script>
import { computed } from 'vue';
import { mapState } from 'vuex';
export default {
    name: 'App',
    provide() {
        return {
            setKeeps: this.setKeeps,
            bar: computed(() => this.barValue),
            content: computed(() => this.$refs.content),
            scrollWrapper: computed(() => this.$el),
            changeScroll: this.changeScroll,
            keeps: computed(() => this.keeps),
            bodyScroll: computed(() => this.bodyScroll),
            changeTab: this.changeTab
        };
    },
    inject: ['barHeight'],
    computed: {
        ...mapState(['theme']),
        barValue() {
            return this.$refs.bar;
        },
        scrollStyle() {
            return {
                boxSizing: 'border-box',
                minHeight: `calc(100vh - ${(this.barHeight || '0') + 'px'})`
            };
        }
    },
    data() {
        return {
            checkEvent: null,
            keeps: [],
            bodyScroll: 0
        };
    },
    watch: {
        $route() {
            this.$nextTick(() => {
                this.$el.scrollTop = 0;
            });
        }
    },
    mounted() {
        if (this.$route.params.companyId) {
            this.$store.dispatch('getCompanyInfo', this.$route.params.companyId);
        }
    },
    methods: {
        setKeeps(keep = [], isAdd = true, isClear = false) {
            let keeps = [...this.keeps];
            if (isAdd) {
                keeps = [...keeps, ...keep];
            } else {
                keeps = keeps.filter(item => {
                    return !keep.includes(item);
                });
            }
            if (isClear) {
                keeps = [];
            }
            this.keeps = keeps;
        },
        changeScroll(scrollTop, isAnimate = false) {
            console.log(scrollTop);
            if (isAnimate) {
                this.$el.scrollTo({
                    top: scrollTop || 0,
                    behavior: 'smooth'
                });
            } else {
                this.$el.scrollTop = scrollTop || 0;
            }
        },
        scrollEvent() {
            // console.log(this.$el.scrollTop);
            this.bodyScroll = this.$el.scrollTop;
        },
        changeTab(color) {
            this.$refs.bar.getColor(color);
        }
    }
};
</script>

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