saas_pc/src/pages/person-center/my-course/index.vue

<template>
  <div class="my-course">
    <div>
      <h4 class="headerTitle">
        <span v-if="goodsData.subjectNames" style="font-size: 20px"
          >【{{ goodsData.subjectNames }}】</span
        >{{ goodsData.goodsName
        }}<el-button
          size="mini"
          type="primary"
          plain
          icon="el-icon-sort"
          style="margin-left: 14px"
          @click="changeCourse"
          >切换科目</el-button
        ><el-button v-if="outerChain()" @click="jumpExternalLink" size="mini" type="primary">进入外链</el-button>

        <el-button
          v-if="
            goodsData.applyStatus === 1 &&
            !(
              sysTime <= goodsData.serviceStartTime ||
              sysTime >= goodsData.serviceEndTime ||
              (goodsData.classStartTime &&
                sysTime <= goodsData.classStartTime) ||
              (goodsData.classEndTime && sysTime >= goodsData.classEndTime) ||
              goodsData.learningStatus == 2 ||
              goodsData.classStatus == 0 ||
              (goodsData.learningStatus == 3 &&
                sysTime < goodsData.learningTimeStart) ||
              !goodsData.examApplyGoodsList.length
            )
          "
          size="mini"
          type="warning"
          plain
          style="margin-left: 14px"
          @click="changeTest()"
          >预约考试
        </el-button>
        <div class="note" v-if="!outerChain()">
          {{ goodsData.courseNum }}课程
          {{ goodsData.secAllNum + goodsData.examNum }}节
          {{ goodsData.classHours }}学时
        </div>
      </h4>
      <div style="margin: 14px 0px"  v-if="!outerChain()">
        <el-button
          size="small"
          v-for="(item, index) in subjectList"
          :type="newActiveSubjectId === item.id ? 'primary' : ''"
          :key="index"
          @click="newActiveSubjectId = item.id"
          >{{ item.name }}</el-button
        >
      </div>
      <div
        v-for="(courseItem, teacherIndex) in goodsTeacher"
        :key="teacherIndex"
        v-show="!outerChain()"
      >
        <div
          v-for="(item, index) in courseItem.courseList"
          :key="index + 'two'"
          v-show="item.subjectId === newActiveSubjectId || !newActiveSubjectId"
        >
          <div v-if="item.show == 1">
            <div class="firstTop hoverStyle">
              <div class="doubles">
                <span class="iconStyle">课</span>
                <span class="titles">{{ item.courseName }}</span>
                <div
                  v-if="courseItem.teaList && courseItem.teaList.length > 0"
                  class="teacher_names"
                >
                  <div
                    v-for="(tea, lindex) in courseItem.teaList"
                    :key="lindex + 'three'"
                    class="names"
                    :class="{ nactive: States[teacherIndex] == lindex }"
                    @click="switchTeacher(tea, lindex, teacherIndex)"
                  >
                    {{ tea.aliasName }}
                  </div>
                </div>
              </div>

              <span class="showHide" @click="changeStatus(item)">
                <span v-if="item.showStatus">收起∧</span>
                <span v-else>展开∨</span>
              </span>
            </div>
            <div
              v-if="
                item.children && item.children.length > 0 && item.showStatus
              "
            >
              <template v-for="(items, indexs) in item.children">
                <div v-if="items.type === 1" :key="indexs">
                  <p
                    class="moduleStyle hoverStyle"
                    @click="
                      changeModuleStatus(items, index, indexs, teacherIndex)
                    "
                  >
                    {{ items.menuName }}
                    <span class="showHide"
                      ><i v-if="items.showStatus" class="el-icon-arrow-up"></i>
                      <i v-else class="el-icon-arrow-down"></i
                    ></span>
                  </p>
                  <template
                    v-if="
                      items.showStatus &&
                      items.children &&
                      items.children.length > 0
                    "
                  >
                    <div
                      v-for="(i, k) in items.children"
                      :key="k"
                      style="padding-left: 20px"
                    >
                      <div
                        v-if="i.type == 2"
                        class="sectionStyle hoverStyleSection"
                        style="padding-left: 20px"
                      >
                        <!-- 模考试卷 -->
                        <el-row style="display: flex; align-items: center">
                          <el-col :span="12">
                            <span class="iconStyles">•</span>
                            <span class="upStudyStyle sizeStyle">{{
                              i.doType == 1
                                ? "练习"
                                : i.doType != 1
                                ? "考试"
                                : ""
                            }}</span>
                            <span class="span_style">{{ i.name }}</span>
                          </el-col>
                          <el-col
                            :span="11"
                            :offset="1"
                            style="
                              display: flex;
                              justify-content: end;
                              align-items: center;
                            "
                          >
                            <el-button
                              size="mini"
                              style="width: 90px !important"
                              type="text"
                              v-if="i.doType == 1"
                              @click="getResource(item, i, 3)"
                              >进入学习</el-button
                            >
                            <!-- v-if="record.status == 0 && record.historyExamJson" -->
                            <el-button
                              size="mini"
                              style="width: 90px !important"
                              type="text"
                              v-else
                              @click="getResource(item, i, 3)"
                              >进入考试</el-button
                            >
                          </el-col>
                        </el-row>
                      </div>
                      <div
                        v-else
                        class="chapterStyle hoverStyle"
                        @click="
                          changeChapterStatus(
                            teacherIndex,
                            2,
                            i,
                            index,
                            indexs,
                            k
                          )
                        "
                      >
                        <!-- <span class="iconStyle">章</span> -->
                        {{ i.name }}
                        <span class="showHide"
                          ><i v-if="i.showStatus" class="el-icon-arrow-up"></i>
                          <i v-else class="el-icon-arrow-down"></i
                        ></span>
                      </div>
                      <template v-if="i.showStatus && i.children.length > 0">
                        <div
                          v-for="(is, ks) in i.children"
                          class="sectionStyle hoverStyleSection"
                          :key="ks"
                          style="padding-left: 20px"
                        >
                          <el-row style="display: flex; align-items: center">
                            <el-col :span="12">
                              <span class="iconStyles">•</span>
                              <span class="upStudyStyle sizeStyle">{{
                                is.sectionType === 1
                                  ? "视频"
                                  : is.sectionType === 2
                                  ? "直播"
                                  : is.sectionType === 3
                                  ? "回放"
                                  : is.doType == 1
                                  ? "练习"
                                  : is.doType != 1
                                  ? "考试"
                                  : ""
                              }}</span>
                              <span class="span_style">{{ is.name }}</span>
                              <!-- <div
                                class="btn btn--green"
                                v-if="
                                  is.studyDuration > 0 &&
                                  is.durationTime > 0 &&
                                  is.studyDuration == is.durationTime
                                "
                              >
                                已学完
                              </div> -->
                              <span v-if="is.recordStatus" class="upStudyStyle"
                                >上次学到</span
                              >
                            </el-col>
                            <el-col :span="4">
                              <span v-show="is.teacherName"
                                >已选讲师：{{ is.teacherName }}</span
                              >
                            </el-col>
                            <el-col :span="3">
                              <el-progress
                                v-if="is.studyDuration && is.durationTime"
                                :show-text="false"
                                :percentage="
                                  (is.studyDuration / is.durationTime) * 100 >
                                  100
                                    ? 100
                                    : (is.studyDuration / is.durationTime) * 100
                                "
                              ></el-progress>
                            </el-col>
                            <el-col :span="2">
                              <span v-show="is.studyDuration">
                                {{
                                  $tools.secondToDate(is.studyDuration) +
                                  "/" +
                                  $tools.secondToDate(is.durationTime)
                                }}
                              </span>
                            </el-col>
                            <el-col
                              :span="2"
                              :offset="1"
                              v-if="checkSection(is.sectionId, 'sectionExam')"
                            >
                              <el-button
                                size="mini"
                                type="text"
                                style="width: 90px !important"
                                @click="
                                  handelPracticeOrRxam(is, 2, item.courseId)
                                "
                                >习题</el-button
                              >
                            </el-col>
                            <el-col
                              :span="2"
                              :offset="1"
                              v-if="!is.sectionType"
                            >
                              <el-button
                                size="mini"
                                style="width: 90px !important"
                                type="text"
                                v-if="is.doType == 1"
                                @click="getResource(item, is, 1)"
                                >进入学习</el-button
                              >
                              <el-button
                                size="mini"
                                style="width: 90px !important"
                                type="text"
                                v-else
                                @click="getResource(item, is, 1)"
                                >进入考试</el-button
                              >
                            </el-col>
                            <el-col
                              :span="2"
                              :offset="1"
                              v-else-if="is.sectionType != 2"
                            >
                              <el-button
                                size="mini"
                                type="text"
                                style="width: 90px !important"
                                v-if="
                                  is.studyDuration > 0 &&
                                  is.durationTime > 0 &&
                                  is.studyDuration == is.durationTime
                                "
                                @click="studyFunc(item, is)"
                                >再次学习</el-button
                              >
                              <el-button
                                type="primary"
                                size="mini"
                                style="width: 90px !important"
                                v-else-if="
                                  is.studyDuration > 0 &&
                                  is.durationTime > 0 &&
                                  is.studyDuration != is.durationTime
                                "
                                @click="studyFunc(item, is)"
                                >继续学习</el-button
                              >
                              <el-button
                                size="mini"
                                type="primary"
                                style="width: 90px !important"
                                plain
                                v-else-if="
                                  is.studyDuration == 0 && is.durationTime > 0
                                "
                                @click="studyFunc(item, is)"
                                >未开始</el-button
                              >
                            </el-col>
                            <el-col :span="2" :offset="1" v-else>
                              <el-button
                                size="mini"
                                plain
                                disabled
                                type="success"
                                style="width: 90px !important"
                                v-if="is.liveStartTime > sysTime"
                                @click="studyFunc(item, is)"
                                >未开播</el-button
                              >
                              <el-button
                                size="mini"
                                plain
                                disabled
                                type="danger"
                                style="width: 90px !important"
                                v-else-if="is.liveEndTime < sysTime"
                                @click="studyFunc(item, is)"
                                >已结束</el-button
                              >
                              <el-button
                                size="mini"
                                plain
                                type="primary"
                                style="
                                  width: 90px !important;
                                  text-align: center;
                                "
                                v-else-if="
                                  is.liveEndTime > sysTime &&
                                  is.liveStartTime < sysTime
                                "
                                @click="studyFunc(item, is)"
                                >进入直播间</el-button
                              >
                            </el-col>
                          </el-row>
                        </div>
                      </template>
                    </div>
                  </template>
                </div>
                <div v-if="items.type === 2" :key="indexs">
                  <div
                    class="chapterStyle hoverStyle"
                    @click="
                      changeChapterStatus(teacherIndex, 1, items, index, indexs)
                    "
                  >
                    <!-- <span class="iconStyle">章</span> -->
                    {{ items.menuName }}
                    <span class="showHide"
                      ><i v-if="items.showStatus" class="el-icon-arrow-up"></i>
                      <i v-else class="el-icon-arrow-down"></i
                    ></span>
                  </div>
                  <template
                    v-if="items.showStatus && items.children.length > 0"
                  >
                    <div
                      v-for="(i, k) in items.children"
                      class="sectionStyle hoverStyleSection"
                      :key="k"
                      style="padding-left: 20px"
                    >
                      <el-row style="display: flex; align-items: center">
                        <el-col :span="12">
                          <span class="iconStyles">•</span>
                          <span class="upStudyStyle sizeStyle">{{
                            i.sectionType === 1
                              ? "视频"
                              : i.sectionType === 2
                              ? "直播"
                              : i.sectionType === 3
                              ? "回放"
                              : i.doType == 1
                              ? "练习"
                              : i.doType != 1
                              ? "考试"
                              : ""
                          }}</span>
                          <span class="span_style">
                            {{ i.name }}
                          </span>
                          <span v-if="i.recordStatus" class="upStudyStyle"
                            >上次学到</span
                          >
                        </el-col>
                        <el-col :span="4">
                          <span v-show="i.teacherName"
                            >已选讲师：{{ i.teacherName }}</span
                          >
                        </el-col>
                        <el-col :span="3">
                          <el-progress
                            v-if="i.studyDuration && i.durationTime"
                            :show-text="false"
                            :percentage="
                              (i.studyDuration / i.durationTime) * 100 > 100
                                ? 100
                                : (i.studyDuration / i.durationTime) * 100
                            "
                          ></el-progress>
                        </el-col>
                        <el-col :span="2">
                          <span v-show="i.studyDuration">
                            {{
                              $tools.secondToDate(i.studyDuration) +
                              "/" +
                              $tools.secondToDate(i.durationTime)
                            }}
                          </span>
                        </el-col>
                        <el-col
                          :span="2"
                          :offset="1"
                          v-if="checkSection(i.sectionId, 'sectionExam')"
                        >
                          <el-button
                            size="mini"
                            type="text"
                            style="width: 90px !important"
                            @click="handelPracticeOrRxam(i, 2, item.courseId)"
                            >习题</el-button
                          >
                        </el-col>
                        <el-col :span="2" :offset="1" v-if="!i.sectionType">
                          <el-button
                            size="mini"
                            style="width: 90px !important"
                            type="text"
                            v-if="i.doType == 1"
                            @click="getResource(item, i, 1)"
                            >进入学习</el-button
                          >
                          <el-button
                            size="mini"
                            style="width: 90px !important"
                            type="text"
                            v-else
                            @click="getResource(item, i, 1)"
                            >进入考试</el-button
                          >
                        </el-col>
                        <el-col
                          :span="2"
                          :offset="1"
                          v-else-if="i.sectionType != 2"
                        >
                          <el-button
                            size="mini"
                            type="text"
                            style="width: 90px !important"
                            v-if="
                              i.studyDuration > 0 &&
                              i.durationTime > 0 &&
                              i.studyDuration == i.durationTime
                            "
                            @click="studyFunc(item, i)"
                            >再次学习</el-button
                          >
                          <el-button
                            type="primary"
                            size="mini"
                            style="width: 90px !important"
                            v-else-if="
                              i.studyDuration > 0 &&
                              i.durationTime > 0 &&
                              i.studyDuration != i.durationTime
                            "
                            @click="studyFunc(item, i)"
                            >继续学习</el-button
                          >
                          <el-button
                            size="mini"
                            plain
                            type="primary"
                            style="width: 90px !important"
                            v-else-if="
                              i.studyDuration == 0 && i.durationTime > 0
                            "
                            @click="studyFunc(item, i)"
                            >未开始</el-button
                          >
                        </el-col>
                        <el-col :span="2" :offset="1" v-else>
                          <el-button
                            size="mini"
                            style="width: 90px !important"
                            plain
                            disabled
                            type="success"
                            v-if="i.liveStartTime > sysTime"
                            @click="studyFunc(item, i)"
                            >未开播</el-button
                          >
                          <el-button
                            size="mini"
                            style="width: 90px !important"
                            plain
                            disabled
                            type="danger"
                            v-else-if="i.liveEndTime < sysTime"
                            @click="studyFunc(item, i)"
                            >已结束</el-button
                          >
                          <el-button
                            size="mini"
                            style="width: 90px !important; text-align: center"
                            plain
                            type="primary"
                            v-else-if="
                              i.liveEndTime > sysTime &&
                              i.liveStartTime < sysTime
                            "
                            @click="studyFunc(item, i)"
                            >进入直播间</el-button
                          >
                        </el-col>
                      </el-row>
                    </div>
                  </template>
                </div>
                <div
                  v-if="items.type === 3"
                  :key="indexs"
                  class="sectionStyle hoverStyle"
                >
                  <el-row style="display: flex; align-items: center">
                    <el-col :span="12">
                      <span class="iconStyles">•</span>
                      <span class="upStudyStyle sizeStyle">{{
                        items.sectionType === 1
                          ? "视频"
                          : items.sectionType === 2
                          ? "直播"
                          : items.sectionType === 3
                          ? "回放"
                          : items.doType == 1
                          ? "练习"
                          : items.doType != 1
                          ? "考试"
                          : ""
                      }}</span>
                      <span class="span_style">
                        {{ items.menuName }}
                      </span>
                      <span v-if="items.recordStatus" class="upStudyStyle"
                        >上次学到</span
                      >
                    </el-col>
                    <el-col :span="4">
                      <span v-show="items.teacherName"
                        >已选讲师：{{ items.teacherName }}</span
                      >
                    </el-col>
                    <el-col :span="3">
                      <el-progress
                        v-if="items.studyDuration && items.durationTime"
                        :show-text="false"
                        :percentage="
                          (items.studyDuration / items.durationTime) * 100 > 100
                            ? 100
                            : (items.studyDuration / items.durationTime) * 100
                        "
                      ></el-progress>
                    </el-col>
                    <el-col :span="2">
                      <span v-show="items.studyDuration">
                        {{
                          $tools.secondToDate(items.studyDuration) +
                          "/" +
                          $tools.secondToDate(items.durationTime)
                        }}
                      </span>
                    </el-col>
                    <el-col
                      :span="2"
                      :offset="1"
                      v-if="checkSection(items.menuId, 'sectionExamList')"
                    >
                      <el-button
                        size="mini"
                        type="text"
                        style="width: 90px !important"
                        @click="handelPracticeOrRxam(items, 2, item.courseId)"
                        >习题</el-button
                      >
                    </el-col>
                    <el-col :span="2" :offset="1" v-if="!items.sectionType">
                      <el-button
                        size="mini"
                        style="width: 90px !important"
                        type="text"
                        v-if="items.doType == 1"
                        @click="getResource(item, items, 2)"
                        >进入学习</el-button
                      >
                      <el-button
                        size="mini"
                        style="width: 90px !important"
                        type="text"
                        v-else
                        @click="getResource(item, items, 2)"
                        >进入考试</el-button
                      >
                    </el-col>
                    <el-col
                      :span="2"
                      :offset="1"
                      v-else-if="items.sectionType != 2"
                    >
                      <el-button
                        size="mini"
                        style="width: 90px !important"
                        type="text"
                        v-if="
                          items.studyDuration > 0 &&
                          items.durationTime > 0 &&
                          items.studyDuration == items.durationTime
                        "
                        @click="studyFunc(item, items)"
                        >再次学习</el-button
                      >
                      <el-button
                        type="primary"
                        style="width: 90px !important"
                        size="mini"
                        v-else-if="
                          items.studyDuration > 0 &&
                          items.durationTime > 0 &&
                          items.studyDuration != items.durationTime
                        "
                        @click="studyFunc(item, items)"
                        >继续学习</el-button
                      >
                      <el-button
                        style="width: 90px !important"
                        plain
                        size="mini"
                        type="primary"
                        v-else-if="
                          items.studyDuration == 0 && items.durationTime > 0
                        "
                        @click="studyFunc(item, items)"
                        >未开始</el-button
                      >
                    </el-col>
                    <el-col :span="2" :offset="1" v-else>
                      <el-button
                        size="mini"
                        style="width: 90px !important"
                        plain
                        disabled
                        type="success"
                        v-if="items.liveStartTime > sysTime"
                        @click="studyFunc(item, items)"
                        >未开播</el-button
                      >
                      <el-button
                        size="mini"
                        style="width: 90px !important"
                        plain
                        disabled
                        type="danger"
                        v-else-if="items.liveEndTime < sysTime"
                        @click="studyFunc(item, items)"
                        >已结束</el-button
                      >
                      <el-button
                        size="mini"
                        style="width: 90px !important; text-align: center"
                        plain
                        type="primary"
                        v-else-if="
                          items.liveEndTime > sysTime &&
                          items.liveStartTime < sysTime
                        "
                        @click="studyFunc(item, items)"
                        >进入直播间</el-button
                      >
                    </el-col>
                  </el-row>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <courseData ref="courseData" @backData="backData" />
    <el-dialog
      title="实名验证确认"
      :visible.sync="showConfirm"
      width="600px"
      class="showconfirm"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="showconfirm__content">
        <div class="text">
          为避免个人信息不正确导致您的学习时长无效，请认真核对以下信息是否正确，如信息有误请取消当前操作，立刻联系020-38946666
        </div>
        <el-descriptions :column="1">
          <el-descriptions-item label="姓名">{{
            userInfo && userInfo.realname
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{
            userInfo && userInfo.telphone
          }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{
            userInfo && userInfo.idCard
          }}</el-descriptions-item>
        </el-descriptions>

        <div class="">
          <el-checkbox v-model="confirmChecked">确认个人信息无误</el-checkbox>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showConfirm = false">取 消</el-button>
        <el-button
          type="primary"
          @click="confirmUser"
          :disabled="confirmCount > 0"
          :loading="confirmLoading"
          >{{
            confirmCount > 0 ? "确 定(" + confirmCount + ")" : "确 定"
          }}</el-button
        >
      </span>
    </el-dialog>
    <RebuildModal
      ref="rebuildModal"
      @rebuildSubmit="rebuildSubmit($event)"
    ></RebuildModal>

    <!-- 预约考试弹窗 -->
    <appoint-test
      :appointModal.sync="appointModal"
      :appointItem="goodsData"
    ></appoint-test>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import courseData from "./courseData.vue";
import RebuildModal from "@/components/rebuildModal";
import AppointTest from "./components/AppointTest.vue";
export default {
  name: "MyCourse",
  components: { courseData, RebuildModal, AppointTest },
  data() {
    return {
      goodsData: {},
      goodsTeacher: [],
      courseList: [],
      sysTime: 0,
      showConfirm: false,
      confirmCount: 10,
      confirmChecked: false,
      confirmTimer: null,
      confirmLoading: false,
      appointModal: false, // 预约考试弹窗
      subjectList: [], //当前商品课程科目汇总
      newActiveSubjectId: "", //当前选中ID
      businessData: {},
      teaIndex: 0,
      States: { 0: 0 },
      sectionExamList: [], //节试卷集合
      sectionExam: [], //节试卷集合
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    this.getRecord();
    this.sysTime = this.$tools.timest();
  },
  methods: {
    //判断是否外链
    outerChain(){
      if(this.goodsData.externalLink){
        return true
      }
      return false
    },
    comeStyle(courseItem, item) {
      this.$router.push({
        path: `/my-course-detail/${this.goodsData.goodsId}`,
        query: {
          gradeId: courseItem.gradeId,
          orderGoodsId: this.goodsData.orderGoodsId,
          courseId: courseItem.courseId,
          chapterId: item.chapterId,
          moduleId: item.moduleId,
          sectionId: item.sectionId || item.menuId,
          recordingUrl: item.recordingUrl,
          liveUrl: item.liveUrl,
          sectionType: item.sectionType,
          liveStartTime: item.liveStartTime,
          liveEndTime: item.liveEndTime,
        },
      });
    },
    changeCourse() {
      this.$refs.courseData.openBoxs(this.goodsData);
    },
    changeTest() {
      this.appointModal = true;
    },
    backData(item) {
      this.goodsData = item;
      this.goodsTeacher = [];
      this.courseBusiness();
      this.getGoodsCourseList(item);
    },
    //数组对象去重
    uniqueFunc(arr, uniId) {
      const res = new Map();
      return arr.filter(
        (item) => !res.has(item[uniId]) && res.set(item[uniId], 1)
      );
    },
    /**
     * 获取课程列表
     */
    getGoodsCourseList(item) {
      return new Promise((resolve, reject) => {
        this.$request
          .courseCourseList({
            goodsId: item.goodsId,
            gradeId: item.gradeId,
          })
          .then((res) => {
            console.log(res, "res");
            var array = [];
            res.rows.forEach((element) => {
              element.showStatus = false;
              element.children = [];
              array.push({
                id: element.subjectId,
                name: element.subjectName,
              });
            });
            //获取商品双师资模板
            this.$request
              .courseTeacherList({
                goodsId: item.goodsId,
              })
              .then((res1) => {
                // console.log(res1,'res1');
                if (res1.data && res1.data.length > 0) {
                  //课程老师模板
                  let teacherTel = res1.data;
                  //商品课程
                  let courses = res.rows;
                  teacherTel.forEach((tea) => {
                    let dataList = [];
                    let teacherList = [];
                    courses.forEach((item) => {
                      let courseData = tea.courseList.filter(
                        (x) => x.courseId == item.courseId
                      );
                      if (courseData && courseData.length > 0) {
                        dataList.push(item);
                        teacherList = tea.courseList;
                      }
                    });
                    let result = {
                      teaList: teacherList,
                      courseList: dataList,
                    };
                    this.goodsTeacher.push(result);
                  });
                  if (this.goodsTeacher && this.goodsTeacher.length > 0) {
                    let courseIds = [];
                    this.goodsTeacher.forEach((item) => {
                      item.courseList.forEach((course) => {
                        courseIds.push(course.courseId);
                      });
                    });
                    if (courseIds.length > 0) {
                      courses.forEach((item) => {
                        if (!courseIds.includes(item.courseId)) {
                          let data = {
                            teaList: [],
                            courseList: [],
                          };
                          data.courseList.push(item);
                          this.goodsTeacher.push(data);
                        }
                      });
                    }
                  }
                  this.goodsTeacher.forEach((item) => {
                    if (item.courseList && item.courseList.length > 0) {
                      item.courseList[0].show = 1;
                    }
                  });
                } else {
                  //没有双师资模板
                  res.rows.forEach((item) => {
                    item.show = 1;
                    let data = {
                      teaList: [],
                      courseList: [],
                    };
                    data.courseList.push(item);
                    this.goodsTeacher.push(data);
                  });
                }
                console.log(this.goodsTeacher, "this.goodsTeacher");
              });

            this.courseList = res.rows;
            array = this.uniqueFunc(array, "id");
            array.unshift({
              id: "",
              name: "全部",
            });
            // this.subjectList = array;
            this.subjectList = array.filter((item) => item.name);
            this.newActiveSubjectId = "";

            resolve();
            // if (res.rows && res.rows.length > 0) {
            //   this.getRecord(res.rows[0]);
            // }
          });
      });
    },
    //进入外链
    jumpExternalLink(){
      window.open(this.goodsData.externalLink, "_blank");
    },
    //切换老师
    switchTeacher(data, index, teacherIndex) {
      console.log(data, "data", index, teacherIndex);
      console.log(this.subjectList, "this.subjectList");
      this.States[teacherIndex] = index;
      this.teaIndex = index;
      this.goodsTeacher.forEach((item, index) => {
        if (item.teaList && item.teaList.length > 0) {
          let list = item.teaList.filter((x) => x.courseId == data.courseId);
          if (list && list.length > 0) {
            item.courseList.forEach((course, courseIndex) => {
              if (course.courseId == data.courseId) {
                // console.log(index,'index');
                //  console.log(courseIndex,'courseIndex');
                this.$set(
                  this.goodsTeacher[index].courseList[courseIndex],
                  "show",
                  1
                );
              } else {
                this.$set(
                  this.goodsTeacher[index].courseList[courseIndex],
                  "show",
                  0
                );
              }
            });
          }
        }
      });
      console.log(this.goodsTeacher, "this.goodsTeacher");
    },
    getGoodsData(res) {
      return new Promise((resolve, reject) => {
        this.$request
          .courseGoodsList({ orderGoodsId: res.data.orderGoodsId })
          .then(async (result) => {
            if (result.rows.length == 0) {
              this.resultCourseGoodsList();
            } else {
              let array = result.rows[0];
              array.orderGoodsId = res.data.orderGoodsId;
              this.goodsData = array;
              this.courseBusiness();
              await this.getGoodsCourseList(array);
              resolve();
            }
          });
      });
    },
    /**
     * 获取学习记录
     */
    getRecord(item) {
      this.$request.studyrecordgetUserStudyLast().then(async (res) => {
        // if (res.data && res.data.sectionId) {
        await this.getGoodsData(res);
        var stop = false;
        for (let y = 0; y < this.goodsTeacher.length; y++) {
          for (let i = 0; i < this.goodsTeacher[y].courseList.length; i++) {
            if (stop) {
              break;
            }
            if (
              this.goodsTeacher[y].courseList[i].courseId == res.data.courseId
            ) {
              await this.changeStatus(this.goodsTeacher[y].courseList[i]);
              for (
                let k = 0;
                k < this.goodsTeacher[y].courseList[i].children.length;
                k++
              ) {
                if (res.data.moduleId) {
                  console.log(1);
                  if (
                    this.goodsTeacher[y].courseList[i].children[k].menuId ==
                    res.data.moduleId
                  ) {
                    await this.changeModuleStatus(
                      this.goodsTeacher[y].courseList[i].children[k],
                      i,
                      k,
                      y
                    );
                    for (
                      let j = 0;
                      j <
                      this.goodsTeacher[y].courseList[i].children[k].children
                        .length;
                      j++
                    ) {
                      if (
                        this.goodsTeacher[y].courseList[i].children[k].children[
                          j
                        ].chapterId == res.data.chapterId
                      ) {
                        await this.changeChapterStatus(
                          y,
                          2,
                          this.goodsTeacher[y].courseList[i].children[k]
                            .children[j],
                          i,
                          k,
                          j
                        );

                        for (
                          let m = 0;
                          m <
                          this.goodsTeacher[y].courseList[i].children[k]
                            .children[j].children.length;
                          m++
                        ) {
                          if (
                            this.goodsTeacher[y].courseList[i].children[k]
                              .children[j].children[m].sectionId ==
                            res.data.sectionId
                          ) {
                            this.$set(
                              this.goodsTeacher[y].courseList[i].children[k]
                                .children[j].children[m],
                              "recordStatus",
                              true
                            );
                            stop = true;
                            break;
                          }
                        }
                      }
                    }
                  }
                } else if (res.data.chapterId) {
                  console.log(2);
                  if (
                    this.goodsTeacher[y].courseList[i].children[k].menuId ==
                    res.data.chapterId
                  ) {
                    await this.changeChapterStatus(
                      y,
                      1,
                      this.goodsTeacher[y].courseList[i].children[k],
                      i,
                      k
                    );
                    for (
                      let j = 0;
                      j <
                      this.goodsTeacher[y].courseList[i].children[k].children
                        .length;
                      j++
                    ) {
                      if (
                        this.goodsTeacher[y].courseList[i].children[k].children[
                          j
                        ].sectionId == res.data.sectionId
                      ) {
                        this.$set(
                          this.goodsTeacher[y].courseList[i].children[k]
                            .children[j],
                          "recordStatus",
                          true
                        );
                        stop = true;
                        break;
                      }
                    }
                  }
                } else {
                  console.log(3);
                  if (
                    this.goodsTeacher[y].courseList[i].children[k].menuId ==
                    res.data.sectionId
                  ) {
                    this.$set(
                      this.goodsTeacher[y].courseList[i].children[k],
                      "recordStatus",
                      true
                    );
                    stop = true;
                    break;
                  }
                }
              }
            }
          }
        }

        // } else {
        //   this.resultCourseGoodsList();
        // }
      });
    },
    resultCourseGoodsList() {
      this.$request.courseGoodsList({ pageNum: 1, pageSize: 1 }).then((res) => {
        if (res.rows && res.rows.length > 0) {
          this.backData(res.rows[0]);
        }
      });
    },
    /**
     * 展开获取课程详情列表
     */
    changeStatus(item) {
      return new Promise((resolve, reject) => {
        console.log(item);
        if (item.children.length > 0) {
          item.showStatus = !item.showStatus;
          return;
        }
        //获取节试卷列表
        this.$request
          .reSectionExamList({
            chapterId: 0,
            courseId: item.courseId,
            gradeId: item.gradeId,
          })
          .then((res) => {
            this.sectionExamList = res.data;
          });
        this.$request
          .reMenuList({
            courseId: item.courseId,
            gradeId: item.gradeId,
            orderGoodsId: this.goodsData.orderGoodsId,
          })
          .then((res) => {
            res.rows.forEach((items) => {
              if (items.type != 3) {
                items.showStatus = false;
                items.children = [];
              }
            });
            for (let i = 0; i < this.courseList.length; i++) {
              if (this.courseList[i].courseId == item.courseId) {
                this.$set(this.courseList[i], "children", res.rows);
                this.$set(
                  this.courseList[i],
                  "showStatus",
                  !this.courseList[i].showStatus
                );
                break;
              }
            }
            resolve();
          });
      });
    },
    /**
     * 模块详情列表
     */
    changeModuleStatus(item, index, indexs, teacherIndex) {
      return new Promise((resolve, reject) => {
        console.log(item, "item");
        if (item.children && item.children.length > 0) {
          item.showStatus = !item.showStatus;
          return;
        }
        this.$request
          .reChapterList({
            moduleId: item.menuId,
            gradeId: item.gradeId,
            courseId: item.courseId,
          })
          .then((res) => {
            res.data.forEach((items) => {
              items.children = [];
              items.showStatus = false;
            });
            console.log(teacherIndex, "teacherIndex");
            this.$set(
              this.goodsTeacher[teacherIndex].courseList[index].children[
                indexs
              ],
              "children",
              res.data
            );
            item.showStatus = !item.showStatus;
            resolve();
          });
      });
    },
    /**
     * 章详情列表 type = 1 父级章 type = 2 父级模块
     */
    changeChapterStatus(teacherIndex, type, item, courseIndex, index, indexs) {
      return new Promise((resolve, reject) => {
        console.log(item, "定位");
        console.log(type, item, courseIndex, index, indexs, teacherIndex);
        if (item.children && item.children.length > 0) {
          item.showStatus = !item.showStatus;
          return;
        }
        //获取节试卷列表
        this.$request
          .reSectionExamList({
            chapterId: type === 1 ? item.menuId : item.chapterId,
            courseId: item.courseId,
            gradeId: item.gradeId,
          })
          .then((res) => {
            this.sectionExam = res.data;
          });
        this.$request
          .reSectionList({
            chapterId: type === 1 ? item.menuId : item.chapterId,
            gradeId: item.gradeId,
            courseId: item.courseId,
            moduleId: item.moduleId || 0,
            orderGoodsId: this.goodsData.orderGoodsId,
          })
          .then((res) => {
            // let newArr = res.data.filter((item) => {
            //   return item.type != 2;
            // });
            // let canLearn = newArr.every((item) => {
            //   if (item.learning == 1) {
            //     return true;
            //   } else {
            //     return false;
            //   }
            // });
            // res.data.forEach((section) => {
            //   section.canLearn = canLearn;
            // });
            if (type === 1) {
              this.$set(
                this.goodsTeacher[teacherIndex].courseList[courseIndex]
                  .children[index],
                "children",
                res.data
              );
            }
            if (type === 2) {
              this.$set(
                this.goodsTeacher[teacherIndex].courseList[courseIndex]
                  .children[index].children[indexs],
                "children",
                res.data
              );
            }
            item.showStatus = !item.showStatus;
            resolve();
          });
      });
    },
    checkCanLearn(section) {
      let time = this.$tools.timest();
      let {
        interfaceAccountId,
        learnStatus,
        serviceStartTime,
        serviceEndTime,
        classStartTime,
        classEndTime,
        classStatus,
        learningStatus,
        learningTimeStart,
      } = this.goodsData;
      console.log(interfaceAccountId, learnStatus, "xzx");
      if (interfaceAccountId > 0) {
        learnStatus == 1
          ? this.rebuildSubmit(this.goodsData, section)
          : this.$message({
              type: "warning",
              message:
                "您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！",
            });
        return false;
      }
      let index = [
        time <= serviceStartTime || time >= serviceEndTime,
        (classStartTime && time <= classStartTime) ||
          (classEndTime && time >= classEndTime),
        learningStatus == 2,
        classStatus == 0,
        learningStatus == 3 && time < learningTimeStart,
      ].findIndex((e) => e);
      if (index !== -1) {
        this.$message({
          type: "warning",
          message:
            [
              "不在学习服务期",
              "不在班级有效期",
              "开放学习时间待定",
              "尚未开班",
              "不在开放学习时间,",
            ][index] + "，不能进入学习",
        });
      }
      return index === -1;
    },
    async studyFunc(courseItem, items) {
      if (!this.checkCanLearn(items)) {
        return false;
      }
      if (
        !(await this.orderTopTobottom(courseItem, items, 99)) &&
        items.sectionType != 2
      ) {
        this.$message({
          type: "warning",
          message: "请按顺序学习视频课程",
        });
        return false;
      }
      let item = this.goodsData;
      var confirmDetail = true;
      if (item.educationName == "继续教育") {
        if (
          item.officialName &&
          item.businessName == "二级" &&
          item.projectName == "建造师"
        ) {
          confirmDetail = await this.userConfirmInfoDetail();
        }
      }

      // //内部系统
      // if (item.interfacePushId > 0 && item.officialStatus != 1) {
      //   this.$message({
      //     type: "warning",
      //     message: "机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！",
      //   });
      //   return;
      // }

      if (!confirmDetail) {
        return;
      }

      let rebuildStatus = await this.courseGoodsRebuildStatus(
        item.goodsId,
        item.gradeId
      );

      if (rebuildStatus == 0) {
        this.$refs.rebuildModal.showModal(item);
        return;
      }

      // if (item.educationName == "继续教育") {
      this.$request
        .lockLockStatus({
          action: "jxjy",
          uuid: sessionStorage.getItem("uuid"),
        })
        .then((res) => {
          //有其他端在操作，不能学习
          this.$message({
            type: "warning",
            message: res.msg,
          });
        })
        .catch((err) => {
          //可以学习
          this.$request
            .courseCourseList({
              pageNum: 1,
              pageSize: 1,
              goodsId: item.goodsId,
              gradeId: item.gradeId,
            })
            .then(async (res) => {
              //学习次数是否上限---start
              let learnNum = await this.goodsTodayStudySectionNum(courseItem);
              let hasLearn = await this.gradeCheckGoodsStudy(courseItem, items);
              console.log(learnNum, hasLearn);
              if (this.goodsData.sectionMaxNum > 0) {
                if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
                  this.clickLock = false;
                  this.$message({
                    type: "warning",
                    message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
                  });
                  return;
                }
              }
              //学习次数是否上限---end
              if (res.rows.length) {
                // this.$emit("backData", item);
                // this.dialogVisible = false;
                console.log("可以学习");
                this.comeStyle(courseItem, items);
                // this.$router.push({
                //   path: `/my-course-detail/${item.goodsId}`,
                //   query: {
                //     gradeId: item.gradeId,
                //     orderGoodsId: item.orderGoodsId,
                //     courseId: res.rows[0].courseId || "",
                //   },
                // });
                // }
              } else {
                this.$message({
                  type: "warning",
                  message: "课程内暂无可以学习的科目",
                });
              }
            });
        });
    },
    handelPracticeOrRxam(section, type, courseId) {
      if (type == 3) {
        //节卷
        let data = this.sectionExamList.filter(
          (x) => x.sectionId == section.menuId
        );
        if (data && data.length > 0) {
          section = data[0];
        }
      } else if (type == 2) {
        //节卷
        let data = this.sectionExam.filter(
          (x) => x.sectionId == section.sectionId
        );

        if (data && data.length > 0) {
          section = data[0];
        }
      }
      this.$router.push({
        path: "/course-exam/" + this.goodsData.goodsId,
        query: {
          courseId: courseId,
          gradeId: this.goodsData.gradeId,
          moduleId: section.moduleId || 0,
          sectionId: section.sectionId || 0,
          examId: section.typeId,
          learning: section.learning,
          type: type,
          chapterId: section.chapterId || 0,
          orderGoodsId: this.goodsData.orderGoodsId,
        },
      });
    },
    async orderTopTobottom(courseLists, section, type) {
      let { rebuild, moduleId, chapterId, parentId, menuId } = section;
      if (this.goodsData.goodsLearningOrder != 2 || rebuild) {
        return true;
      }
      // 课程顺序
      if (this.courseList.length > 1) {
        let index = this.courseList.findIndex(
          (e) => e.courseId == courseLists.courseId
        );

        if (index) {
          let prevItem = this.courseList[index - 1]; //上一课
          if (prevItem.stuAllNum != prevItem.secAllNum) {
            return false;
          }
        }
      }
      let list = await this.studyRecordMenuAllList(courseLists);
      console.log(
        "section:",
        section,
        "list:",
        list,
        "parentId:",
        parentId,
        "menuId:",
        menuId
      );
      if (type == 99) {
        if (parentId >= 0 && menuId >= 0) {
          var index = list.findIndex((e) => {
            return parentId
              ? e.moduleId == moduleId &&
                  e.chapterId == chapterId &&
                  e.id == section.sectionId
              : e.id == menuId;
          });
        } else {
          var index = list.findIndex(
            (e) =>
              e.moduleId == moduleId &&
              e.chapterId == chapterId &&
              e.id == section.sectionId
          );
        }

        list = list.slice(0, index);
      } else if (type != 3) {
        list = list.filter(
          (e) => e.moduleId == moduleId && e.chapterId == chapterId
        );
      }
      return list.every((item) => item.studyStatus == 1);
    },
    async exceedLearnNum(courseLists, section) {
      let learnNum = await this.goodsTodayStudySectionNum(section);
      let hasLearn = await this.gradeCheckGoodsStudy(courseLists, section);

      if (this.goodsData.sectionMaxNum > 0) {
        if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
          this.$message({
            type: "warning",
            message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
          });
          return false;
        }
      }
      return true;
    },
    async getResource(courseLists, section, type) {
      //type:1章卷，2节卷，3模考卷,4习题
      // if (!this.checkCanLearn()) {
      //   return false;
      // }
      // 学习次数
      // if (!(await this.exceedLearnNum(courseLists, section))) {
      //   return false;
      // }

      // // 学习顺序

      // if (!(await this.orderTopTobottom(courseLists, section, type))) {
      //   this.$message({
      //     type: "warning",
      //     message: "请学完视频课程再进行练习和测试",
      //   });
      //   return false;
      // }
      //有次数限制
      let num = await this.bankRecordDoNum(courseLists, section);
      // section.doNum
      // record.status == 0 && record.historyExamJson 继续做题
      if (section.answerNum - num > 0 && section.answerNum > 0) {
        this.$router.push({
          path: "/course-exam/" + this.goodsData.goodsId,
          query: {
            courseId: courseLists.courseId,
            gradeId: this.goodsData.gradeId,
            moduleId: section.moduleId || 0,
            sectionId: section.sectionId || 0,
            examId: section.typeId,
            learning: section.learning,
            type: type,
            chapterId: section.chapterId || 0,
            orderGoodsId: this.goodsData.orderGoodsId,
          },
        });
        //没有答题次数限制
      } else if (section.answerNum == 0) {
        this.$router.push({
          path: "/course-exam/" + this.goodsData.goodsId,
          query: {
            courseId: courseLists.courseId,
            gradeId: this.goodsData.gradeId,
            moduleId: section.moduleId || 0,
            sectionId: section.sectionId || 0,
            examId: section.typeId,
            learning: section.learning,
            type: type,
            chapterId: section.chapterId || 0,
            orderGoodsId: this.goodsData.orderGoodsId,
          },
        });
      } else {
        this.$message({
          type: "warning",
          message: "该试卷只能答题" + section.answerNum + "次",
        });

        return;
      }
      this.studyLog(
        (section.moduleId = 0),
        (section.chapterId = 0),
        section.typeId,
        courseLists
      );
    },
    //校验节是否有试卷
    checkSection(sectionId, key) {
      let _data = this[key];
      if (_data.length == 0) {
        return false;
      }
      return _data.some((section) => section.sectionId == sectionId);
    },
    // 新增用户视频学习日志
    studyLog(moduleId, chapterId, sectionId, courseLists) {
      this.$axios({
        url: "/user/study/log",
        method: "post",
        data: {
          goodsId: this.goodsData.goodsId,
          courseId: courseLists.courseId,
          moduleId: moduleId || 0,
          chapterId: chapterId || 0,
          sectionId: sectionId || 0,
          fromPlat: 2, //来源平台 1小程序 2PC网站
          goodsType: 1, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
          orderGoodsId: this.goodsData.orderGoodsId,
        },
      }).then((res) => {
        console.log("直播的用户学习日志:", res);
      });
    },
    /**
     * 获取培训项目详情
     */
    courseBusiness() {
      this.$request.courseBusiness(this.goodsData.businessId).then((res) => {
        this.businessData = res.data;
      });
    },
    bankRecordDoNum(courseLists, section) {
      return new Promise((resolve) => {
        this.$request
          .bankRecordDoNum({
            goodsId: this.goodsData.goodsId,
            gradeId: this.goodsData.gradeId,
            chapterId: section.chapterId,
            courseId: courseLists.courseId,
            moduleId: 0,
            examId: section.typeId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },

    studyRecordMenuAllList(courseLists) {
      return new Promise((resolve) => {
        this.$request
          .studyRecordMenuAllList({
            courseId: courseLists.courseId,
            gradeId: this.goodsData.gradeId,
            goodsId: this.goodsData.goodsId,
          })
          .then((res) => {
            res.data = res.data.filter((e) => e.sectionType != 2);
            resolve(res.data);
          });
      });
    },
    gradeCheckGoodsStudy(courseItem, option) {
      return new Promise((resolve) => {
        this.$request
          .gradeCheckGoodsStudy({
            goodsId: this.goodsData.goodsId,
            gradeId: courseItem.gradeId,
            moduleId: option.moduleId || 0,
            chapterId: option.chapterId || 0,
            sectionId: option.sectionId || option.menuId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
    goodsTodayStudySectionNum(option) {
      return new Promise((resolve) => {
        this.$request
          .goodsTodayStudySectionNum({
            goodsId: this.goodsData.goodsId,
            gradeId: option.gradeId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },

    userConfirmInfoDetail() {
      return new Promise((resolve) => {
        this.$request
          .userConfirmInfoDetail({
            orderGoodsId: this.goodsData.orderGoodsId,
          })
          .then((res) => {
            if (!res.data) {
              clearInterval(this.confirmTimer);
              this.confirmCount = 10;
              this.showConfirm = true;
              this.confirmTimer = setInterval(() => {
                if (this.confirmCount > 0) {
                  this.confirmCount--;
                } else {
                  clearInterval(this.confirmTimer);
                }
              }, 1000);
            } else {
              if (res.data.pushInfo) {
                resolve(true);
              } else {
                this.$confirm(
                  "开通信息推送不成功，无法进入学习，请联系020-87085982！",
                  "提示",
                  {
                    confirmButtonText: "确定",
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    distinguishCancelAndClose: false,
                    showClose: false,
                    showCancelButton: false,
                  }
                )
                  .then((_) => {})
                  .catch((_) => {});
                resolve(false);
              }
            }
          });
      });
    },

    confirmUser() {
      if (!this.confirmChecked) {
        this.$message.warning("请勾选确认个人信息无误");
        return;
      }
      this.confirmLoading = true;
      let infoJson = {
        realname: this.userInfo.realname,
        idCard: this.userInfo.idCard,
        telphone: this.userInfo.telphone,
      };
      this.$request
        .userConfirminfo({
          infoJson: JSON.stringify(infoJson),
          orderGoodsId: this.goodsData.orderGoodsId,
        })
        .then((res) => {
          if (res.data.pushInfo) {
            this.$message.success("提交成功");
          } else {
            this.$confirm(
              "开通信息推送不成功，无法进入学习，请联系020-87085982！",
              "提示",
              {
                confirmButtonText: "确定",
                closeOnClickModal: false,
                closeOnPressEscape: false,
                distinguishCancelAndClose: false,
                showClose: false,
                showCancelButton: false,
              }
            )
              .then((_) => {})
              .catch((_) => {});
          }
          this.showConfirm = false;
          this.confirmLoading = false;
        });
    },
    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise((resolve) => {
        this.$request
          .courseGoodsRebuildStatus({
            goodsId: goodsId,
            gradeId: gradeId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
    rebuildSubmit(item, section) {
      this.$router.push({
        path: `/my-course-detail/${item.goodsId}`,
        query: {
          gradeId: item.gradeId,
          orderGoodsId: item.orderGoodsId,
          rebuild: 1,
          courseId: section.courseId,
          chapterId: section.chapterId,
          moduleId: section.moduleId,
          sectionId: section.sectionId || section.menuId,
        },
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.headerTitle {
  color: #222;
  font-weight: bold;
  font-size: 24px;
  padding: 28px 0px 20px;
  border-bottom: 1px solid #eee;
  .note {
    margin: 4px 0 0 10px;
    color: #777777;
    font-size: 16px;
    font-weight: 500;
  }
}

.firstTop {
  padding: 24px 0px;
  // margin: 24px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .doubles {
    display: flex;
    align-items: center;
  }

  .iconStyle {
    background-color: #3f8dfd;
    color: #fff;
    margin-right: 8px;
    padding: 0px 4px;
    border-radius: 4px;
    font-size: 12px;
    vertical-align: text-top;
  }

  .titles {
    font-weight: bold;
    color: #333;
    font-size: 18px;
  }

  .showHide {
    cursor: pointer;
    user-select: none;
    float: right;
    color: #99a0a7;
  }
}

.moduleStyle {
  padding: 17px;
  background-color: #f8f8f9;
  font-weight: bold;
  color: #222;
  margin-bottom: 16px;

  .showHide {
    cursor: pointer;
    user-select: none;
    float: right;
    color: #99a0a7;
  }
}

.chapterStyle {
  font-weight: 400;

  .iconStyle {
    background-color: #fff;
    color: #3f8dfd;
    margin-right: 8px;
    padding: 0px 2px;
    border-radius: 2px;
    border: 1px solid #3f8dfd;
    font-size: 10px;
    vertical-align: text-top;
  }

  .showHide {
    cursor: pointer;
    user-select: none;
    float: right;
    color: #99a0a7;
  }

  margin-bottom: 16px;
  padding: 17px;
  border-bottom: 1px solid #eee;
}

.sectionStyle {
  color: #99a0a7;
  padding: 10px;

  .iconStyles {
    color: #99a0a7;
    margin-right: 8px;
    padding: 0px 2px;
  }
}

.upStudyStyle {
  background-color: #f2f7ff;
  border: 1px solid #3f8dfd;
  color: #3f8dfd;
  padding: 3px 4px;
  border-radius: 4px;
}

.sizeStyle {
  font-size: 12px;
  background-color: #fff !important;
  border-color: #979ea5 !important;
  color: #979ea5 !important;
  padding: 2px 3px !important;
}

.hoverStyle {
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background-color: #eaf3ff;
  }
}

.btn--green {
  display: inline-block;
  margin-left: 16px;
  border: 1px solid #34c759;
  background: #34c759;
  width: 48px;
  height: 20px;
  border-radius: 4px;
  line-height: 18px;
  color: #fff;
  text-align: center;
}
.hoverStyleSection {
  transition: all 0.2s;

  &:hover {
    background-color: #eaf3ff;
  }
}

.span_style {
  max-width: 400px;
  display: inline-block;
  vertical-align: middle;
}

// 老师名字样式
.teacher_names {
  display: flex;
  margin-left: 20px;

  .names {
    font-size: 13px;
    color: #666666;
    margin-right: 12px;
    cursor: pointer;
    background: #f8f8f8;
    border-radius: 4px;
    padding: 3px 6px;

    &.nactive {
      color: #3f8dfd;
      background: #f2f7ff;
    }
  }
}
</style>