<template>
  <div class="faceteachsignup">
    <ReturnHead text="课程详情" :gohome="true"></ReturnHead>
    <div class="main">
      <div class="title">
        <div class="faceteachimgname">
          <img
            style="width: 129.5px; height: 73px"
            :src="data.offcourseDto?.picUrl"
            alt=""
          />
          <div class="faceteachname">{{ data.planDto?.name }}</div>
        </div>
        <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>
            <div style="display: flex">
              <botton
                class="titlebtn"
                v-if="data.planDto?.applyFlag"
                @click="onLineSignUp(false)"
                :style="{
                  background: isAllowSign
                    ? data.isSignUp || data.isRefused
                      ? '#999'
                      : 'rgb(57, 146, 249)'
                    : '#999',
                }"
                >{{
                  data.isRefused
                    ? "审核拒绝"
                    : data.isSignUp
                    ? "已报名"
                    : "立即报名"
                }}
              </botton>
              <botton
                v-if="data.isRefused && !data.isSignUpAgain"
                class="titlebtn"
                style="background: rgb(57, 146, 249)"
                @click="onLineSignUp(true)"
              >
                重新报名
              </botton>
            </div>
          </div>
        </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" />
            <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>
        </div>
      </div>

      <div class="course">
        <div style="width: 100%">
          <el-tabs v-model:activeName="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程简介" name="first">
              <div class="notice" style="padding: 10px; font-size: 14px">
                {{ data.offcourseDto?.intro || "暂无课程介绍" }}
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程大纲" name="second">
              <div class="work">
                <div style="display: flex; align-items: center">
                  <div
                    id="face_img_id"
                    style="padding: 10px"
                    class="content faceteachsignup_img_class"
                    v-html="data.offcourseDto?.outline"
                  ></div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="课程评论" name="fourth">
              <CommentReply :faceId="courseId" :type="3" />
            </el-tab-pane>
            <el-tab-pane label="材料下载" name="third">
              <div
                v-if="!data.offcourseDto?.attach"
                style="
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 24px;
                  cursor: pointer;
                  margin-left: 20px;
                  margin-top: 10px;
                "
              >
                此课程无附件
              </div>
              <div v-else>
                <div
                  v-for="(el, index) in formateArr(data.offcourseDto.attach)"
                  :key="index"
                  class="enclosure"
                  :style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }"
                >
                  <div class="enclosureL">
                    <FileTypeImg
                      :v-model="
                        el.slice(el.lastIndexOf('/') + 1, el.indexOf('-')) +
                        el.slice(el.lastIndexOf('.'))
                      "
                      :style="{
                        width: '22px',
                        height: '26px',
                        marginLeft: '10px',
                      }"
                    ></FileTypeImg>
                    <div style="margin-left: 10px">
                      {{
                        el.slice(el.lastIndexOf("/") + 1, el.indexOf("-")) +
                        el.slice(el.lastIndexOf("."))
                      }}
                    </div>
                  </div>
                  <div class="download">
                    <img
                      style="width: 16px; height: 15px"
                      src="../../assets/image/download.png"
                    />
                    <div
                      style="margin-left: 5px; color: rgba(36, 120, 255, 1)"
                      @click="download(el)"
                    >
                      下载
                    </div>
                    <!-- <div style="margin-left: 5px;color:#999;" @click="download(el)">
                      下载
                    </div> -->
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ReturnHead from "@/components/ReturnHead.vue";
import {computed, onBeforeMount, ref,} from "vue";
import FileTypeImg from "@/components/FileTypeImg.vue";
import {request, useRequest} from "@/api/request";
import {FACETEACH_SIGNUP, STU_OFFCOURSE_DETAIL} from "@/api/api";
import {useRoute, useRouter} from "vue-router";
import {useUserInfo} from "@/api/utils";
import {ElLoading, ElMessage} from "element-plus";
import CommentReply from "@/components/CommentReply.vue";
import dayjs from "dayjs";
import isBetween from "dayjs/plugin/isBetween";

const router = useRouter();
const returnclick = () => {
  router.back();
};
const {
  query: { courseId },
} = useRoute();
onBeforeMount(() => dayjs.extend(isBetween));
const loading = ref(false); // loading
const openLoading = () => {
  loading.value = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
};
openLoading();
const closeLoading = () => {
  loading.value.close();
};
const { data } = useRequest(STU_OFFCOURSE_DETAIL, { courseId }, () => closeLoading());
const isAllowSign = computed(() => dayjs().isBetween(dayjs(data.value?.planDto?.beginTime).subtract(data.value?.planDto?.beforeStart || 0, "minute"), dayjs(data.value?.planDto?.afterStart ? data.value?.planDto?.beginTime : data.value?.planDto?.endTime).add(data.value?.planDto?.afterStart || 0, "minute")));
const teacherInfo = useUserInfo(computed(() => data.value?.planDto?.teacherId));
const activeName = ref("first");

const handleClick = (tab, event) => {
  console.log("附件", tab, event);
};
const download = (url) => window.open(import.meta.env.VITE_BOE_API_URL + import.meta.env.VITE_FILE_PATH + url, "_top");
// 报名
function onLineSignUp(isAgain) {
  // if (!isAllowSign.value) {
  //   ElMessage.warning("未在允许报名时间范围内");
  //   return;
  // }
  if (data.value.isSignUp && !isAgain) {
    return;
  }
  request(FACETEACH_SIGNUP, { courseId });
  data.value.isSignUp = true;
  data.value.isSignUpAgain = isAgain;
  data.value.isRefused = false;
  ElMessage.success(isAgain ? "重新报名成功" : "报名成功");
}

function formateArr(strs) {
  return strs?.split(",");
}

</script>

<style lang="scss">
.faceteachsignup {
  width: 100%;
  padding-bottom: 20px;
  .faceteachsignup_img_class img {
    max-width: 100% !important;
  }
  .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;

    .title {
      width: 90%;
      min-height: 167px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      .faceteachimgname {
        display: flex;
        align-items: center;
        width: 90%;
        margin-top: 17px;
        margin-bottom: 20px;
      }
      .faceteachname {
        margin-left: 15px;
        font-size: 14px;
        font-weight: normal;
        color: #394145;
      }
      .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>
