<script setup lang="ts">
import type { UpFile } from '../types'
import { NModal, NProgress, NScrollbar } from 'naive-ui'
import { ref, watch } from 'vue'

const props = defineProps<{
  /** 上传文件列表 */
  upFileList: UpFile[]
}>()

const visible = ref(false)
watch(
  () => props.upFileList.length,
  (len) => {
    visible.value = len > 0
  },
)
</script>

<template>
  <div>
    <NModal v-model:show="visible" preset="card" title="上传进度" style="width: 600px">
      <NScrollbar style="max-height: 700px">
        <div class="list">
          <div v-for="item in props.upFileList" :key="item.id" class="item">
            <NProgress type="circle" :percentage="item.progress" indicator-placement="inside" :radius="40" />
            <span class="name">{{ item.name }}</span>
          </div>
        </div>
      </NScrollbar>
    </NModal>
  </div>
</template>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  margin: 15px;

  .name {
    // 超出部分省略号
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
}
</style>
