<template>
    <app-modal class="app-popup" :show="show" direction="bottom" width="100%" @mask="closed">
        <app-view class="g-form">
            <template #header>
                <slot name="header">
                    <div class="app-popup__header">
                        <div class="title">{{ title }}</div>
                        <Icon name="close" size=".36rem" @click="closed" />
                    </div>
                </slot>
            </template>
            <div class="app-popup__container">
                <slot></slot>
            </div>
            <template #footer>
                <div class="g-form__footer app-popup__footer">
                    <slot name="footer"></slot>
                </div>
            </template>
        </app-view>
    </app-modal>
</template>

<script lang="ts" setup>
import { Icon } from 'vant'
import AppModal from '@/components/base/modal/index.vue'

defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: String
})

const emit = defineEmits(['update:show'])

const closed = () => {
    emit('update:show', false)
}
</script>

<style lang="less">
@import './index.less';
</style>