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

<script>
import {EventBus} from "../event-bus";

export default {
  name: 'Progressbar',
  components: {
    EventBus
  },
  props: {
    totalPages: Number,
    readPages: Number
  },
  data() {
    return {
      newProgress: this.readPages
    }
  },
  computed: {
    progress() {
      return Math.round(this.newProgress / this.totalPages * 100);
    }
  },
  mounted() {
  },
  created() {
    window.EventBus.$on('updateProgress', (data) => {
      this.newProgress = data.readPages;
      console.info(this.newProgress);
      console.info(this.progress);
    });
  },
  methods: {}
}
</script>