<template>
  <div class="uploadPercent">
    <div class="fileName">
      {{ fileName }}
    </div>
    <div class="flex items-center justify-between" style="height: 20px">
      <div class="percentContainer flex-grow overflow-hidden">
        <div
          class="percentInner text-right flex items-center justify-end transition-all duration-75"
          :style="{
            width: `${percent * 100}%`,
          }"
        >
          <div class="transform scale-75 text-white" v-if="percent > 0.2">
            {{ (percent * 100).toFixed(1) }}%
          </div>
        </div>
      </div>
      <div
        class="ml-2 flex-shrink-0 cursor-pointer cancelBtn"
        @click="$emit('cancel')"
      >
        取消
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  fileName: string;
  percent: number;
}>();

defineEmits(["cancel"]);
</script>

<style lang="scss" scoped>
.uploadPercent {
  width: 220px;
  margin: 0 auto;
  .fileName {
    line-height: 14px;
    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: var(--sy-black);
  }
  .percentContainer {
    height: 10px;
    background: #e0e0e0;
    border-radius: 5px;
    .percentInner {
      height: 10px;
      background: var(--sy-blue);
      border-radius: 5px;
    }
  }
  .cancelBtn {
    color: var(--sy-blue);
    font-size: 12px;
  }
}
</style>
