<template>
  <div class="app-container">
    <div class="box">
      <el-form :model="form" ref="formRef" :inline="true">
        <el-form-item label="班级">
          <el-input v-model="details.className" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="Number(details.status) === 0"
            type="danger"
            :disabled="!details.answer"
            @click="clickEndCheck"
            >结束检测</el-button
          >
          <el-button
            v-if="Number(details.status) === 0"
            type="primary"
            @click="clickRefresh"
            >刷新</el-button
          >
          <el-button
            type="primary"
            :disabled="sizeData.width === 800"
            @click="toggleZoom('enlarge')"
            >放大<el-icon> <Plus /></el-icon>
          </el-button>
          <el-button
            type="primary"
            :disabled="sizeData.width === 300 && recordList.length !== 0"
            @click="toggleZoom('zoomin')"
            >缩小<el-icon> <Minus /></el-icon
          ></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box">
      <el-row :gutter="12" class="details">
        <el-col :span="2">
          <el-button
            v-if="Number(details.status) === 0"
            type="primary"
            @click="() => (openDia = true)"
            >设置答案</el-button
          ></el-col
        >
        <el-col :span="6"> 答案：{{ details.answer || "-" }}</el-col>
        <el-col :span="6"> 参与人数：{{ details.stuNum }}</el-col>
        <el-col :span="6">
          正确人数：<span
            :style="{
              color: getScoreColor(details.correctRate * 100),
            }"
            >{{ details?.correctNum }}&nbsp;/&nbsp;{{
              details?.correctRate
            }}%</span
          ></el-col
        >
      </el-row>
      <div ref="wrapperRef" class="wrapper">
        <div class="area" ref="areaRef">
          <!-- :style="{
            transform: `translate(${dragData.left}px, ${dragData.top}px) scale(${scaleData.scale})`,
          }" -->
          <div v-for="i in recordList" :key="i.id">
            <div class="card">
              <div class="name">
                {{ i.stuName }}
              </div>
              <div
                class="show-answer"
                :style="`width:${sizeData.innerWidth}px;height:${sizeData.innerHeight}px;`"
              >
                <el-image
                  v-if="i.type === 1"
                  style="width: 100%; height: 100%"
                  class="picture"
                  :src="i.answer"
                >
                </el-image>
                <div
                  v-else
                  :class="{
                    'answer-text': true,
                    error_border: i.markResult === 0,
                    correct_border: i.markResult === 1,
                  }"
                >
                  {{ i.answer }}
                </div>
              </div>
              <div class="result">
                <div class="submit_time">{{ i.createTime }}</div>
                <div>
                  <span v-if="i.markResult === 0" class="error">错误</span>
                  <span v-if="i.markResult === 1" class="correct">正确</span>
                </div>
              </div>
              <div v-if="i.markResult === null" class="score">
                <el-button
                  link
                  type="primary"
                  icon="Close"
                  @click="clickMarkResult(0, i)"
                  >错误</el-button
                >
                <el-button
                  link
                  type="primary"
                  icon="Check"
                  @click="clickMarkResult(1, i)"
                  >正确</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 设置答案 -->
    <el-dialog
      v-model="openDia"
      width="600px"
      title="设置答案"
      append-to-body
      @close="cancel"
    >
      <el-form ref="diaRef" :model="diaForm">
        <el-form-item>
          <el-input v-model="diaForm.answer" placeholder="请输入答案" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitAnswer">保存答案</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  classDetectionDetail,
  getClassDetectionRecordList,
  updateClassDetectionRecord,
  updateClassDetection,
} from "@/api";
import { getScoreColor } from "@/utils";
const route = useRoute();
const { proxy } = getCurrentInstance();
const detailId = ref();
const details = ref({});
const wrapperRef = ref();
const areaRef = ref();

const dragData = reactive({
  startX: 0, // 拖拽初始化时的x坐标
  startY: 0, // 拖拽初始化时的y坐标
  left: 0, // 拖拽结束时的x偏移量
  top: 0, // 拖拽结束时的y偏移量
});
const scaleData = reactive({
  scale: 1,
  scaleNum: 0.1, // 缩放比例
  scaleMax: 100, // 最大缩放比例
  scaleMin: 0.5, // 最小缩放比例
});
const sizeData = reactive({
  scaleNum: 100, // 缩放比例
  scaleMax: 800, // 最大缩放比例
  scaleMin: 300, // 最小缩放比例
  width: 300,
  height: 300,
  innerWidth: 220, // 260
  innerHeight: 160, // 200
});
const form = ref({
  className: "高一三班",
});
const diaForm = ref({
  answer: "",
});
const openDia = ref(false);
const recordList = ref([]);

function clickEndCheck() {
  updateClassDetection({
    ...details.value,
    status: 1,
  })
    .then((res) => {
      getDetectionDetail();
    })
    .catch((err) => {
      console.log(err);
    });
}
function submitAnswer() {
  updateClassDetection({
    ...details.value,
    answer: diaForm.value.answer.trim(),
  })
    .then(async (res) => {
      openDia.value = false;
      await getDetectionDetail();
      getRecordList();
    })
    .catch((err) => {
      console.log(err);
    });
}
async function clickRefresh() {
  // dragData.left = 0;
  // dragData.top = 0;
  // scaleData.scale = 1;
  sizeData.width = 300;
  sizeData.height = 300;
  sizeData.innerWidth = 220;
  sizeData.innerHeight = 160;
  await getDetectionDetail();
  getRecordList();
}
function cancel() {
  diaForm.value.answer = "";
  open.value = false;
}
// 正确错误
function clickMarkResult(type, obj) {
  updateClassDetectionRecord({ ...obj, markResult: type })
    .then((res) => {
      getRecordList();
    })
    .catch((err) => {
      console.log(err);
    });
}
// 拖拽
// function dragStart(e) {
//   areaRef.value.style.transition = "none";
//   // e.preventDefault(); // 阻止默认事件
//   dragData.startX = dragData.left;
//   dragData.startY = dragData.top;
//   document.addEventListener("mousemove", move);
//   function move(event) {
//     dragData.left = dragData.startX + event.pageX - e.pageX;
//     dragData.top = dragData.startY + event.pageY - e.pageY;
//   }
//   document.addEventListener("mouseup", function () {
//     document.removeEventListener("mousemove", move);
//   });
//   document.addEventListener("mouseout", function () {
//     document.removeEventListener("mousemove", move);
//   });
// }

// 按钮缩放
// function toggleZoom(action) {
//   if (action === "enlarge") {
//     scaleData.scale += 0.1;
//   } else {
//     scaleData.scale -= 0.1;
//   }

//   if (scaleData.scale >= scaleData.scaleMax) {
//     scaleData.scale = scaleData.scaleMax;
//     return;
//   }
//   if (scaleData.scale <= scaleData.scaleMin) {
//     scaleData.scale = scaleData.scaleMin;
//     return;
//   }
//   areaRef.value.style.transition = `all 0.3s ease-in-out`; // 添加动画效果
//   areaRef.value.style.transform = `scale(${scaleData.scale})`;
// }
function toggleZoom(action) {
  if (action === "enlarge") {
    sizeData.width += sizeData.scaleNum;
    sizeData.height += sizeData.scaleNum;
    sizeData.innerWidth += sizeData.scaleNum;
    sizeData.innerHeight += sizeData.scaleNum;
  } else {
    sizeData.width -= sizeData.scaleNum;
    sizeData.height -= sizeData.scaleNum;
    sizeData.innerWidth -= sizeData.scaleNum;
    sizeData.innerHeight -= sizeData.scaleNum;
  }
  if (sizeData.width >= sizeData.scaleMax) {
    sizeData.width = sizeData.scaleMax;
    sizeData.height = sizeData.scaleMax;
    sizeData.innerWidth = 760;
    sizeData.innerHeight = 700;

    return;
  }
  if (sizeData.width <= sizeData.scaleMin) {
    sizeData.width = sizeData.scaleMin;
    sizeData.height = sizeData.scaleMin;
    sizeData.innerWidth = 220;
    sizeData.innerHeight = 160;
    return;
  }
}
function getRecordList() {
  recordList.value = [];
  getClassDetectionRecordList({
    classDetectionId: detailId.value,
    clientType: 1,
  }).then((res) => {
    recordList.value = res.rows;
  });
}
// 详情
async function getDetectionDetail() {
  const res = await classDetectionDetail(detailId.value);
  details.value = res.data;
}

onMounted(async () => {
  detailId.value = route.query.id;
  if (!detailId.value) return;
  await getDetectionDetail();
  getRecordList();
});
onUnmounted(() => {
  document.removeEventListener("mouseout", () => {});
  document.removeEventListener("mouseup", () => {});
});
</script>

<style lang="scss" scoped>
.app-container {
  .box {
    background-color: #fff;
    padding: 16px 0 16px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    .details {
      display: flex;
      align-items: center;
      padding-bottom: 16px;
    }
    .wrapper {
      overflow: hidden;
      min-height: 800px;

      .area {
        display: flex;
        flex-wrap: wrap;
        &:hover {
          cursor: pointer;
        }

        .card {
          padding: 15px 20px;
          margin: 0 12px 12px 0;
          box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
          border: 1px solid #e4e7ed;
          border-radius: 6px;
          .name {
            font-weight: 500;
            font-size: 20px;
          }
          .show-answer {
            transition: width 0.2s;
            .answer-text {
              display: flex;
              justify-content: center;
              align-items: center;
              margin: 6px 0;
              padding: 4px;
              border: 1px solid #6e6e6e;
              width: 100%;
              height: 100%;
              font-size: 18px;
              overflow: auto;

              &::-webkit-scrollbar {
                width: 0px;
                height: 0px;
                display: none;
              }
            }
            .error_border {
              border: 2px solid #d6193a;
            }
            .correct_border {
              border: 2px solid #2da26f;
            }
          }
          .result {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .submit_time {
              margin: 6px 0;
              font-size: 16px;
            }
            .error {
              font-weight: 500;
              color: #d6193a;
            }
            .correct {
              font-weight: 500;
              color: #2da26f;
            }
          }
          .score {
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }
}
</style>
