zc_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="
            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>
      </h4>
      <div style="margin: 14px 0px">

        <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">
      <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="2" :offset="1">
                          <el-button
                            size="mini"
                            style="width: 886px !important"
                            type="text"
                            v-if="i.doType == 1"  
                            @click="getResource(item, i,3)"
                            >进入学习</el-button
                          ><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>
                          <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="!is.sectionType">
                          <el-button
                            size="mini"
                            style="width: 90px !important"
                            type="text"
                            v-if="is.doType == 1"
                            @click="getResource(item, is, 3)"
                            >进入学习</el-button
                          ><el-button
                            size="mini"
                            style="width: 90px !important"
                            type="text"
                            v-else
                            @click="getResource(item, is, 3)"
                            >进入考试</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="!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="!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},
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    // filterList: function () {
    //   return function (item) {
    //     console.log(this.newActiveSubjectId);
    //     let array = [];
    //     if (this.newActiveSubjectId) {
    //       array = item.filter((items) => {
    //         return items.subjectId === this.newActiveSubjectId;
    //       });
    //     } else {
    //       return item;
    //     }
    //     return array;
    //   };
    // },
  },
  mounted() {
    console.log('States-----', this.States)
    this.getRecord();
    this.sysTime = this.$tools.timest();
  },
  methods: {
    comeStyle(courseItem, item) {
      console.log(item, "itemitem");
      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() {
      console.log("this.goodsData", this.goodsData);
      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) => {
                        if(tea.courseIds.search(item.courseId) > -1){
                          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]);
            // }
          });
      });
    },
    //切换老师
    switchTeacher(data, index, teacherIndex){
        // console.log(data,'data',  index, teacherIndex);
        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.aliasName == data.aliasName)
               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)
                      }
                  })
               }
            }
        })
    },
    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.studyrecordgetUserWatchLast().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
          .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
          .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;
            });
            console.log(teacherIndex,'teacherIndex');
            console.log(courseIndex,'courseIndex');
            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();
          });
      });
    },
    async studyFunc(courseItem, items) {
      this.sysTime = this.$tools.timest();
      let item = this.goodsData;
      console.log(item, "学习服务期");
      if (item.interfaceAccountId > 0) {
        //学习账号已开通

        if (item.learnStatus == 1) {
          //跳转第三方h5

          this.$router.push({
            path: `/my-course-detail/${item.goodsId}`,
            query: {
              gradeId: item.gradeId,
              orderGoodsId: item.orderGoodsId,
              isOther: 1,
            },
          });
          return;
        } else {
          this.$message({
            type: "warning",
            message:
              "您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！",
          });
          return;
        }
      }
      if (
        (item.serviceStartTime && this.sysTime <= item.serviceStartTime) ||
        (item.serviceEndTime && this.sysTime >= item.serviceEndTime)
      ) {
        this.$message({
          type: "warning",
          message: "不在学习服务期，不能进入学习",
        });
        return;
      }

      if (
        (item.classStartTime && this.sysTime <= item.classStartTime) ||
        (item.classEndTime && this.sysTime >= item.classEndTime)
      ) {
        this.$message({
          type: "warning",
          message: "不在班级有效期，不能进入学习",
        });
        return;
      }

      if (item.learningStatus == 2) {
        this.$message({
          type: "warning",
          message: "开放学习时间待定，不能进入学习",
        });
        return;
      }

      if (item.classStatus == 0) {
        this.$message({
          type: "warning",
          message: "尚未开班，不能进入学习",
        });
        return;
      }
      if (item.learningStatus == 3 && this.sysTime < item.learningTimeStart) {
        this.$message({
          type: "warning",
          message: "不在开放学习时间,不能进入学习",
        });
        return;
      }

      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;
                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: "课程内暂无可以学习的科目",
                });
              }
            });
        });
    },
    async getResource(courseLists, section,type) {
      //type:1章卷，2节卷，3模考卷
      console.log(section);
      if (section.type == 2) {
        //试卷
        console.log("试卷");
        console.log(courseLists, section, this.goodsData);
        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;
          }
        }
        console.log(this.businessData,'this.businessData');
        if (this.businessData.goodsLearningOrder == 1) {
          if (section.canLearn) {
            let num = await this.bankRecordDoNum(courseLists, section);
            //有次数限制
            if (section.answerNum - num > 0 && section.answerNum > 0) {
              // this.$set(this.list[index],'doNum',(item.doNum+1))
              this.$router.push({
                path: "/course-exam/" + this.goodsData.goodsId,
                query: {
                  courseId: courseLists.courseId,
                  gradeId: this.goodsData.gradeId,
                  moduleId: section.moduleId || 0,
                  examId: section.typeId,
                  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,
                  examId: section.typeId,
                  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
            );
          } else {
            this.$message({
              type: "warning",
              message: "请按顺序学完视频课程再进行练习和测试",
            });
          }
        } else if (
          this.businessData.goodsLearningOrder == 2 &&
          !section.rebuild
        ) {
          let rows = await this.studyRecordMenuAllList(courseLists);
          let isStop = false;
          let newRows = [];
          for (let i = 0; i < rows.length; i++) {
            let moduleTrue = rows[i].moduleId == section.moduleId;
            let chapterTrue = rows[i].chapterId == section.chapterId;
            if (moduleTrue && chapterTrue) {
              isStop = true;
              if (rows[i].sectionType != 2) {
                //忽略直播
                newRows.push(rows[i]);
              }
            } else {
              if (!isStop) {
                if (rows[i].sectionType != 2) {
                  //忽略直播
                  newRows.push(rows[i]);
                }
              } else {
                break;
              }
            }
          }
          console.log(newRows);
          let isAllLearn = newRows.every((item) => {
            return item.studyStatus == 1;
          });

          if (isAllLearn) {
            //之前的都学完了

            // if(canLearn) { //视频的上一节学完

            let num = await this.bankRecordDoNum(courseLists, section);
            //有次数限制
            if (section.answerNum - num > 0 && section.answerNum > 0) {
              console.log(this.list[index]);
              this.$router.push({
                path: "/course-exam/" + this.goodsData.goodsId,
                query: {
                  courseId: courseLists.courseId,
                  gradeId: this.goodsData.gradeId,
                  moduleId: section.moduleId || 0,
                  examId: section.typeId,
                  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,
                  examId: section.typeId,
                  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
            );
          } else {
            this.$message({
              type: "warning",
              message: "请学完视频课程再进行练习和测试",
            });
          }
        } else {
          let num = await this.bankRecordDoNum(courseLists, section);
          //有次数限制
          if (section.answerNum - section.doNum > 0 && section.answerNum > 0) {
            // this.$set(this.list[index],'doNum',(item.doNum+1))
            this.$router.push({
              path: "/course-exam/" + this.goodsData.goodsId,
              query: {
                courseId: courseLists.courseId,
                gradeId: this.goodsData.gradeId,
                moduleId: section.moduleId || 0,
                examId: section.typeId,
                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,
                examId: section.typeId,
                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
          );
        }
        return;
      }
    },

    // 新增用户视频学习日志
    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) => {
            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) {
      this.$router.push({
        path: `/my-course-detail/${item.goodsId}`,
        query: {
          gradeId: item.gradeId,
          orderGoodsId: item.orderGoodsId,
          rebuild: 1,
        },
      });
    },
  },
};
</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;
  border-bottom: 1px solid #eee;
}
.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 {
  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;
  }
}
.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>