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

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");

export default {
  name: "QuestionFilters",
  props: {
    examQuestionList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["questionFilterType"]),
    all: function() {
      return this.examQuestionList.length;
    },
    answered: function() {
      return this.examQuestionList.filter(q => q.studentAnswer !== null).length;
    },
    signed: function() {
      return this.examQuestionList.filter(q => q.isSign).length;
    },
    unanswered: function() {
      return this.examQuestionList.filter(q => q.studentAnswer === null).length;
    },
  },
  methods: {
    ...mapMutations(["updateQuestionFilter"]),
  },
};
</script>

<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>
