<template>
  <div class="faceteach" style="padding: 30px">
    <!-- 面包屑导航 -->
    <div class="crumb">
      <div>课程列表</div>
      <div style="margin-left: 6px; margin-right: 6px">/</div>
      <div style="font-weight: 700">课程详情</div>
      <div v-if="pName !=''" class="return">
        <div style="display: flex" @click="returnclick">
          <img
            class="img2"
            style="margin-right: 22px"
            src="../../assets/image/return.png"
          />
          <div class="text">返回</div>
        </div>
      </div>
    </div>
    <!-- 面包屑导航 -->

    <!-- 基本信息 -->
    <div class="bascinfo">
      <div style="margin-left: 46px">
        <div class="title">【面授课】{{ data.planDto?.name }}</div>
        <div class="time" style="margin-top: 26px">
          <img
            style="width: 15px; height: 17px"
            src="../../assets/image/time.png"
          />
          <div style="margin-left: 8px">
            {{ data.planDto?.beginTime + "至" + data.planDto?.endTime }}
          </div>
        </div>
        <div class="time" style="margin-top: 23px">
          <img
            style="width: 16px; height: 18px"
            src="../../assets/image/position.png"
          />
          <div style="margin-left: 8px">{{ data.planDto?.address }}</div>
        </div>
      </div>
      <botton
        style="background: #999"
        class="btn"
        @click="toSurvery"
        v-if="data.planDto?.evalFlag == 0"
      >
        评估
      </botton>
      <botton
        :style="{
          background: `${data.isSurvery ? '#999' : 'rgb(57, 146, 249)'}`,
        }"
        class="btn"
        @click="toSurvery"
        v-if="data.planDto?.evalFlag && data.planDto?.evalFlag == 1"
        >{{ data.isSurvery ? "已评估" : "评估" }}
      </botton>
    </div>
    <!-- 基本信息 -->

    <!-- 详细信息 -->
    <div class="detailinfo">
      <div class="detail">
        <div class="detailT">
          <div class="" style="margin-left: 48px; margin-right: 48px">
            <div class="title">
              <img
                style="width: 20px; height: 20px"
                src="../../assets/image/course.png"
              />
              <div class="text">课程详情</div>
              <div class="box"></div>
            </div>
            <div style="display: flex; align-items: center">
              <div class="content" v-html="data.planDto?.description"></div>
            </div>
          </div>
        </div>
        <div class="detailB">
          <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;
                "
              >
                此课程无附件
              </div>
              <div
                v-for="(el, index) in JSON.parse(data.planDto?.attach)"
                :key="index"
                v-if="data.planDto"
                class="enclosure"
                :style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }"
              >
                <div class="enclosureL">
                  <FileTypeImg
                    v-model="el.name"
                    :style="{
                      width: '22px',
                      height: '26px',
                      marginLeft: '10px',
                    }"
                  ></FileTypeImg>
                  <div style="margin-left: 20px">{{ el.name }}</div>
                </div>
                <div class="download">
                  <img
                    style="width: 16px; height: 15px"
                    src="../../assets/image/download.png"
                  />
                  <div
                    style="margin-left: 5px"
                    @click="download(el.response.data)"
                  >
                    下载
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程作业" name="second">
              <div
                v-if="data.planDto?.attach === '[]'"
                style="
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 24px;
                  cursor: pointer;
                  margin-left: 40px;
                  margin-top: 20px;
                "
              >
                此课程无作业
              </div>
              <div class="work" v-if="data.workDto?.workName">
                <div>
                  <div class="question">{{ data.workDto?.workName }}</div>
                  <div style="margin-top: 16px; display: flex">
                    <div class="tag1" v-if="data.workDto?.workFlag">必修</div>
                    <div class="tag3" style="margin-left: 11px">作业</div>
                  </div>
                </div>
                <div class="submit" @click="toWork" v-if="data.workDto?.workId">
                  交作业
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程考试" name="third">
              <div
                v-if="data.planDto?.attach === '[]'"
                style="
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 24px;
                  cursor: pointer;
                  margin-left: 40px;
                  margin-top: 20px;
                "
              >
                此课程无考试
              </div>
              <div class="work" v-if="data.examinationDto?.examinationTestName">
                <div>
                  <div class="question">
                    {{ data.examinationDto?.examinationTestName }}
                  </div>
                  <div style="margin-top: 16px; display: flex">
                    <div
                      class="tag1"
                      v-if="data.examinationDto?.examinationFlag"
                    >
                      必修
                    </div>
                    <div class="tag3" style="margin-left: 11px">考试</div>
                  </div>
                </div>
                <div class="submit" @click="toExamItem(data.examinationDto)">
                  去考试
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="teacher">
        <div class="title">
          <img
            style="width: 21px; height: 23px"
            src="../../assets/image/livelecturer.png"
          />
          <div class="text">面授课讲师</div>
          <div class="box"></div>
        </div>
        <!--        todo #面授课接口 讲师缺少img和介绍-->
        <div class="teacheritem">
          <img class="peopleimg" :src="userAvatar" />
          <div style="margin-left: 17px; width: 190px">
            <div class="teacherName" style="margin-right: 5px">
              {{ data.planDto?.teacher }}
            </div>
            <div class="introduce">{{ data.planDto?.bandDesc }}</div>
          </div>
          <!--          <div class="follow">+ 关注</div>-->
        </div>
      </div>
    </div>
    <!-- 详细信息 -->
  </div>
</template>

<script setup>
import { computed, reactive, toRefs, watch } from "vue";
import FileTypeImg from "@/components/FileTypeImg.vue";
import { request, useRequest } from "@/api/request";
import { STU_OFFCOURSE_DETAIL } from "@/api/api";
import { useRoute, useRouter } from "vue-router";
import { useUserInfo } from "@/api/utils";

const router = useRouter();
const returnclick = () => {
  router.back();
};
const {
  query: { courseId, type },
} = useRoute();

const { data } = useRequest(STU_OFFCOURSE_DETAIL, { courseId });
console.log("datadatadatadatadatadatadata", data);
const { avatar: userAvatar } = useUserInfo(
  computed(() => data.value?.planDto?.teacherId)
);

const state = reactive({
  activeName: "first",
  enclosure: "",
});
const { activeName, enclosure } = toRefs(state);
const handleClick = (tab, event) => {
  console.log(tab, event);
};
const download = (url) => {
  window.open(url);
};

function toSurvery() {
  if (data.value.isSurvery) {
    return;
  }
  if (data.value.planDto.evalFlag == 0) {
    alert("此课程无评估");
    return;
  }
  router.push({
    path: "/surveydetail",
    query: { courseId: data.value.planDto.evaluateId },
  });
}

function toWork() {
  router.push({
    path: "/homeworkpage",
    query: {
      courseId: data.value.workDto.workId,
      id: data.value.offcourseDto.categoryId,
      type,
    },
  });
}

function toExamItem(obj) {
  console.log("obj", obj.examinationTestId);
  window.open(import.meta.env.VITE_BOE_EXAM_DETAIL_URL + obj.examinationTestId); //测评
  // 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 {
  .crumb {
    color: #fff;
    display: flex;
    font-size: 14px;
    line-height: 24px;
  }

  .bascinfo {
    width: 100%;
    height: 180px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 1);
    margin-top: 37px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btn {
      width: 146px;
      height: 46px;
      background: #2478ff;
      border-radius: 4px;
      box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      line-height: 24px;
      cursor: pointer;
      margin-right: 96px;
    }

    .title {
      font-size: 20px;
      font-weight: 800;
      color: #333333;
      line-height: 24px;
      margin-left: -9px;
    }

    .time {
      font-size: 14px;
      color: #6e7b84;
      line-height: 24px;
      display: flex;
      align-items: center;
    }
  }
  .return {
    position: absolute;
    right: 10%;
    .text {
      text-align: center;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
  .detailinfo {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: flex-start;

    .detail {
      flex: 1;
      margin-right: 20px;

      .detailT {
        min-height: 263px;
        background: #ffffff;
        border-radius: 8px;
        color: rgba(51, 51, 51, 1);

        .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;
        }

        .content {
          margin-left: 8px;
          font-size: 14px;
          color: rgba(51, 51, 48, 1);
          font-weight: 500;
          line-height: 35px;
          margin-top: 30px;
          padding-bottom: 30px;
        }
      }

      .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 .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;
        }
      }
    }

    .teacher {
      width: 434px;
      min-height: 500px;
      // height: 10%;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 8px;

      .title {
        display: flex;
        align-items: center;
        padding-top: 39px;
        position: relative;
        margin-left: 48px;
      }

      .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;
      }

      .teacheritem {
        margin-left: 48px;
        margin-right: 48px;
        // min-height: 115px;
        padding: 25px 0px;
        display: flex;
        position: relative;
        // align-items: center;
      }

      .teacheritem .peopleimg {
        width: 60px;
        height: 60px;
        border-radius: 30px;
      }

      .teacheritem .teacherName {
        font-size: 14px;
        font-weight: bold;
        color: #394145;
        display: flex;
        align-items: center;
      }

      .teacheritem .introduce {
        font-size: 14px;
        font-weight: 500;
        color: #394145;
        margin-top: 14px;
      }

      .teacheritem .follow {
        width: 80px;
        height: 30px;
        background: #387df7;
        border-radius: 4px;
        margin-top: 28px;
        position: absolute;
        right: -25px;
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }
  }
}
</style>
