<template>
  <div class="pathmap">
    <ReturnHead
      text="路径详情"
      :showfile="true"
      :courseId="routerId"
      :type="2"
    ></ReturnHead>
    <div class="main">
      <div class="up">
        <!-- <div class="notice">
          <span class="text"
            >请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span
          >
          <span class="close"></span>
        </div> -->
        <div class="content">
          <div class="title">{{ data?.name }}</div>
          <div class="text2">
            {{ data?.remark }}
          </div>
        </div>
      </div>
      <div class="down">
        <div class="project_title">学习路径内容</div>

        <div class="project_second">
          <div class="course1_first">
            <div class="text8">{{ data?.currentStageName }}</div>
            <div class="course1_right">
              <div
                class="circular"
                :style="
                  data.statusName === '已完成' || data.statusName === '进行中'
                    ? 'border: 1px solid #0060ff'
                    : 'border: 1px solid #999'
                "
              ></div>
              <!-- <div class="text9">进行中</div> -->
              <div
                class="text9"
                :style="
                  data.statusName === '已完成' || data.statusName === '进行中'
                    ? 'color:#0060ff'
                    : 'color:#999'
                "
              >
                {{
                  data.statusName ||
                  (data.unlockMode === 1 ? "未开始" : "未解锁")
                }}
              </div>
              <!-- <div class="btn1"></div> -->
            </div>
          </div>
          <div class="secondcontent">
            <div
              class="question"
              v-for="(el, index) in data?.taskBoList?.filter(
                (e) => !whiteTypes(e.type)
              )"
              :key="index"
              :style="{
                height: el.type === 1 ? '90px' : '72px',
              }"
            >
              <div style="width: calc(100% - 80px)">
                <div class="issue" :title="el.name">
                  {{ el.name }}
                </div>
                <div v-if="el.type === 1" class="progressBox">
                  <!-- <div>当前进度</div> -->
                  <div
                    class="progress"
                    style="
                      display: flex;
                      align-items: center;
                      margin-bottom: 3px;
                    "
                  >
                    <div style="width: 200px">
                      <el-progress
                        :percentage="parseInt(el.currentRatio)"
                        :show-text="false"
                        :stroke-width="8"
                        :color="
                          {
                            0: 'rgba(238, 112, 108, 1)',
                            1: 'rgba(255, 151, 38, 1)',
                            2: 'rgba(39, 122, 255, 1)',
                            3: 'rgba(59, 94, 251, 1)',
                            4: 'rgba(57, 219, 183, 1)',
                            5: 'rgba(57, 219, 183, 1)',
                          }[parseInt(parseInt(el.currentRatio) / 20)]
                        "
                      />
                    </div>
                    <div
                      style="
                        font-size: 12px;
                        font-weight: 500;
                        color: #277aff;
                        margin-left: 10px;
                      "
                      :style="{
                        color: {
                          0: 'rgba(238, 112, 108, 1)',
                          1: 'rgba(255, 151, 38, 1)',
                          2: 'rgba(39, 122, 255, 1)',
                          3: 'rgba(59, 94, 251, 1)',
                          4: 'rgba(57, 219, 183, 1)',
                          5: 'rgba(57, 219, 183, 1)',
                        }[parseInt(parseInt(el.currentRatio) / 20)],
                      }"
                    >
                      {{ parseInt(el.currentRatio) }}%
                    </div>
                  </div>
                </div>
                <div class="coursetag">
                  <div
                    class="tag1"
                    style="margin-right: 11px; margin-top: 3px"
                    v-if="el.flag"
                  >
                    必修
                  </div>
                  <div
                    class="tag2"
                    style="margin-right: 11px; margin-top: 3px"
                    v-if="!el.flag"
                  >
                    选修
                  </div>
                  <div class="tag3" style="margin-right: 11px; margin-top: 3px">
                    {{ TASK_TYPES.typeName[el.type] || "" }}
                  </div>
                </div>
              </div>
              <div
                v-if="isStudy == 'true'"
                class="goclass"
                :style="{
                  background:
                    el.statusName !== '已结束' &&
                    (el.statusName || data.unlockMode === 1)
                      ? '#2478ff'
                      : '#999',
                }"
                @click="toFinish(el)"
              >
                {{
                  el.statusName ||
                  (data.unlockMode === 1
                    ? TASK_TYPES.toName[el.type]
                    : "未解锁")
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive, ref, watch, onMounted } from "vue";
// import circle from "../../assets/image/pathdetails/circle.png";
// import circle2 from "../../assets/image/pathdetails/circle2.png";
import { boeRequest, useRequest, request } from "@/api/request";
import {
  ROUTER_PROCESS,
  LINK_DETAILS,
  STUDY_RECORD,
  SubmitExternalExam,
  UPDATE_CURRENT_TASK,
} from "@/api/api";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import store from "@/store";
import { ROUTER, TASK_TYPES } from "@/api/CONST";
import ReturnHead from "@/components/ReturnHead.vue";
import { useStore } from "vuex";
import { changeTime } from "@/api/method";
const {
  query: { routerId, routerName, chapterId, isStudy },
} = useRoute();
const router = useRouter();
const returnclick = () => {
  router.back();
};
const { commit, dispatch, state } = useStore();
const data = computed(() => state.routerInfo);
onMounted(() => {
  dispatch("getRouterInfo", { routerId, chapterId });
});

const userInfo = computed(() => store.state.userInfo);
console.log("lalalallala", data, userInfo);
const activeName = ref("first");

const handleClick = (tab, event) => {
  console.log(tab, event);
};
const path = { 1: "path" };

const dialogVisible = ref(false);
const dialogVisibleTip = ref("");

const types = ref({
  typeName: {
    1: "在线",
    2: "面授",
    3: "案例",
    4: "作业",
    5: "考试",
    6: "直播",
    7: "外链",
    8: "讨论",
    9: "活动",
    10: "测评",
    11: "评估",
    12: "投票",
    13: "项目",
  },
  toName: {
    1: "去上课",
    2: "去上课",
    3: "去阅读",
    4: "去完成",
    5: "去完成",
    6: "去观看",
    7: "去查看",
    8: "去讨论",
    9: "去签到",
    10: "去完成",
    11: "去完成",
    12: "去投票",
    13: "去完成",
  },
  path: {
    1: window.location.protocol + import.meta.env.VITE_BOE_ONLINE_CLASS_URL, //在线
    2: ({ courseId }) =>
      window.open(
        `${location.protocol}//${location.host}${
          import.meta.env.VITE_BASE_API
        }/stu/project/redirectDetail?courseId=${courseId}`,
        "_top"
      ),
    3: window.location.protocol + import.meta.env.VITE_BOE_CASS_DETAIL_URL, //案例
    4: "/homeworkpage",
    5: window.location.protocol + import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
    // 5: "/externalexam",
    6: "/liveboradcast",
    7: "/outerchain", //外联
    // 7: ({ targetId }) => window.open(targetId, "_top"), //外联
    8: "/discusspage",
    9: "/activitiespage",
    // 10: ({ evaType, targetId }) =>
    //   window.open(
    //     evaType == 0
    //       ? import.meta.env.VITE_BOE_TEST_DETAIL_URL + targetId
    //       : import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL +
    //           targetId +
    //           `&quizTaskKid=${routerId}&channelCode=learningpath`,
    //     "_top"
    //   ), //测评
    10: "/evaluation", //测评
    11: "/investigatpage",
    12: "/ballotpage",
    13: "/projectdetails",
  },
});

// 判断当前任务已结束及时间意义上的结束 提示用户
function judgeTaskIsEnd(type, endTimes, status) {
  // type 任务类型 endTime 结束时间 status 任务状态 (状态  0 未完成 1 已完成 2 未开始 -1 已结束)
  console.log("judgeTaskIsEnd", type, endTimes, status);
  let isEnd = false;
  let nowTime = new Date().getTime();
  let endTime = new Date().getTime(changeTime(endTimes));
  switch (type) {
    case 1:
      status == -1
        ? (isEnd = true)
        : nowTime > endTime
        ? (isEnd = true)
        : (isEnd = false);
      break;
    // case 3:
    // 	status == 3 ? isEnd = true : nowTime > endTime ? isEnd = true : isEnd = false;
    // 	break;
    case 5:
      status == -1
        ? (isEnd = true)
        : nowTime > endTime
        ? (isEnd = true)
        : (isEnd = false);
      break;
    case 7:
      status == -1
        ? (isEnd = true)
        : nowTime > endTime
        ? (isEnd = true)
        : (isEnd = false);
      break;
    case 10:
      status == -1
        ? (isEnd = true)
        : nowTime > endTime
        ? (isEnd = true)
        : (isEnd = false);
      break;
  }
  return isEnd;
}
function toFinish(d) {
  console.log(d);
  console.log(data.value.currentStageId, routerId);
  if (data.value.unlockMode !== 1 && !d.statusName) {
    ElMessage.warning("当前未解锁");
    return;
  }
  if (
    data.value.endTime &&
    judgeTaskIsEnd(d.type, data.value.endTime, data.value.status)
  ) {
    ElMessage.error("当前任务已结束");
    return;
  }
  if (!TASK_TYPES.path[d.type]) {
    ElMessage.error("暂时未开放");
    return;
  }
  // 在线课 停用 -- 暂时没有在线课停用标记
  if (d.type == 1) {
    if (d.taskStatus == 1 || d.taskStatus == 2) {
      ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
      return;
    }
  }
  if (d.type == 2) {
    if (d.taskStatus == 1 || d.taskStatus == 2) {
      ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
      return;
    }
    let date1 = new Date(changeTime(d.endTime)).getTime();
    let date2 = new Date().getTime();
    if (date1 < date2) {
      ElMessage.warning("当前面授课已结束");
      return;
    }
  }
  if (d.type === 3) {
    ElMessage.warning("请在pc端查看");
    return;
  }

  if (d.type == 4) {
    let date1 = new Date(changeTime(d.endTime)).getTime();
    let date2 = new Date().getTime();
    if (date1 < date2) {
      ElMessage.warning("当前作业已结束");
      return;
    }
  }
  // 考试 停用
  if (d.type == 5) {
    if (d.taskStatus == 1 || d.taskStatus == 2) {
      ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
      return;
    }
    // 此处判断外部考试跳转
    if (d.examType == 2) {
      // 点击即更新状态 进行中
      request(SubmitExternalExam, {
        chapterId: data.value.currentStageId,
        externalId: d.courseId,
        externalName: d.name,
        targetId: routerId,
        studentNo: userInfo.value.userNo,
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
      router.push({
        path: "/externalexam",
        query: {
          courseId: d.courseId,
          type: ROUTER,
        },
      });
      return;
    }
  }
  // 直播结束时间
  if (d.type == 6) {
    let date1 = new Date(changeTime(d.endTime)).getTime();
    let date2 = new Date().getTime();
    if (date1 < date2) {
      ElMessage.warning("当前直播已结束");
      return;
    }
  }
  // 其他活动 结束时间
  if (d.type == 9) {
    let date1 = new Date(changeTime(d.endTime)).getTime();
    let date2 = new Date().getTime();
    if (date1 < date2) {
      ElMessage.warning("当前活动已结束");
      return;
    }
  }
  // 评估 停用
  if (d.type == 11) {
    if (d.taskStatus == 1 || d.taskStatus == 2) {
      ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
      return;
    }
  }

  console.log("点击跳转", d, d.id);
  //更新学员当前任务
  request(UPDATE_CURRENT_TASK, {
    id: d.id,
    type: ROUTER,
    pid: routerId,
    name: d.name,
  });
  // 项目任务 直接跳转项目详情
  if (d.type == 13) {
    // 此处判断跳转项目详情界面
    router.push({
      path: "/projectdetails",
      query: {
        projectId: d.courseId,
        type: ROUTER,
      },
    });
    return;
  }
  const path =
    typeof TASK_TYPES.path[d.type] === "string"
      ? TASK_TYPES.path[d.type]
      : TASK_TYPES.path[d.type](d);
  path && path.startsWith("http")
    ? window.open(path + d.targetId, "_top")
    : path.startsWith("/")
    ? router.push({
        path,
        query: {
          id: d.id,
          type: ROUTER,
          infoId: routerId,
          courseId: d.courseId,
          pName: data.value.name,
          sName: data.value.currentStageName,
          chapterOrStageId: data.value.currentStageId,
          studentId: userInfo.value.id,
          status: d.status,
          targetId: d.targetId,
          evaType: d.evaType,
          btype: 2,
          quizTaskId: d.quizTaskId,
        },
      })
    : "";
  // if (typeof types.value.path[d.type] === "string") {
  //   // console.log(
  //   //   "types.value.path[d.type]",
  //   //   types.value.path[d.type],
  //   //   import.meta.env.VITE_BOE_EXAM_DETAIL_URL,
  //   //   import.meta.env.VITE_BOE_ONLINE_CLASS_URL
  //   // );
  //   types.value.path[d.type] &&
  //     types.value.path[d.type].startsWith("http") &&
  //     window.open(types.value.path[d.type] + d.targetId, "_top");
  //   types.value.path[d.type] &&
  //     types.value.path[d.type].startsWith("/") &&
  //     router.push({
  //       path: types.value.path[d.type],
  //       query: {
  //         id: d.id,
  //         type: ROUTER,
  //         infoId: routerId,
  //         courseId: d.courseId,
  //         pName: data.value.name,
  //         sName: data.value.currentStageName,
  //         chapterOrStageId: data.value.currentStageId,
  //         studentId: userInfo.value.id,
  //         status: d.status,
  //         targetId: d.targetId,
  //         evaType: d.evaType,
  //         btype: 2,
  //       },
  //     });
  // } else if (typeof types.value.path[d.type] === "function") {
  //   console.log("ddddddd", d);
  //   types.value.path[d.type](d);
  //   // console.log("types.value.path[d.type](d)", d);
  // }
}
function whiteTypes(type) {
  return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
}
</script>

<style lang="scss">
.pathmap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    //justify-content: center;
    margin-top: 10px;
    .up {
      width: 100%;
      height: 162px;
      display: flex;
      flex-direction: column;
      align-items: center;
      //justify-content: center;
      background-color: rgba(255, 255, 255, 1);
      .notice {
        background-color: rgba(255, 251, 238, 1);
        width: 100%;
        height: 25px;
        display: flex;
        justify-content: center;
        position: relative;
        .text {
          //display: flex;
          height: 25px;
          //position: absolute;
          color: rgba(255, 158, 0, 1);
          padding: 6px 41px 6.5px 15.5px;
          font-size: 12px;
          //line-height: 24px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .close {
          display: flex;
          position: absolute;
          top: 0;
          right: 0;
          width: 9.5px;
          height: 9.5px;
          background-image: url(../../assets/image/pathmap/close.png);
          margin-top: 10px;
          margin-right: 16px;
          margin-bottom: 8px;
        }
      }
      .content {
        width: 90%;
        display: flex;
        flex-direction: column;
        .title {
          margin-top: 15.5px;
          font-size: 14px;
          font-weight: 700;
          line-height: 21.6px;
          color: rgba(4, 36, 60, 1);
        }
        .text2 {
          display: flex;
          margin-top: 10px;
          margin-bottom: 22.5px;
          font-size: 13px;
          color: rgba(51, 51, 48, 1);
          line-height: 24px;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .down {
      width: 100%;
      margin-top: 11.5px;
      //height: 529px;
      display: flex;
      flex-direction: column;
      align-items: center;
      //justify-content: center;
      background-color: rgba(255, 255, 255, 1);
      .project_title {
        width: calc(100% - 36.5px);
        display: flex;
        font-size: 16px;
        font-weight: 500;
        line-height: 12px;
        color: rgba(13, 35, 58, 1);
        padding: 17px 0 17px 36.5px;
        border-bottom: 0.5px solid rgba(241, 242, 243, 1);
      }
      .project_first {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 18px;
        .course1_first {
          width: 100%;
          height: 35px;
          display: flex;
          justify-content: content;
          border-radius: 10px;
          background-color: #f9f9f9;
          .text8 {
            display: flex;
            flex: 1;
            margin-top: 11px;
            margin-left: 20px;
            margin-bottom: 10.5px;
            height: 13.5px;
            font-size: 14px;
            font-weight: 600;
            color: #333330;
          }
          .course1_right {
            display: flex;
            position: relative;
            width: 60px;
            height: 13.5px;
            margin-top: 15px;
            // margin-right: 10.5px;
            .circular {
              position: absolute;
              top: 1px;
              right: 63px;
              width: 8.5px;
              height: 8.5px;
              border-radius: 7px;
              border: 1px solid #0060ff;
            }
            .text9 {
              display: flex;
              justify-content: content;
              position: absolute;
              width: 40px;
              height: 13.5px;
              top: 0;
              //left: 20px;
              right: 18.5px;
              line-height: 13.5px;
              color: #0060ff;
              font-size: 13px;
              font-weight: 600;
            }
            .btn1 {
              width: 7px;
              height: 6px;
              position: absolute;
              top: 3px;
              right: 6px;
              background-image: url(../../assets/image/pathmap/btn.png);
            }
          }
        }
        .course_content {
          width: 90%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-top: 26.5px;
          .study1 {
            display: flex;
            //justify-content: center;
            width: 100%;
            margin-bottom: 15px;
            .firstclass {
              display: flex;
              width: 74px;
              height: 43px;
              background-image: url(../../assets/image/pathmap/firstclass.png);
            }
            .firstprogress {
              display: flex;
              flex: 1;
              position: relative;
              margin-left: 9.5px;
              .firsttext {
                position: absolute;
                //top: 6px;
                display: flex;
                font-size: 13px;
                line-height: 30.29px;
                color: rgba(110, 123, 132, 1);
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .secondtext {
                position: absolute;
                //top: 6px;
                right: 0;
                font-size: 12px;
                line-height: 30.29px;
                color: rgba(39, 122, 255, 1);
              }
              .progressbox {
                width: 100%;
                position: absolute;
                display: flex;
                height: 6.4px;
                bottom: 4px;
                background-color: rgba(232, 241, 254, 1);
                border-radius: 2px;
                .progressboxpart {
                  width: 70%;
                  height: 6.4px;
                  border-radius: 2px;
                  background: linear-gradient(
                    -180deg,
                    rgba(36, 120, 255, 1),
                    rgba(80, 147, 255, 1)
                  );
                }
              }
            }
          }
          .study2 {
            display: flex;
            width: 100%;
            margin-bottom: 15px;
            .secondclass {
              width: 74px;
              height: 43px;
              background-image: url(../../assets/image/pathmap/secondclass.png);
            }
            .secondprogress {
              display: flex;
              flex: 1;
              position: relative;
              margin-left: 9.5px;
              .firsttext {
                position: absolute;
                //top: 6px;
                display: flex;
                font-size: 13px;
                line-height: 30.29px;
                color: rgba(110, 123, 132, 1);
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .secondtext {
                position: absolute;
                //top: 6px;
                right: 0;
                font-size: 12px;
                line-height: 30.29px;
                color: rgba(39, 122, 255, 1);
              }
              .progressbox {
                width: 100%;
                position: absolute;
                display: flex;
                height: 6.4px;
                bottom: 4px;
                background-color: rgba(232, 241, 254, 1);
                border-radius: 2px;
                .progressboxpart {
                  width: 52%;
                  height: 6.4px;
                  border-radius: 2px;
                  background: linear-gradient(
                    -180deg,
                    rgba(36, 120, 255, 1),
                    rgba(80, 147, 255, 1)
                  );
                }
              }
            }
          }
        }
      }
      .project_second {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10.5px;
        .course1_first {
          width: 100%;
          height: 35px;
          display: flex;
          justify-content: content;
          border-radius: 10px;
          background-color: #f9f9f9;
          .text8 {
            display: flex;
            flex: 1;
            margin-top: 11px;
            margin-left: 20px;
            margin-bottom: 10.5px;
            height: 13.5px;
            font-size: 14px;
            font-weight: 600;
            color: #333330;
          }
          .course1_right {
            display: flex;
            position: relative;
            width: 60px;
            height: 13.5px;
            margin-top: 15px;
            // margin-right: 10.5px;
            .circular {
              position: absolute;
              top: 1px;
              right: 63px;
              width: 8.5px;
              height: 8.5px;
              border-radius: 7px;
              border: 1px solid #0060ff;
            }
            .text9 {
              display: flex;
              justify-content: content;
              position: absolute;
              width: 40px;
              height: 13.5px;
              top: 0;
              //left: 20px;
              right: 18.5px;
              line-height: 13.5px;
              color: #0060ff;
              font-size: 13px;
              font-weight: 600;
            }
            .btn1 {
              width: 7px;
              height: 6px;
              position: absolute;
              top: 3px;
              right: 6px;
              background-image: url(../../assets/image/pathmap/btn.png);
            }
          }
        }
        .secondcontent {
          width: 90%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-top: 10px;
          .question {
            width: 100%;
            display: flex;
            position: relative;
            height: 72px;
            border-bottom: 0.5px solid rgba(241, 242, 243, 1);

            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;

            .issue {
              width: 100%;
              font-size: 13px;
              // line-height: 30.29px;
              color: rgba(110, 123, 132, 1);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-bottom: 2px;
            }
            .coursetag {
              display: flex;
              flex-wrap: wrap;
            }
            .goclass {
              width: 63px;
              height: 23px;
              background: #2478ff;
              box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
              border-radius: 4px;
              font-size: 14px;
              font-weight: 800;
              color: #ffffff;
              display: flex;
              align-items: center;
              justify-content: center;
              // margin-right: 37px;
              cursor: pointer;
            }
            // .tag1 {
            //   position: absolute;
            //   left: 0;
            //   bottom: 14.5px;
            //   display: flex;
            //   justify-content: center;
            //   align-items: center;
            //   font-size: 13px;
            //   color: rgba(203, 128, 231, 1);
            //   border: 0.5px solid rgba(203, 128, 231, 1);
            //   line-height: 19.2px;
            //   //padding: 0 10px;
            // }
            // .tag2 {
            //   position: absolute;
            //   left: 92px;
            //   bottom: 14.5px;
            //   display: flex;
            //   justify-content: center;
            //   align-items: center;
            //   font-size: 13px;
            //   color: rgba(136, 157, 238, 1);
            //   border: 0.5px solid rgba(136, 157, 238, 1);
            //   line-height: 19.2px;
            //   //padding: 0 10px;
            // }
            // .tag3 {
            //   position: absolute;
            //   left: 0;
            //   bottom: 14.5px;
            //   display: flex;
            //   justify-content: center;
            //   align-items: center;
            //   font-size: 13px;
            //   color: rgba(104, 206, 234, 1);
            //   border: 0.5px solid rgba(104, 206, 234, 1);
            //   line-height: 19.2px;
            //   //padding: 0 10px;
            // }
          }
        }
      }
    }
  }
}
</style>
