<!--
 * @Descripttion: 
 * @version: 
 * @Author: 曹文丽
 * @Date: 2023-09-01 15:07:34
 * @LastEditors: 曹文丽
 * @LastEditTime: 2023-09-01 17:07:18
-->

<script setup lang="ts">
import TableProgressBar from './TableProgressBar.vue'
import { defineProps } from 'vue'

interface ProgressBarItemProps {
  percentage: number,
  color?: string,
  progressWidth?: string,
}
const { percentage = 0, color = '#F84A51' } = defineProps<ProgressBarItemProps>()
</script>

<template>
  <div class="table-progress-bar-item">
    <TableProgressBar :percentage="percentage" :color="color" progressWidth="82px"></TableProgressBar>
    <span class="percentage-text">{{ percentage }}%</span>
  </div>
</template>

<style lang="scss">
.table-progress-bar-item {
  display: flex;
  align-items: center;

  .percentage-text {
    font-size: 14px;
    font-weight: 400;
    margin-left: 8px;
    color: rgba(0, 0, 0, 0.6500);
  }

}
</style>
