<template>
  <div class="login_container">
    <div class="top">
      <div class="loginBtn">
        <p @click="loginFn">{{ user.token ? "已登录" : "登录/注册" }}</p>
      </div>
      <div class="submit">
        <p @click="submit">提交</p>
      </div>
      <div class="title">{{ setting.title }}</div>
    </div>
    <div class="main-content">
      <div
        class="box"
        :style="{
          backgroundImage: isBox1Clicked ? `url(${btn1})` : `url(${btn2})`,
        }"
        @click="handleBoxClick(1)"
      >
        知识点学习
      </div>
      <div
        class="box"
        :style="{
          backgroundImage: isBox2Clicked ? `url(${btn1})` : `url(${btn2})`,
        }"
        @click="handleBoxClick(2)"
      >
        学习
      </div>
      <div
        class="box"
        :style="{
          backgroundImage: isShowExperiment
            ? `url(${btn1})`
            : isBox2Clicked
            ? `url(${btn1})`
            : `url(${btn2})`,
        }"
        style="margin-bottom: 80px"
        @click="handleBoxClick(3)"
      >
        仿真实验
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="学生成绩详情" width="500px">
    <div class="score-info">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="姓名">{{
          studentData.realname
        }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{
          studentData.username
        }}</el-descriptions-item>
        <el-descriptions-item label="班级">{{
          studentData.className
        }}</el-descriptions-item>
        <el-descriptions-item label="院系">{{
          studentData.depName
        }}</el-descriptions-item>
        <el-descriptions-item label="总分">{{
          studentData.score
        }}</el-descriptions-item>
        <el-descriptions-item label="完成状态">
          {{ studentData.isComplete ? "已完成" : "未完成" }}
        </el-descriptions-item>
        <el-descriptions-item label="知识点得分">{{
          studentData.kpPercentage
        }}</el-descriptions-item>
        <el-descriptions-item label="题目得分">{{
          studentData.qoPercentage
        }}</el-descriptions-item>
        <el-descriptions-item label="总得分率">{{
          studentData.toPercentage
        }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="saveScore">确认提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="studyPage">
import { ref } from "vue";
import { useRouter } from "vue-router";
import settingStore from "@/store/modules/setting";
const setting = settingStore();
import userStore from "@/store/modules/user";
import btn1 from "@/assets/images/btn1.png";
import btn2 from "@/assets/images/btn2.png";
import { submitExperiment, getScore } from "@/api";
import { ElMessage, ElMessageBox } from "element-plus";
const isShowExperiment =
  Number(localStorage.getItem("activeStepIndex")) == 12 ? true : false;
const router = useRouter();
const user = userStore();
const loginFn = () => {
  // user.token ? router.push("/spacePage") : "";

  if (user.token) {
    router.push("/spacePage");
    return;
  }
  router.push("/login");
};
const isBox1Clicked = ref(false);
const isBox2Clicked = ref(false);
const isBox3Clicked = ref(false);
const handleBoxClick = (boxNumber) => {
  isBox1Clicked.value = false;
  isBox2Clicked.value = false;
  isBox3Clicked.value = false;
  switch (boxNumber) {
    case 1:
      isBox1Clicked.value = true;
      // router.push('/page1'); // 跳转到对应的页面，这里以 /page1 为例
      router.push("/knowledgePage");
      break;
    case 2:
      isBox2Clicked.value = true;
      router.push("/subjectTest");
      break;
    case 3:
      isBox3Clicked.value = true;
      router.push("/");
      break;
    default:
      break;
  }
};
const dialogVisible = ref(false);

const studentData = ref<any>({
  classId: null,
  className: "软件工程",
  depName: "国际学院-国际学院",
  isComplete: 0,
  kpPercentage: 0,
  phone: null,
  qoPercentage: 325,
  realname: "无糖",
  score: 195,
  studyRecords_id: "1903276190361743362",
  toPercentage: 195,
  username: "test1",
  workNo: null,
});
const submit = async () => {
  const res: any = await getScore();
  studentData.value = res.result;
  dialogVisible.value = true;
  return;
};
const saveScore = async () => {
  ElMessageBox.confirm(
    "确定要提交吗?一旦提交任何数据不能更改，请确保已经完成所有项目"
  )
    .then(async () => {
      await submitExperiment({
        studyRecords_id: studentData.value.studyRecords_id,
      }).then((res: any) => {
        console.log(res);
        if (res.code == 500) {
          ElMessage.error(res.message);
        } else {
          ElMessage.success(res.message);
        }
        localStorage.setItem("falg", "true");
        dialogVisible.value = false;
      });
    })
    .catch(() => {
      // catch error
    });
};
</script>

<style lang="less" scoped>
.login_container {
  position: relative;
  width: 100%;
  // height: 1080px;
  min-height: 100vh;
  background-color: #091d22;
  background: url("../assets//images/bg1.png") no-repeat;
  background-size: cover;

  .top {
    width: 100%;
    height: 75px;
    text-align: center;
    font-size: 42px;
    line-height: 75px;
    font-style: italic;
    background: url("../assets/images/topbgc.png") no-repeat;
    // background-position: center bottom -10px;
    background-size: cover;

    .title {
      color: #fff;
    }

    .loginBtn {
      position: absolute;
      /* 清除浮动影响 */
      float: left;
      /* 向左浮动 */
      top: 10px;
      left: 230px;
      border: 1px solid #33fefe;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      width: 142px;
      height: 40px;
      line-height: 37px;
      background: linear-gradient(to bottom, #08b9c1, #0758b8);
      transform: skew(-30deg);
      cursor: pointer;
      /* 在X轴方向倾斜 -35 度 */
      border-radius: 5%;

      p {
        transform: skew(30deg);
        /* 反向倾斜，抵消父元素的变形 */
        font-size: 18px;
        color: #fff;
      }
    }
    .submit {
      position: absolute;
      /* 清除浮动影响 */
      // float: right;
      /* 向左浮动 */
      top: 10px;
      right: 230px;
      border: 1px solid #33fefe;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      width: 142px;
      height: 40px;
      line-height: 37px;
      background: linear-gradient(to bottom, #08b9c1, #0758b8);
      transform: skew(-30deg);
      cursor: pointer;
      /* 在X轴方向倾斜 -35 度 */
      border-radius: 5%;

      p {
        transform: skew(30deg);
        /* 反向倾斜，抵消父元素的变形 */
        font-size: 18px;
        color: #fff;
      }
    }
  }
}

.main-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  // background: url("../assets/images/login.png") no-repeat;
  background-position: center;
  background-size: 50% auto;
  flex-direction: column;

  .box {
    width: 520px;
    height: 162px;
    // background-color: #007BFF;
    // background: url("../assets/images/btn2.png") no-repeat;
    background-repeat: no-repeat;
    margin: 30px 0 0 25px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    /* 让图片完整显示在盒子内 */
    background-position: center;
    /* 图片在盒子中水平和垂直居中 */
    display: flex;
    /* 使用 flex 布局 */
    justify-content: center;
    /* 水平居中 */
    // align-items: center;
    /* 垂直居中 */
    color: white;
    /* 设置文字颜色 */
    text-align: center;
    /* 文本居中对齐 */
    font-size: 49px;
    font-weight: 700;
    line-height: 190px;
  }
}
</style>