<template>
  <BasicModal
    width="1060px"
    v-bind="$attrs"
    @register="registerModal"
    :show-cancel-btn="false"
    :show-ok-btn="false"
  >
    <div class="h-full" v-if="datas.length > 0">
      <div class="px-4 pt-4">
        <SearchBox
          @search="
            (val) => {
              search(val, true);
            }
          "
        />
      </div>
      <div
        class="flex flex-wrap mb-16px"
        style="height: calc(100% - 128px); align-content: baseline"
      >
        <UserCard v-for="(item, index) in datas" :key="index" :item="item" class="picked" />
      </div>

      <div class="page-box">
        <a-pagination
          v-model:current="page.limit"
          v-model:pageSize="page.size"
          :total="total"
          show-less-items
          show-size-changer
          show-quick-jumper
          @change="search(page.keyword)"
        />
      </div>
    </div>
    <div v-else class="flex h-full items-center justify-center"
      ><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 { getUserByRolePageList } from '/@/api/system/role';
  export default defineComponent({
    name: 'AuthModal',
    components: { BasicModal, UserCard, SearchBox },
    emits: ['success', 'register'],
    setup(_) {
      const datas = ref<any>([]);
      const total = ref(0);
      const page = ref({
        id: '',
        size: 10,
        limit: 1,
        keyword: '',
      });
      const [registerModal, { setModalProps }] = useModalInner(async (data) => {
        if (data) {
          page.value.id = data;
          search(page.value.keyword);
        }
        setModalProps({
          confirmLoading: false,
          footer: null,
          canFullscreen: true,
          fixedHeight: true,
        });
      });
      async function search(keyword: string, initpage?: boolean) {
        if (initpage) {
          page.value.limit = 1;
        }
        page.value.keyword = keyword;
        let res = await getUserByRolePageList(page.value);
        datas.value = res.records;
        total.value = res.total;
      }
      return {
        registerModal,
        datas,
        simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
        search,
        page,
        total,
      };
    },
  });
</script>
<style>
  .page-box {
    text-align: right;
    padding: 16px;
  }
</style>
