<template>
  <div v-if="formData">
    <el-dialog
      append-to-body
      :fullscreen="fullscreen"
      :title="formData.title"
      :visible.sync="dialogFormVisible"
      :width="dialogWidth"
      :top="dialogTop"
      :close-on-click-modal="closeOnClickModal"
    >
      <dk-form-create
        :form-data="formData"
        :is-submit="isSubmit"
        :path="path"
        :is-loading="isLoading"
        @submit="onSubmit"
        @fail="onFail"
      />
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: 'DkFormCreateDialog',
  inject: {
    layout: {
      default: {
        device: 'desktop'
      }
    }
  },
  props: {
    appendToBody: { type: Boolean, default: false },
    formData: { type: Object, default: null },
    width: { type: String, default: '50%' },
    top: { type: String, default: '15vh' },
    fullscreen: { type: Boolean, default: false },
    // 是否提交
    isSubmit: { type: Boolean, default: true },
    // 自动关闭弹窗
    autoCloseDialog: { type: Boolean, default: true },
    path: { default: '', type: String },
    closeOnClickModal: { type: Boolean, default: false },
    isLoading: { default: true, type: Boolean }
  },
  data() {
    return {
      dialogFormVisible: false,
      type: 0,
      windowWidth: '',
      windowHeight: ''
    }
  },
  computed: {
    device() {
      return this.layout.device
    },
    dialogWidth() {
      if (this.device === 'mobile') {
        return '100%'
      } else {
        return this.width
      }
    },
    dialogTop() {
      if (this.device === 'mobile') {
        return '0'
      } else {
        return this.top
      }
    }
  },
  mounted() {
  },
  methods: {
    show() {
      this.dialogFormVisible = true
    },
    close() {
      this.dialogFormVisible = false
    },
    onSubmit(formData, res) {
      if (this.isSubmit) {
        this.$emit('submit', formData, res)
      } else {
        this.$emit('submit', formData)
      }
      if (this.autoCloseDialog) this.dialogFormVisible = false
    },
    onFail(formData, res) {
      this.$emit('fail', formData, res)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
