<!-- eslint-disable unicorn/prefer-query-selector -->
<script setup lang="ts">
import { usePaperStore } from '../..'

defineOptions({ name: 'PaperSummary' })

const paperStore = usePaperStore()
const { questionGroups, paper } = storeToRefs(paperStore)
const { scrollToGroup, scrollToQuestion, setGroupAverageScore } = paperStore

// 统一分数
const averageScores = ref({} as any)
watch(
  () => questionGroups.value,
  () => {
    averageScores.value = {}
  },
)

const setGroupScore = (groupId: any) => {
  const score = averageScores.value[groupId]
  if (score === undefined || score === null || score === '') return
  setGroupAverageScore(groupId, score)
}

const hasScore = (question: any) => {
  return (
    question.score !== undefined &&
    question.score !== '' &&
    Number(question.score) > 0
  )
}

const unscoredCount = computed(() => {
  let count = 0
  for (const group of questionGroups.value) {
    for (const q of group.questions) {
      if (!hasScore(q)) count++
    }
  }
  return count
})
</script>

<template>
  <div class="paper-summary">
    <div class="total-header">
      <h2 class="total-score">共{{ paper.score || 0 }}分</h2>
      <span v-if="unscoredCount > 0" class="unscored-tip">
        {{ unscoredCount }}题未设分
      </span>
    </div>
    <div class="question-groups">
      <div
        class="question-group"
        v-for="group in questionGroups"
        :key="group.name"
        @click="scrollToGroup(group.id)"
      >
        <h3 class="question-group-title">
          <template v-if="group.isNullType">
            {{ group.namePrefix }}
            <el-tag type="danger" effect="plain" size="small">
              未设置题型
            </el-tag>
            {{ `（共${group.score || 0}分）` }}
          </template>
          <template v-else>
            {{ `${group.name}（共${group.score || 0}分）` }}
          </template>
        </h3>
        <div class="question-group-questions">
          <span
            class="question-item"
            :class="{ unscored: !hasScore(question) }"
            v-for="question in group.questions"
            :key="question.id"
            @click.stop="scrollToQuestion(question.id)"
          >
            <span class="question-seq">
              {{ question.seq }}
            </span>
            <el-input-number
              class="question-score"
              v-model="question.score"
              :min="0"
              :max="999"
              :step="1"
              :precision="0"
              :controls="false"
              placeholder="分"
              size="small"
              @click.stop
            />
          </span>
        </div>
        <div class="question-group-footer">
          <span class="footer-label">每题</span>
          <el-input-number
            class="average-score"
            v-model="averageScores[group.id]"
            :min="0"
            :max="999"
            :step="1"
            :precision="0"
            :controls="false"
            placeholder="输入分值"
            size="small"
            @keyup.enter="setGroupScore(group.id)"
            @click.stop
          />
          <span class="footer-label">分</span>
          <el-button
            size="small"
            type="primary"
            @click.stop="setGroupScore(group.id)"
          >
            统一设置
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.paper-summary {
  width: 320px;
  height: 100%;
  padding: 12px;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 4px;

  .total-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    margin-bottom: 4px;

    .total-score {
      font-size: 16px;
      font-weight: 600;
    }

    .unscored-tip {
      padding: 2px 8px;
      font-size: 12px;
      color: #f56c6c;
      white-space: nowrap;
      background-color: #fef0f0;
      border-radius: 10px;
    }
  }

  .question-groups {
    display: flex;
    flex-direction: column;
    gap: 4px;

    .question-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 10px;
      cursor: pointer;
      border: 1px solid #ebeef5;
      border-radius: 8px;
      transition: border-color 0.2s;

      &:hover {
        border-color: #246cff;
      }

      :deep(.el-input-number) {
        .el-input__wrapper {
          padding: 0 4px;

          .el-input__inner {
            color: #000;
            text-align: center;
          }
        }
      }

      &-title {
        display: flex;
        gap: 16px;
        align-items: center;
        width: 100%;
        font-size: 13px;
        font-weight: 500;
      }

      &-questions {
        $seq_w: 40px;

        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;

        .question-item {
          display: flex;
          flex-direction: column;
          gap: 4px;
          align-items: center;
          justify-content: center;
          width: $seq_w;

          &.unscored {
            .question-score {
              :deep(.el-input__wrapper) {
                box-shadow: 0 0 0 1px #f56c6c inset;
              }
            }
          }

          .question-score {
            width: 100%;
            height: 28px;
            font-size: 13px;
            line-height: 28px;
          }

          .question-seq {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: $seq_w;
            font-size: 13px;
            cursor: pointer;
            border: 1px solid #246cff;
            border-radius: 4px;
            transition: all 0.2s;

            &:hover {
              color: #fff;
              background-color: #246cff;
            }
          }
        }
      }

      &-footer {
        display: flex;
        gap: 6px;
        align-items: center;
        padding-top: 8px;
        border-top: 1px dashed #ebeef5;

        .footer-label {
          font-size: 12px;
          color: #909399;
          white-space: nowrap;
        }

        .average-score {
          flex: 1;
          height: 28px;
        }
      }
    }
  }
}
</style>
