<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="附件查看"
    wrapClassName="custom-modal-box"
  >
    <div class="img-box">
      <a-image-preview-group v-if="imgList.length">
        <a-image v-for="(item, index) in imgList" :key="index" :src="item.url" />
      </a-image-preview-group>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getFileList } from '/@/api/system/file';
  import { getFileUrl } from '/@/utils/event/design';

  const imgList = ref<any>([]);
  defineEmits(['register']);
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({
      confirmLoading: false,
      destroyOnClose: true,
      showOkBtn: false,
      showCancelBtn: false,
      footer: null,
      bodyStyle: {
        height: '300px',
      },
    });
    imgList.value = await getFileList({ folderId: data.filePath });
    imgList.value?.forEach((x) => {
      x.url = getFileUrl(x);
    });
  });
</script>
<style lang="less" scoped>
  :deep(.ant-image-img) {
    width: 100px;
    height: 75px;
    padding: 5px;
    border: 1px solid silver;
    border-radius: 4px;
    margin-right: 10px;
  }

  .img-box {
    display: flex;
    align-items: center;
  }
</style>
