<template>
  <el-dialog
    :width="width"
    class="common-dialog"
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="beforeClose"
    :append-to-body="appendToBody"
    :custom-class="customClass"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :destroy-on-close="destroyOnClose"
    :center="center"
    :fullscreen="fullscreen"
    :top="top"
    @open="open"
    @opened="opened"
    @close="close"
    @closed="closed"
  >
    <slot name="title" slot="title"></slot>
    <slot></slot>
    <slot name="footer" slot="footer"></slot>
  </el-dialog>
</template>

<script>
export default {
  name: 'common-dialog',
  props: {
    width: {
      type: String,
      default: () => {
        return '900px'
      }
    },
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    beforeClose: {
      type: Function
    },
    appendToBody: {
      type: Boolean,
      default: true
    },
    customClass: {
      type: String
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    center: {
      type: Boolean,
      default: false
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    top: {
      type: String,
      default: '8vh'
    },
    open: {
      type: Function,
      default() {
        return () => {}
      }
    },
    opened: {
      type: Function,
      default() {
        return () => {}
      }
    },
    close: {
      type: Function,
      default() {
        return () => {}
      }
    },
    closed: {
      type: Function,
      default() {
        return () => {}
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {},
  created() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.common-dialog /deep/ .el-dialog__header {
  padding-top: 14px;
  border-bottom: 1px solid #e8e8e8 !important;
  .el-dialog__headerbtn {
    top: 16px;
  }
}
.common-dialog /deep/ .el-dialog__footer {
  border-top: 1px solid #e8e8e8 !important;
  padding-bottom: 10px;
}
.common-dialog /deep/ .form-single-row {
  width: 600px;
  margin: 0 auto;
}
.common-dialog /deep/ .inputs {
  width: 90%;
}
.common-dialog /deep/ .el-dialog__body {
  height: calc(100% - 100px);
  padding: 20px;
}
</style>
