<template>
    <div>
      <el-upload
        class="upload-demo"
        action="/professional/file/teacherAboutInfoUpload"
        :data="params"
        :headers="headers"
        :before-upload="beforeUpload"
        :on-remove="handleRemove"
        :on-success="handleUploadSuccess"
        :file-list="fileList"
        :accept="realAcceptFile"
        :limit="realLimitNums"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <el-tag>仅支持{{realAcceptFile}}后缀的文件上传,且文件大小不能超过5M!最大上传数量限制为{{realLimitNums}}.</el-tag>
      </el-upload>
    </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import { useMessage } from '/@/hooks/message'
  import { Session } from '/@/utils/storage'

  // Props
  const props = defineProps<{
    params?: any
    fileList?: any[]
    limitNums?: number
    acceptFile?: string
  }>()

  // Emits
  const emit = defineEmits<{
    delListData: [url: string]
    pushListData: [obj: { name: string; url: string }]
  }>()

  // 消息提示 hooks
  const message = useMessage()

  // 响应式数据
  const realLimitNums = ref(0)
  const realAcceptFile = ref('.jpg,.jpeg,.png,.pdf')
  const fileName = ref('')

  // Computed
  const headers = computed(() => {
    return {
      "Authorization": 'Bearer ' + Session.getToken()
    }
  })

  // 生命周期
  onMounted(() => {
    if (props.limitNums) {
      realLimitNums.value = props.limitNums
    } else {
      realLimitNums.value = 5
          }
    if (props.acceptFile) {
      realAcceptFile.value = props.acceptFile
    } else {
      realAcceptFile.value = ".jpg,.jpeg,.png,.pdf"
          }
  })

  // 方法
  // const handleUploadLimit = () => {
  //   message.error('最多只能上传1张图片')
  // }

  const beforeUpload = (file: any) => {
    let fileNameStr = file.name
    const pos = fileNameStr.lastIndexOf(".")
    fileNameStr = fileNameStr.substring(pos + 1, fileNameStr.length)
    fileNameStr = fileNameStr.toLowerCase()
    const extension = fileNameStr === 'jpg'
    const extension2 = fileNameStr === 'png'
    const extension3 = fileNameStr === 'jpeg'
    const extension4 = fileNameStr === 'bmp'
    const extension5 = fileNameStr === 'gif'
    const extension6 = fileNameStr === 'pdf'
                const isLt2M = file.size / 1024 / 1024 < 5
    if (!extension && !extension2 && !extension3 && !extension4 && !extension5 && !extension6) {
      message.warning('请检查文件上传格式!')
                    return false
                }
                if (!isLt2M) {
      message.warning('上传图片大小不能超过 5MB!')
                    return false
                }
    fileName.value = file.name
                return true // 返回false不会自动上传
  }

  const handleRemove = (file: any) => {
    emit("delListData", file.url)
  }

  // const handleUploadError = () => {
  //   message.error('文件上传失败，请检查文件上传格式与大小')
  // }

  const handleUploadSuccess = (res: any) => {
    message.success('文件上传成功')
    const obj = { name: res.data.name, url: res.data.url }
    emit("pushListData", obj)
    }
</script>

<style scoped>

</style>
