
<template>
    <van-popup
        class="as-preview"
        :value="visible">
        <slot></slot>
        <van-icon @click="hide" class="as-preview-close" name="cross" />
    </van-popup>
</template>

<script>
    import { Popup, Icon } from 'vant'

    export default {
        name: 'AsPreview',
        data () {
            return {
                visible: false,
            }
        },
        props: {
            beforeClose: { type: Function, default: done => done() }
        },
        methods: {
            show () {
                this.visible = true
            },
            hide () {
                this.beforeClose(() => this.visible = false)
            },
        },
        components: {
            VanIcon: Icon,
            VanPopup: Popup,
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/define";
    .as-preview{
        @extend %w100;
        @extend %h100;
        background-color: #000;
        &-close{
            @extend %pa;
            @extend %t0;
            @extend %r0;
            @extend %cfff;
            @extend %df;
            @extend %aic;
            @extend %jcc;
            @extend %bsb;
            @extend %cp;
            @extend %ao8;
            height: j(50);
            width: j(50);
            padding: 0 0 j(10) j(10);
            border-bottom-left-radius: j(50);
            background-color: rgba(255, 255, 255, .3);
        }
    }
</style>
