<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> -->
  <div>
    <a-space direction="vertical">
      <template v-for="item in props.default" :key="item?.id">
        <div class="download-container">
          <div class="file-container">
            <div class="filename">
              {{ item.name }}
            </div>
          </div>
          <div style="margin-left: 10px">
            <a-tooltip content="下载文件">
              <a-typography-text
                style="cursor: pointer"
                type="primary"
                @click="downloadWorkFile(item)"
              >
                <icon-download :size="19" />
              </a-typography-text>
            </a-tooltip>
          </div>
        </div>
        <div v-if="item.showDownloadProgress" class="download-cover">
          <a-progress :percent="item.downloadProgress! / 100" />
        </div>
      </template>
    </a-space>
    <!-- <a-progress v-show="showUploadProgress" :percent="currentProgress / 100" /> -->
  </div>
</template>

<script lang="ts" setup>
import { downloadFile } from '@/api/client'
import { getDownloadWorkFileUrl } from '@/api/project/work'
import { Message } from '@arco-design/web-vue'
import { PropType } from 'vue'

const props = defineProps({
  modelValue: {
    type: Array as PropType<string[]>
  },
  default: {
    type: Array as PropType<
      {
        id: string
        name: string
        showDownloadProgress?: boolean
        downloadProgress?: number
      }[]
    >
  }
})

// 获取上传进度信息
const getDownloadProgress = (
  e: ProgressEvent,
  item: {
    id: string
    name: string
    showDownloadProgress?: boolean
    downloadProgress?: number
  }
) => {
  item.showDownloadProgress = true
  item.downloadProgress = Number(((e.loaded / e.total) * 100).toFixed(0))
}

const downloadWorkFile = async (item: {
  id: string
  name: string
  showDownloadProgress?: boolean
  downloadProgress?: number
}) => {
  try {
    const { url } = await getDownloadWorkFileUrl({ id: item.id })
    // const downloadUrl = url.replace(/https:\/\/pmr\.surkw\.com:29000\//, '')
    await downloadFile(item.name!, url, getDownloadProgress, item)
    item.showDownloadProgress = false
    item.downloadProgress = 0
    Message.success('下载成功')
  } catch (e) {
    item.showDownloadProgress = false
    item.downloadProgress = 0
  }
}
</script>

<style lang="less" scoped>
:deep(.arco-upload-progress) {
  display: none;
}
.download-container {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  .file-container {
    display: flex;
    // flex: 1;
    // flex-wrap: nowrap;
    align-items: center;
    // box-sizing: border-box;
    overflow: hidden;
    font-size: 14px;
    border-radius: var(--border-radius-small);
    transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
    .filename {
      //   display: flex;
      padding: 8px 0px 8px 10px;
      flex: 1;
      width: 300px;
      background-color: var(--color-fill-1);
      align-items: center;
      //   margin-right: 10px;
      font-size: 13px;
      overflow: hidden;
      color: var(--color-text-1);
      font-size: 14px;
      line-height: 1.4286;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .file-extra {
      margin-left: 20px;
      color: var(--color-text-2);
    }
  }
}
</style>
