<template>
  <my-dialog ref="my-dialog" v-bind="{...$attrs, ...dialogProps}" :title="title" :visible="visible" :loading="loading" @close="close" @confirm="confirm">
    <my-form ref="my-form" v-bind="formProps" :fields="fields" :default-value="defaultValue" />
  </my-dialog>
</template>

<script>
import MyDialog from '../MyDialog'
import MyForm from '../coreCmp/MyForm.vue'
export default {
  components: { MyDialog, MyForm },
  props: {
    title: {
      type: String,
      default: ''
    },
    dialogProps: {
      type: Object,
      default: () => ({})
    },
    formProps: {
      type: Object,
      default: () => ({})
    },
    fields: {
      type: [Array, Object],
      default: () => []
    },
    defaultValue: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      visible: false
    }
  },
  methods: {
    close() {
      this.hide()
      this.hideLoading()
      const form = this.$refs['my-form']
      form.resetFields()
      form.clearValidate()
    },
    confirm() {
      this.loading = true
      const form = this.$refs['my-form']
      form.validate((valid) => {
        console.log(valid)
        if (valid) {
          const data = form.getFormData()
          this.$emit('confirm', { data, hideLoading: this.hideLoading, close: this.close })
        } else {
          this.loading = false
        }
      })
    },
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    },
    hideLoading() {
      this.loading = false
    }
  }
}
</script>
