<template>
  <input v-model="props.fileId" hidden />
  <a-upload
    :accept="props.isPdf ? 'application/pdf' : 'image/*'"
    action="/api2/upload/uploadfile"
    v-model:fileList="fileList"
    :beforeUpload="beforeUpload"
    @change="handleChange"
    :disabled="props.disabled"
  >
    <a-button block :disabled="props.disabled">
      <UploadOutlined />
      点击{{ props.fileId ? "替换" : "上传" }}
    </a-button>
  </a-upload>
</template>
<script>
import { UploadOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { ref } from "vue";
export default {
  name: "Upload",
  props: {
    name: String,
    fileId: Number,
    fileUrl: String,
    isPdf: Boolean,
    disabled: Boolean
  },
  components: {
    UploadOutlined
  },
  setup(props, context) {
    var fileList = ref([]);
    if (!props.fileId && props.fileUrl) {
      fileList.value.push({
        uid: "-1",
        status: "done",
        url: props.fileUrl,
        name: props.fileName
      });
    }
    const updateValue = value => {
      context.emit("update:fileId", value); // 传递的方法
    };
    const beforeUpload = file => {
      console.log(file);
      const isValid =
        props.isPdf === true
          ? file.type === "application/pdf"
          : file.type === "image/jpeg" || file.type === "image/png";
      if (!isValid) {
        message.error("只能上传受支持格式的文件");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        message.error("文件大小超过2MB!");
      }
      return isValid && isLt2M;
    };
    const handleChange = info => {
      console.log(info.file.status, info.file, info.fileList);
      // if (info.file.status !== "uploading") {
      // }
      if (info.file.status === "done") {
        message.success(`${info.file.name} 文件上传成功`);
        updateValue(info.file.response.id);
        if (info.fileList.length > 1) {
          info.fileList.shift();
        }
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} 文件上传失败`);
        info.fileList.pop();
      }
      if (info.file.status === "removed") {
        updateValue(null);
      }
    };
    return { props, fileList, beforeUpload, handleChange, updateValue };
  }
};
</script>
