<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      v-bind="{
        closeOnClickModal: false,
        closeOnPressEscape: false,
        appendToBody: true,
        width: '50vw',
        ...options.dialog,
        customClass: 'easy-dialog ' + options.dialog.customClass,
        ...lockBind
      }"
      @closed="$destroy()"
    >
      <component :is="options.component.is" v-bind="options.component" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: true,
      lockClose: false,
      options: {
        dialog: {},
        component: {}
      }
    }
  },
  computed: {
    lockBind() {
      if (this.lockClose) {
        return {
          closeOnClickModal: false,
          closeOnPressEscape: false,
          showClose: false
        }
      } else {
        return {}
      }
    }
  }
}
</script>
