<template>
  <div class="courseCat_wrap courseLession_wrap" v-if="pageMode == 'courseCat'">
    <van-sticky>
      <div class="bg-white title_box">
        <p class=" fs18 fw5 text_color title_centent flex-rb flex-ac">
          {{ detailInfo.name }}
        </p>
        <p class="fs12 text-gray progress_box">
          已学习<span class="theme_color">{{ totalLesson.learnedCount }}</span
          >节/共{{ totalLesson.totalCount }}节
        </p>
      </div>

      <HTab
        ref="HTabComp"
        class="bg-white"
        :options="csTabOptions"
        :tabList="tabOptions"
        @change="menuChange"
      >
      </HTab>
    </van-sticky>

    <div class="catalogTree fs14" ref="CSCatTreeRefs">
      <ul class="bg-white root_cat_box pdx15">
        <li v-for="(v, index) in state.courseTreeData" :key="v.id">
          <div
            class="chapter_box flex-ac flex-rb"
            v-if="v.type == 0"
            @click="handleExpend(v)"
          >
            <span class="chapter_label fw5 single-line">
              {{ v.name }}
            </span>
            <div class="collapseIcon_box flex-cc">
              <div class="arrow" :class="v.expended ? '' : 'activeUp'"></div>
            </div>
          </div>
          <div class="courseware_box" v-if="v.type == 2">
            <!-- 课 -->
            <CSLessonsBox
              :lessonDownProgress="lessonDownProgress"
              :info="v"
              :courseDetail="detailInfo"
              :lessonStudyProgress="lessonStudyProgress"
            />
          </div>
          <div class="section_box flex-ac flex-rb" v-if="v.type == 1">
            <span>{{ v.name }}</span>
          </div>
          <transition name="mybox">
            <div class="box" v-show="v.expended">
              <ul v-if="isArray(v.childrenList) && v.childrenList.length">
                <li v-for="(item, index) in [...v.childrenList]" :key="item.id">
                  <CSLessonsBox
                    :info="item"
                    :courseDetail="detailInfo"
                    :lessonDownProgress="lessonDownProgress"
                    :lessonStudyProgress="lessonStudyProgress"
                  />
                  <hr
                    class="mdy20"
                    v-if="index !== [...v.childrenList].length - 1"
                  />
                </li>
              </ul>
              <CSLessonPracticeBox
                :info="v.coursePaperVOS"
                :courseInfo="v"
                :courseDetail="detailInfo"
                v-if="
                  v.type == 0 &&
                    isArray(v.coursePaperVOS) &&
                    v.coursePaperVOS.length &&
                    v.coursePaperVOS != ['']
                "
              />
            </div>
          </transition>
        </li>
        <li v-for="v in practiceList" :key="v.id" class="bg-white exam_box">
          <p
            class="fs14 pdy12"
            v-if="v.type == 0 && detailInfo.joinStatus >= 1"
          >
            课后练习
          </p>
          <div
            class="flex pdy12"
            v-if="v.type == 0 && detailInfo.joinStatus >= 1"
          >
            <span class="flex-cc exam_tag fs10">
              <span class="exam_tag_icon"></span>
              <span class="fss10">练习</span>
            </span>
            <div class="exam_title">
              <p class="paperName_label fw5 single-line">
                {{ v.paperName }}
              </p>
              <div class="flex-rb exam_status fs12 theme_color">
                <span class=" single-line" v-if="v.status == 0">
                  未开始
                </span>
                <span class=" single-line paper_name" v-if="v.status == 1">
                  <span v-if="v.pass">已通过</span>
                  <span v-else>未通过</span>
                </span>
                <span
                  :class="[`${fetchDetailCatBtn(v).statusType}_tags`]"
                  @click="doTabCoursePractice(v, {...detailInfo})"
                >
                  {{ fetchDetailCatBtn(v).practiceLabel }}
                </span>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <HEmpty v-if="!state.courseTreeData.length && !isLoading" />
      <div ref="CSDetailCommentRefs">
        <CSDetailComment
          ref="detailCommentRefs"
          :info="detailInfo"
          :courseConf="courseConf"
          @tenantComment="doTenantComment"
        />
      </div>
    </div>

  </div>
  <!-- {{ pageMode }} -->
  <div v-if="pageMode == 'courseDot'">
    <CSLessonPoint
      ref="CSLessonPointRefs"
      :stepData="pointData"
      @closeDot="openCat"
      @dotTab="doDotTab"
    />
  </div>
  <!-- 评论 -->
  <CComment
    ref="commentRefs"
    :ocInfo="courseConf"
    :isNeedClose="true"
    @successComment="successComment"
  />
</template>

<script setup>
import {
  reactive,
  nextTick,
  computed,
  ref,
  onMounted,
  onActivated,
  getCurrentInstance,
} from "vue";
import { useRouter, useRoute } from "vue-router";
//
// 组件区
import {
  CSLessonsBox,
  CSLessonPracticeBox,
  CSDetailComment,
  CSLessonPoint,
} from "../components";
import { HTab, HEmpty } from "@/components/HVant/index";
import { CComment } from "@/components/common";
// hooks
import { clientChangeVideo, clientChangeVideoDot } from "@/hooks/web/useClientFc"
import { useWebFunc } from "@/hooks/web/useWebFunc";
import { useCourseCat } from "../hooks/useCourseCat";
import { useCourseDetail } from "../hooks/useCourseDetail";
import { useConf, useReqApi, useCourseMain } from "../hooks/useMain";
import {
  fetchNextCoursewareNode,
  fetchCurrentCourseNode,
} from "../hooks/format";
// 其它
import { isArray } from "@/utils/is/isString";
//数据
import { testFlag } from "../hooks/test";
import { testData } from "@/testData/courseDot";
const { appContext } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const {
  getCourseCatalogApi,
  getCourseInfoApi,
  updateLastLearnCatalogIdCourseApi,
  getCourseProgressApi,
} = useReqApi;
const { courseVideoDetailTabConf } = useConf;

const {
  doTabExam,
  clientCourseCatPracticeAlertView,
  doLoadCoursePractice,
  practiceList,
  doTabCoursePractice
} = useCourseCat();
const { setWebFunc } = useWebFunc();
const { fetchDetailCatBtn } = useCourseDetail();

// 初始值
const lessonDownProgress = ref({}); // 课件下载进度
const courseRecordInfo = ref({
  totalProgress: 0,
}); // 课程端数据汇总
const lessonStudyProgress = ref({}); // 课件学习进度
const totalLesson = ref({
  learnedCount: 0,
  totalCount: 0,
});

const state = reactive({
  currMenuIndex: 0,
  activeLesson: [],
  courseListOptions: {
    // isCustom: true
  },
  courseTreeData: [], //courseCatData
});
const detailInfo = ref({});
const pageMode = ref("courseCat");
const isLoading = ref(false);
const courseConf = reactive({
  operationType: 0,
});
const csTabOptions = reactive({
  defaultValue: 0,
});
const tabOptions = computed(() => {
  return courseVideoDetailTabConf.filter((item) => {
    if (item.id === "1") {
      item.name = `评论(${detailInfo.value.commentCount || 0})`;
    }
    return item;
  });
});

const pointData = ref([]); // 知识点
const currentCatData = ref({}); // 当前学习目录项
// 实例
const CSCatTreeRefs = ref("");
const CSDetailCommentRefs = ref("");
const commentRefs = ref("");
const detailCommentRefs = ref("");
const CSLessonPointRefs = ref("");

/**step1 目录、评论模块切换 */
function menuChange(record) {
  state.currMenuIndex = record;
  nextTick(() => {
    switch (record) {
      case "0":
         window.scrollTo(
          0,
          0
        );
        break;
      case "1":
        // CSDetailCommentRefs.value.scrollIntoView({
        //   behavior: "smooth",
        // });
        window.scrollTo(
          0,
          CSDetailCommentRefs.value.offsetTop - CSCatTreeRefs.value.offsetTop
        );
        break;
    }
  });
}

/**step2 目录详情数据 评论数据 推荐课程数据*/
// 目录数据
async function loadCatData(nextCat, nextCatId) {
  isLoading.value = true;
  const res = await getCourseCatalogApi({ id: route.query.id }).finally(() => {
    isLoading.value = false;
  });
  // console.log(res, "loadCatData");
  if (isArray(res)) {
    state.courseTreeData = res.filter((item) => {
      item.expended = true;
      return item;
    });
    if (nextCatId) {
      // 下一课已经解锁 广播下一节点id
      let params = {
        ...nextCat,
        courseTrainId: route.query.id,
      };
      appContext.config.globalProperties.Bus.emit(
        "changeCurrentCatId",
        nextCatId
      );
      clientChangeVideo(params, (_) => {});
    }
  } else {
    state.courseTreeData = [];
  }
}

/**step3 目录交互完善 展开收起 对接端 */
//收起/展开
function handleExpend(record) {
  record.expended = !record.expended;
}

/**step4 other */
// 关闭知识点-打开目录
function openKnowledge() {
  if (testFlag.isOpenDot) {
    pointData.value = testData;
    openDot();
  } else {
    setWebFunc("webOpenKnowledge", (res) => {
      pointData.value = JSON.parse(res);
      console.info("pointData", pointData.value);
      openDot();
    });
  }
}
// 从端获取下载进度
function fetchDownloadProgress() {
  setWebFunc("changeDownloadProgress", (res) => {
    lessonDownProgress.value = res;
  });
}
// 从端获取学习进度
function fetchStudyProgress() {
  setWebFunc("changeStudyProgress", (res) => {
    // console.log(res, "changeStudyProgress");
    lessonStudyProgress.value = res.studyCourseware;
    courseRecordInfo.value = res;
    // // 播报课程总进度
    lessonStudyProgress.value.learningProgress>=1 && loadCourseProgress()
  });
}
// 从接口获取学习进度 获取总进度
async function loadCourseProgress() {
  const res = await getCourseProgressApi({ id: route.query.id });
  // console.log(res, "loadCourseProgress_res");
  totalLesson.value = res;
}

// 完成本节播放，后续处理 （练习提醒、下一节自动切换） completeStatus 练习完成状态
function webFnPlayNextVideo() {
  setWebFunc("playNextVideo", (res) => {
    const currentCat = fetchCurrentCourseNode(
      state.courseTreeData,
      res.catalogId
    );
    // 播报课程总进度
    loadCourseProgress();
    console.log("currentCat_coursePaperVOS", currentCat);
    // 确认是练习提醒还是进入下一节
    if (
      currentCat.coursePaperVOS &&
      (![1, 2].includes(currentCat.coursePaperVOS?.status) ||
        ![1].includes(currentCat?.completeStatus))
    ) {
      // 课节练习提醒 练习提醒 课程状态处理 completeStatus 0 未完成 2 音视频完成 1 全部完成含练习
      currentCatData.value = {
        ...currentCat,
        coursePracticeType: "coursewarePractice",
      };
      clientCourseCatPracticeAlertView({}, () => {
        const { coursePaperVOS } = currentCatData.value;
        doTabExam(coursePaperVOS[0]);
      });
    } else {
      // 直接跳下一节课
      fetchNextCourse(res);
    }
  });
}

// 判断当前课是否有练习
function fetchNextCourse(res) {
  // 弹下一课提醒
  const nextCat = fetchNextCoursewareNode(state.courseTreeData, res.catalogId);
  const nextCatId = nextCat.id;
  //有下一课， 自动播放下一课，没有不处理
  if (nextCatId != res.catalogId) {
    updateChangeLessonApi(nextCatId);
    loadCatData(nextCat, nextCatId);
  } else {
    // 广播下一节点id
    // appContext.config.globalProperties.Bus.emit("changeCurrentCatId", nextCatId);
  }
}

// 汇报上次学到的课
function updateChangeLessonApi(nextCatId) {
  updateLastLearnCatalogIdCourseApi({
    courseCatalogId: nextCatId,
    resourceId: route.query.id,
  });
}

// 打开目录
function openCat() {
  pageMode.value = "courseCat";
}
// 打开知识点
function openDot() {
  pageMode.value = "courseDot";
}
// 切换知识点
function doDotTab(params) {
  clientChangeVideoDot(params, (res) => {
    if (res == 1) {
      CSLessonPointRefs.value.initChangePoint();
    }
  });
}

function loadDetail() {
  nextTick(() => {
    detailCommentRefs.value.initData();
  });
  if (isLoading.value) {
    return;
  }
  doLoadData();
  loadCatData();
  doLoadCoursePractice();
  loadCourseProgress();
}

// 详情数据
async function doLoadData() {
  const res = await getCourseInfoApi({
    id: Number(route.query.id),
  });
  detailInfo.value = res;
}

function loadWebFunc() {
  openKnowledge();
  fetchDownloadProgress();
  fetchStudyProgress();
  webFnPlayNextVideo();
}

// 打开评论
function doTenantComment() {
  commentRefs.value.initPopup();
}

// 评论成功
function successComment() {
  loadDetail();
}

onMounted(() => {
  loadWebFunc();
  loadDetail();
});

onActivated(() => {
  loadDetail();
});
</script>

<style lang="less">
@import url("../style/courseCat.less");
@import url("../style/courseDetail.less");
</style>
