<template>
  <div class="faceteach">
    <ReturnHead text="课程详情" :gohome="true"></ReturnHead>
    <TitleHead :text="'【面授课】' + data.planDto?.name"></TitleHead>
    <div class="main">
      <div class="title">
        <div class="titlemain">
          <div class="timeposition">
            <div class="time">
              <img
                style="width: 13px; height: 14.5px; margin-right: 5.5px"
                src="../../assets/image/faceteach/time.png"
              />
              <div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
                {{
                  dayjs(data.planDto?.beginTime).format("YYYY-MM-DD HH:mm") +
                  " 至 " +
                  dayjs(data.planDto?.endTime).format("YYYY-MM-DD HH:mm")
                }}
              </div>
            </div>
            <div class="time" style="margin-top: 9px">
              <img
                style="width: 13px; height: 15px; margin-right: 5.5px"
                src="../../assets/image/faceteach/position.png"
              />
              <div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
                {{ data.planDto?.address }}
              </div>
            </div>
          </div>
          <!-- <div class="titlebtn">评估</div> -->

          <div v-if="projectStatus && projectEndTime">
            <div
              v-if="
                projectStatus !== '3' &&
                new Date(changeTime(projectEndTime)).getTime() >
                  new Date().getTime()
              "
              style="display: flex"
            >
              <botton
                class="titlebtn"
                style="margin-right: 20px"
                :style="{
                  background: isAllowSign
                    ? data.signFlag
                      ? '#999'
                      : 'rgb(57, 146, 249)'
                    : '#999',
                }"
                @click="signClick"
                >{{ data.signFlag ? "已签到" : "签到" }}
              </botton>
              <!-- <botton style="background: #999" class="btn" @click="toSurvery" v-if="data.planDto?.evalFlag == 0">
						评估
					</botton> -->
              <botton
                v-if="data.planDto?.evalFlag !== 0"
                :style="{
                  background: `${
                    new Date(changeTime(data.planDto?.beginTime)).getTime() >
                    new Date().getTime()
                      ? '#999'
                      : data.isSurvery
                      ? '#999'
                      : 'rgb(57, 146, 249)'
                  }`,
                }"
                class="titlebtn"
                @click="toSurvery"
                >{{ data.isSurvery ? "已评估" : "评估" }}
              </botton>
            </div>
          </div>
          <div v-else>
            <div style="display: flex">
              <botton
                class="titlebtn"
                style="margin-right: 20px"
                :style="{
                  background: isAllowSign
                    ? data.signFlag
                      ? '#999'
                      : 'rgb(57, 146, 249)'
                    : '#999',
                }"
                @click="signClick"
                >{{ data.signFlag ? "已签到" : "签到" }}
              </botton>
              <!-- <botton style="background: #999" class="btn" @click="toSurvery" v-if="data.planDto?.evalFlag == 0">
						评估
					</botton> -->
              <botton
                v-if="data.planDto?.evalFlag !== 0"
                :style="{
                  background: `${
                    new Date(changeTime(data.planDto?.beginTime)).getTime() >
                    new Date().getTime()
                      ? '#999'
                      : data.isSurvery
                      ? '#999'
                      : 'rgb(57, 146, 249)'
                  }`,
                }"
                class="titlebtn"
                @click="toSurvery"
                >{{ data.isSurvery ? "已评估" : "评估" }}
              </botton>
            </div>
          </div>

          <!-- <button
            v-if="data.planDto?.evalFlag !== 0"
            :style="{
              background: `${
                new Date(data.planDto?.beginTime).getTime() >
                new Date().getTime()
                  ? '#999'
                  : data.isSurvery
                  ? '#999'
                  : 'rgb(57, 146, 249)'
              }`,
            }"
            class="titlebtn"
            @click="toSurvery"
          >
            {{ data.isSurvery ? "已评估" : "评估" }}
          </button> -->
        </div>
      </div>
      <div class="teacher">
        <div style="width: 90%">
          <div class="teachertitle" style="width: 100px">
            <img
              style="width: 17px; height: 17px"
              src="../../assets/image/faceteach/livelecturer.png"
            />
            <div class="talk">面授课讲师</div>
            <div class="box" style="width: 80px; right: 0px"></div>
          </div>
          <div class="teachermain">
            <img
              class="teacherAvatar"
              :src="
                teacherInfo?.avatar?.includes('upload')
                  ? teacherInfo?.avatar
                  : fielPath + teacherInfo?.avatar
              "
            />
            <div style="flex: 1; margin-left: 11px; margin-right: 13px">
              <div class="teacherName">{{ data.planDto?.teacher }}</div>
              <div class="teacherIntro">
                {{ data.planDto?.bandDesc }}
              </div>
            </div>
            <!-- <div class="teacherFollow">+ 关注</div> -->
          </div>
        </div>
      </div>
      <div class="detail">
        <div style="width: 90%">
          <div class="teachertitle">
            <img
              style="width: 17px; height: 17px"
              src="../../assets/image/faceteach/livelecturer.png"
            />
            <div class="talk">课程详情</div>
            <div class="box"></div>
          </div>
          <div class="detailMain">
            {{ data.offcourseDto?.intro }}
          </div>
        </div>
      </div>
      <div class="course">
        <div style="width: 100%">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程附件" name="first">
              <div
                v-if="data.planDto?.attach === ''"
                style="
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 24px;
                  cursor: pointer;
                  margin-left: 40px;
                  margin-top: 20px;
                  margin-bottom: 20px;
                "
              >
                此课程无附件
              </div>
              <div v-else>
                <div
                  v-for="(el, index) in formateArr(data.planDto?.attach)"
                  :key="index"
                  class="enclosure"
                  :style="{
                    borderBottom: '1px solid rgba(56, 125, 247, 0.2)',
                  }"
                >
                  <div class="enclosureL">
                    <FileTypeImg
                      :v-model="
                        el.name
                          ? el.name
                          : el.slice(el.lastIndexOf('/') + 1, el.indexOf('-')) +
                            el.slice(el.lastIndexOf('.'))
                      "
                      :style="{
                        width: '19.5px',
                        height: '22px',
                        marginLeft: '10px',
                      }"
                    ></FileTypeImg>
                    <div style="margin-left: 15px">
                      {{
                        el.name
                          ? el.name
                          : el.slice(el.lastIndexOf("/") + 1, el.indexOf("-")) +
                            el.slice(el.lastIndexOf("."))
                      }}
                    </div>
                    <!-- <img style="width: 19.5px; height: 22px" :src="el.img" />
                  <div style="margin-left: 15px">{{ el.name }}</div> -->
                  </div>
                  <div>
                    <div
                      v-if="
                        new Date(
                          changeTime(data.planDto?.beginTime)
                        ).getTime() > new Date().getTime()
                      "
                      class="download"
                    >
                      <img
                        style="width: 16px; height: 15px"
                        src="../../assets/image/download.png"
                      />
                      <div
                        style="margin-left: 5px; color: #999"
                        @click="downloads(el)"
                      >
                        下载
                      </div>
                    </div>
                    <div v-else class="download">
                      <img
                        style="width: 16px; height: 15px; color: #2478ff"
                        src="../../assets/image/download.png"
                      />
                      <div
                        style="margin-left: 5px"
                        @click="download(el.name ? el.response.data : el)"
                      >
                        下载
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程作业" name="second">
              <div class="work">
                <div v-if="data.workDto">
                  <div>
                    <div class="question">{{ data.workDto?.workName }}</div>
                    <div style="display: flex; justify-content: space-between">
                      <div
                        style="
                          margin-top: 16px;
                          flex: 1;
                          display: flex;
                          flex-wrap: wrap;
                        "
                      >
                        <div
                          class="tag1"
                          v-if="data.workDto?.workFlag"
                          style="margin: 0px 10px 10px 0px"
                        >
                          必修
                        </div>
                        <div class="tag3" style="margin: 0px 10px 10px 0px">
                          作业
                        </div>
                      </div>
                      <div
                        :style="{
                          background:
                            new Date(
                              changeTime(data.planDto?.beginTime)
                            ).getTime() > new Date().getTime()
                              ? '#999'
                              : '',
                        }"
                        class="submit"
                        @click="toWork"
                      >
                        交作业
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-else
                  style="
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 24px;
                    cursor: pointer;
                    margin-left: 40px;
                    margin-top: 20px;
                  "
                >
                  此课程无作业
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="课程考试"
              name="third"
              :disabed="dayjs().isBefore(dayjs(data.planDto?.beginTime))"
            >
              <div class="work" v-if="data.examinationDto">
                <div class="question">
                  {{ data.examinationDto?.examinationName }}
                </div>
                <div style="display: flex; justify-content: space-between">
                  <div>
                    <div
                      style="
                        margin-top: 16px;
                        flex: 1;
                        display: flex;
                        flex-wrap: wrap;
                      "
                    >
                      <div
                        class="tag1"
                        style="margin: 0px 10px 10px 0px"
                        v-if="data.examinationDto?.examinationFlag"
                      >
                        必修
                      </div>
                      <div class="tag3" style="margin: 0px 10px 10px 0px">
                        考试
                      </div>
                    </div>
                  </div>
                  <div
                    :style="{
                      background:
                        new Date(
                          changeTime(data.planDto?.beginTime)
                        ).getTime() > new Date().getTime()
                          ? '#999'
                          : '',
                    }"
                    class="submit"
                    @click="toExamItem(data.examinationDto)"
                  >
                    去考试
                  </div>
                </div>
              </div>
              <div
                v-else
                style="
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 24px;
                  cursor: pointer;
                  margin-left: 40px;
                  margin-top: 20px;
                  margin-bottom: 20px;
                "
              >
                此课程无考试
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import TitleHead from "@/components/TitleHead.vue";
import ReturnHead from "@/components/ReturnHead.vue";
import { computed, reactive, toRefs, watch, onUnmounted, ref } from "vue";
import FileTypeImg from "@/components/FileTypeImg.vue";
import { request, useRequest } from "@/api/request";
import {
  STU_OFFCOURSE_DETAIL,
  TASK_OFFCOURSE_NOTASK_SIGN,
  TASK_OFFCOURSE_SIGN,
  TASK_BROADCAST_SIGN,
} from "@/api/api";
import { useRoute, useRouter } from "vue-router";
import { useUserInfo } from "@/api/utils";
import { ElMessage, messageConfig } from "element-plus";
import dayjs from "dayjs";
import { changeTime } from "@/api/method";
const fielPath = ref(import.meta.env.VITE_FILE_PATH);
const router = useRouter();
const returnclick = () => {
  router.back();
};
const {
  query: { courseId, type, id: taskId, projectStatus, projectEndTime },
} = useRoute();
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
const { data } = useRequest(STU_OFFCOURSE_DETAIL, { courseId });
console.log("datadatadatadatadatadatadata", data);
// console.log("项目状态字段传递", projectStatus, projectEndTime);

const teacherInfo = useUserInfo(computed(() => data.value?.planDto?.teacherId));

const state = reactive({
  activeName: "first",
  enclosure: "",
  isAllowSign: false,
});
const { activeName, enclosure, isAllowSign } = toRefs(state);

const handleClick = (tab, event) => {
  console.log("附件", tab, event);
};
const download = (url) => {
  console.log(
    "url2",
    import.meta.env.VITE_BOE_API_URL + import.meta.env.VITE_FILE_PATH + url
  );
  window.open(
    import.meta.env.VITE_BOE_API_URL + import.meta.env.VITE_FILE_PATH + url,
    "_top"
  );
};
const downloads = (url) => {
  ElMessage.warning("未到开始时间，请耐心等待！");
};

function formateArr(strs) {
  console.log("strs", strs);
  let newArr = [];
  try {
    newArr = JSON.parse(strs);
  } catch {
    newArr = strs ? strs.split(",") : [];
  }
  console.log("112233", newArr);
  return newArr;
}

let timer = null;
//判断能否签到
function isSignClick() {
  // timer = setInterval(() => {
  if (
    data &&
    data.value &&
    data.value.planDto?.beginTime &&
    data.value.planDto?.afterStart
  ) {
    let newStartTime = changeTime(data.value.planDto?.beginTime);
    let newEndTime = data.value.planDto?.endTime.replaceAll("-", "/");
    let beginTime = new Date(newStartTime).getTime();
    let endTime = !data.value.planDto?.afterStart
      ? new Date(newEndTime).getTime()
      : new Date(newStartTime).getTime();
    let nowTime = new Date().getTime();
    if (data.value.planDto?.beforeStart && data.value.planDto?.afterStart) {
      //有开始前有开始后
      beginTime = beginTime - data.value.planDto?.beforeStart * 60 * 1000;
      endTime = endTime + data.value.planDto?.afterStart * 60 * 1000;
      console.log("1111");
    } else if (
      data.value.planDto?.beforeStart &&
      !data.value.planDto?.afterStart
    ) {
      //只有开始前无开始后
      beginTime = beginTime - data.value.planDto?.beforeStart * 60 * 1000;
      console.log("11112222");
    } else if (
      !data.value.planDto?.beforeStart &&
      data.value.planDto?.afterStart
    ) {
      //无开始前有开始后
      endTime = endTime + data.value.planDto?.afterStart * 60 * 1000;
      console.log("1111333");
    }
    if (nowTime < endTime && nowTime > beginTime) {
      state.isAllowSign = true;
    } else {
      state.isAllowSign = false;
    }
  }

  // console.log(
  //   "isAllowSign",
  //   state.isAllowSign,
  //   nowTime,
  //   endTime,
  //   beginTime,
  //   nowTime < endTime,
  //   nowTime > beginTime
  // );
  // }, 1000);
}
watch(data, () => {
  isSignClick();
});

//签到
const signClick = () => {
  if (data.value.signFlag) {
    return;
  }
  // console.log(
  //   "data.signFlag",
  //   data.value.signFlag,
  //   state.isAllowSign,
  //   !state.isAllowSign
  // );
  //if (data.value.planDto.beginTime) {
  //	let date1 = new Date(data.value.planDto.beginTime).getTime()
  //	let date2 = new Date().getTime()
  //	if (date1 > date2) {
  //		ElMessage.info("未到开始时间，请耐心等待！");
  //		return;
  //	}
  //}
  if (!state.isAllowSign) {
    // console.log("data.signFlag", data.value.signFlag, isAllowSign);
    ElMessage.warning("未在允许签到时间范围内");
    return;
  }

  data.value.signFlag = 1;
  ElMessage.warning("签到成功");

  if (taskId) {
    request(TASK_OFFCOURSE_SIGN, { courseId: courseId, taskId, type });
  } else {
    request(TASK_OFFCOURSE_NOTASK_SIGN, { courseId: courseId });
  }
};

function toSurvery() {
  if (data.value.isSurvery) {
    // return;
  }
  if (
    data.value.planDto.beginTime &&
    dayjs().isBefore(data.value.planDto.beginTime)
  ) {
    ElMessage.warning("课程未开始，请耐心等待！");
    return;
  }
  if (data.value.planDto.evalFlag == 0) {
    ElMessage.warning("此课程无评估");
    return;
  }
  router.push({
    path: "/investigatpage",
    query: {
      id: taskId,
      courseId: data.value.planDto.assessmentId,
      pName: "面授课",
      infoId: data.value.planDto.id,
      chapterOrStageId: 0,
      sName: data.value.planDto.name,
      type: 3,
    },
  });
}

function toWork() {
  if (data.value.planDto.beginTime) {
    let date1 = new Date(changeTime(data.value.planDto.beginTime)).getTime();
    let date2 = new Date().getTime();
    if (date1 > date2) {
      ElMessage.warning("未到开始时间，请耐心等待！");
      return;
    }
  }
  router.push({
    path: "/homeworkpage",
    query: {
      courseId: data.value.planDto.homeWorkId,
      id: taskId,
      infoId: data.value.planDto.id,
      chapterOrStageId: 0,
      type: 3,
      pName: "面授课",
      sName: data.value.planDto.name,
    },
  });
}

function toExamItem(obj) {
  if (data.value.planDto.beginTime) {
    let date1 = new Date(changeTime(data.value.planDto.beginTime)).getTime();
    let date2 = new Date().getTime();
    if (date1 > date2) {
      ElMessage.warning("未到开始时间，请耐心等待！");
      return;
    }
  }
  console.log("obj", obj);
  if (obj.examType === 2) {
    router.push({
      path: "/externalexam",
      query: {
        courseId: obj.id,
        type: 3,
      },
    });
  } else {
    window.open(
      window.location.protocol +
        import.meta.env.VITE_BOE_EXAM_DETAIL_URL +
        obj.id,
      "_top"
    );
  }

  // router.push({ path: import.meta.env.VITE_BOE_EXAM_DETAIL_URL+ obj.examinationTestId });
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.faceteach {
  width: 100%;
  padding-bottom: 20px;
  .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -14.5px;
    .title {
      width: 90%;
      height: 74px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 1);
      display: flex;
      justify-content: center;
      .titlemain {
        width: 90%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .timeposition {
          .time {
            display: flex;
            align-items: center;
          }
        }
        .titlebtn {
          width: 83px;
          height: 33px;
          background: #2478ff;
          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 12px;
          cursor: pointer;
        }
      }
    }
    .teachertitle {
      width: 90px;
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 21px;
      .talk {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        line-height: 12px;
        margin-left: 7.5px;
      }
      .box {
        position: absolute;
        width: 62.5px;
        height: 10px;
        right: 6px;
        bottom: -4px;
        background: rgba(36, 120, 255, 0.15);
      }
    }
    .teacher {
      width: 90%;
      padding-bottom: 15px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;

      .teachermain {
        margin-top: 24px;
        display: flex;
        justify-content: space-between;
        .teacherAvatar {
          width: 50px;
          height: 50px;
          border-radius: 25px;
          margin-left: 4px;
        }
        .teacherName {
          font-size: 14px;
          font-weight: 600;
          color: #394145;
          line-height: 21px;
        }
        .teacherIntro {
          font-size: 13px;
          font-weight: 400;
          color: #394145;
          line-height: 21px;
          margin-top: 12px;
        }
        .teacherFollow {
          width: 73px;
          height: 28px;
          background: #2478ff;
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 13px;
          font-weight: 400;
          color: #ffffff;
          line-height: 12px;
          color: #fff;
          margin-top: 13px;
        }
      }
    }
    .detail {
      width: 90%;
      padding-bottom: 25px;
      background: #ffffff;
      border-radius: 4px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .detailMain {
        margin-top: 22px;
        font-size: 13px;
        font-weight: 400;
        color: #333330;
        line-height: 24px;
      }
    }
    .course {
      width: 90%;
      // padding-bottom: 15px;
      border-radius: 4px;
      background: #ffffff;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .el-tabs__nav {
        width: 90%;
        margin-left: 5%;
        display: flex;
        justify-content: space-between;
      }
      .el-tabs__item {
        height: 50px;
        padding: 0px;
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        padding-top: 15px;
      }
      .el-tabs__nav-wrap::after {
        background-color: rgba(56, 125, 247, 0.2);
      }
      .el-tabs__header {
        margin: 0;
      }
      .enclosure {
        width: 90%;
        margin-left: 5%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .enclosureL {
          display: flex;
          align-items: center;
          font-size: 13px;
          font-weight: 400;
          color: #677d86;
          line-height: 19px;
        }
        .download {
          display: flex;
          align-items: center;
          font-size: 13px;
          font-weight: 400;
          color: #2478ff;
          line-height: 19px;
        }
      }
      .work {
        // margin-left: 51px;
        // margin-right: 40px;
        padding-bottom: 20px;
        width: 90%;
        margin-left: 5%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 17.5px;
      }
      .work .question {
        font-size: 13px;
        font-weight: 500;
        color: #333330;
        line-height: 21.5px;
      }

      .work .submit {
        width: 73px;
        height: 28px;
        margin-top: 16px;
        background: #2478ff;
        box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
        border-radius: 2px;
        font-size: 13px;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
