<template>
  <el-dialog custom-class="full-dialog" :visible.sync="visible" :show-close="false" append-to-body fullscreen>
    <div slot="title" class="toptitle">
      <div class="lefttit">{{title}}</div>
      <div>
        <el-button type="primary" @click="submitForm">{{ submitText || '确 定' }}</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>

    <div class="content shadow">
      <slot></slot>
    </div>
    
  </el-dialog>
</template>

<script>
export default {
  name: 'FullScreenDialog',
  props: ['visible', 'title', 'submitText'],
  methods: {
    cancel() {
      // 触发关闭事件
      this.$emit('cancel')
    },
    submitForm() {
      // 触发自定义回调事件
      this.$emit('submitForm')
    }
  }
}
</script>

<style lang="scss">
.full-dialog {
  background: #f0f2f5;

  .el-dialog__header {
    padding: 0;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10;
  }

  .el-dialog__body {
    padding: 100px 5% 20px 5%;
  }

  .content {
    padding-bottom: 20px;
    min-height: 660px;
    background: #fff;
    margin: auto;
    border-radius: 6px;

    .el-form {
      width: 550px;
      margin: auto;
      padding-top: 30px;
    }
  }

}

.toptitle {
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 50px 0 100px;
  background: #fff;
  width: 100%;
  height: 60px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
</style>