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

// 初始化
store.exam.questionFilterType = "ALL";

const all = $computed(() => store.exam.examQuestionList.length);
const answered = $computed(
  () =>
    store.exam.examQuestionList.filter((q) => q.studentAnswer !== null).length
);
const signed = $computed(
  () => store.exam.examQuestionList.filter((q) => q.isStarred).length
);
const unanswered = $computed(
  () =>
    store.exam.examQuestionList.filter((q) => q.studentAnswer === null).length
);
</script>

<template>
  <div class="q-filters">
    <div
      :class="store.exam.questionFilterType == 'ALL' && 'selected-type'"
      @click="store.exam.questionFilterType = 'ALL'"
    >
      全部 <span class="all-type">{{ all }}</span>
    </div>
    <div
      :class="store.exam.questionFilterType == 'ANSWERED' && 'selected-type'"
      @click="store.exam.questionFilterType = 'ANSWERED'"
    >
      已答 <span class="answered-type">{{ answered }}</span>
    </div>
    <div
      :class="store.exam.questionFilterType == 'SIGNED' && 'selected-type'"
      @click="store.exam.questionFilterType = 'SIGNED'"
    >
      标记 <span class="signed-type">{{ signed }}</span>
    </div>
    <div
      :class="store.exam.questionFilterType == 'UNANSWERED' && 'selected-type'"
      @click="store.exam.questionFilterType = 'UNANSWERED'"
    >
      未答 <span class="unanswered-type">{{ unanswered }}</span>
    </div>
  </div>
</template>

<style scoped>
.q-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  cursor: pointer;
}

.q-filters > div {
  border-radius: 6px;
  padding: 5px 5px;
  /* margin: 0 5px; */
}

.q-filters > div > span {
  padding: 0 3px;
  border-radius: 4px;
  margin: 0 2px;
}

.selected-type {
  background-color: white;
}

.all-type {
  background-color: #eeeeee;
}

.answered-type {
  background-color: #13bb8a;
}

.signed-type {
  background-color: #ffcc00;
}

.unanswered-type {
  background-color: rgb(255, 107, 76);
}
</style>
