<template>
  <div>
    <div class="progress" style="height: 2px;">
      <div class="progress-bar" role="progressbar" :style="{width:progressPercent+'%'}"></div>
      <div class="progress-bar bg-secondary bg-opacity-10" role="progressbar"
           :style="{width:100-progressPercent+'%'}"></div>
    </div>
  </div>
</template>

<script>
import {UPDATING_PROGRESS_SUCCESS} from '../store/mutation-types'
import {mapState} from "vuex";

export default {
  name: 'Progressbar',
  props: {
    totalPages: Number,
    readPages: Number
  },
  computed: {
    ...mapState('bookprogressmodule', ['progress']),
    progressPercent() {
      return Math.round(this.progress / this.totalPages * 100);
    }
  },
  created() {
    this.$store.commit('bookprogressmodule/' + UPDATING_PROGRESS_SUCCESS, this.readPages);
  },
}
</script>