<template>
  <component :is="componentName" ref="BasicModal" v-bind="bindModalProps()" @close="handleClose" @ok="handleOk">

    <easy-data-view v-if="isDescribe" ref="BasicDescribe" :controlConfig="controlConfig" :formData="formData"></easy-data-view>
    <easy-data-form v-else ref="EasyDataForm"
                    :controlConfig="useControlConfig ? controlConfig : {}"
                    :data-source-name="dataSourceName"
                    :formData="formData"
                    :isSearchForm="isSearchForm"
                    :view-id="viewId"
                    labelPosition="right"
                    labelWidth="140px"></easy-data-form>
  </component>
</template>

<script>

export default {
  name: "BasicModal",
  props: {
    // 弹窗类型 drawer
    model: {
      type: String,
      default: 'drawer'
    },

    // loading
    loading: {
      type: Boolean,
      default: false
    },

    // 数据源配置属性
    controlConfig: {
      type: Object,
      default: () => {
      }
    },
    //数据源
    dataSourceName: {type: String, default: ""},

    // 数据源配置属性
    descColumns: {
      type: Array,
      default: () => {
      }
    },

    // Drawer组件属性
    drawerProps: {
      type: Object,
      default: () => {
      }
    },

    // Dialog组件属性
    dialogProps: {
      type: Object,
      default: () => {
      }
    },
  },
  components: {},
  data() {
    return {
      title: '',
      visible: false,
      // 是否为展示弹窗
      isDescribe: false,
      //使用外部传入的ControlConfig
      useControlConfig: true,
      viewId: undefined,
      formData: {},
      isSearchForm: false,
    }
  },
  computed: {
    componentName() {
      return this.model === 'drawer' ? 'ed-drawer' : 'ed-dialog'
    },
  },
  watch: {
    controlConfig: {
      handler(nVal, oVal) {
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    // console.log(this.descColumns)
  },
  methods: {
    /**
     * @name showModal
     * @description 显示弹窗
     */
    showModal(options) {
      for (const Key in options) {
        this[Key] = options[Key]
        this.$set(this, Key, options[Key])
      }

      if (!options.title) {
        this.title = this.controlConfig.dataSource?.remark
      }

      this.$nextTick(() => {
        this.visible = true
      })
    },

    async handleOk() {
      if (this.loading) {
        this.$message.warning("当前提交未完成，请等待")
        return false
      }
      try {
        const param = await this.$refs.EasyDataForm.getFormData(true);
        this.$emit('ok', param, this.submitUrl)
      } catch (e) {
        console.log(e);
      }
    },

    handleClose() {
      this.$emit('close')
      this.visible = false
    },

    close() {
      this.visible = false
    },

    /**
     * @name bindModalProps
     * @returns {Object}
     * @description 设置弹窗组件属性
     */
    bindModalProps() {
      return {
        title: this.title,
        visible: this.visible,
        loading: this.loading,
        showOkBtn: !this.isDescribe
      }
    }
  },
}
</script>
