<template>
  <div class="progress-line">
    <div class="progress-part progress-rate" :style="{ width: progress + '%' }">
      <span>{{ current }}</span>
    </div>
    <div
      class="progress-part progress-remain"
      :style="{ width: 100 - progress + '%' }"
    >
      <span v-if="progress < 99.9">{{ sum - current }}</span>
    </div>
  </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>
