
<template>
    <div class="as-view" :class="{
        'is-refresh': useRefresh,
        'is-scroll': useScroll,
        'is-tab-scroll': useTabScroll,
    }">
        <slot name="nav-bar" v-if="navBar">
            <van-nav-bar
                class="nav-bar"
                :fixed="fixed"
                :placeholder="placeholder"
                @click-left="handleLeft"
                @click-right="$emit('right', $event)">
                <template #left v-if="leftArrow">
                    <slot name="left">
                        <van-icon name="arrow-left" size="18"/>
                    </slot>
                </template>
                <template #title>
                    <span v-if="title">{{title}}</span>
                    <span v-else v-once>{{title || $route.meta.title}}</span>
                </template>
                <template #right>
                    <slot name="right"></slot>
                </template>
            </van-nav-bar>
        </slot>
        <slot></slot>
    </div>
</template>

<script>
    import { NavBar, Icon } from 'vant'
    export default {
        name: 'AsView',
        props: {
            fixed: { type: Boolean, default: true },
            placeholder: { type: Boolean, default: true },
            useRefresh: { type: Boolean, value: false },
            useTabScroll: { type: Boolean, value: false },
            useScroll: { type: Boolean, value: false },
            navBar: { type: Boolean, default: true},
            title: { default: '' },
            useLeftEvent: { type: Boolean, default: true },
            leftArrow: { type: Boolean, default: true },
        },
        methods: {
            handleLeft () {
                this.$emit('left', () => this.$router.go(-1))
                if (this.useLeftEvent) {
                    this.$router.go(-1)
                }
            },
        },
        components: {
            VanNavBar: NavBar,
            VanIcon: Icon
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/define";
    .nav-bar{
        /deep/ {
            .van-nav-bar__title{
                color: $view-nav-bar-text-color;
            }
            .van-nav-bar{
                z-index: 9;
                background-color: $view-nav-bar-background-color;
                .van-icon{
                    color: $view-nav-bar-text-color;
                }
            }
            .van-nav-bar__right{
                color: $view-nav-bar-text-color;
            }
        }
    }
    .is-refresh{
        @extend %df;
        @extend %fdc;
        /deep/{
            .van-pull-refresh{
                @extend %df1;
                @extend %oya;
                //overflow-y: auto;
            }
        }
    }
    .is-tab-scroll{
        @extend %df;
        @extend %df1;
        @extend %fdc;
        @extend %oh;
        /deep/{
            .van-tabs{
                @extend %df;
                @extend %df1;
                @extend %fdc;
                @extend %oh;
            }
            .van-tabs__content{
                @extend %df1;
                @extend %oh;
            }
            .van-tab__pane{
                @extend %h100;
                >div{
                    @extend %h100;
                    @extend %df;
                    @extend %df1;
                    @extend %fdc;
                    @extend %oh;
                }
            }
        }
    }
</style>
