<template>
  <BasicModal
    width="1060px"
    v-bind="$attrs"
    @register="registerModal"
    :show-cancel-btn="false"
    :show-ok-btn="false"
  >
    <div v-if="datas.length > 0">
      <div class="px-4 pt-4">
        <SearchBox @search="search" />
      </div>
      <div class="flex flex-wrap mb-16px">
        <UserCard v-for="(item, index) in temps" :key="index" :item="item" class="picked" />
      </div>
    </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 '/@/components/SelectOrganizational/src/card/UserCard.vue';
  import { Empty } from 'ant-design-vue';
  import { SearchBox } from '/@/components/ModalPanel/index';
  import { cloneDeep } from 'lodash-es';
  export default defineComponent({
    name: 'AuthModal',
    components: { BasicModal, UserCard, SearchBox },
    emits: ['success', 'register'],
    setup(_) {
      const datas = ref<any>([]);
      const temps = ref<any>([]);
      const [registerModal, { setModalProps }] = useModalInner(async (data) => {
        setModalProps({ confirmLoading: false, footer: null });
        datas.value = data;
        temps.value = cloneDeep(data);
      });
      function search(keyword: string) {
        if (keyword) {
          temps.value = datas.value.filter((o) => {
            return o.name.indexOf(keyword) > -1 || o.code.indexOf(keyword) > -1;
          });
        } else {
          temps.value = cloneDeep(datas.value);
        }
      }
      return { registerModal, datas, simpleImage: Empty.PRESENTED_IMAGE_SIMPLE, search, temps };
    },
  });
</script>
