<template>
  <el-dialog
    @close="closeModal(modalData.resetModal)"
    :title="modalData.title"
    :top="modalData.top || '15vh'"
    :custom-class="modalData.customClass || ''"
    :show-close="modalData.showClose"
    :visible.sync="modalData.flag"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="modalData.appendToBody ? modalData.appendToBody : false"
  >
    <slot></slot>
  </el-dialog>
</template>

<script>
export default {
  name: 'SgpDialog',

  data () {
    return {
      appendToBody: false
    }
  },
  moudted () {
    if (this.modalData.appendToBody) {
      this.appendToBody = true
    } else {
      this.appendToBody = false
    }
  },
  methods: {
    closeModal (fn) {
      // ×号关闭弹窗并且清空数据
      if (fn) {
        fn()
      }
    }
  },
  props: ['modalData']
}
</script>

<style lang="scss" scoped>
.dialog {
  .el-dialog {
    .el-dialog__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      height: 50px;
      margin-bottom: 10px;
      padding: 0;
      padding-left: 10px;
      text-align: left;
      .el-dialog__headerbtn {
        top: 10px;
      }
    }
  }

  .el-form {
    border: none;
  }

  .search-form {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .el-form {
    .el-form-item {
      .el-form-item__error {
        display: block;
      }
    }
  }
}
</style>
