<template>
  <el-dialog class="fullscreen-dialog" :title="title" :visible.sync="open" append-to-body fullscreen
             @open="onOpen" @close="onClose" @closed="onClosed" @opened="onOpened"
  >
    <slot/>

    <div slot="footer">
      <slot name="footer"/>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'FullscreenDialog',

  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
  },

  data() {
    return {
      open: this.visible,
    };
  },

  watch: {
    open(val) {
      this.$emit('update:visible', val);
    },
    visible(val) {
      this.open = val;
    },
  },

  computed: {
  },

  methods: {
    onOpen() {
      this.$emit('open', ...arguments);
    },
    onOpened() {
      this.$emit('opened', ...arguments);
    },
    onClose() {
      this.$emit('close', ...arguments);
    },
    onClosed() {
      this.$emit('closed', ...arguments);
    },
  },

  mounted() {
  },

  destroyed() {
  }
};
</script>

<style scoped>
.fullscreen-dialog >>> .el-dialog__close {
  font-size: 32px;
  background-color: #13ce6666;
  border-radius: 4px;
  box-shadow: 2px 2px 5px #999999;
  padding: 2px;
}
</style>
