<template>
  <Modal v-bind="getBindValue" v-on="$listeners" @cancel="onCancel">
    <slot></slot>
    <template #[item]="data" v-for="item in Object.keys(omit($slots, 'default'))">
      <slot :name="item" v-bind="data || {}"></slot>
    </template>
  </Modal>
</template>
<script lang="ts">
/**
 * 该组件用于处理Modal.tsx 属性绑定无效的bug 而新建的组件
 */
import { Modal } from 'ant-design-vue'
import { computed, defineComponent, ref, toRefs, unref } from 'vue'
import { basicProps } from '../props'
import { useModalDragMove } from '../hooks/useModalDrag'
import { useAttrs } from '/@/hooks/core/useAttrs'
import { ModalProps } from '../typing'
import { omit } from 'lodash-es'
export default defineComponent({
  name: 'VModal',
  inheritAttrs: false,
  props: basicProps,
  emits: ['cancel'],
  components: { Modal },
  setup(props, { emit }) {
    const propsRef = ref<Partial<ModalProps> | null>(null)
    const { visible, draggable, destroyOnClose } = toRefs(props)
    const attrs = useAttrs()
    useModalDragMove({
      visible,
      destroyOnClose,
      draggable,
    })
    const onCancel = (e: Event) => {
      emit('cancel', e)
    }
    // Custom title component: get title
    const getMergeProps = computed((): Recordable => {
      return {
        ...omit(props, 'draggable'),
        ...(unref(propsRef) as any),
      }
    })
    const getBindValue = computed((): Recordable => {
      const attr = {
        ...attrs,
        ...unref(getMergeProps),
      }
      return attr
    })

    return { getBindValue, onCancel, omit }
  },
})
</script>