<script setup lang="ts">
import { store } from "@/store/store";

const progressNum = $computed(() => {
  return (
    100 *
    (store.exam.examQuestionList.filter((q) => q.studentAnswer !== null)
      .length /
      store.exam.examQuestionList.length)
  );
});
const progress = $computed(() => {
  return `${
    store.exam.examQuestionList.filter((q) => q.studentAnswer !== null).length
  } / ${store.exam.examQuestionList.length}`;
});
</script>

<template>
  <div class="progress-container">
    <n-progress
      type="line"
      :percentage="Math.round(progressNum)"
      :indicatorPlacement="'inside'"
      processing
    />
    <span>{{ progress }}</span>
  </div>
</template>

<style scoped>
.progress-container {
  display: grid;
  justify-self: flex-start;

  align-items: center;
  justify-items: center;
  grid-template-columns: 200px 50px;
  width: 250px;
}
</style>

<style>
.progress-container .ivu-progress-inner {
  background-color: #02ffff;
  background-color: white;
  border-radius: 0px;
}

.progress-container .ivu-progress-bg {
  border-radius: 0px;
}
</style>
