<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>
export default {
  name: 'AaFullScreenModal',
  props: {
    visible: { type: Boolean, default: false },
    title: { type: String, default: '全屏弹窗' }
  }
};
</script>

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