<template>
  <div class="clearfix">
    <a-upload :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove" :custom-request="requestMethod">
      <a-button>
        <upload-outlined />
        选择文件
      </a-button>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel()">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script lang="ts">
  import { UploadOutlined } from '@ant-design/icons-vue';
  import { defineComponent, ref } from 'vue';
  import type { UploadProps } from 'ant-design-vue';

  export default defineComponent({
    name: 'SelectFile',
    components: {
      UploadOutlined,
    },
    emits: ['update:value', 'selectFile'],
    setup(props, { emit, refs }) {
      const fileList = ref<UploadProps['fileList']>([]);
      const uploading = ref<boolean>(false);
      //预览图
      const previewImage = ref<string | undefined>('');
      //预览框状态
      const previewVisible = ref<boolean>(false);

      const handleRemove: UploadProps['onRemove'] = file => {
        const index = fileList.value.indexOf(file);
        const newFileList = fileList.value.slice();
        newFileList.splice(index, 1);
        fileList.value = newFileList;
        emit('update:value', fileList.value[0]);
      };

      const beforeUpload: UploadProps['beforeUpload'] = file => {
        fileList.value = [...fileList.value, file];
        emit('selectFile', file);
      };
      const requestMethod: UploadProps['customRequest'] = ({ file, onSuccess }) => {
        console.log('requestMethod', file);
      };

      return {
        requestMethod,
        fileList,
        uploading,
        handleRemove,
        beforeUpload,
        previewImage,
        previewVisible,
      };
    },
  });
</script>
<style scoped>
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
