
<template>
    <van-popup
        class="as-popup"
        :position="position"
        :value="visible"
        @input="$emit('update:visible', $event)">
        <as-view
            class="as-popup-inner"
            @left="$emit('update:visible', false)"
            @right="$emit('right')"
            :use-left-event="false"
            :title="title">
            <template #left>
                <slot name="left"></slot>
            </template>
            <template #title>
                <slot name="title"></slot>
            </template>
            <template #right>
                <slot name="right"></slot>
            </template>
            <slot></slot>
        </as-view>
    </van-popup>
</template>

<script>
    import { Popup } from 'vant'
    import AsView from '../as-view'
    export default {
        name: 'AsPopup',
        props: {
            title: { type: String | Number, default: '' },
            visible: { type: Boolean, default: '' },
            position: { type: String, default: 'right' }
        },
        components: {
            AsView,
            VanPopup: Popup,
        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/define";
    .as-popup{
        @extend %w100;
        @extend %h100;
        /deep/{
            // 解决 真机 fixed 在 transform 失效的问题
            .van-nav-bar{
                @extend %pa;
            }
        }
        &-inner{
            @extend %w100;
            @extend %h100;
            @extend %oya;
        }
    }
</style>
