<template>
  <a-modal v-model:visible="visible"
           :width="width"
           :title="title"
           :afterClose="closed"
           :destroyOnClose="destroyOnClose"
           :maskClosable="closeOnClickMask"
           :get-container="getContainer"
           @cancel="cancel"
           @ok="sure">
    {{content}}
    <slot />
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect } from "vue";
import { Modal as AModal } from "ant-design-vue";

const ModalIndex = defineComponent({
  components: {
    AModal,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    destroyOnClose: {
      type: Boolean,
      default: false,
    },
    closeOnClickMask: {
      type: Boolean,
      default: false,
    },
    content: String,
    width: [String, Number],
    title: String,
    getContainer: Function,
    closed: Function,
    cancel: Function,
    confirm: Function,
  },
  setup(props) {
    let visible = ref(props.show);

    watchEffect(() => (visible.value = props.show));

    return { visible };
  },
  methods: {
    sure() {
      this.visible = false;
      console.log(this.$slots.default!());
      this.confirm!();
    },
  },
});

export default ModalIndex;
</script>