<template>
  <div class="progress-line">
    <div class="progress-rate" :style="{ width: progress + '%' }">
      <span class="progress-num progress-current">{{ current }}</span>
    </div>
    <span class="progress-num progress-remain" v-if="progress < 99.9">{{
      sum - current
    }}</span>
  </div>
</template>

<script>
export default {
  name: "progress-line",
  props: {
    sum: {
      type: Number,
      default: 0
    },
    current: {
      type: Number,
      default: 0
    },
    minRate: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {};
  },
  computed: {
    progress() {
      const rate = this.sum ? (this.current / this.sum).toFixed(4) * 100 : 0;

      return rate || this.minRate;
    }
  },
  methods: {}
};
</script>
