<template>
  <div>
    <a-upload-dragger
      v-model:fileList="fileList.list"
      name="file"
      :multiple="false"
      @change="handleChange($event)"
      :before-upload="() => false"
    >
      <p class="ant-upload-drag-icon">
        <InboxOutlined />
      </p>
      <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
      <p class="ant-upload-hint">
        支持扩展名：{{ supportFileType.join(' ') }}
        <br />
        文件大小：最大支持{{ fileLimitSize }}M
      </p>
    </a-upload-dragger>
    <Image
      class="mt-2"
      style="width: 6.25rem; height: 6.25rem"
      v-if="url ? url : imgUrl"
      :src="url ? url : imgUrl"
    />
  </div>
</template>
<script lang="ts" setup name="uploadfile">
  import { ref, reactive } from 'vue';
  import { InboxOutlined } from '@ant-design/icons-vue';
  import { Image } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { uploadApi } from '/@/api/personal/index';

  defineProps({
    url: {
      type: String,
      default: '',
    },
  });

  const emit = defineEmits(['fileUrlEmit']);

  const { createMessage } = useMessage();

  const imgUrl = ref('');

  const fileList = reactive<any>({
    list: [],
  });

  const supportFileType = ['image/png', 'image/png', 'image/jpeg', 'image/gif'];

  const fileLimitSize = 5;

  //验证图片类型和大小
  const beforeUploadVerify = (type, size) => {
    let status = false;
    const limitImgSize = (size as number) / 1024 / 1024 < fileLimitSize;
    if (!supportFileType.includes(type)) {
      status = false;
      const errorType = `只能上传其中${supportFileType.join(' ')}中的类型!`;
      createMessage.error(errorType);
      throw Error(errorType);
    }
    status = true;
    if (!limitImgSize) {
      status = false;
      const errorType = `图片大小不能超过${fileLimitSize}MB!`;
      createMessage.error(errorType);
      throw Error(errorType);
    }
    status = true;
    return status;
  };

  const handleChange = async ({ file }) => {
    const fileStatus = file.status;
    const fileSize = file.size;
    const fileType = file.type;
    if (fileStatus === 'removed') {
      fileList.list = [];
      imgUrl.value = '';
    } else {
      if (!beforeUploadVerify(fileType, fileSize)) return;
      fileList.list = [file];
      const formData = new FormData();
      formData.append('file', file);
      const { fileStaticUri } = await uploadApi(formData);
      if (!fileStaticUri) return;
      imgUrl.value = fileStaticUri;
      emit('fileUrlEmit', fileStaticUri);
    }
  };
</script>

<style lang="less" scoped></style>