<template>
  <!-- <a-space> -->
  <a-upload
    v-show="!showUploadProgress"
    v-model:file-list="fileList"
    v-bind="getBindValue"
    accept=".doc, .docx, .pdf"
    :auto-upload="false"
    :show-file-list="true"
    :show-upload-button="{
      showOnExceedLimit: false
    }"
    :custom-icon="getCustomIcon()"
    :on-before-upload="file => uploadocFileHandler(file)"
    :on-before-remove="fileitem => removeFileHandler(fileitem)"
  >
  </a-upload>
  <a-progress v-show="showUploadProgress" :percent="currentProgress / 100" />
  <!-- </a-space> -->
</template>

<script lang="ts" setup>
import { uploadFile } from '@/api/client'
import { getUploadWorkFileUrl } from '@/api/project/work'
import { FileItem } from '@arco-design/web-vue'
import IconDelete from '@arco-design/web-vue/es/icon/icon-delete'
import { computed, useAttrs, h, ref, PropType } from 'vue'

const fileList = ref<FileItem[]>([])
const objectNameList = ref<{ id: string; name: string }[]>([])
const currentProgress = ref(0) // 控制进度条
const showUploadProgress = ref(false)

const emits = defineEmits(['update:modelValue'])
const getCustomIcon = () => {
  return {
    removeIcon: () => h(IconDelete, { size: 20, style: { color: 'red' } }),
    fileName: (file: any) => {
      return `${file.name}`
    }
  }
}

const props = defineProps({
  modelValue: {
    type: Array as PropType<string[]>
  },
  workId: {
    type: String
  },
  accept: {
    type: String
  },
  limit: {
    type: Number,
    default: () => 0
  }
})

const getBindValue = computed(() => {
  const attrs = useAttrs()
  const obj = { ...attrs, ...props }
  return obj
})

/**
 *
 * @param url
 * @param data
 * @param file
 */
const uploadWorkFile = async (
  url: string,
  data: { [key: string]: any },
  file: File
) => {
  await uploadFile(
    url,
    {
      data,
      file
    },
    e => {
      currentProgress.value = Number(((e.loaded / e.total) * 100).toFixed(0))
    }, // 调用进度更新函数
    1000 * 60 * 60
  )
}

// 上传项目文档
const uploadocFileHandler = async (
  currentFile: File
): Promise<boolean | File> => {
  try {
    const {
      url,
      form_data: formData,
      object_name: id
    } = await getUploadWorkFileUrl({
      work_id: props.workId!,
      filename: currentFile.name
    })
    showUploadProgress.value = true
    await uploadWorkFile(url, formData, currentFile)
    currentProgress.value = 0
    objectNameList.value.push({
      id,
      name: currentFile.name
    })
    emits('update:modelValue', objectNameList.value)
    showUploadProgress.value = false
    return true
  } catch (_e) {
    currentProgress.value = 0
    showUploadProgress.value = false
    return false
  }
}

/**
 * 删除文件触发
 * @param currentFile 当然删除文件
 */
const removeFileHandler = async (currentFile: FileItem): Promise<boolean> => {
  const index = fileList.value.findIndex(item => item.uid === currentFile.uid)
  objectNameList.value.splice(index, 1)
  return true
}
</script>

<style lang="less" scoped>
:deep(.arco-upload-progress) {
  display: none;
}
</style>
