<template>
  <div class="aa-fs-mask" v-if="visible">
    <div class="aa-fs-head">
      <span class="aa-fs-title">{{ title }}</span>
      <button class="aa-fs-close" @click="$emit('cancel')">×</button>
    </div>
    <div class="aa-fs-body">
      <slot>内容区</slot>
    </div>
    <div class="aa-fs-foot">
      <button class="aa-btn" @click="$emit('cancel')">取消</button>
      <button class="aa-btn aa-btn--primary" @click="$emit('ok')">保存</button>
    </div>
  </div>
</template>

<script setup>
defineProps({
  visible: { type: Boolean, default: false },
  title: { type: String, default: '全屏弹窗' }
});
defineEmits(['cancel', 'ok']);
</script>

<style src="./FullScreenModal.css"></style>
