<template>
  <div class="">
    <vModal
      v-model:visible="visibleModal"
      :title="modalTitle"
      :ok-loading="loading"
      :width="600"
      cancel-text="关闭"
      @modal-handle-ok="modelHandleOk"
      @modal-handle-cancel="modelHandleCancel"
    >
      <div style="padding: 5px 15px">
        <a-upload
          v-model:fileList="uploadForm.files"
          draggable
          :limit="1"
          action="/"
          :auto-upload="false"
          :show-file-list="true"
          @change="uploadocFileHandler"
        />
        <div v-if="showUploadProgress">
          <a-progress size="large" :percent="currentProgress / 100" />
        </div>
      </div>
    </vModal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Message, FileItem } from '@arco-design/web-vue'
import vModal from '@/components/modal/index.vue'
import { useEmitt } from '@/logics/mitt/useEmitt'
import { getUploadOutcomeUrl } from '@/api/project/outcome'
import { uploadFile } from '@/api/client'

const visibleModal = ref(false) // 是否显示对话框
const modalTitle = ref('') // 对话框标题
const currentProgress = ref(0)

const uploadForm = reactive<{
  id?: string
  files?: FileItem[]
}>({
  files: []
})

// const getCustomIcon = () => {
//   return {
//     removeIcon: () => {default},
//     fileName: (file: any) => {
//       return `${file.name}`
//     }
//   }
// }
const { emitter } = useEmitt()
const loading = ref<boolean>(false)
const showUploadProgress = ref(false)
/**
 * 隐藏model 对话框，重置表单
 */
const modelHandleCancel = () => {
  uploadForm.files = []
}

/**
 * 显示级别modal
 * @param type modal 类型
 * @param item
 */
const showUploadModal = async (id: string, name: string) => {
  uploadForm.id = id
  modalTitle.value = `${name}-上传交付物`
  visibleModal.value = true
}

// 获取上传进度信息
const uploadProgress = (e: ProgressEvent) => {
  showUploadProgress.value = true
  currentProgress.value = Number(((e.loaded / e.total) * 100).toFixed(0))
}

// 上传交付物文件
const uploadocFileHandler = async (
  files: FileItem[],
  _currentFile: FileItem
) => {
  uploadForm.files = files
}
/**
 * 点击确认按钮时，cb(false)时不会继续后续操作
 * @param cb 回调函数，
 */
const modelHandleOk = async (cb: (closed: boolean) => void) => {
  const { files } = uploadForm
  if (files?.length === 0) {
    Message.warning('交付物文件不能为空')
  }
  showUploadProgress.value = true
  try {
    const { url, form_data: data } = await getUploadOutcomeUrl({
      id: uploadForm.id!,
      filename: files![0].name!
    })
    await uploadFile(
      url,
      {
        data,
        file: files![0].file!
      },
      (e: ProgressEvent) => uploadProgress(e),
      1000 * 60 * 60
    )
    showUploadProgress.value = false
    currentProgress.value = 0
    Message.success('上传成功')
    emitter.emit('get-outcome-list')
  } catch (e) {
    showUploadProgress.value = false
    currentProgress.value = 0
    return cb(false)
  }
  return cb(true)
}

defineExpose({ showUploadModal }) // 暴露子组件的方法或者数据
</script>

<script lang="ts">
export default {
  name: 'UploadOutcome'
}
</script>

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