<template>
  <BasicModal
    width="1000px"
    v-bind="$attrs"
    @register="registerModal"
    :show-cancel-btn="false"
    :show-ok-btn="false"
  >
    <div class="flex flex-wrap" v-if="datas.length > 0">
      <UserCard v-for="(item, index) in datas" :key="index" :item="item" />
    </div>
    <div v-else><a-empty :image="simpleImage" /></div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import UserCard from './UserCard.vue';
  import { Empty } from 'ant-design-vue';
  export default defineComponent({
    name: 'AuthModal',
    components: { BasicModal, UserCard },
    emits: ['success', 'register'],
    setup(_) {
      const datas = ref<any>([]);
      const [registerModal, { setModalProps }] = useModalInner(async (data) => {
        setModalProps({ confirmLoading: false });
        datas.value = data;
      });

      return { registerModal, datas, simpleImage: Empty.PRESENTED_IMAGE_SIMPLE };
    },
  });
</script>
