<template>
  <el-dialog
    :title="oTitle"
    :width="width"
    :top="top"
    :close-on-click-modal="false"
    :visible.sync="show"
    class="dialog"
    :modal="modal"
    :append-to-body="append"
    @close="closed"
  >
    <div>
      <slot />
    </div>
    <div class="footer">
      <slot name="footer" />
    </div>
  </el-dialog>
</template>

<script>
module.exports =  {
  props: {
    width: {
      default: '65%',
      type: String
    },
    height: {
      default: '70%',
      type: String
    },
    title: {
      default: '',
      type: String
    },
    top: {
      default: '28vh',
      type: String
    },
    modal: {
      default: true,
      type: Boolean
    },
    append: {
      default: false,
      type: Boolean
    },
    isShow: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      oTitle: '',
      refShow: false
    }
  },
  computed: {
    show: {
      get() {
        return this.isShow || this.refShow
      },
      set(val) {
        this.refShow = val
        this.$emit('update:isShow', val)
      }
    }
  },
  watch: {
    title: {
      handler() {
        this.oTitle = this.title
      },
      immediate: true
    }
  },
  methods: {
    setTitle(title) {
      this.oTitle = title
    },
    closed() {
      this.show = false
    }
  }
}
</script>

<style>
.dialog .el-dialog__header {
  background: #F0F9FC;
  padding: 10px;
  border-bottom: 1px solid #e5e5e5;
  min-height: 25px;
  border-radius: 5px 5px 0px 0px;
}
.dialog .el-dialog__header .el-dialog__headerbtn {
  top: 15px;
}
.dialog .el-dialog__header .el-dialog__title {
  color: #333;
  font-size: 15px;
}
.dialog .el-dialog__body {
  padding: 20px;
}
.dialog .el-dialog__body .footer {
  display: flex !important;
  justify-content: flex-end;
  margin-top: 10px;
}
.el-dialog__headerbtn .el-dialog__close {
  color: #333;

}
.dialog .el-dialog__header .el-dialog__headerbtn {
  top: 11px
}

</style>
