<template>
  <div class="kole-fs-mask" v-if="visible">
    <div class="kole-fs-head">
      <span class="kole-fs-title">{{ title }}</span>
      <button class="kole-fs-close" @click="$emit('cancel')">×</button>
    </div>
    <div class="kole-fs-body">
      <slot>内容区</slot>
    </div>
    <div class="kole-fs-foot">
      <button class="kole-btn" @click="$emit('cancel')">取消</button>
      <button class="kole-btn kole-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>
