<template>
  <div class="evaluation">
    <ReturnHead text="测评详情"></ReturnHead>
    <!-- <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead> -->
    <!-- <div class="top" :style="{ display: closeBtn ? 'flex' : 'none' }">
      <div class="topin">
        <div class="topsa">
          {{ data?.liveNotice }}
        </div>
        <img
          class="topimg"
          @click="isShowClose"
          src="../../assets/image/liveboradcast/cha.png"
        />
      </div>
    </div> -->
    <div class="notice" style="margin-top: 0">
      <div class="noticebox">
        <!-- <div class="avator">
          <img class="avaimg" :src="teacherInfo.avatar" />
          <div class="avaname">{{ data.userInfoBo?.userName }}</div>
        </div> -->
        <div class="mani">
          <div class="joininfo">【测评】{{ data?.evaluationName }}</div>
          <div class="contenttitle">
            <img class="timeimg" src="../../assets/image/ballotpage/time.png" />
            <div class="timee">
              {{ (data?.evaluationStartTime&&data.evaluationStartTime!==null?data.evaluationStartTime:'-') + " 至 " + (data?.evaluationEndTime&&data.evaluationEndTime!==null?data.evaluationEndTime:'-') }}
            </div>
          </div>
          <div class="timebox">
            <div class="samez" style="margin-left: 18px">
              {{ hour }}
            </div>
            <div class="samey">时</div>
            <div class="samez">
              {{ minute }}
            </div>
            <div class="samey">分</div>
            <div class="samez">
              {{ seconds }}
            </div>
            <div class="samey">秒</div>
          </div>
          <div class="midline"></div>
        </div>
      </div>
    </div>

    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <div class="joininfo">测评说明</div>
          <div class="line"></div>
          <div class="contentone">
            <div class="actinner">
              {{ data?.evaluationExplain }}
            </div>
          </div>
        </div>
      </div>
      <div class="btnbox">
        <div class="submitbtn" @click="goOuterChain">去查看</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ReturnHead from "@/components/ReturnHead.vue";
import { computed, reactive, toRefs, onUnmounted, ref, watch } from "vue";
import img from "@/assets/image/uploadimg.png";
import { request, useRequest } from "@/api/request";
import {
  EVALUATION_DETAIL,
  STUDY_RECORD,
  EvaluationToLearn,
  QueryEvaluationTaskStatusOne,
  checkStudentExist,
} from "@/api/api";
import { useRoute } from "vue-router/dist/vue-router";
import { useRouter } from "vue-router";
import { useUserInfo } from "@/api/utils";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import store from "@/store";
import { changeTime } from "@/api/method";
const {
  query: {
    courseId: evaluationId,
    evaType,
    targetId,
    chapterOrStageId,
    infoId,
    btype,
    quizTaskId,
    type,
    id: taskId,
  },
} = useRoute();
const router = useRouter();
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
const { data } = useRequest(EVALUATION_DETAIL, { evaluationId, type }, (e) => {
  useRequest(
    checkStudentExist,
    {
      targetId: infoId,
      type: type,
      chapterId: chapterOrStageId,
      courseId: taskId,
    },
    (res) => {
      console.log("判断任务是否删除", res);
      if (res.code === 7) {
        router.push({
          path: "/loseefficacy",
        });
      } else {
        if (res.code === 6) {
          router.push({
            path: "/notpath",
          });
        }
      }
    }
  );
});
console.log("测评信息222", data);

const userInfo = computed(() => store.state.userInfo);
//作业倒计时
let hour = ref(0);
let minute = ref(0);
let seconds = ref(0);
let timer = setInterval(function () {
  if (data && data.value && data.value.evaluationEndTime) {
    let newEndTime = changeTime(data.value.evaluationEndTime);
    let endTime = parseInt(new Date(newEndTime).getTime() / 1000);
    let nowTime = parseInt(new Date().getTime() / 1000);
    if (endTime > nowTime) {
      hour.value = parseInt(dayjs(newEndTime).diff(dayjs(), "minute") / 60);
      minute.value = parseInt(dayjs(newEndTime).diff(dayjs(), "minute") % 60);
      seconds.value = parseInt(
        dayjs(newEndTime).diff(dayjs(), "seconds") -
          (hour.value * 60 + minute.value) * 60
      );
    } else {
      clearInterval(timer);
    }
  }
}, 1000);

const goOuterChain = () => {
  console.log("点击去查看", quizTaskId);
  if (quizTaskId == null) {
    request(EvaluationToLearn, {
      businessType: btype == 1 ? "project" : "learningpath",
      chapterId: chapterOrStageId,
      courseId: evaluationId,
      quizKid: data.value.evaluationTypeId,
      routerOrProjectId: infoId,
      studentId: userInfo.value.id,
      studentName: userInfo.value.realName,
    })
      .then((res) => {
        console.log(res);
        if (res.code == 200) {
          let jumpUrl = res.data.quizUrl;
          // 此处写跳转url
          window.open(jumpUrl, "_top");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  } else {
    request(QueryEvaluationTaskStatusOne, {
      quizTaskId: quizTaskId,
    })
      .then((res) => {
        console.log(res);
        if (res.code == 200) {
          if (res.data.complete_status == 2) {
            ElMessage.error("您已完成测评");
            return;
          } else {
            // 重新查询跳转
            // 调用接口 跳转页面
            console.log("我是查询测评跳转链接所传递得参数", {
              businessType: btype === 2 ? "learningpath" : "project",
              chapterId: chapterOrStageId,
              courseId: evaluationId,
              quizKid: data.value.evaluationTypeId,
              routerOrProjectId: infoId,
              studentId: userInfo.value.id,
              studentName: userInfo.value.realName,
            });
            request(EvaluationToLearn, {
              businessType: btype == 1 ? "project" : "learningpath",
              chapterId: chapterOrStageId,
              courseId: evaluationId,
              quizKid: data.value.evaluationTypeId,
              routerOrProjectId: infoId,
              studentId: userInfo.value.id,
              studentName: userInfo.value.realName,
            })
              .then((res) => {
                console.log(res);
                if (res.code == 200) {
                  let jumpUrl = res.data.quizUrl;
                  // 此处写跳转url
                  window.open(jumpUrl, "_top");
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }

  // window.open(
  //   evaType == 0
  //     ? window.location.protocol +
  //         import.meta.env.VITE_BOE_TEST_DETAIL_URL +
  //         targetId
  //     : window.location.protocol +
  //         import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL +
  //         targetId +
  //         `&quizTaskKid=${routerId}&channelCode=learningpath`,
  //   "_top"
  // ); //测评
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.evaluation {
  width: 100%;
  .top {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 25px;
    background-color: #fffbee;
    .topin {
      // text-align: center;
      width: 90%;
      height: 25px;
      display: flex;
      justify-content: space-between;
      .topsa {
        color: #ff9e00;
        line-height: 25px;
        font-size: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .topimg {
        height: 10px;
        width: 10px;
        margin-top: 7px;
      }
    }
  }
  .notice {
    width: 100%;
    // display: flex;
    // justify-content: center;
    // // margin-top: -17.5px;
    padding-bottom: 24px;
    margin-top: 20px;
    background: #fff;
    .noticebox {
      width: 100%;
      background: #fff;
      // border-radius: 4px;
      position: relative;
      display: flex;
      justify-content: center;
      .avator {
        display: flex;
        position: absolute;
        right: 29px;
        top: 30px;
        // background-color:red;
        // z-index: 999;
        .avaimg {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
        .avaname {
          line-height: 30px;
          margin-left: 8px;
          color: #0d233a;
        }
      }
      .line {
        width: 100%;
        height: 0;
        border-top: 1px solid #f1f2f3;
        margin-top: 17px;
        position: absolute;
        left: 0;
      }
      .mani {
        width: 90%;
        margin-top: 20px;
        // position:relative;
        .joininfo {
          color: #0d233a;
          font-size: 16px;
          font-weight: bold;
        }

        .contenttitle {
          width: 100%;
          // height:10px;
          margin-top: 15px;
          // background-color: #bfa;
          display: flex;
          .timeimg {
            width: 12.8px;
            height: 13px;
          }
          .timee {
            color: #6e7b84;
            font-size: 14px;
            line-height: 13px;
            margin-left: 6px;
          }
        }
        .midline {
          height: 0;
          border-top: 1px solid #f1f2f3;
          width: 100%;
          margin-top: 15px;
          margin-bottom: 15px;
        }
        .timebox {
          display: flex;
          width: 100%;
          height: 49px;
          background-color: #f2f5f7;
          margin-top: 17.5px;
          margin-bottom: 27.5px;
          border-radius: 10px;
          .samez {
            color: #0060ff;
            font-size: 18px;
            line-height: 49px;
            margin-left: 13px;
          }
          .samey {
            color: #6e7b84;
            font-size: 14px;
            line-height: 49px;

            margin-left: 13px;
          }
        }
        .detailin {
          width: 100%;
          // height: 100px;
          // background-color: red;
          display: flex;
          justify-content: center;
          .in {
            margin-left: 20px;
            width: 86%;
            color: #6e7b84;
            line-height: 30px;
            font-size: 13px;
          }
        }
        .contentone {
          margin-top: 43px;
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin-bottom: 20px;
          // height: 200px;
          .actinner {
            // background-color: red;
            color: #6e7b84;
            font-size: 13px;
            line-height: 30px;
          }
          .de {
            width: 100%;
            height: 34px;
            border-radius: 10px;
            background-color: #f2f5f7;
            display: flex;
            justify-content: space-between;
            .deal {
              color: #333330;
              font-weight: bold;
              line-height: 34px;
              margin-left: 21px;
              font-size: 14px;
            }
            .rightpng {
              width: 6px;
              height: 11px;
              margin-right: 6px;
              margin-top: 12px;
            }
          }
          .ballotjoincontainer {
            display: flex;
            width: 100%;
            justify-content: center;
            .ballotjoin {
              width: 85%;
              // height:100px;
              // background-color: #bfa;
              .ballotitem {
                .upitem {
                  display: flex;
                  justify-content: space-between;
                  .left {
                    display: flex;
                    .leftimg {
                      width: 4.5px;
                      height: 14.5px;
                      margin-top: 1px;
                    }
                    .leftcontent {
                      margin-left: 9px;
                      color: #6e7b84;
                      font-size: 13px;
                      line-height: 30px;
                      margin-top: -5px;
                    }
                  }
                  .btn {
                    background-color: #2478ff;
                    color: #fff;
                    width: 64px;
                    height: 21px;
                    border-radius: 10px;
                    border: 0;
                    font-size: 12px;
                    line-height: 19px;
                    margin-top: -1px;
                  }
                }
                .thinline {
                  width: 100%;
                  border-top: 1px solid #f1f2f3;
                  margin-top: 17px;
                  margin-bottom: 17px;
                }
              }
            }
          }
        }
      }
    }
    .btnbox {
      width: 301.5px;
      height: 33px;
      background-color: #2478ff;
      border-radius: 6px;
      box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
      font-size: 14px;
      margin: 30px auto 0 auto;
      text-align: center;
      line-height: 33px;
      .submitbtn {
        border: none;
        border-radius: 6px;
        background-color: #2478ff;
        color: #ffffff;
      }
    }
  }
}
</style>
