<script setup lang="ts">
import { ElMessage } from "element-plus";

const props = withDefaults(
  defineProps<{
    maxScore: number;
  }>(),
  {
    maxScore: 20,
  }
);
const emit = defineEmits<{
  (e: "submit", score: number): void;
}>();
const numType = ref(0);
const scoreList = computed(() => {
  if (numType.value === 0) {
    return Array.from({ length: props.maxScore - 1 }, (_, i) => i + 1);
  }
  return Array.from({ length: props.maxScore * 2 - 1 }, (_, i) => (i + 1) / 2);
});
const score = ref();
function onScoreClick(s) {
  score.value = s;
  if (autoSubmit.value) {
    onSubmit();
  }
}
// 自动提交
const autoSubmit = ref(true);
function onSubmit() {
  emit("submit", score.value);
  score.value = null;
}

// 键盘监听
const scoreInput = ref("");
function handleKeyPress(event) {
  const { key } = event;
  if (key === "Enter") {
    const score = parseFloat(scoreInput.value);
    const maxScore = props.maxScore;

    if (
      isNaN(score) ||
      score < 0 ||
      score > maxScore ||
      (score * 10) % 5 !== 0
    ) {
      ElMessage.error(
        `批改失败，分数${score}超出了[0, ${maxScore}]范围或不符合0.5的间隔`
      );
    } else {
      emit("submit", score);
    }
    scoreInput.value = ""; // Reset the score input
  } else if (!isNaN(key) || key === ".") {
    const newValue = scoreInput.value + key;
    if (/^\d*\.?\d{0,1}$/.test(newValue) || newValue.endsWith(".5")) {
      scoreInput.value += key;
    }
  } else if (key === "Backspace") {
    scoreInput.value = scoreInput.value.slice(0, -1);
  }
}

onMounted(() => {
  window.addEventListener("keydown", handleKeyPress);
});

onUnmounted(() => {
  window.removeEventListener("keydown", handleKeyPress);
});
</script>
<template>
  <div class="score-board">
    <div class="title">评分板</div>
    <el-radio-group v-model="numType" @change="score = null" size="large">
      <el-radio-button label="整数" :value="0" />
      <el-radio-button label="小数" :value="1" />
    </el-radio-group>
    <div style="margin-top: 16px">当前键盘输入值：{{ scoreInput }}</div>
    <div class="score-list">
      <el-button
        v-for="(i, idx) in scoreList"
        :key="i"
        :type="
          score === i
            ? 'primary'
            : numType === 0
            ? ''
            : idx % 2 === 0
            ? ''
            : 'info'
        "
        plain
        size="large"
        @click="onScoreClick(i)"
        >{{ i }}</el-button
      >
      <p>
        <el-button
          :type="score === 0 ? 'primary' : 'danger'"
          plain
          size="large"
          @click="onScoreClick(0)"
          >0</el-button
        >
        <el-button
          :type="score === maxScore ? 'primary' : 'success'"
          plain
          size="large"
          @click="onScoreClick(maxScore)"
          >{{ maxScore }}</el-button
        >
      </p>
    </div>
    <div class="auto-submit">
      <el-checkbox v-model="autoSubmit">自动提交分数</el-checkbox>
    </div>
    <div v-if="!autoSubmit" class="score-btn">
      <el-button
        type="primary"
        :disabled="score == null"
        @click="onSubmit"
        size="large"
        >提交</el-button
      >
    </div>
  </div>
</template>
<style lang="scss" scoped>
.score-board {
  --el-font-size-base: 18px;
  width: 400px;
  border: 1px solid var(--el-border-color);
  border-radius: 10px;
  padding: 20px;
  font-size: 18px;
  .title {
    text-align: center;
    font-size: 28px;
    line-height: 44px;
    margin-bottom: 8px;
  }
  .score-list {
    margin-top: 16px;
    .el-button {
      margin: 8px;
    }
  }
  .auto-submit {
    :deep(.el-checkbox) {
      .el-checkbox__label {
        font-size: 18px;
      }
    }
  }
  .score-btn {
    margin-top: 16px;
    text-align: center;
  }
}
</style>
