<template>
  <el-dialog
    class="ui-dialog"
    :class="['ui-dialog--' + size]"
    top="10vh"
    :append-to-body="true"
    :visible.sync="dialogVisible"
    :title="title"
    :width="width"
    @close="handleClose"
    @open="handleOpen"
    @opened="handleOpended"
    @closed="handleClosed"
    :close-on-click-modal="closeOnClickModal"
  >
    <slot v-if="showContent"></slot>
  </el-dialog>
</template>
<script>
import ElDialog from 'element-ui/lib/dialog'
import 'element-ui/lib/theme-chalk/dialog.css'

export default {
  name: 'UiDialog',
  components: {
    ElDialog
  },
  provide() {
    return {
      UiDialog: this
    }
  },
  model: {
    prop: 'visible',
    event: 'input'
  },
  props: {
    width: {
      type: String
    },
    title: {
      type: String
    },
    size: {
      type: String,
      default: 'small',
      validator: (value) => {
        return ['large', 'medium', 'small', 'mini', 'auto'].indexOf(value) >= 0
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showContent: this.visible
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    handleOpen() {
      this.showContent = true
    },
    handleOpended() {
      this.$emit('opened')
    },
    handleClose() {
      this.$emit('close')
    },
    handleClosed() {
      this.showContent = false
      this.$emit('closed')
    },
    close() {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="less">
.ui-dialog{
  .el-dialog__header{
    border-bottom: 1px solid #eee;
    padding: 15px 20px;
    background-color: #F9FAFB;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .el-dialog__body{
    color: #404040;
    padding: 0;
  }
}
.ui-dialog--small{
  .el-dialog{
    width: 600px;
  }
}
.ui-dialog--mini{
  .el-dialog{
    width: 420px;
  }
}
.ui-dialog--medium{
  .el-dialog{
    width: 740px;
  }
}
.ui-dialog--large{
  .el-dialog{
    width: 1000px;
  }
}
.ui-dialog--auto{
  text-align: center;
  .el-dialog{
    text-align: left;
    width: auto;
    display: inline-block;
  }
}
</style>
