<template>
  <el-dialog
    v-model="dialogVisible"
    title=""
    width="50%"
    :show-close="false"
    :center="true"
    :align-center="true"
  >
    <div>
      <div style="font-size: 20px; margin-bottom: 20px; font-weight: bold">
        锁定模板后，仅可调整位置和大小，无法增删题目，请确认模板信息后操作：
      </div>
      <div style="height: 70vh; overflow-y: auto">
        <el-collapse v-model="activeNames">
          <el-collapse-item :title="item.title" :name="item.key" v-for="item in list">
            <div v-if="item.key !== 'otherPoint'">
              <div v-if="item.data.length">
                <div v-for="row in item.data">
                  {{ row.questionBefore }}-{{ row.questionAfter }}题 每题{{ row.score }}分
                </div>
              </div>
              <div v-else>
                <div style="text-align: center">暂无数据</div>
              </div>
            </div>
            <div v-else>
              <div>缺考：{{ item.qk.length ? "已标记" : "未标记" }}</div>
              <div>屏蔽区：{{ item.pbq.length ? `${item.pbq.length}处` : "未标记" }}</div>
              <div>反面定位点：{{ item.fmdwd.length ? "已标记" : "未标记" }}</div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="props.change(), changeDialogVisible(false)"
          >锁定</el-button
        >
        <el-button @click="changeDialogVisible(false)">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
const props = defineProps(["change"]);
import { ref } from "vue";
const dialogVisible = ref<boolean>(false);
const activeNames = ref([
  "objectiveQuestionsPoint",
  "subjectiveQuestionsPoint",
  "otherPoint",
]);
const list = ref<any>([]);
const getData = (data: any): void => {
  // 修改数据
  changeData(data);
  // 显示弹窗内容
  changeDialogVisible(true);
};

const changeDialogVisible = (bool: boolean): void => {
  dialogVisible.value = bool;
};

const changeData = (data: any): void => {
  const params = [
    { title: "", key: "objectiveQuestionsPoint" },
    { title: "", key: "subjectiveQuestionsPoint" },
    { title: "", key: "otherPoint" },
  ] as any;
  const objectiveQuestionsPoint = [], //客观题
    subjectiveQuestionsPoint = [], //主观题
    otherPoint = []; //其他
  for (let index = 0; index < data.length; index++) {
    const item = data[index];
    objectiveQuestionsPoint.push(...item.from.objectiveQuestionsPoint);
    subjectiveQuestionsPoint.push(...item.from.subjectiveQuestionsPoint);
    otherPoint.push(...item.from.otherPoint);
  }
  let objectiveQuestionsPointNumber = 0;
  objectiveQuestionsPoint.forEach((item: any) => {
    objectiveQuestionsPointNumber += item.questionNumber;
  });
  let subjectiveQuestionsPointNumber = 0;
  subjectiveQuestionsPoint.forEach((item: any) => {
    subjectiveQuestionsPointNumber += item.questionAfter - item.questionBefore + 1;
  });
  params[0].title = `客观题：${objectiveQuestionsPointNumber}题`;
  params[0].data = objectiveQuestionsPoint;
  params[1].title = `主观题：${subjectiveQuestionsPointNumber}题`;
  params[1].data = subjectiveQuestionsPoint;
  params[2].title = `其他标记(缺考、屏蔽区、反面定位点)`;
  params[2].data = otherPoint;
  params[2].qk = otherPoint.filter((item) => item.type === 1);
  params[2].pbq = otherPoint.filter((item) => item.type === 2);
  params[2].fmdwd = otherPoint.filter((item) => item.type === 3);
  list.value = params;
};

defineExpose({
  getData,
});
</script>
<style lang="scss" scoped></style>
