<template>
    <div class="moreactive" style="padding: 30px">
      <!-- 面包屑导航 -->
      <div class="crumb">
        <div>{{ pName }}</div>
        <div style="margin-left: 6px; margin-right: 6px">/</div>
        <div>{{ sName }}</div>
        <div style="margin-left: 6px; margin-right: 6px">/</div>
        <div style="font-weight: 700; font-size: 16px">测评详情</div>
        <div class="preNext">
		   <span @click="prevPage" v-if="hasPrev">
          <button class="btn btn01"></button>
          <span class="content" style="margin-left: 6px">上一个</span>
       </span>
          <span @click="nextPage" v-if="hasNext">
          <span class="content" style="margin-left: 31px">下一个</span>
          <button class="btn btn02" style="margin-left: 6px"></button>
        </span>
        </div>
  <div class="return">
                  <div style="display: flex" @click="returnclick">
            <el-button style="color:#0073FB">	<img class="img2" style="margin-right:11px;cursor: pointer;" src="../../assets/image/return.png" />返回</el-button>
                  </div>
              </div>
      </div>
      <!-- 面包屑导航 -->
      <!-- <div class="debateTitle">【考试】{{ dataInfo?.voteName }}</div> -->
      <!-- 详细信息 -->
      <div class="detailinfo">
        <div class="detail">
          <div class="detailT">
            <div class="left">
              <div class="debateTitle" style="color:rgba(51, 51, 51, 1);font-size:20px;margin-top:46px;">【测评】{{ exname }}</div>
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <div class="title">
                    <img
                        style="width: 20px; height: 20px"
                        src="../../assets/image/yuan.png"
                    />
                    <div class="text">测评时间</div>
                    <div class="box"></div>
                </div>
                <div class="">
                    <button class="tijiao" @click="handleClick(state.datainfo.evaluationTypeId)">查看</button>
                </div>
              </div>
              <div class="all" style="font-size:14px;color:rgba(51, 51, 48, 1);">
                {{  state.datainfo.evaluationStartTime ? state.datainfo.evaluationStartTime : "-"  }} ~  {{  state.datainfo.evaluationEndTime ? state.datainfo.evaluationEndTime : "-"  }}
              </div>            
            </div>
          </div>

          <div class="detailT" style="margin-top:20px;height:671px;">
            <div class="left">
              <div class="title">
                <img
                    style="width: 20px; height: 20px"
                    src="../../assets/image/yuan.png"
                />
                <div class="text">测评说明</div>
                <div class="box"></div>
              </div>
              <!-- <div style="display: flex; align-items: center"></div> -->
              <div class="all" style="font-size:14px;color:rgba(51, 51, 48, 1);">
                <div>
                    {{ state.datainfo.evaluationExplain ? state.datainfo.evaluationExplain : "暂无测评说明" }}
                </div>
              </div>            
            </div>
          </div>
        </div>
      </div>
      <!-- 详细信息 -->
    </div>
</template>
  
  <script setup>
  import {useRequest, request} from "@/api/request";
  import {
    LINKGETONE,
    QueryEvaluationDetailById,
    EvaluationToLearn
  } from "@/api/api";
  import {reactive,computed} from "vue";
  import {useRoute,useRouter} from "vue-router/dist/vue-router";
  import store from "@/store";
  import {useTaskPage} from "@/api/useCommon";
  
  const {
    query: {courseId, pName, sName, chapterOrStageId, infoId, id, exname, btype, type},
  } = useRoute();
  const {nextPage,prevPage,hasPrev, hasNext} = useTaskPage()
  const router = useRouter();
  const returnclick = () => {
      router.back();
  };

  const state = reactive({
        datainfo: {}
  })

  //获取测评基本信息
  useRequest(QueryEvaluationDetailById(courseId), {type}, (e)=>{
    console.log(e)
    state.datainfo = e.data
    console.log('我是获取的外链基本信息12', state.dataInfo)
  })
  
  console.log('我是获取的外链基本信息4', state.dataInfo)

  const userInfo = computed(() => store.state.userInfo);

  // 查看测评
  const handleClick = (evaluationTypeId) => {
    // 调用接口 跳转页面
    console.log('我是查询测评跳转链接所传递得参数',{
        "businessType": btype==2 ? "learningpath" : "project",
        "chapterId": chapterOrStageId,
        "courseId":  courseId,
        "quizKid": evaluationTypeId,
        "routerOrProjectId": infoId,
        "studentId": userInfo.value.id,
        "studentName": userInfo.value.realName
    })
    request(EvaluationToLearn, {
        "businessType": "learningpath",
        "chapterId": chapterOrStageId,
        "courseId":  courseId,
        "quizKid": 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)
    })
  }

  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
  .tijiao {
    z-index: 999;
    cursor: pointer;
    margin-top: 22px;
    margin-right: 40px;
    width: 33px;
    height: 16px;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    line-height: 24px;
    border: 0;
    background-color: #fff;
    width: 162px;
    height: 62px;
    background-image: url("../../assets/image/tijiao.png");
}
  .clearfix:before,
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .moreactive {
    .crumb {
      color: #fff;
      display: flex;
      font-size: 14px;
      line-height: 24px;
      position: relative;
    }
    .return{
      position: absolute;
      right: 10%;
      .text{
        text-align: center;
       display: flex;
       flex-direction: row;
       align-items: center;
      }
    }
    .preNext {
      position: absolute;
      right: 0px;
  
      .content {
        font-size: 14px;
        color: #fff;
        width: 43px;
        height: 14px;
        display: inline-block;
        position: relative;
        top: -6px;
        cursor: pointer;
      }
  
      .btn {
        width: 23px;
        height: 23px;
        border-radius: 50%;
        border: 0;
        cursor: pointer;
      }
  
      .btn01 {
        background-image: url("../../assets/image/prev.png");
      }
  
      .btn02 {
        background-image: url("../../assets/image/next.png");
      }
    }
  
    .debateTitle {
      margin-top: 15px;
      font-size: 20px;
      line-height: 24px;
      height: 24px;
      font-weight: 600;
      color: #fff;
      margin-left: -10px;
    }
  
    .detailinfo {
      width: 100%;
      margin-top: 20px;
      display: flex;
  
      .detail {
        flex: 1;
        // margin-right: 20px;
        .detailT {
          min-height: 95px;
          background: #ffffff;
          border-radius: 8px;
          color: rgba(51, 51, 51, 1);
          display: flex;
          padding-bottom: 20px;
  
          .left {
            margin-left: 48px;
            flex: 1;
          }
  
          .right {
            width: 417px;
            margin-right: 48px;
  
            .righttitle {
              display: flex;
              padding-top: 39px;
              position: relative;
  
              .text {
                margin-left: 8px;
                font-size: 16px;
                color: rgba(51, 51, 51, 1);
                font-weight: 800;
              }
  
              .box {
                width: 75px;
                height: 10px;
                background-color: rgba(36, 120, 255, 0.15);
                position: absolute;
                left: 23px;
                top: 53px;
              }
            }
  
            .timebox {
              width: 417px;
              height: 149px;
              background: linear-gradient(90deg, #b6c6e1 0%, #89aed6 100%);
              border-radius: 4px;
              margin-top: 42px;
            }
  
            .innertime {
              margin-top: 17px;
              margin-left: 55px;
              font-size: 14px;
              font-weight: 500;
              color: #ffffff;
              line-height: 24px;
            }
  
            .endtime {
              margin-left: 10px;
              margin-top: 16px;
              width: 397px;
              height: 81px;
              background: #f2f5f7;
              border-radius: 0px 8px 0px 8px;
  
              .endtimetext {
                margin-top: 25px;
                margin-left: 46px;
  
                .te {
                  font-size: 28px;
                  font-weight: 800;
                  color: #4a9cf8;
                  line-height: 24px;
                }
              }
            }
  
            .explain {
              margin-top: 30px;
              width: 416px;
              padding-bottom: 50px;
              background: #f2f5f7;
              border-radius: 8px;
            }
  
            .explaincontent {
              width: 368px;
              font-size: 16px;
              font-weight: 500;
              color: #333330;
              line-height: 24px;
              margin-left: 24px;
              margin-top: 47px;
            }
          }
  
          .title {
            display: flex;
            align-items: center;
            padding-top: 39px;
            position: relative;
          }
  
          .title .text {
            margin-left: 8px;
            font-size: 16px;
            color: rgba(51, 51, 51, 1);
            font-weight: 800;
          }
  
          .title .box {
            width: 75px;
            height: 10px;
            background-color: rgba(36, 120, 255, 0.15);
            position: absolute;
            left: 23px;
            top: 53px;
          }
  
          .all {
            display: flex;
            justify-content: space-between;
            // width: 1280px;
            margin-right: 48px;
            margin-top: 43px;
  
            .allbox1 {
              margin-right: 22px;
              background: linear-gradient(
                      0deg,
                      rgba(160, 193, 230, 0) 0%,
                      rgba(161, 195, 231, 0.2) 100%
              );
            }
  
            .allbox2 {
              margin-right: 22px;
              background: linear-gradient(
                      0deg,
                      rgba(177, 219, 229, 0) 0%,
                      rgba(172, 216, 227, 0.2) 100%
              );
            }
  
            .allbox3 {
              background: linear-gradient(
                      0deg,
                      rgba(195, 209, 234, 0) 0%,
                      rgba(191, 206, 231, 0.2) 100%
              );
            }
  
            .item {
              // width: 410px;
              width: calc(100% - 44px);
              height: 149px;
              text-align: center;
              border-radius: 4px;
  
              .item1 {
                color: #089dff;
                font-size: 24px;
                font-weight: bold;
                margin-top: 36px;
              }
  
              .item2 {
                color: #333330;
                font-size: 14px;
                margin-top: 29px;
              }
            }
          }
  
          .join {
            // width: 1280px;
            margin-right: 48px;
            // min-height: 408px;
            // background: #f5f6f7;
            // border-radius: 8px;
            margin-top: 32px;
            margin-left: 21px;
            flex: 1;
  
            .stem {
              display: flex;
              font-size: 16px;
              font-weight: 500;
              color: #333330;
              line-height: 38px;
            }
  
            .options {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
            }
  
            .radio {
              margin-top: 14px;
              margin-left: -16px;
              position: relative;
            }
  
            .radio label {
              line-height: 20px;
              position: relative;
              display: flex;
              align-items: center;
              font-weight: normal;
  
              .opt-text {
                font-size: 14px;
                font-weight: bold;
                color: #333330;
                line-height: 18px;
                margin-left: 10px;
              }
            }
  
            .radio .option {
              width: 19px;
              height: 18px;
              // position: absolute;
              // top: 1px;
              // // top: 32px;
              // left: 0px;
              background-size: cover;
              background: url(../../assets/image/noselect.png) no-repeat;
              background-size: cover;
            }
  
            .radio input[type="radio"] {
              display: inline-block;
              margin-right: -3px;
              opacity: 0;
            }
  
            .radio input[type="radio"]:checked + div {
              background: url(../../assets/image/select.png) no-repeat;
              background-size: cover;
            }
  
            .imgcontent {
              display: flex;
  
              .imgone {
                width: 140px;
                height: 140px;
                border-radius: 8px;
                background-image: url(../../assets/image/px.png);
                background-size: 100% 100%;
                background-position: center;
              }
            }
  
            .ontitle {
              margin-top: 27px;
              font-size: 14px;
              color: #333330;
            }
          }
        }
  
        .detailB {
          min-height: 363px;
          background: #ffffff;
          border-radius: 8px;
          margin-top: 20px;
  
          .el-tabs__item {
            height: 69px;
            padding: 25px 7px 0px 52px;
            font-size: 14px;
            font-weight: 500;
          }
  
          .el-tabs__nav-wrap::after {
            background-color: rgba(56, 125, 247, 0.2);
          }
  
          .enclosure {
            height: 89px;
            margin-left: 51px;
            margin-right: 40px;
            // border-bottom: 1px solid rgba(56, 125, 247, 0.2);
            display: flex;
            justify-content: space-between;
            align-items: center;
  
            .enclosureL {
              display: flex;
              align-items: center;
              font-size: 14px;
              font-weight: 400;
              color: #677d86;
              line-height: 24px;
            }
  
            .download {
              display: flex;
              align-items: center;
              font-size: 16px;
              font-weight: 400;
              color: #2478ff;
              line-height: 24px;
              cursor: pointer;
            }
          }
  
          .work {
            margin-left: 51px;
            margin-right: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 37px;
          }
  
          .work .question {
            font-size: 14px;
            font-weight: 500;
            color: #333330;
            line-height: 18px;
          }
  
          .work .active {
            width: 82px;
            height: 28px;
            background: linear-gradient(90deg, #a5d4e0 0%, #b4dce6 100%);
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            color: #ffffff;
            line-height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-right: 11px;
          }
  
          .work .unactive {
            width: 80px;
            height: 26px;
            border: 1px solid #a5d4e0;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            color: #a5d4e0;
            line-height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 11px;
            cursor: pointer;
          }
  
          .work .btncolor {
            background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%);
          }
  
          .work .bordercolor {
            border: 1px solid #85aad2;
          }
  
          .work .fontcolor {
            color: rgba(133, 170, 210, 1);
          }
  
          .work .submit {
            width: 126px;
            height: 46px;
            background: #2478ff;
            box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
            border-radius: 4px;
            font-size: 16px;
            font-weight: 800;
            color: #ffffff;
            line-height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
        }
      }
    }
  }
  </style>
  
  