<script setup>
import { ref, computed, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { NumToChineseNumerals } from "@/utils";
import usePaperStore from "@/store/modules/paper";
import { storeToRefs } from "pinia";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "分值设置",
  },
});

const emits = defineEmits(["update:modelValue"]);

const show = computed({
  get() {
    return props.modelValue;
  },
  set(newVal) {
    emits("update:modelValue", newVal);
  },
});

const { paper, paperTotalScore, questionTotal } = storeToRefs(usePaperStore());

function inputChange(d) {
  countScore(d);
  function countScore(data) {
    for (const i of data.children) {
      if (i.children && i.children.length > 0) {
        countScore(i);
        // 子分数更新后重新计算父的总分
        i.score = i.children.reduce((prev, next) => prev + next.score, 0);
      }
      // 计算下一级的总分
      data.score = data.children.reduce((prev, next) => prev + next.score, 0);
    }
  }
}
// 分配分数
function handleDistribution(data, val) {
  let count = 0;
  totalInput(data.children);
  function totalInput(data, setScore = null) {
    for (const i of data) {
      if (i.children && i.children.length > 0) {
        totalInput(i.children, setScore);
      } else {
        count++;
        if (setScore !== null) {
          i.score = setScore;
        }
      }
    }
  }

  const score = data.score / count;
  if (score % 1 !== 0) {
    ElMessage.error(`${data.type}共有${count}题，平均分数不是整数`);
    inputChange(data);
    return;
  }

  totalInput(data.children, score);
  inputChange(data);
}
</script>

<template>
  <el-dialog
    class="p0-dia score-dia"
    v-model="show"
    :title="title"
    width="400px"
    draggable
    :lock-scroll="false"
    :modal="false"
  >
    <el-scrollbar max-height="70vh">
      <div class="total">
        试卷题数：{{ questionTotal }}
        <span style="margin-left: 16px"> 试卷总分：{{ paperTotalScore }} </span>
      </div>
      <div class="box" v-for="(item, idx) in paper.content" :key="item.id">
        <div class="box-head">
          <span class="box-head-title"
            >{{ NumToChineseNumerals[idx] }}、{{ item.type }}</span
          >
          <div>
            总分：
            <el-input
              v-select
              v-model.number="item.score"
              style="width: 80px"
            ></el-input>
            <el-button
              style="margin-left: 8px"
              type="primary"
              @click="(e) => handleDistribution(item, e)"
              >按题分配</el-button
            >
          </div>
        </div>
        <el-table
          :data="item.children"
          style="width: 100%"
          row-key="id"
          default-expand-all
        >
          <el-table-column prop="qNo" label="题号" width="100" />
          <el-table-column prop="score" label="分值">
            <template #default="scope">
              <template v-if="scope.row.children">
                总分：{{ scope.row.score }}
              </template>
              <template v-else>
                <el-input
                  v-select
                  v-model.number="scope.row.score"
                  @change="inputChange(item)"
                ></el-input>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-scrollbar>
    <template #footer>
      <div style="text-align: center">
        <el-button @click="show = false">关闭</el-button>
        <el-button type="primary" @click="show = false">保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.box {
  padding: 20px;
  &-head {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-title {
      font-size: 16px;
      font-weight: bold;
    }
  }
}

.total {
  padding: 20px;
  font-size: 18px;
}
</style>
