saas_pc/src/pages/course-detail/index.vue

<template>
  <div class="course-detail">
    <Header></Header>
    <section class="section">
      <div class="container">
        <div class="section__header">
          <div class="container">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/index' }"
                >首页</el-breadcrumb-item
              >
              <el-breadcrumb-item>课程详情</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
        <div class="section__body">
          <div class="container">
            <div class="course-info">
              <div class="course-info__header clearfix">
                <div
                  class="left-box"
                  :style="{
                    backgroundImage: `url(${$tools.splitImgHost(
                      goodsData.coverUrl,
                      true
                    )})`,
                  }"
                >
                  <div v-show="vid" id="player"></div>
                  <div v-show="vidzb" id="playerzb"></div>
                  <div class="recordStyle" v-if="showRecordStatus">
                    您上次看到{{
                      $tools.secondToTime(recordObj.videoCurrentTime)
                    }},正在自动续播<span
                      style="
                        display: inline-block;
                        width: 50px;
                        text-align: center;
                      "
                      >|</span
                    >
                    <span class="btn_sty" @click="backLI">从头播放</span>
                  </div>
                </div>
                <div class="right-box">
                  <div class="right-box__header">
                    <div class="title">
                      <el-select
                        class="select"
                        v-model="courseId"
                        @change="courseChange"
                      >
                        <el-option
                          :label="item.courseName"
                          :value="item.courseId"
                          v-for="(item, index) in courseList"
                          :key="index"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="tabs">
                      <el-tabs v-model="courseTabIndex">
                        <el-tab-pane
                          :name="tab.name"
                          v-for="(tab, index) in menuTab"
                          :key="index"
                        >
                          <div slot="label">
                            <span class="label">{{ tab.label }}</span>
                          </div>
                          <template v-if="tab.name == '1'">
                            <div class="right-box__body">
                              <div
                                class="item"
                                v-for="(menu, index) in menuList"
                                :key="index"
                              >
                                <template v-if="menu.type == 1">
                                  <div
                                    class="item__title"
                                    @click="openModule(menu)"
                                  >
                                    <i
                                      :class="{
                                        'el-icon-caret-right': !menu.showList,
                                        'el-icon-caret-bottom': menu.showList,
                                      }"
                                    ></i>
                                    {{ menu.menuName }}
                                  </div>
                                  <div class="item__content">
                                    <div
                                      class="bank-chapter"
                                      v-if="menu.showList"
                                    >
                                      <div
                                        class="bank-chapter__item"
                                        v-for="(
                                          chapter, chapterIndex
                                        ) in menu.list"
                                        :key="chapterIndex"
                                      >
                                        <div
                                          class="bank-chapter__item__text"
                                          @click="openChapter(chapter)"
                                        >
                                          <i
                                            :class="{
                                              'el-icon-caret-right':
                                                !chapter.showList,
                                              'el-icon-caret-bottom':
                                                chapter.showList,
                                            }"
                                          ></i
                                          >{{ chapter.name }}
                                        </div>

                                        <div
                                          class="bank-section"
                                          v-if="chapter.showList"
                                        >
                                          <div
                                            class="bank-section__item"
                                            :class="{
                                              active: isActive(section),
                                            }"
                                            v-for="(
                                              section, sectionIndex
                                            ) in chapter.list"
                                            :key="sectionIndex"
                                            @click="getResource(section)"
                                          >
                                            <template v-if="section.type != 2">
                                              <template>
                                                <div
                                                  class="note note--blue"
                                                  v-if="
                                                    section.sectionType == 1
                                                  "
                                                >
                                                  录播
                                                </div>
                                                <div
                                                  class="note"
                                                  v-if="
                                                    section.sectionType == 2
                                                  "
                                                >
                                                  直播
                                                </div>
                                                <div
                                                  class="note note--yellow"
                                                  v-if="
                                                    section.sectionType == 3
                                                  "
                                                >
                                                  回放
                                                </div>
                                                <div
                                                  class="
                                                    bank-section__item__text
                                                  "
                                                >
                                                  {{ section.name }}
                                                </div>
                                              </template>

                                              <template
                                                v-if="section.durationTime > 0"
                                              >
                                                <div class="during">
                                                  {{
                                                    $tools.secondToDate(
                                                      section.durationTime
                                                    )
                                                  }}
                                                </div>
                                              </template>
                                              <template>
                                                <div
                                                  class="btn"
                                                  v-if="section.rebuild > 0"
                                                >
                                                  待重修
                                                </div>
                                                <template v-else>
                                                  <div
                                                    class="btn btn--green"
                                                    v-if="section.learning == 1"
                                                  >
                                                    已看完
                                                  </div>
                                                </template>
                                              </template>
                                              <template
                                                v-if="
                                                  section.liveStartTime &&
                                                  section.sectionType != 3
                                                "
                                              >
                                                <div
                                                  class="
                                                    live-btn live-btn--blue
                                                  "
                                                  v-if="
                                                    section.liveStartTime >
                                                    nowTime
                                                  "
                                                >
                                                  待开播
                                                </div>
                                                <div
                                                  class="
                                                    live-btn live-btn--yellow
                                                  "
                                                  v-if="
                                                    section.liveStartTime <=
                                                      nowTime &&
                                                    section.liveEndTime >
                                                      nowTime
                                                  "
                                                >
                                                  直播中
                                                </div>
                                                <div
                                                  class="live-btn"
                                                  v-if="
                                                    section.liveStartTime <
                                                    nowTime
                                                  "
                                                >
                                                  已结束
                                                </div>
                                              </template>
                                            </template>

                                            <template v-if="section.type == 2">
                                              <template>
                                                <div
                                                  class="test-btn"
                                                  v-if="section.doType == 1"
                                                >
                                                  练习
                                                </div>
                                                <div
                                                  class="test-btn"
                                                  v-if="section.doType != 1"
                                                >
                                                  考试
                                                </div>
                                              </template>
                                              <div
                                                class="bank-section__item__text"
                                              >
                                                {{ section.name }}
                                              </div>
                                              <template>
                                                <div
                                                  class="btn"
                                                  v-if="section.rebuild > 0"
                                                >
                                                  待重修
                                                </div>
                                                <template v-else>
                                                  <div
                                                    class="btn btn--green"
                                                    v-if="section.learning == 1"
                                                  >
                                                    合格
                                                  </div>
                                                  <div
                                                    class="btn btn--red"
                                                    v-if="section.learning == 0"
                                                  >
                                                    不合格
                                                  </div>
                                                  <div
                                                    class="btn btn--green"
                                                    v-if="section.rebuild > 0"
                                                  >
                                                    待重测
                                                  </div>
                                                </template>
                                              </template>
                                            </template>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>

                                <template v-if="menu.type == 2">
                                  <div class="item__content">
                                    <div class="bank-chapter">
                                      <div class="bank-chapter__item">
                                        <div
                                          class="bank-chapter__item__text"
                                          @click="openChapter(menu)"
                                        >
                                          <i
                                            :class="{
                                              'el-icon-caret-right':
                                                !menu.showList,
                                              'el-icon-caret-bottom':
                                                menu.showList,
                                            }"
                                          ></i
                                          >{{ menu.menuName }}
                                        </div>

                                        <div
                                          class="bank-section"
                                          v-if="menu.showList"
                                        >
                                          <div
                                            class="bank-section__item"
                                            :class="{
                                              active: isActive(section),
                                            }"
                                            v-for="(
                                              section, sectionIndex
                                            ) in menu.list"
                                            :key="sectionIndex"
                                            @click="getResource(section)"
                                          >
                                            <template v-if="section.type != 2">
                                              <template>
                                                <div
                                                  class="note note--blue"
                                                  v-if="
                                                    section.sectionType == 1
                                                  "
                                                >
                                                  录播
                                                </div>
                                                <div
                                                  class="note"
                                                  v-if="
                                                    section.sectionType == 2
                                                  "
                                                >
                                                  直播
                                                </div>
                                                <div
                                                  class="note note--yellow"
                                                  v-if="
                                                    section.sectionType == 3
                                                  "
                                                >
                                                  回放
                                                </div>
                                              </template>
                                              <div
                                                class="bank-section__item__text"
                                              >
                                                {{ section.name }}
                                              </div>

                                              <template
                                                v-if="section.durationTime > 0"
                                              >
                                                <div class="during">
                                                  {{
                                                    $tools.secondToDate(
                                                      section.durationTime
                                                    )
                                                  }}
                                                </div>
                                              </template>
                                              <template>
                                                <div
                                                  class="btn"
                                                  v-if="section.rebuild > 0"
                                                >
                                                  待重修
                                                </div>
                                                <template v-else>
                                                  <div
                                                    class="btn btn--green"
                                                    v-if="section.learning == 1"
                                                  >
                                                    已看完
                                                  </div>
                                                </template>
                                              </template>
                                              <template
                                                v-if="
                                                  section.liveStartTime &&
                                                  section.sectionType != 3
                                                "
                                              >
                                                <div
                                                  class="
                                                    live-btn live-btn--blue
                                                  "
                                                  v-if="
                                                    section.liveStartTime >
                                                    nowTime
                                                  "
                                                >
                                                  待开播
                                                </div>
                                                <div
                                                  class="
                                                    live-btn live-btn--yellow
                                                  "
                                                  v-if="
                                                    section.liveStartTime <=
                                                      nowTime &&
                                                    section.liveEndTime >
                                                      nowTime
                                                  "
                                                >
                                                  直播中
                                                </div>
                                                <div
                                                  class="live-btn"
                                                  v-if="
                                                    section.liveStartTime <
                                                    nowTime
                                                  "
                                                >
                                                  已结束
                                                </div>
                                              </template>
                                            </template>

                                            <template v-if="section.type == 2">
                                              <template>
                                                <div
                                                  class="test-btn"
                                                  v-if="section.doType == 1"
                                                >
                                                  练习
                                                </div>
                                                <div
                                                  class="test-btn"
                                                  v-if="section.doType != 1"
                                                >
                                                  考试
                                                </div>
                                              </template>
                                              <div
                                                class="bank-section__item__text"
                                              >
                                                {{ section.name }}
                                              </div>
                                              <template>
                                                <div
                                                  class="btn"
                                                  v-if="section.rebuild > 0"
                                                >
                                                  待重修
                                                </div>
                                                <template v-else>
                                                  <div
                                                    class="btn btn--green"
                                                    v-if="section.learning == 1"
                                                  >
                                                    合格
                                                  </div>
                                                  <div
                                                    class="btn btn--red"
                                                    v-if="section.learning == 0"
                                                  >
                                                    不合格
                                                  </div>
                                                  <div
                                                    class="btn btn--green"
                                                    v-if="section.rebuild > 0"
                                                  >
                                                    待重测
                                                  </div>
                                                </template>
                                              </template>
                                            </template>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>

                                <template v-if="menu.type == 3">
                                  <div class="item__content">
                                    <div class="bank-section">
                                      <div
                                        class="bank-section__item"
                                        :class="{
                                          active: isActive(menu),
                                        }"
                                        @click="getResource(menu)"
                                      >
                                        <template>
                                          <div
                                            class="note note--blue"
                                            v-if="menu.sectionType == 1"
                                          >
                                            录播
                                          </div>
                                          <div
                                            class="note"
                                            v-if="menu.sectionType == 2"
                                          >
                                            直播
                                          </div>
                                          <div
                                            class="note note--yellow"
                                            v-if="menu.sectionType == 3"
                                          >
                                            回放
                                          </div>
                                          <div class="bank-section__item__text">
                                            {{ menu.name }}
                                          </div>
                                        </template>

                                        <template v-if="menu.durationTime > 0">
                                          <div class="during">
                                            {{
                                              $tools.secondToDate(
                                                menu.durationTime
                                              )
                                            }}
                                          </div>
                                        </template>
                                        <template>
                                          <div
                                            class="btn"
                                            v-if="menu.rebuild > 0"
                                          >
                                            待重修
                                          </div>
                                          <template v-else>
                                            <div
                                              class="btn btn--green"
                                              v-if="menu.learning == 1"
                                            >
                                              已看完
                                            </div>
                                          </template>
                                        </template>
                                        <template
                                          v-if="
                                            menu.liveStartTime &&
                                            menu.sectionType != 3
                                          "
                                        >
                                          <div
                                            class="live-btn live-btn--blue"
                                            v-if="menu.liveStartTime > nowTime"
                                          >
                                            待开播
                                          </div>
                                          <div
                                            class="live-btn live-btn--yellow"
                                            v-if="
                                              menu.liveStartTime <= nowTime &&
                                              menu.liveEndTime > nowTime
                                            "
                                          >
                                            直播中
                                          </div>
                                          <div
                                            class="live-btn"
                                            v-if="menu.liveStartTime < nowTime"
                                          >
                                            已结束
                                          </div>
                                        </template>
                                      </div>
                                    </div>
                                  </div>
                                </template>
                              </div>
                            </div>
                          </template>
                          <template v-if="tab.name == '2'">
                            <div class="right-box__body">
                              <div
                                class="item"
                                v-for="(menu, index) in reMenuList"
                                :key="index"
                              >
                                <template v-if="menu.type == 1">
                                  <div
                                    class="item__title"
                                    @click="openModule(menu)"
                                  >
                                    <i
                                      :class="{
                                        'el-icon-caret-right': !menu.showList,
                                        'el-icon-caret-bottom': menu.showList,
                                      }"
                                    ></i>
                                    {{ menu.menuName }}
                                  </div>
                                  <div class="item__content">
                                    <div
                                      class="bank-chapter"
                                      v-if="menu.showList"
                                    >
                                      <div
                                        class="bank-chapter__item"
                                        v-for="(
                                          chapter, chapterIndex
                                        ) in menu.list"
                                        :key="chapterIndex"
                                      >
                                        <div
                                          class="bank-chapter__item__text"
                                          @click="openChapter(chapter)"
                                        >
                                          <i
                                            :class="{
                                              'el-icon-caret-right':
                                                !chapter.showList,
                                              'el-icon-caret-bottom':
                                                chapter.showList,
                                            }"
                                          ></i
                                          >{{ chapter.name }}
                                        </div>

                                        <div
                                          class="bank-section"
                                          v-if="chapter.showList"
                                        >
                                          <div
                                            class="bank-section__item"
                                            :class="{
                                              active: isActive(section),
                                            }"
                                            v-for="(
                                              section, sectionIndex
                                            ) in chapter.list"
                                            :key="sectionIndex"
                                            @click="getResource(section)"
                                          >
                                            <template v-if="section.type != 2">
                                              <template>
                                                <div
                                                  class="note note--blue"
                                                  v-if="
                                                    section.sectionType == 1
                                                  "
                                                >
                                                  录播
                                                </div>
                                                <div
                                                  class="note"
                                                  v-if="
                                                    section.sectionType == 2
                                                  "
                                                >
                                                  直播
                                                </div>
                                                <div
                                                  class="note note--yellow"
                                                  v-if="
                                                    section.sectionType == 3
                                                  "
                                                >
                                                  回放
                                                </div>
                                                <div
                                                  class="
                                                    bank-section__item__text
                                                  "
                                                >
                                                  {{ section.name }}
                                                </div>
                                              </template>

                                              <template
                                                v-if="section.durationTime > 0"
                                              >
                                                <div class="during">
                                                  {{
                                                    $tools.secondToDate(
                                                      section.durationTime
                                                    )
                                                  }}
                                                </div>
                                              </template>
                                              <template>
                                                <div
                                                  class="btn"
                                                  v-if="section.rebuild > 0"
                                                >
                                                  待重修
                                                </div>
                                                <template v-else>
                                                  <div
                                                    class="btn btn--green"
                                                    v-if="section.learning == 1"
                                                  >
                                                    已看完
                                                  </div>
                                                </template>
                                              </template>
                                              <template
                                                v-if="
                                                  section.liveStartTime &&
                                                  section.sectionType != 3
                                                "
                                              >
                                                <div
                                                  class="
                                                    live-btn live-btn--blue
                                                  "
                                                  v-if="
                                                    section.liveStartTime >
                                                    nowTime
                                                  "
                                                >
                                                  待开播
                                                </div>
                                                <div
                                                  class="
                                                    live-btn live-btn--yellow
                                                  "
                                                  v-if="
                                                    section.liveStartTime <=
                                                      nowTime &&
                                                    section.liveEndTime >
                                                      nowTime
                                                  "
                                                >
                                                  直播中
                                                </div>
                                                <div
                                                  class="live-btn"
                                                  v-if="
                                                    section.liveStartTime <
                                                    nowTime
                                                  "
                                                >
                                                  已结束
                                                </div>
                                              </template>
                                            </template>

                                            <template v-if="section.type == 2">
                                              <template>
                                                <div
                                                  class="test-btn"
                                                  v-if="section.doType == 1"
                                                >
                                                  练习
                                                </div>
                                                <div
                                                  class="test-btn"
                                                  v-if="section.doType != 1"
                                                >
                                                  考试
                                                </div>
                                              </template>
                                              <div
                                                class="bank-section__item__text"
                                              >
                                                {{ section.name }}
                                              </div>
                                              <template>
                                                <div
                                                  class="btn"
                                                  v-if="section.rebuild > 0"
                                                >
                                                  待重修
                                                </div>
                                                <template v-else>
                                                  <div
                                                    class="btn btn--green"
                                                    v-if="section.learning == 1"
                                                  >
                                                    合格
                                                  </div>
                                                  <div
                                                    class="btn btn--red"
                                                    v-if="section.learning == 0"
                                                  >
                                                    不合格
                                                  </div>
                                                  <div
                                                    class="btn btn--green"
                                                    v-if="section.rebuild > 0"
                                                  >
                                                    待重测
                                                  </div>
                                                </template>
                                              </template>
                                            </template>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>

                                <template v-if="menu.type == 2">
                                  <div class="item__content">
                                    <div class="bank-chapter">
                                      <div class="bank-chapter__item">
                                        <div
                                          class="bank-chapter__item__text"
                                          @click="openChapter(menu)"
                                        >
                                          <i
                                            :class="{
                                              'el-icon-caret-right':
                                                !menu.showList,
                                              'el-icon-caret-bottom':
                                                menu.showList,
                                            }"
                                          ></i
                                          >{{ menu.menuName }}
                                        </div>

                                        <div
                                          class="bank-section"
                                          v-if="menu.showList"
                                        >
                                          <div
                                            class="bank-section__item"
                                            :class="{
                                              active: isActive(section),
                                            }"
                                            v-for="(
                                              section, sectionIndex
                                            ) in menu.list"
                                            :key="sectionIndex"
                                            @click="getResource(section)"
                                          >
                                            <template v-if="section.type != 2">
                                              <template>
                                                <div
                                                  class="note note--blue"
                                                  v-if="
                                                    section.sectionType == 1
                                                  "
                                                >
                                                  录播
                                                </div>
                                                <div
                                                  class="note"
                                                  v-if="
                                                    section.sectionType == 2
                                                  "
                                                >
                                                  直播
                                                </div>
                                                <div
                                                  class="note note--yellow"
                                                  v-if="
                                                    section.sectionType == 3
                                                  "
                                                >
                                                  回放
                                                </div>
                                              </template>
                                              <div
                                                class="bank-section__item__text"
                                              >
                                                {{ section.name }}
                                              </div>

                                              <template
                                                v-if="section.durationTime > 0"
                                              >
                                                <div class="during">
                                                  {{
                                                    $tools.secondToDate(
                                                      section.durationTime
                                                    )
                                                  }}
                                                </div>
                                              </template>
                                              <template>
                                                <div
                                                  class="btn"
                                                  v-if="section.rebuild > 0"
                                                >
                                                  待重修
                                                </div>
                                                <template v-else>
                                                  <div
                                                    class="btn btn--green"
                                                    v-if="section.learning == 1"
                                                  >
                                                    已看完
                                                  </div>
                                                </template>
                                              </template>
                                              <template
                                                v-if="
                                                  section.liveStartTime &&
                                                  section.sectionType != 3
                                                "
                                              >
                                                <div
                                                  class="
                                                    live-btn live-btn--blue
                                                  "
                                                  v-if="
                                                    section.liveStartTime >
                                                    nowTime
                                                  "
                                                >
                                                  待开播
                                                </div>
                                                <div
                                                  class="
                                                    live-btn live-btn--yellow
                                                  "
                                                  v-if="
                                                    section.liveStartTime <=
                                                      nowTime &&
                                                    section.liveEndTime >
                                                      nowTime
                                                  "
                                                >
                                                  直播中
                                                </div>
                                                <div
                                                  class="live-btn"
                                                  v-if="
                                                    section.liveStartTime <
                                                    nowTime
                                                  "
                                                >
                                                  已结束
                                                </div>
                                              </template>
                                            </template>

                                            <template v-if="section.type == 2">
                                              <template>
                                                <div
                                                  class="test-btn"
                                                  v-if="section.doType == 1"
                                                >
                                                  练习
                                                </div>
                                                <div
                                                  class="test-btn"
                                                  v-if="section.doType != 1"
                                                >
                                                  考试
                                                </div>
                                              </template>
                                              <div
                                                class="bank-section__item__text"
                                              >
                                                {{ section.name }}
                                              </div>
                                              <template>
                                                <div
                                                  class="btn"
                                                  v-if="section.rebuild > 0"
                                                >
                                                  待重修
                                                </div>
                                                <template v-else>
                                                  <div
                                                    class="btn btn--green"
                                                    v-if="section.learning == 1"
                                                  >
                                                    合格
                                                  </div>
                                                  <div
                                                    class="btn btn--red"
                                                    v-if="section.learning == 0"
                                                  >
                                                    不合格
                                                  </div>
                                                  <div
                                                    class="btn btn--green"
                                                    v-if="section.rebuild > 0"
                                                  >
                                                    待重测
                                                  </div>
                                                </template>
                                              </template>
                                            </template>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>

                                <template v-if="menu.type == 3">
                                  <div class="item__content">
                                    <div class="bank-section">
                                      <div
                                        class="bank-section__item"
                                        :class="{
                                          active: isActive(menu),
                                        }"
                                        @click="getResource(menu)"
                                      >
                                        <template>
                                          <div
                                            class="note note--blue"
                                            v-if="menu.sectionType == 1"
                                          >
                                            录播
                                          </div>
                                          <div
                                            class="note"
                                            v-if="menu.sectionType == 2"
                                          >
                                            直播
                                          </div>
                                          <div
                                            class="note note--yellow"
                                            v-if="menu.sectionType == 3"
                                          >
                                            回放
                                          </div>
                                          <div class="bank-section__item__text">
                                            {{ menu.name }}
                                          </div>
                                        </template>

                                        <template v-if="menu.durationTime > 0">
                                          <div class="during">
                                            {{
                                              $tools.secondToDate(
                                                menu.durationTime
                                              )
                                            }}
                                          </div>
                                        </template>
                                        <template>
                                          <div
                                            class="btn"
                                            v-if="menu.rebuild > 0"
                                          >
                                            待重修
                                          </div>
                                          <template v-else>
                                            <div
                                              class="btn btn--green"
                                              v-if="menu.learning == 1"
                                            >
                                              已看完
                                            </div>
                                          </template>
                                        </template>
                                        <template
                                          v-if="
                                            menu.liveStartTime &&
                                            menu.sectionType != 3
                                          "
                                        >
                                          <div
                                            class="live-btn live-btn--blue"
                                            v-if="menu.liveStartTime > nowTime"
                                          >
                                            待开播
                                          </div>
                                          <div
                                            class="live-btn live-btn--yellow"
                                            v-if="
                                              menu.liveStartTime <= nowTime &&
                                              menu.liveEndTime > nowTime
                                            "
                                          >
                                            直播中
                                          </div>
                                          <div
                                            class="live-btn"
                                            v-if="menu.liveStartTime < nowTime"
                                          >
                                            已结束
                                          </div>
                                        </template>
                                      </div>
                                    </div>
                                  </div>
                                </template>
                              </div>
                            </div>
                          </template>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                  </div>
                </div>
              </div>
              <div class="course-info__body">
                <el-tabs v-model="activeName">
                  <el-tab-pane
                    v-for="(item, index) in tabList"
                    :key="index"
                    :name="item.name"
                    :label="item.label"
                  >
                    <template v-if="item.label == '学员须知'">
                      <div class="course-menu clearfix">
                        <div class="left-box">
                          <div class="left-box__body">
                            {{ goodsData.buyNote }}
                          </div>
                        </div>
                        <div class="right-box">
                          <div class="title">
                            推荐题库
                            <span class="more">更多></span>
                          </div>
                          <ul class="list">
                            <li
                              class="course-item"
                              v-for="(item, index) in 4"
                              :key="index"
                              @click="courseDetail()"
                            >
                              <div class="course-item__img">
                                <div class="note">2022</div>
                              </div>
                              <div class="course-item__title">
                                2022年二建建设工程法规及相关知识（黄金基础班）
                              </div>
                              <div class="course-item__desc">
                                <div class="price">￥100</div>
                                <a class="add">加购物车</a>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </template>

                    <template v-if="item.label == '课程答疑'">
                      <div class="answer-question">
                        <div class="answer-question__header clearfix">
                          <div class="textarea-wrap">
                            <el-input
                              class="textarea"
                              v-model="textarea"
                              rows="3"
                              type="textarea"
                              placeholder=""
                            ></el-input>
                          </div>
                          <el-button
                            type="primary"
                            class="submit"
                            @click="addAnswer"
                            >提出疑问</el-button
                          >
                        </div>
                        <div class="answer-question__body">
                          <div class="question-list">
                            <div
                              v-if="answerList.length == 0"
                              style="text-align: center"
                            >
                              暂无记录
                            </div>
                            <div
                              class="question-list__item"
                              v-for="(item, index) in answerList"
                              :key="index"
                            >
                              <div class="question-list__item__avatar">
                                <img
                                  v-if="item.assignRealname"
                                  :src="$tools.splitImgHost(item.assignAvatar)"
                                  alt=""
                                />
                                <img
                                  v-else
                                  :src="$tools.splitImgHost(item.avatar)"
                                  alt=""
                                />
                              </div>
                              <div class="question-list__item__content">
                                <div class="nickname">
                                  {{ item.realname }}
                                </div>
                                <div class="desc">
                                  {{ item.answerText }}
                                </div>
                                <div class="time">
                                  {{
                                    $tools.timestampToTime(
                                      item.createTime,
                                      false
                                    )
                                  }}
                                  <div
                                    class="del"
                                    @click="del(item)"
                                    v-if="item.userId === userInfo.userId"
                                  >
                                    删除
                                  </div>
                                </div>
                                <div
                                  class="reply-list"
                                  v-if="
                                    item.newArraysAnswerList &&
                                    item.newArraysAnswerList.length
                                  "
                                >
                                  <div
                                    class="reply-list__item"
                                    v-for="(
                                      items, indexs
                                    ) in item.newArraysAnswerList"
                                    :key="indexs"
                                  >
                                    <div class="reply-list__item__avatar">
                                      <img
                                        :src="$tools.splitImgHost(items.avatar)"
                                        alt=""
                                      />
                                    </div>
                                    <div class="reply-list__item__content">
                                      <div class="nickname">
                                        {{ items.realname }}
                                      </div>
                                      <div class="desc">
                                        回复
                                        <span
                                          style="
                                            margin: 0px 4px;
                                            color: #409eff;
                                          "
                                          >@{{ items.assignRealname }}</span
                                        >
                                        {{ items.answerText }}
                                      </div>
                                      <div class="time">
                                        {{
                                          $tools.timestampToTime(
                                            items.createTime,
                                            false
                                          )
                                        }}
                                        <div
                                          class="del"
                                          @click="del(items)"
                                          v-if="
                                            items.userId === userInfo.userId
                                          "
                                        >
                                          删除
                                        </div>
                                        <div
                                          class="reply"
                                          v-if="
                                            items.userId !== userInfo.userId
                                          "
                                          @click="answerBack(items)"
                                        >
                                          回复
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>

                    <template v-if="item.label == '笔记讲义'">
                      <div class="lecture-notes">
                        <div class="lecture-notes__content clearfix">
                          <div class="left-box">
                            <div
                              class="textarea clearfix"
                              v-if="!(isPlayRebuild > 0)"
                            >
                              <el-input
                                resize="none"
                                rows="3"
                                v-model="textareaNote"
                                type="textarea"
                                placeholder="觉得重要的就记下来吧~"
                              ></el-input>
                              <el-button
                                type="primary"
                                class="submit"
                                @click="noteSubmit"
                              >
                                提交笔记
                              </el-button>
                            </div>

                            <div class="note-list">
                              <div
                                v-if="noteList.length == 0"
                                style="text-align: center"
                              >
                                暂无笔记
                              </div>

                              <div
                                class="note-list__content"
                                v-for="(item, index) in noteList"
                                :key="index"
                              >
                                <div class="note-list__content__title">
                                  {{ $tools.timestampToTime(item.dateNote) }}
                                </div>
                                <div
                                  class="note-list__item"
                                  v-for="(note, index) in item.userNotes"
                                  :key="index"
                                >
                                  <i
                                    class="el-icon-video-play"
                                    @click="noteClick(note)"
                                  ></i>
                                  <div class="note-list__item__content">
                                    <div class="title" @click="noteClick(note)">
                                      {{ $tools.secondToDate(note.noteSecond) }}
                                    </div>
                                    <div class="desc">
                                      {{ note.sectionName }}
                                    </div>
                                    <div class="time">{{ note.noteText }}</div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="pagination">
                              <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="noteTotal"
                                :page-size="noteParams.pageSize"
                              >
                              </el-pagination>
                            </div>
                          </div>
                          <div class="right-box" v-if="courseHandoutsData">
                            <div class="lecture-list">
                              <div class="lecture-list__header">
                                讲义

                                <div
                                  class="slide-btn"
                                  @click="lectureShow = !lectureShow"
                                >
                                  收起
                                </div>
                              </div>
                              <div
                                class="lecture-list__body"
                                v-if="lectureShow"
                              >
                                <div class="list">
                                  <div class="list__item">
                                    <div class="title">
                                      {{ courseHandoutsData.handoutsName }}
                                    </div>
                                    <div class="btns">
                                      <div
                                        class="btn"
                                        @click="
                                          previvew(
                                            $tools.splitImgHost(
                                              courseHandoutsData.handoutsUrl
                                            )
                                          )
                                        "
                                      >
                                        预览
                                      </div>
                                      <div
                                        class="btn"
                                        @click="
                                          printView(
                                            $tools.splitImgHost(
                                              courseHandoutsData.handoutsUrl
                                            )
                                          )
                                        "
                                      >
                                        打印
                                      </div>
                                      <div
                                        class="btn"
                                        @click="
                                          download(
                                            $tools.splitImgHost(
                                              courseHandoutsData.handoutsUrl
                                            ),
                                            courseHandoutsData.urlName
                                          )
                                        "
                                      >
                                        下载
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="lecture-list__footer" v-if="showPdf">
                              <div class="lecture-scan">
                                <div class="lecture-scan__header">
                                  {{ courseHandoutsData.urlName }}
                                </div>
                                <div class="lecture-scan__body">
                                  <pdf
                                    class="iframe"
                                    :src="
                                      $tools.splitImgHost(
                                        courseHandoutsData.handoutsUrl
                                      )
                                    "
                                    v-for="i in numPages"
                                    :key="i"
                                    :page="i"
                                    ref="pdf"
                                  ></pdf>
                                  <iframe
                                    id="printIframe"
                                    :src="
                                      $tools.splitImgHost(
                                        courseHandoutsData.handoutsUrl
                                      )
                                    "
                                    frameborder="0"
                                    style="display: none"
                                  ></iframe>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <el-dialog
      width="800px"
      class="take-photo"
      :visible.sync="takePhotoModal"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="take-photo__content">
        <!-- <div class="take-photo__close" @click="takePhotoModal = false">X</div> -->
        <div class="take-photo__header">人脸验证</div>
        <div class="take-photo__body clearfix">
          <div class="left-box">
            <div class="title">重要提示：</div>
            <div class="content">
              <p>1、请保证摄像头正对自己，避免头像偏左或者偏右。</p>
              <p>
                2、请保证拍照环境光线充足（照片太暗或曝光会降低验证通过率）。
              </p>
              <p>
                3、请保证整个头像在人脸识别区域内，脸部无遮挡装饰物（佩戴眼镜会降低通过率）。
              </p>
              <p>
                4、如果下面视频中出现黑屏，摄像头可能被其他进程占用，请关闭其他调用摄像头的程序，重新刷新当前页面重新拍照识别。
              </p>
            </div>
          </div>
          <div class="right-box">
            <img v-show="!isTaking" :src="faceUrl" alt="" />
            <video v-show="isTaking" id="video" :src="stream"></video>
          </div>
        </div>
        <div class="take-photo__footer">
          <el-button
            type="primary"
            v-if="isTaking"
            class="take"
            @click="onPhoto"
            >拍照</el-button
          >
          <el-button
            type="primary"
            v-if="!isTaking"
            class="take"
            :loading="loading"
            @click="reTake"
            >重拍</el-button
          >
          <el-button
            type="primary"
            v-if="!isTaking"
            :loading="loading"
            class="take"
            @click="takeOk"
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      width="996px"
      height="600px"
      class="info"
      :visible.sync="showInfoDetailModal"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      title="资料填写"
    >
      <div class="info__content">
        <el-form
          :model="infoForm"
          ref="infoForm"
          :rules="rules"
          :error-type="errorType"
        >
          <template v-for="(item, index) in listData">
            <el-form-item
              :key="index"
              v-if="item.fieldKey == 'name'"
              :label="item.fieldName"
              :required="item.required"
              label-width="120px"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-input
                v-model="infoForm.name"
                :placeholder="`请输入${item.fieldName}`"
              />
            </el-form-item>
            <el-form-item
              :key="index"
              v-if="item.fieldKey == 'idcard'"
              :label="item.fieldName"
              :required="item.required"
              label-width="120px"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-input
                v-model="infoForm.idcard"
                :placeholder="`请输入${item.fieldName}`"
              />
            </el-form-item>
            <el-form-item
              :key="index"
              v-if="item.fieldKey == 'telphone'"
              :label="item.fieldName"
              :required="item.required"
              label-width="120px"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-input
                v-model="infoForm.telphone"
                :placeholder="`请输入${item.fieldName}`"
              />
            </el-form-item>
            <el-form-item
              :key="index"
              v-if="item.fieldKey == 'school'"
              :label="item.fieldName"
              :required="item.required"
              label-width="120px"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-input
                v-model="infoForm.school"
                :placeholder="`请输入${item.fieldName}`"
              />
            </el-form-item>
            <el-form-item
              :key="index"
              v-if="item.fieldKey == 'work_unit'"
              :label="item.fieldName"
              :required="item.required"
              label-width="120px"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-input
                v-model="infoForm.work_unit"
                :placeholder="`请输入${item.fieldName}`"
              />
            </el-form-item>
            <el-form-item
              :key="index"
              v-if="item.fieldKey == 'unit_contact'"
              :label="item.fieldName"
              :required="item.required"
              label-width="120px"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-input
                v-model="infoForm.unit_contact"
                :placeholder="`请输入${item.fieldName}`"
              />
            </el-form-item>
            <el-form-item
              :key="index"
              v-if="item.fieldKey == 'unit_tel'"
              :label="item.fieldName"
              :required="item.required"
              label-width="120px"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-input
                v-model="infoForm.unit_tel"
                :placeholder="`请输入${item.fieldName}`"
              />
            </el-form-item>
            <el-form-item
              :key="index"
              v-if="item.fieldKey == 'apply_post'"
              :label="item.fieldName"
              :required="item.required"
              label-width="120px"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-input
                v-model="infoForm.apply_post"
                :placeholder="`请输入${item.fieldName}`"
              />
            </el-form-item>
            <el-form-item
              :key="index"
              v-if="item.fieldKey == 'major'"
              :label="item.fieldName"
              :required="item.required"
              label-width="120px"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-input
                v-model="infoForm.major"
                :placeholder="`请输入${item.fieldName}`"
              />
            </el-form-item>
            <el-form-item
              :key="index"
              v-if="item.inputType == 2"
              :label="item.fieldName"
              label-width="120px"
              :required="item.required"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-select v-model="infoForm[item.fieldKey]" placeholder="">
                <el-option
                  v-for="(option, optionIndex) in getarrays(item.fieldKey)"
                  :key="optionIndex"
                  :label="option"
                  :value="optionIndex + ''"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :key="index"
              v-if="item.inputType == 5"
              :label="item.fieldName"
              label-width="120px"
              :required="item.required"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-date-picker
                v-model="infoForm[item.fieldKey]"
                align="right"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              :key="index"
              v-if="
                item.inputType == 3 &&
                item.fieldKey !== 'commitment_electr_signature'
              "
              :label="item.fieldName"
              :required="item.required"
              label-width="120px"
              label-position="top"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-upload
                action=""
                :max-size="2097152"
                accept="image/jpeg, image/jpg, image/png"
                :show-file-list="false"
                list-type="picture"
                :auto-upload="false"
                :ref="
                  item.fieldKey === 'recent_photos'
                    ? 'recent_photos'
                    : item.fieldKey === 'idcard_face_photo'
                    ? 'idcard_face_photo'
                    : item.fieldKey === 'idcard_national_photo'
                    ? 'idcard_national_photo'
                    : ''
                "
                :on-change="
                  item.fieldKey === 'recent_photos'
                    ? changePhotoListHeader1
                    : item.fieldKey === 'idcard_face_photo'
                    ? changePhotoListHeader2
                    : item.fieldKey === 'idcard_national_photo'
                    ? changePhotoListHeader3
                    : ''
                "
                :file-list="
                  item.fieldKey === 'recent_photos'
                    ? fileList1
                    : item.fieldKey === 'idcard_face_photo'
                    ? fileList2
                    : item.fieldKey === 'idcard_national_photo'
                    ? fileList3
                    : ''
                "
              >
                <div class="upload-box">
                  <div
                    :style="
                      item.fieldKey === 'recent_photos'
                        ? 'width: 120px; height: 169px;background:url(' +
                          require('@/assets/info_1.png') +
                          ') no-repeat center;background-size:cover;position:relative;'
                        : item.fieldKey === 'idcard_face_photo'
                        ? 'width: 120px; height: 82px;background:url(' +
                          require('@/assets/info_2.png') +
                          ') no-repeat center;background-size:cover;position:relative;'
                        : item.fieldKey === 'idcard_national_photo'
                        ? 'width: 120px; height: 82px;background:url(' +
                          require('@/assets/info_3.png') +
                          ') no-repeat center;background-size:cover;position:relative;'
                        : ''
                    "
                  >
                    <i
                      @click="deleteImg(item)"
                      class="el-icon-error"
                      v-if="
                        item.fieldKey === 'recent_photos'
                          ? fileList1[0]
                          : item.fieldKey === 'idcard_face_photo'
                          ? fileList2[0]
                          : item.fieldKey === 'idcard_national_photo'
                          ? fileList3[0]
                          : ''
                      "
                    ></i>
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="
                        item.fieldKey === 'recent_photos'
                          ? $tools.splitImgHost(fileList1[0].url)
                          : item.fieldKey === 'idcard_face_photo'
                          ? $tools.splitImgHost(fileList2[0].url)
                          : item.fieldKey === 'idcard_national_photo'
                          ? $tools.splitImgHost(fileList3[0].url)
                          : ''
                      "
                      v-if="
                        item.fieldKey === 'recent_photos'
                          ? fileList1[0]
                          : item.fieldKey === 'idcard_face_photo'
                          ? fileList2[0]
                          : item.fieldKey === 'idcard_national_photo'
                          ? fileList3[0]
                          : ''
                      "
                      :preview-src-list="
                        item.fieldKey === 'recent_photos'
                          ? [$tools.splitImgHost(fileList1[0].url)]
                          : item.fieldKey === 'idcard_face_photo'
                          ? [$tools.splitImgHost(fileList2[0].url)]
                          : item.fieldKey === 'idcard_national_photo'
                          ? [$tools.splitImgHost(fileList3[0].url)]
                          : ''
                      "
                    >
                    </el-image>
                  </div>

                  <div>
                    <span
                      v-if="item.fieldKey === 'recent_photos'"
                      style="color: #999999"
                      >竖向证件照 文件大小≤2M</span
                    >
                    <span
                      v-if="
                        item.fieldKey === 'idcard_face_photo' ||
                        item.fieldKey === 'idcard_national_photo'
                      "
                      style="color: #999999"
                    >
                      文件大小≤2M
                    </span>
                  </div>
                </div>

                <div style="display: inline-block" slot="trigger">
                  <el-button type="primary" size="small" round
                    >浏览文件</el-button
                  >
                </div>
              </el-upload>
            </el-form-item>
            <div
              :key="index"
              v-if="
                item.inputType == 3 &&
                item.fieldKey === 'commitment_electr_signature'
              "
            >
              <el-form-item
                v-if="
                  item.inputType == 3 &&
                  item.fieldKey === 'commitment_electr_signature'
                "
                label="承诺书"
                :required="item.required"
                label-width="120px"
                label-position="top"
              >
                <div style="line-height: 40px; text-indent: 2em">
                  <span>
                    本人自愿做出如下承诺：本人己仔细阅读《广东省住房和城乡建设厅关于推进住房和城乡建设领域施工现场专业人员职业培训工作的通知》
                    全部内容并知晓和理解，本人的学历证书、身份证、工作年限、相片等所有资料完全真实、符合报名条件、资格审查要求和相关规定，本人在报名、审查、培训、测试等有关的事项中会严格道守相关规定和要求，如有虛假或与实际规定不符等情况造成的一切后果由本人承担。
                  </span>
                  <div style="line-height: 40px; text-indent: 2em">
                    <span>特此承诺！</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item
                v-if="
                  item.inputType == 3 &&
                  item.fieldKey === 'commitment_electr_signature'
                "
                label="签名板"
                :required="item.required"
                label-width="120px"
                label-position="top"
                :prop="item.required ? item.fieldKey : ''"
              >
                <div class="dis_stys">
                  <span style="color: #999999">请在下方签名区进行签名</span>
                  <el-button
                    type="primary"
                    size="small"
                    @click="retDraw"
                    mode=""
                    >清空</el-button
                  >
                </div>
                <div class="handCenter">
                  <vue-esign
                    v-if="!infoForm[item.fieldKey]"
                    ref="esign"
                    :width="600"
                    :height="300"
                    :isCrop="false"
                    :lineWidth="5"
                    :lineColor="'#333'"
                  />
                  <div
                    v-else
                    style="width: 100%; height: 100%; position: relative"
                  >
                    <img
                      style="width: 100%; height: 100%"
                      :src="$tools.splitImgHost(infoForm[item.fieldKey])"
                      mode=""
                    />
                  </div>
                </div>
              </el-form-item>
            </div>
          </template>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            showInfoDetailModal = false;
            $router.back(-1);
          "
          >取 消</el-button
        >
        <el-button type="primary" :loading="uploading" @click="submit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      width="996px"
      height="600px"
      class="info"
      :visible.sync="showStampDetailModail"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      title="资料填写"
    >
      <div class="info__content">
        <el-form
          :model="stampForm"
          ref="stampForm"
          :rules="stampRules"
          :error-type="errorType"
        >
          <template v-for="(item, index) in listDataStamp">
            <el-form-item
              :key="index"
              v-if="item.inputType == 4"
              :label="item.fieldName"
              :required="item.required"
              label-width="120px"
              label-position="top"
              :prop="item.required ? item.fieldKey : ''"
            >
              <el-button
                type="primary"
                size="small"
                round
                @click="downloadStamp(item)"
                >下载模板</el-button
              >
              <el-upload
                action=""
                :max-size="2097152"
                accept="image/jpeg, image/jpg, image/png"
                :show-file-list="false"
                list-type="picture"
                :auto-upload="false"
                ref="stamp"
                :on-change="changePhotoListStamp"
                :file-list="fileListStamp"
              >
                <div style="display: inline-block; vertical-align: top">
                  <div
                    :style="
                      'width: 120px; height: 120px;background:url(' +
                      require('@/assets/info_4.png') +
                      ') no-repeat center;background-size:cover;position:relative;'
                    "
                  >
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="$tools.splitImgHost(fileListStamp[0].url)"
                      v-if="fileListStamp[0]"
                      :preview-src-list="[
                        $tools.splitImgHost(fileListStamp[0].url),
                      ]"
                    >
                    </el-image>
                  </div>

                  <div>
                    <span style="color: #999999">文件大小≤2M</span>
                  </div>
                </div>

                <div style="display: inline-block" slot="trigger">
                  <el-button type="primary" size="small" round
                    >浏览文件</el-button
                  >
                </div>
              </el-upload>
            </el-form-item>
          </template>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            showStampDetailModail = false;
            $router.back(-1);
          "
          >取 消</el-button
        >
        <el-button type="primary" :loading="uploading" @click="stampSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div id="printTable"></div>
    <ToolBar></ToolBar>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import { mapGetters } from "vuex";
import * as baseUrls from "@/axios.js";
import pdf from "vue-pdf";
import print from "print-js";
export default {
  name: "CourseDetail",
  components: {
    Footer,
    Header,
    ToolBar,
    pdf,
  },
  data() {
    return {
      liveDuration: 0,
      numPages: 0,
      showPdf: false,
      // 总页数
      pdfPages: 10,
      // 当前页数
      pageNum: 1,
      // 加载进度
      loadedRatio: 10,
      // 页面加载完成
      curPageNum: 0,
      // 放大系数 默认百分百
      scale: 100,
      // 旋转角度 ‘90’的倍数才有效
      pageRotate: 0,
      // 单击内部链接时触发 (目前我没有遇到使用场景)
      page: 0,
      bgColor: "#ccc",
      recordObj: {},
      showInfoDetailModal: false,
      showStampDetailModail: false,
      isTaking: true, //是否正在拍照
      photoConfig: false,
      stream: null,
      photoNum: 0,
      playSectionId: 0,
      photoIndex: 0, //当前位于拍照的区间下标 从0开始
      photoHistoryList: [], //已拍照历史的下标点
      moduleId: 0,
      chapterId: 0,
      menuTab: [],
      lectureShow: true,
      textarea: "",
      textareaNote: "",
      takePhotoModal: false,
      activeName: "1",
      courseId: "",
      courseTabIndex: "1",
      goodsId: "",
      gradeId: "",
      livingTimer: null,
      sectionItem: {},
      gradeDetail: {},
      playTime: 0, //页面播放时长，不含暂停
      param: {
        pageNum: 1,
        pageSize: 100,
        total: 0,
      },
      lockTimer: null,
      courseList: [],
      businessData: {},
      courseHandoutsData: "",
      menuList: [],
      goodsData: {},
      tabList: [],
      vid: "",
      vidzb: "",
      player: "",
      playerzb: "",
      activeId: "", //当前选中ID
      vodPlayerJs: "https://player.polyv.net/script/player.js",
      playerJs:
        "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
      uidzb: "egsxlptzdq",
      menuList: [],
      reMenuList: [],
      answerList: [{ newArraysAnswerList: [] }],
      noteList: [],
      photoList: [],
      noteTotal: 0,
      duration: 0,
      noteParams: {
        pageNum: 1,
        // pageSize: 4,
      },
      ossAvatarUrl: "", //照片地址
      nowTime: 0,
      faceUrl: "",
      loading: null,
      listData: [],
      listDataStamp: [],
      remark: "",
      remarkStatus: false,
      remarkStamp: "",
      remarkStatusStamp: false,
      errorType: ["message"],
      stampForm: {
        commitment_seal: "",
      },
      infoForm: {
        name: "",
        sex: "",
        idcard: "",
        telphone: "",
        education: "",
        school: "",
        graduation_time: "",
        work_unit: "",
        unit_contact: "",
        unit_tel: "",
        apply_post: "",
        major: "",
        working_years: "",
        recent_photos: "",
        idcard_face_photo: "",
        idcard_national_photo: "",
        commitment_electr_signature: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: ["change", "blur"],
          },
        ],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change",
          },
        ],
        idcard: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              let IDRe18 =
                /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
              let IDre15 =
                /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;

              if (!IDRe18.test(value) && !IDre15.test(value)) {
                return callback(new Error("请输入格式正确的身份证号"));
              } else {
                return callback();
              }
            },
            message: "请输入格式正确的身份证号",
            trigger: ["change", "blur"],
          },
        ],
        telphone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              var reg_tel =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
              if (reg_tel.test(value)) {
                return callback();
              } else {
                return callback(new Error("手机号码不正确"));
              }
            },
            trigger: ["change", "blur"],
          },
        ],
        education: [
          {
            required: true,
            message: "请选择学历",
            trigger: "change",
          },
        ],
        school: [
          {
            required: true,
            message: "请输入毕业院校",
            trigger: ["change", "blur"],
          },
        ],
        graduation_time: [
          {
            required: true,
            message: "请选择毕业时间",
            trigger: "change",
          },
        ],
        work_unit: [
          {
            required: true,
            message: "请输入工作单位",
            trigger: ["change", "blur"],
          },
        ],
        unit_contact: [
          {
            required: true,
            message: "请输入单位联系人",
            trigger: ["change", "blur"],
          },
        ],
        unit_tel: [
          {
            required: true,
            message: "请输入单位联系电话",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              var reg_tel =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
              var vartest = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
              var vartest1 = /^([0-9]{3,4})?[0-9]{7,8}$/;
              if (
                reg_tel.test(value) ||
                vartest.test(value) ||
                vartest1.test(value)
              ) {
                return callback();
              } else {
                return callback(new Error("单位联系电话不正确"));
              }
            },
            trigger: ["change", "blur"],
          },
        ],
        apply_post: [
          {
            required: true,
            message: "请输入报名岗位",
            trigger: ["change", "blur"],
          },
        ],
        major: [
          {
            required: true,
            message: "请输入所学专业",
            trigger: ["change", "blur"],
          },
        ],
        working_years: [
          {
            required: true,
            message: "请选择工作年限",
            trigger: "change",
          },
        ],
        recent_photos: [
          {
            required: true,
            message: "请上传个人近照",
            trigger: ["change", "blur"],
          },
        ],
        idcard_face_photo: [
          {
            required: true,
            message: "请上传身份证人像面",
            trigger: ["change", "blur"],
          },
        ],
        idcard_national_photo: [
          {
            required: true,
            message: "请上传身份证国徽面",
            trigger: ["change", "blur"],
          },
        ],
        commitment_electr_signature: [
          {
            required: true,
            message: "请签写承诺书电子签",
            trigger: ["change", "blur"],
          },
        ],
      },

      stampRules: {
        commitment_seal: [
          {
            required: true,
            message: "请上传承诺书盖章",
            trigger: ["change", "blur"],
          },
        ],
      },

      fileList1: [], //个人近照
      fileList2: [], //人像
      fileList3: [], //国徽
      fileListStamp: [], //印章
      dictObj: null,
      isRequired: false,
      uploading: false,
      veryIdCard: "",
      veryIdName: "",
      isPlayRebuild: false,
      showRecordStatus: false,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    this.courseId = +this.$route.query.courseId || "";
    this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
    this.goodsId = this.$route.params.goodsId;
    this.orderGoodsId = this.$route.query.orderGoodsId;
    this.gradeId = this.$route.query.gradeId;

    if (this.$route.query.rebuild) {
      this.courseTabIndex = "2";
    }

    this.courseCourseList();
    this.dictList();

    this.getbaseprofiletplists().then((res) => {
      let noteSecond = this.$route.query.noteSecond;
      if (noteSecond > 0) {
        let item = {
          sectionId: this.$route.query.sectionId,
          recordingUrl: this.$route.query.recordingUrl,
          noteSecond: noteSecond,
          studyDuration: noteSecond,
          moduleId: this.$route.query.moduleId,
          chapterId: this.$route.query.chapterId,
        };

        this.sectionItem = item;
        this.playSectionId = this.$route.query.sectionId;
        setTimeout(() => {
          this.noteClick(item);
        }, 1000);
      }
    });
  },
  beforeDestroy() {
    try {
      this.$msgbox.close();
    } catch (err) {}
    if (this.playSectionId) {
      this.postStudyRecord();
    }
    if (this.lockTimer) {
      clearInterval(this.lockTimer);
      this.$request
        .lockDelLock({
          action: "jxjy",
        })
        .then((res) => {});
    }
  },
  methods: {
    async takeOk() {
      this.loading = true;
      let compareFaceData = await this.faceRecognition();

      if (compareFaceData >= 80) {
        const waitYS = await this.imageInfos();
        this.postCoursePhotoRecord()
          .then((res) => {
            this.photoHistoryList.push(this.photoIndex);
            this.postStudyRecord(); //提交记录
            //恢复播放

            this.$message({
              type: "success",
              message: "拍照成功",
            });
            this.takePhotoModal = false;
            this.isTaking = false;
            this.loading = false;
            var polyvPlayerContext = this.player;
            if (polyvPlayerContext) {
              polyvPlayerContext.j2s_resumeVideo();
            }
            var polyvPlayerContext = this.playerzb;
            if (polyvPlayerContext) {
              polyvPlayerContext.j2s_resumeVideo();
            }
          })
          .catch((err) => {
            this.loading = false;
            console.log(err, "err");
            this.$message({
              type: "warning",
              message: "上传接口报错，请重新拍照上传",
            });
            this.reTake();
          });
      } else {
        this.$message({
          type: "warning",
          message: "人脸匹配不通过，请重新拍照上传",
        });

        setTimeout(() => {
          this.loading = false;
          this.reTake();
        }, 2000);
        return;
      }
    },

    changePhotoListStamp(params, fileList) {
      const file = params.raw;
      const fileType = file.type;
      const isImage = fileType.indexOf("image") != -1;
      const isLt2M = file.size / 1024 / 1024 < 2;
      // 这里常规检验，看项目需求而定
      if (!isImage) {
        this.$message.error("只能上传图片格式png、jpg、gif!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("只能上传图片大小小于2M");
        return;
      }
      if (fileList.length == 1) {
        fileList.splice(0, 1);
      }
      this.$refs.stamp[0].clearFiles();
      this.$upload
        .upload(file, 0)
        .then((res) => {
          this.$set(this.stampForm, "commitment_seal", res);
          this.fileListStamp = [
            {
              name: res,
              url: res,
            },
          ];
          this.$refs.stamp[0].clearFiles();
          console.log(res);
        })
        .catch((err) => {
          this.$refs.stamp[0].clearFiles();
        });
    },

    // 页面加载成功  当前页数
    pageLoaded(e) {
      this.$emit("current", e);
      this.curPageNum = e;
    },

    changePhotoListHeader1(params, fileList) {
      console.log(params);
      const file = params.raw;
      const fileType = file.type;
      const isImage = fileType.indexOf("image") != -1;
      const isLt2M = file.size / 1024 / 1024 < 2;
      // 这里常规检验，看项目需求而定
      if (!isImage) {
        this.$message.error("只能上传图片格式png、jpg、gif!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("只能上传图片大小小于2M");
        return;
      }
      if (fileList.length == 1) {
        fileList.splice(0, 1);
      }
      this.$refs.recent_photos[0].clearFiles();
      this.$upload
        .upload(file, 0)
        .then((res) => {
          this.$set(this.infoForm, "recent_photos", res);
          this.fileList1 = [
            {
              name: res,
              url: res,
            },
          ];
          this.$refs.recent_photos[0].clearFiles();
          console.log(res);
        })
        .catch((err) => {
          this.$refs.recent_photos[0].clearFiles();
        });
    },

    async changePhotoListHeader2(params, fileList) {
      const file = params.raw;
      const fileType = file.type;
      const isImage = fileType.indexOf("image") != -1;
      const isLt2M = file.size / 1024 / 1024 < 2;
      // 这里常规检验，看项目需求而定
      if (!isImage) {
        this.$message.error("只能上传图片格式png、jpg、gif!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("只能上传图片大小小于2M");
        return;
      }

      if (fileList.length == 1) {
        fileList.splice(0, 1);
      }

      let res = await this.faceCertificationIDCardOCR(1, file);

      if (res.code == 500) {
        this.$message.warning("请上传正确清晰的身份证人像面照片");
        return;
      }

      this.$refs.idcard_face_photo[0].clearFiles();
      this.$upload
        .upload(file, 0)
        .then((res) => {
          this.$set(this.infoForm, "idcard_face_photo", res);
          this.fileList2 = [
            {
              name: res,
              url: res,
            },
          ];
          this.$refs.idcard_face_photo[0].clearFiles();
          console.log(res);
        })
        .catch((err) => {
          this.$refs.idcard_face_photo[0].clearFiles();
        });
    },

    async changePhotoListHeader3(params, fileList) {
      const file = params.raw;
      const fileType = file.type;
      const isImage = fileType.indexOf("image") != -1;
      const isLt2M = file.size / 1024 / 1024 < 2;
      // 这里常规检验，看项目需求而定
      if (!isImage) {
        this.$message.error("只能上传图片格式png、jpg、gif!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("只能上传图片大小小于2M");
        return;
      }

      if (fileList.length == 1) {
        fileList.splice(0, 1);
      }

      let res = await this.faceCertificationIDCardOCR(2, file);
      if (res.code == 500) {
        this.$message.warning("请上传正确清晰的身份证国徽面照片");
        return;
      }
      this.$refs.idcard_national_photo[0].clearFiles();
      this.$upload
        .upload(file, 0)
        .then((res) => {
          this.$set(this.infoForm, "idcard_national_photo", res);
          this.fileList3 = [
            {
              name: res,
              url: res,
            },
          ];
          this.$refs.idcard_national_photo[0].clearFiles();
          console.log(res);
        })
        .catch((err) => {
          this.$refs.idcard_national_photo[0].clearFiles();
        });
    },

    faceCertificationIDCardOCR(cardSide, file) {
      return new Promise((resolve) => {
        var reader = new FileReader();
        // 将文件加载进入
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          // 转换完成输出该文件base64编码
          let base64 = e.target.result;

          this.$request
            .faceCertificationIDCardOCR({
              cardSide: cardSide, //1人像  2 国徽
              cardImageBase64: base64,
              gradeId: this.gradeId,
            })
            .then((res) => {
              resolve(res);
            })
            .catch((err) => {
              resolve(err);
            });
        };
      });
    },

    async submit() {
      if (this.uploading) {
        return;
      }
      this.uploading = true;

      var ast = this.listData.some((item) => {
        return item.fieldKey === "commitment_electr_signature";
      });
      if (ast) {
        await this.subCanvas();
      }

      this.resultForm();
    },

    stampSubmit() {
      if (this.uploading) {
        return;
      }
      this.uploading = true;
      this.stampResultForm();
    },
    backLI() {
      this.player.j2s_seekVideo(0);
      this.showRecordStatus = false;
    },
    //验证表单
    stampResultForm() {
      for (let i = 0; i < this.listDataStamp.length; i++) {
        if (
          this.listDataStamp[i].fieldKey === "commitment_seal" &&
          !this.listDataStamp[i].required
        ) {
          this.submitApi();
          return;
        }
      }
      this.$refs.stampForm.validate((valid) => {
        if (valid) {
          this.submitApiStamp();
        } else {
          this.uploading = false;
        }
      });
    },

    async submitApiStamp() {
      var data = JSON.parse(JSON.stringify(this.stampForm));
      if (data["commitment_seal"]) {
        data.commitment_seal = await this.$upload.upload(
          data.commitment_seal,
          0
        );
      }
      this.optionChanges(data);
    },

    optionChanges(data) {
      var self = this;
      var objs = {};
      for (let k in data) {
        objs[k] = {
          fieldKey: k,
          value: data[k],
          fieldName: (function () {
            for (let i = 0; i < self.listDataStamp.length; i++) {
              if (self.listDataStamp[i].fieldKey == k) {
                return self.listDataStamp[i].fieldName;
              }
            }
          })(),
          status: self.remarkStatusStamp ? 1 : 0,
        };
      }
      var datas = {
        orderGoodsId: this.orderGoodsId,
        goodsId: self.goodsId,
        keyValue: JSON.stringify(objs),
      };
      if (self.remarkStatus) {
        datas.id = self.id;
        self.$request.editbaseprofileStamp(datas).then((res) => {
          this.uploading = false;
          this.showStampDetailModail = false;
          this.$message.success("提交成功");
        });
      } else {
        self.$request.addbaseprofileStamp(datas).then((res) => {
          this.uploading = false;
          this.showStampDetailModail = false;
          this.$message.success("提交成功");
        });
      }
    },

    resultForm() {
      console.log(1);
      if (this.isRequired) {
        this.submitApi();
      } else {
        console.log(1);
        this.$refs.infoForm.validate((valid) => {
          console.log(1);
          if (valid) {
            this.submitApi();
          } else {
            this.uploading = false;
          }
        });
        // if (int === 1) {
        //   this.errorType = ["toast"];
        // } else {
        //   this.errorType = ["message"];
        // }
      }
    },

    async submitApi() {
      console.log(this.infoForm, "999");
      var data = JSON.parse(JSON.stringify(this.infoForm));
      if (data["sex"]) {
        data.sex = this.dictObj["sys_user_sex"][Number(data.sex)];
      }
      if (data["education"]) {
        data.education = this.dictObj["edu_level"][Number(data.education)];
      }
      if (data["working_years"]) {
        data.working_years =
          this.dictObj["working_years"][Number(data.working_years)];
      }
      if (data["recent_photos"]) {
        data.recent_photos = await this.$upload.upload(data.recent_photos, 0);
      }
      if (data["idcard_face_photo"]) {
        data.idcard_face_photo = await this.$upload.upload(
          data.idcard_face_photo,
          0
        );
      }
      if (data["idcard_national_photo"]) {
        data.idcard_national_photo = await this.$upload.upload(
          data.idcard_national_photo,
          0
        );
      }
      if (data["commitment_electr_signature"]) {
        data.commitment_electr_signature = await this.$upload.upload(
          data.commitment_electr_signature,
          0
        );
      }

      this.uploadDatas(data);
    },

    downloadStamp(item) {
      this.$request
        .addWordbaseprofileStamp({ goodsId: this.goodsId })
        .then((res) => {
          let url = this.$tools.splitImgHost(res.msg);
          let name = res.msg.substring(res.msg.lastIndexOf("/") + 1);
          let image = new Image();
          // 解决跨域 Canvas 污染问题,
          image.setAttribute("crossorigin", "anonymous");
          image.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            var base64 = canvas.toDataURL("image/jpg"); //将图片格式转为base64
            var a = document.createElement("a"); // 生成一个a元素
            var event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name; // 设置图片名称
            console.log(base64);
            a.href = base64; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
          };
          image.src = url + "?time=" + Date.now(); //注意，这里是灵魂，否则依旧会产生跨域问题
        });
    },

    convertBase64UrlToBlob(urlData) {
      var localData = urlData; //dataUrl为base64位
      let base = atob(localData.substring(localData.indexOf(",") + 1)); // base是将base64编码解码，去掉data:image/png;base64部分
      let length = base.length;
      let url = new Uint8Array(length);
      while (length--) {
        url[length] = base.charCodeAt(length);
      }
      let file = new File([url], "a.jpg", {
        type: "image/jpg",
      });
      //最后将file，通过ajax请求做为参数传给服务器就可以了
      return file;
    },

    async uploadDatas(data) {
      if (this.infoForm.recent_photos && this.infoForm.idcard_face_photo) {
        let base = await this.$tools.imageToBase64(
          this.$tools.splitImgHost(this.infoForm.idcard_face_photo)
        );
        console.log(base);
        console.log(this.$tools.splitImgHost(this.infoForm.idcard_face_photo));
        let resData = await this.$request.faceCertificationIDCardOCR({
          cardSide: 1, //1人像  2 国徽
          cardImageBase64: base,
          gradeId: this.gradeId,
        });

        if (!resData.data) {
          this.$message.warning("身份证人像面照片异常，请重新上传");
          this.uploading = false;
          return;
        }
        this.veryIdCard = resData.data.IdNum;
        this.veryIdName = resData.data.IdName;

        if (this.infoForm.idcard) {
          if (this.infoForm.idcard != this.veryIdCard) {
            this.$message.warning(
              "输入的身份证号和身份证人像面照片身份证号不匹配"
            );
            this.uploading = false;
            return;
          }
        }

        let base64 = await this.$tools.imageToBase64(
          this.$tools.splitImgHost(this.infoForm.recent_photos)
        );

        let newData = {
          idNum: this.veryIdCard,
          idName: this.veryIdName,
          oneInchPhotos: base64,
        };

        this.$request.facCertificationImageRecognition(newData).then((res1) => {
          if (res1.data.sim >= 70) {
            var self = this;
            if (self.remarkStatus) {
              var arsty = {};
              for (let k in data) {
                for (let j in self.copyData) {
                  if (k === j) {
                    if (self.copyData[j].value === data[k]) {
                      arsty[k] = {
                        fieldKey: k,
                        value: data[k],
                        fieldName: (function () {
                          for (let i = 0; i < self.listData.length; i++) {
                            if (self.listData[i].fieldKey == k) {
                              return self.listData[i].fieldName;
                            }
                          }
                        })(),
                        status: 0,
                      };
                    } else {
                      arsty[k] = {
                        fieldKey: k,
                        value: data[k],
                        fieldName: (function () {
                          for (let i = 0; i < self.listData.length; i++) {
                            if (self.listData[i].fieldKey == k) {
                              return self.listData[i].fieldName;
                            }
                          }
                        })(),
                        status: 1,
                      };
                    }
                  }
                }
              }
              var datas = {
                id: this.id,
                goodsId: this.goodsId,
                orderGoodsId: this.orderGoodsId,
                keyValue: JSON.stringify(arsty),
              };
              this.$request
                .editbaseprofiletp(datas)
                .then((res) => {
                  this.uploading = false;
                  this.$message.success("提交成功");
                  this.showInfoDetailModal = false;
                })
                .catch((err) => {
                  this.$message.warning(err.msg);
                  this.uploading = false;
                });
            } else {
              var objs = {};
              for (let k in data) {
                objs[k] = {
                  fieldKey: k,
                  value: data[k],
                  fieldName: (function () {
                    for (let i = 0; i < self.listData.length; i++) {
                      if (self.listData[i].fieldKey == k) {
                        return self.listData[i].fieldName;
                      }
                    }
                  })(),
                  status: 0,
                };
              }
              var datas = {
                goodsId: this.goodsId,
                profileTpId: this.goodsId,
                orderGoodsId: this.orderGoodsId,
                keyValue: JSON.stringify(objs),
              };
              this.$request
                .addbaseprofiletp(datas)
                .then((res) => {
                  this.uploading = false;
                  this.$message.success("提交成功");
                  this.showInfoDetailModal = false;
                })
                .catch((err) => {
                  this.$message.warning(err.msg);
                  this.uploading = false;
                });
            }
          } else {
            this.uploading = false;
            this.$message.warning("个人近照和身份证人像面照片不匹配");
          }
        });

        return;
      }

      var self = this;
      if (self.remarkStatus) {
        var arsty = {};
        for (let k in data) {
          for (let j in self.copyData) {
            if (k === j) {
              if (self.copyData[j].value === data[k]) {
                arsty[k] = {
                  fieldKey: k,
                  value: data[k],
                  fieldName: (function () {
                    for (let i = 0; i < self.listData.length; i++) {
                      if (self.listData[i].fieldKey == k) {
                        return self.listData[i].fieldName;
                      }
                    }
                  })(),
                  status: 0,
                };
              } else {
                arsty[k] = {
                  fieldKey: k,
                  value: data[k],
                  fieldName: (function () {
                    for (let i = 0; i < self.listData.length; i++) {
                      if (self.listData[i].fieldKey == k) {
                        return self.listData[i].fieldName;
                      }
                    }
                  })(),
                  status: 1,
                };
              }
            }
          }
        }
        var datas = {
          id: this.id,
          goodsId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
          keyValue: JSON.stringify(arsty),
        };
        this.$request
          .editbaseprofiletp(datas)
          .then((res) => {
            this.uploading = false;
            this.$message.success("提交成功");
            this.showInfoDetailModal = false;
          })
          .catch((err) => {
            this.$message.warning(err.msg);
            this.uploading = false;
          });
      } else {
        var objs = {};
        for (let k in data) {
          objs[k] = {
            fieldKey: k,
            value: data[k],
            fieldName: (function () {
              for (let i = 0; i < self.listData.length; i++) {
                if (self.listData[i].fieldKey == k) {
                  return self.listData[i].fieldName;
                }
              }
            })(),
            status: 0,
          };
        }
        var datas = {
          goodsId: this.goodsId,
          profileTpId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
          keyValue: JSON.stringify(objs),
        };
        this.$request
          .addbaseprofiletp(datas)
          .then((res) => {
            this.uploading = false;
            this.$message.success("提交成功");
            this.showInfoDetailModal = false;
          })
          .catch((err) => {
            this.$message.warning(err.msg);
            this.uploading = false;
          });
      }
    },

    subCanvas() {
      return new Promise((resolve, reject) => {
        var self = this;
        if (self.infoForm.commitment_electr_signature) {
          resolve();
          return;
        }
        this.$refs.esign[0]
          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
          .then(async (res) => {
            let url = await this.$upload.upload(
              this.convertBase64UrlToBlob(res),
              0
            );
            this.$set(this.infoForm, "commitment_electr_signature", url);
            resolve();
          })
          .catch((err) => {
            console.log(err, "err");
            // 画布没有签字时会执行这里提示一下
            // this.uploading = false;
            // this.$message({
            //   type: "warning",
            //   message: "请签名后再生成签字图片",
            // });
            resolve();
          });
      });
    },

    imageInfos() {
      var self = this;
      return new Promise(async (resolve, reject) => {
        const waitUpload = await self.uploadFile(self.faceUrl, 0);
        resolve(waitUpload);
      });
    },

    getarrays(key) {
      if (key === "sex") {
        return this.dictObj["sys_user_sex"];
      }
      if (key === "education") {
        return this.dictObj["edu_level"];
      }
      if (key === "working_years") {
        return this.dictObj["working_years"];
      }
    },

    dictList() {
      this.$request.dictList().then((res) => {
        if (res.code === 200) {
          let newList = {};
          let list = res.data;
          for (let i = 0; i < list.length; i++) {
            let item = list[i];
            if (newList.hasOwnProperty(item.dictType)) {
              newList[item.dictType].push(item.dictLabel);
            } else {
              newList[item.dictType] = [item.dictLabel];
            }
          }
          this.dictObj = newList;
        }
      });
    },

    getbaseprofiletplists() {
      return new Promise((resolve) => {
        let self = this;
        this.$request
          .getbaseprofiletplists({
            goodsId: this.goodsId,
            orderGoodsId: this.orderGoodsId || "",
          })
          .then((res) => {
            console.log(res, "res");
            if (res.code === 200 && res.rows.length) {
              if (res.rows[0].keyValue) {
                self.$request
                  .getbaseprofiletpId(self.goodsId)
                  .then((baseRes) => {
                    if (baseRes.code === 200) {
                      if (baseRes.data) {
                        self.$request
                          .getbaseprofiletpgetInfo({
                            goodsId: self.goodsId,
                            orderGoodsId: self.orderGoodsId,
                          })
                          .then((result) => {
                            console.log(result, "result");
                            if (result.code === 200) {
                              if (
                                !result.data ||
                                (result.data.status === 3 &&
                                  result.data.changeStatus === 1)
                              ) {
                                if (!result.data) {
                                  self.needProfileModal = true;

                                  this.$confirm(`请填写资料`, "提示", {
                                    confirmButtonText: "确定",
                                    cancelButtonText: "返回",
                                    closeOnClickModal: false,
                                    closeOnPressEscape: false,
                                    distinguishCancelAndClose: false,
                                    showClose: false,
                                  })
                                    .then((_) => {
                                      this.showInfoDetailModal = true;
                                      this.getInfo();
                                    })
                                    .catch((_) => {
                                      this.$router.back(-1);
                                    });
                                } else {
                                  this.$confirm(
                                    `资料审核不通过，请前往重新填写`,
                                    "提示",
                                    {
                                      confirmButtonText: "确定",
                                      cancelButtonText: "返回",
                                      closeOnClickModal: false,
                                      closeOnPressEscape: false,
                                      distinguishCancelAndClose: false,
                                      showClose: false,
                                    }
                                  )
                                    .then((_) => {
                                      this.showInfoDetailModal = true;
                                      this.getInfo();
                                    })
                                    .catch((_) => {
                                      this.$router.back(-1);
                                    });
                                }
                              } else if (
                                result.data.status === 1 &&
                                JSON.parse(res.rows[0].keyValue2)[0]
                              ) {
                                self.$request
                                  .getbaseprofileStampgetInfo({
                                    goodsId: self.goodsId,
                                    orderGoodsId: self.orderGoodsId,
                                  })
                                  .then((k) => {
                                    if (k.code === 200) {
                                      if (
                                        !k.data ||
                                        (k.data.status === 3 &&
                                          k.data.changeStatus === 1)
                                      ) {
                                        if (!k.data) {
                                          this.$confirm(
                                            `请前往填写盖章资料`,
                                            "提示",
                                            {
                                              confirmButtonText: "确定",
                                              cancelButtonText: "返回",
                                              closeOnClickModal: false,
                                              closeOnPressEscape: false,
                                              distinguishCancelAndClose: false,
                                              showClose: false,
                                            }
                                          )
                                            .then((_) => {
                                              this.showStampDetailModail = true;
                                              this.getInfoStamp();
                                            })
                                            .catch((_) => {
                                              this.$router.back(-1);
                                            });
                                        } else {
                                          self.needProfileModal = true;
                                          this.$confirm(
                                            `资料盖章审核不通过，请前往重新填写`,
                                            "提示",
                                            {
                                              confirmButtonText: "确定",
                                              cancelButtonText: "返回",
                                              closeOnClickModal: false,
                                              closeOnPressEscape: false,
                                              distinguishCancelAndClose: false,
                                              showClose: false,
                                            }
                                          )
                                            .then((_) => {
                                              this.showStampDetailModail = true;
                                              this.getInfoStamp();
                                            })
                                            .catch((_) => {
                                              this.$router.back(-1);
                                            });
                                        }
                                      }
                                    }
                                  });
                              } else {
                                resolve();
                              }
                            }
                          });
                      } else {
                        resolve();
                      }
                    }
                  });
              } else {
                resolve();
              }
            }
          });
        if (this.gradeId > 0) {
          //提交完资料返回判断是否已开班

          this.getGradeInfo();
        }
      });
    },

    getInfoStamp() {
      var self = this;
      this.$request.getbaseprofiletpId(this.goodsId).then((res) => {
        var ast = JSON.parse(res.data.keyValue2);
        self.listDataStamp = ast;
        self.$request
          .getbaseprofileStampgetInfo({
            goodsId: self.goodsId,
            orderGoodsId: self.orderGoodsId,
          })
          .then((result) => {
            if (result.data && result.data.status === 3) {
              self.remarkStamp = result.data.text;
              self.remarkStatusStamp = true;
              self.id = result.data.id;
            } else if (
              result.data &&
              (result.data.status === 1 || result.data.status === 2)
            ) {
              // uni.showModal({
              //   showCancel: false,
              //   content:
              //     result.data.status === 1
              //       ? "该商品审核资料已通过，不可重复提交资料"
              //       : result.data.status === 2
              //       ? "该商品审核资料处于待审核状态，不可重复提交资料"
              //       : "请联系管理员",
              //   success: function (k) {
              //     if (k.confirm) {
              //       uni.navigateBack();
              //     }
              //   },
              // });
            }
          })
          .catch((err) => {});
      });
    },

    getGradeInfo() {
      let self = this;
      this.$request.goodsGradeInfo(this.gradeId).then((res) => {
        if (res.code == 200) {
          self.gradeDetail = res.data;
          if (self.needProfileModal) {
            return;
          }
          if (self.gradeDetail.learningStatus == 2) {
            uni.showModal({
              showCancel: false,
              confirmText: "确定",
              content:
                "当前课程正在申请中，正式开班后方可进行学习，请耐心等候！",
              success: function (resultst) {
                uni.navigateBack();
              },
            });
          }
          if (
            self.gradeDetail.learningStatus == 3 &&
            Number(self.gradeDetail.learningTimeStart) >
              Number(new Date() / 1000)
          ) {
            uni.showModal({
              showCancel: false,
              cancelText: "返回",
              content:
                "当前课程正在申请中，正式开班后方可进行学习，请耐心等候！",
              success: function (resultst) {
                uni.navigateBack();
              },
            });
          }
        }
      });
      this.$store.state.allowLoading = true;
    },

    deleteImg(item) {
      if (item.fieldKey == "recent_photos") {
        this.fileList1 = [];
        this.infoForm["recent_photos"] = "";
      } else if (item.fieldKey == "idcard_face_photo") {
        this.fileList2 = [];
        this.infoForm["idcard_face_photo"] = "";
      } else if (item.fieldKey == "idcard_national_photo") {
        this.fileList3 = [];
        this.infoForm["idcard_national_photo"] = "";
      }
    },

    /**
     *  getbaseprofiletpgetInfo接口返回值result.data.data不存在的话说明是第一次填写资料
     */
    getInfo() {
      var self = this;
      this.$request.getbaseprofiletpId(this.goodsId).then((res) => {
        console.log(res, "res");
        self.listData = JSON.parse(res.data.keyValue);

        self.listData.forEach((item) => {
          if (item.fieldKey == "idcard") {
            this.infoForm.idcard = this.userInfo.idCard;
          }
          if (item.fieldKey == "telphone") {
            this.infoForm.telphone = this.userInfo.telphone;
          }

          if (item.fieldKey == "name") {
            this.infoForm.name = this.userInfo.realname || "";
          }
        });
        self.isRequired = self.listData.every((ims) => {
          return ims.required === false;
        });
        this.$nextTick(() => {
          this.agreementModal = true;
        });
        self.$request
          .getbaseprofiletpgetInfo({
            goodsId: this.goodsId,
            orderGoodsId: this.orderGoodsId,
          })
          .then((result) => {
            if (result.code === 200) {
              if (!result.data) {
                self.$request
                  .getbaseprofiletplistProfile({
                    pageNum: 1,
                    pageSize: 1,
                    status: 1,
                  })
                  .then((kit) => {
                    if (kit.rows.length) {
                      var ajson = JSON.parse(kit.rows[0].keyValue);
                      self.listData.forEach((zyitem, zyindex) => {
                        for (let k in ajson) {
                          if (zyitem.fieldKey == k && ajson[k].value) {
                            if (k === "sex") {
                              const sexIndex =
                                self.dictObj["sys_user_sex"].indexOf(
                                  ajson[k].value
                                ) + "";
                              self.$set(self.infoForm, k, sexIndex);
                            } else if (k === "education") {
                              const sexIndex =
                                self.dictObj["edu_level"].indexOf(
                                  ajson[k].value
                                ) + "";
                              self.$set(self.infoForm, k, sexIndex);
                            } else if (k === "working_years") {
                              const sexIndex =
                                self.dictObj["working_years"].indexOf(
                                  ajson[k].value
                                ) + "";
                              self.$set(self.infoForm, k, sexIndex);
                            } else if (k === "recent_photos") {
                              self.$set(self.infoForm, k, ajson[k].value);
                              if (ajson[k].value) {
                                self.fileList1 = [
                                  {
                                    url: ajson[k].value,
                                  },
                                ];
                              }
                            } else if (k === "idcard_face_photo") {
                              self.$set(self.infoForm, k, ajson[k].value);
                              if (ajson[k].value) {
                                self.fileList2 = [
                                  {
                                    url: ajson[k].value,
                                  },
                                ];
                              }
                            } else if (k === "idcard_national_photo") {
                              self.$set(self.infoForm, k, ajson[k].value);
                              if (ajson[k].value) {
                                self.fileList3 = [
                                  {
                                    url: ajson[k].value,
                                  },
                                ];
                              }
                            } else {
                              if (k === "name") {
                                self.$set(
                                  self.infoForm,
                                  k,
                                  this.$store.state.userInfo.realname
                                );
                              } else if (k === "idcard") {
                                self.$set(
                                  self.infoForm,
                                  k,
                                  this.$store.state.userInfo.idCard
                                );
                              } else if (k === "telphone") {
                                self.$set(
                                  self.infoForm,
                                  k,
                                  this.$store.state.userInfo.telphone
                                );
                              } else if (k !== "commitment_electr_signature") {
                                self.$set(self.infoForm, k, ajson[k].value);
                              }
                            }
                          }
                        }
                      });
                    }
                  });
              }
              if (result.data && result.data.status === 3) {
                self.remark = result.data.text;
                self.remarkStatus = true;
                self.id = result.data.id;
                var arrays = JSON.parse(result.data.keyValue);
                self.copyData = JSON.parse(JSON.stringify(arrays));
                for (let k in arrays) {
                  if (k === "sex") {
                    if (arrays[k].value) {
                      const sexIndex =
                        self.dictObj["sys_user_sex"].indexOf(arrays[k].value) +
                        "";
                      self.$set(self.infoForm, k, sexIndex);
                    }
                  } else if (k === "education") {
                    if (arrays[k].value) {
                      const sexIndex =
                        self.dictObj["edu_level"].indexOf(arrays[k].value) + "";
                      self.$set(self.infoForm, k, sexIndex);
                    }
                  } else if (k === "working_years") {
                    if (arrays[k].value) {
                      const sexIndex =
                        self.dictObj["working_years"].indexOf(arrays[k].value) +
                        "";
                      self.$set(self.infoForm, k, sexIndex);
                    }
                  } else if (k === "recent_photos") {
                    self.$set(self.infoForm, k, arrays[k].value);
                    if (arrays[k].value) {
                      self.fileList1 = [{ url: arrays[k].value }];
                    }
                  } else if (k === "idcard_face_photo") {
                    self.$set(self.infoForm, k, arrays[k].value);
                    if (arrays[k].value) {
                      self.fileList2 = [{ url: arrays[k].value }];
                    }
                  } else if (k === "idcard_national_photo") {
                    self.$set(self.infoForm, k, arrays[k].value);
                    if (arrays[k].value) {
                      self.fileList3 = [{ url: arrays[k].value }];
                    }
                  } else {
                    self.$set(self.infoForm, k, arrays[k].value);
                  }
                }
              } else if (
                result.data &&
                (result.data.status === 1 || result.data.status === 2)
              ) {
                uni.showModal({
                  showCancel: false,
                  content:
                    result.data.status === 1
                      ? "该商品审核资料已通过，不可重复提交资料"
                      : result.data.status === 2
                      ? "该商品审核资料处于待审核状态，不可重复提交资料"
                      : "请联系管理员",
                  success: function (k) {
                    if (k.confirm) {
                      uni.navigateBack();
                    }
                  },
                });
              }
            }
          });
      });
    },
    returnName(key) {
      if (key === "sex") {
        if (this.infoForm[key]) {
          return this.dictObj["sys_user_sex"][Number(this.infoForm[key])];
        } else {
          return "请选择性别";
        }
      }
      if (key === "education") {
        if (this.infoForm[key]) {
          return this.dictObj["edu_level"][Number(this.infoForm[key])];
        } else {
          return "请选择学历";
        }
      }
      if (key === "working_years") {
        if (this.infoForm[key]) {
          return this.dictObj["working_years"][Number(this.infoForm[key])];
        } else {
          return "请选择工作年限";
        }
      }
    },
    retDraw() {
      this.$set(this.infoForm, "commitment_electr_signature", "");
      this.$nextTick(() => {
        this.$refs.esign[0].reset();
      });
    },
    uploadFile(options, int) {
      var self = this;
      return new Promise((resolve, reject) => {
        var data = {
          imageStatus: int,
          gradeId: this.gradeId,
          orderGoodsId: this.orderGoodsId,
        };
        self.$request
          .getPolicy(data)
          .then((res) => {
            var ossToken = res.data.resultContent;
            if (ossToken.host == null || ossToken.host == undefined) {
              this.$message({
                type: "warning",
                message: "上传路径报错" + JSON.stringify(res.data),
              });
              return;
            }

            let data = this.$tools.convertBase64UrlToBlob(this.faceUrl);

            this.$upload
              .upload(data, 0)
              .then((res) => {
                this.ossAvatarUrl = res;
                resolve(res);
              })
              .catch((err) => {
                this.$message({
                  type: "warning",
                  message: "上传接口报错，请重新拍照上传",
                });
                this.reTake();
              });
          })
          .catch((err) => {
            this.$message({
              type: "warning",
              message: "签名错误" + JSON.stringify(err),
            });
            return;
          });
      });
    },

    faceRecognition() {
      return new Promise((resolve) => {
        this.$request
          .faceCertificationCompareFace({
            imageA: this.faceUrl,
            orderGoodsId: this.orderGoodsId,
            gradeId: this.gradeId,
          })
          .then((res) => {
            resolve(res.data);
          })
          .catch((err) => {
            this.loading = false;
            this.$message({
              type: "warning",
              message: err.msg,
            });
          });
      });
    },
    /**
     * 点击重拍
     */
    reTake() {
      this.faceUrl = "";
      this.isTaking = true;
      this.getUserMedia({
        video: {
          width: 400,
          height: 300,
        },
      });
    },
    // 点击拍照按钮
    onPhoto() {
      // if (this.isIE) {
      //   window.webcam.capture();
      // } else {
      const canvas = document.createElement("canvas");
      canvas.width = 400;
      canvas.height = 300;
      const context = canvas.getContext("2d");
      const video = document.getElementById("video");
      context.drawImage(video, 0, 0, 400, 300);
      this.faceUrl = canvas.toDataURL("image/png");
      this.isTaking = false;
      // }
    },
    getUserMedia(constraints, success, error) {
      if (window.navigator.mediaDevices.getUserMedia) {
        // 最新的标准API
        window.navigator.mediaDevices
          .getUserMedia(constraints)
          .then(success)
          .catch(error);
      } else if (window.navigator.webkitGetUserMedia) {
        // webkit核心浏览器
        window.navigator.webkitGetUserMedia(constraints, success, error);
      } else if (window.navigator.mozGetUserMedia) {
        // firfox浏览器
        window.navigator.mozGetUserMedia(constraints, success, error);
      } else if (window.navigator.getUserMedia) {
        // 旧版API
        window.navigator.getUserMedia(constraints, success, error);
      }
    },

    photographSuccess(stream) {
      // 兼容webkit核心浏览器

      this.isTaking = true;
      this.takePhotoModal = true;

      this.$nextTick(() => {
        const video = document.getElementById("video");
        // 将视频流设置为video元素的源
        console.dir(video);
        video.srcObject = stream;
        this.mediaStreamTrack =
          typeof stream.stop === "function" ? stream : stream.getTracks()[0];
        video.play();
      });
    },
    photographError(err) {
      this.$confirm(
        "课程学习需要开启摄像头进行拍照，经检测您的设备无摄像头可使用，请检测环境是否支持。",
        "提示",
        {
          showConfirmButton: false,
          closeOnClickModal: false,
          showCancelButton: false,
          closeOnPressEscape: false,
          distinguishCancelAndClose: false,
          showClose: false,
        }
      );
    },
    /**
     * 切换科目
     */
    courseChange() {
      this.noteParams = {
        pageNum: 1,
        // pageSize: 4,
      };
      this.duration = 0;
      this.playSectionId = 0;
      this.vid = "";
      if (this.player) {
        this.player.destroy();
      }
      this.player = "";
      if (this.playerzb) {
        this.playerzb.destroy();
      }
      this.playerzb = "";
      this.vidzb = "";
      this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
      this.courseDetail(); //课程详情
      this.getGoodsDetail(); //商品详情
      this.getAnswerList(); //答疑列表
      this.getMenuList(); //学习目录
      this.getReMenuList(); //获取重修目录
      this.getNoteList(); //获取节笔记
    },
    courseDetail() {
      let self = this;
      this.$request.courseDetail(this.courseId).then((res) => {
        if (res.data.educationName == "继续教育") {
          this.$request
            .lockLockAction({
              action: "jxjy",
            })
            .then((res) => {});
          this.lockTimer = setInterval(() => {
            this.$request
              .lockLockAction({
                action: "jxjy",
              })
              .then((res) => {});
          }, 10000);
        }
        self.detail = res.data;
      });
    },
    openModule(menuItem) {
      //重修目录点击
      console.log(menuItem.list);
      menuItem.showList = !menuItem.showList;

      if (!menuItem.list.length) {
        if (menuItem.isRebuild) {
          this.getReChapterList(menuItem.id, menuItem.courseId, menuItem);
        } else {
          this.getBuyChapterList(menuItem.id, menuItem.courseId, menuItem);
        }
      }
    },
    getReChapterList(moduleId, courseId, menuItem) {
      this.$request
        .reChapterList({
          moduleId: moduleId,
          gradeId: this.gradeId,
          courseId: courseId,
          rebuild: 1,
        })
        .then((res) => {
          for (let i = 0; i < res.data.length; i++) {
            let item = res.data[i];
            item.id = item.chapterId;
            item.showList = false;
            item.list = [];
            item.parent = menuItem;
            item.isRebuild = 1;
          }
          menuItem.list = res.data;
        });
    },

    getBuyChapterList(moduleId, courseId, menuItem) {
      this.$request
        .reChapterList({
          moduleId: moduleId,
          gradeId: this.gradeId,
          courseId: courseId,
        })
        .then((res) => {
          for (let i = 0; i < res.data.length; i++) {
            let item = res.data[i];
            item.id = item.chapterId;
            item.menuType = 2;
            item.showList = false;
            item.list = [];
            item.parent = menuItem;
          }
          menuItem.list = res.data;
        });
    },
    openChapter(chapter) {
      console.log(chapter, "chapter");
      chapter.showList = !chapter.showList;
      if (!chapter.list.length) {
        if (chapter.isRebuild) {
          this.getReSectionList(
            chapter.id,
            chapter.courseId,
            chapter.moduleId || 0,
            chapter
          );
        } else {
          this.getBuySectionList(
            chapter.id,
            chapter.courseId,
            chapter.moduleId || 0,
            chapter
          );
        }
      }
    },
    getReSectionList(chapterId, courseId, moduleId, chapter) {
      this.$request
        .reSectionList({
          chapterId: chapterId,
          gradeId: this.gradeId,
          courseId: courseId,
          rebuild: 1,
          moduleId: moduleId,
        })
        .then((res) => {
          let newArr = res.data.filter((item) => {
            return item.type != 2;
          });
          chapter.canLearn = newArr.every((item) => {
            if (item.learning == 1) {
              return true;
            } else {
              return false;
            }
          });

          res.data.forEach((section) => {
            section.parent = chapter;
          });
          chapter.list = res.data;
        });
    },

    getBuySectionList(chapterId, courseId, moduleId = 0, chapter) {
      this.$request
        .reSectionList({
          chapterId: chapterId,
          gradeId: this.gradeId,
          courseId: courseId,
          moduleId: moduleId,
        })
        .then((res) => {
          let newArr = res.data.filter((item) => {
            return item.type != 2;
          });
          chapter.canLearn = newArr.every((item) => {
            if (item.learning == 1) {
              return true;
            } else {
              return false;
            }
          });

          res.data.forEach((section) => {
            section.parent = chapter;
          });
          chapter.list = res.data;
        });
    },
    getGoodsDetail() {
      let self = this;
      this.$request.goodsDetail(this.goodsId).then((res) => {
        self.goodsData = res.data;
        self.gradeId = self.goodsData.gradeId;
        if (this.goodsData.buyNote) {
          this.tabList = [
            { name: "1", label: "学员须知" },
            { name: "2", label: "课程答疑" },
            { name: "3", label: "笔记讲义" },
          ];
        } else {
          this.tabList = [
            { name: "1", label: "课程答疑" },
            { name: "2", label: "笔记讲义" },
          ];
        }
        this.courseBusiness();
        this.courseHandouts();
        if (self.goodsData.goodsPlayConfig) {
          self.goodsPlayConfig = JSON.parse(self.goodsData.goodsPlayConfig);
          if (self.goodsPlayConfig.autoPlay > 0) {
            self.autoplay = true;
          }
          if (self.goodsPlayConfig.drag > 0) {
            self.isAllowSeek = "yes";
          }
          if (self.goodsPlayConfig.speed > 0) {
            self.playbackRate = [0.5, 0.8, 1.0, 1.25, 1.5, 2.0];
          }
        }
        if (self.goodsData.goodsPhotographConfig) {
          self.goodsPhotographConfig = JSON.parse(
            self.goodsData.goodsPhotographConfig
          );
          if (self.goodsPhotographConfig.photoNum > 0) {
            self.photoNum = self.goodsPhotographConfig.photoNum;
          }
        }
      });
    },
    /**
     * 点击节
     */
    async getResource(section) {
      //逻辑

      if (section.type == 2) {
        //试卷
        console.log("试卷");
        console.log(section);
        let learnNum = await this.goodsTodayStudySectionNum();
        let hasLearn = await this.gradeCheckGoodsStudy(section.typeId);

        if (this.goodsData.sectionMaxNum > 0) {
          if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
            this.$message({
              type: "warning",
              message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
            });
            return;
          }
        }

        if (this.businessData.goodsLearningOrder == 1) {
          if (section.parent.canLearn) {
            let num = await this.bankRecordDoNum(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.goodsId,
                query: {
                  courseId: this.courseId,
                  gradeId: this.gradeId,
                  moduleId: section.moduleId || 0,
                  examId: section.typeId,
                  chapterId: section.chapterId || 0,
                  orderGoodsId: this.orderGoodsId,
                },
              });

              //没有答题次数限制
            } else if (section.answerNum == 0) {
              this.$router.push({
                path: "/course-exam/" + this.goodsId,
                query: {
                  courseId: this.courseId,
                  gradeId: this.gradeId,
                  moduleId: section.moduleId || 0,
                  examId: section.typeId,
                  chapterId: section.chapterId || 0,
                  orderGoodsId: this.orderGoodsId,
                },
              });
            } else {
              this.$message({
                type: "warning",
                message: "该试卷只能答题" + section.answerNum + "次",
              });

              return;
            }
          } else {
            this.$message({
              type: "warning",
              message: "请按顺序学完视频课程再进行练习和测试",
            });
          }
        } else if (
          this.businessData.goodsLearningOrder == 2 &&
          !section.rebuild
        ) {
          let rows = await this.studyRecordMenuAllList();
          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(section.typeId);
            //有次数限制
            if (section.answerNum - num > 0 && section.answerNum > 0) {
              console.log(this.list[index]);
              this.$router.push({
                path: "/course-exam/" + this.goodsId,
                query: {
                  courseId: this.courseId,
                  gradeId: this.gradeId,
                  moduleId: section.moduleId || 0,
                  examId: section.typeId,
                  chapterId: section.chapterId || 0,
                  orderGoodsId: this.orderGoodsId,
                },
              });
              //没有答题次数限制
            } else if (section.answerNum == 0) {
              this.$router.push({
                path: "/course-exam/" + this.goodsId,
                query: {
                  courseId: this.courseId,
                  gradeId: this.gradeId,
                  moduleId: section.moduleId || 0,
                  examId: section.typeId,
                  chapterId: section.chapterId || 0,
                  orderGoodsId: this.orderGoodsId,
                },
              });
            } else {
              this.$message({
                type: "warning",
                message: "该试卷只能答题" + section.answerNum + "次",
              });

              return;
            }
          } else {
            this.$message({
              type: "warning",
              message: "请学完视频课程再进行练习和测试",
            });
          }
        } else {
          let num = await this.bankRecordDoNum(section.typeId);
          //有次数限制
          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.goodsId,
              query: {
                courseId: this.courseId,
                gradeId: this.gradeId,
                moduleId: section.moduleId || 0,
                examId: section.typeId,
                chapterId: section.chapterId || 0,
                orderGoodsId: this.orderGoodsId,
              },
            });

            //没有答题次数限制
          } else if (section.answerNum == 0) {
            this.$router.push({
              path: "/course-exam/" + this.goodsId,
              query: {
                courseId: this.courseId,
                gradeId: this.gradeId,
                moduleId: section.moduleId || 0,
                examId: section.typeId,
                chapterId: section.chapterId || 0,
                orderGoodsId: this.orderGoodsId,
              },
            });
          } else {
            this.$message({
              type: "warning",
              message: "该试卷只能答题" + section.answerNum + "次",
            });

            return;
          }
        }
        return;
      }

      if (section.type != 2) {
        if (
          this.playSectionId &&
          (this.playSectionId == section.sectionId ||
            this.playSectionId == section.menuId) &&
          this.moduleId == (section.moduleId || 0) &&
          this.chapterId == (section.chapterId || 0)
        ) {
          //切换为同一频道不作为
          return;
        }

        //提交保存观看历史
        if (this.playSectionId) {
          this.postStudyRecord(0, this.playSectionId);
        }

        this.player &&
          this.player.HTML5.video.removeEventListener(
            "timeupdate",
            this.timeEvent
          );
        //播放视频
        this.showRecordStatus = false;//隐藏播放记录提示
        this.sectionItem = section;
        console.log(section, "section");
        this.isPlayRebuild = section.rebuild;
        this.moduleId = section.moduleId || 0;
        this.chapterId = section.chapterId || 0;
        this.playSectionId = section.sectionId || section.menuId;
        // console.log(this.moduleId, this.chapterId, this.playSectionId);
        await this.getPhotoLastRecord();
        this.recordObj = await this.getRecordLast();
        this.getNoteList();
        this.initVideo(section);
      }
    },

    bankRecordDoNum(section) {
      return new Promise((resolve) => {
        this.$request
          .bankRecordDoNum({
            goodsId: this.goodsId,
            gradeId: this.gradeId,
            chapterId: section.chapterId,
            courseId: this.courseId,
            moduleId: 0,
            examId: section.typeId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
    /**
     * 是否有上一章节
     */
    hasPreItem(rows, option) {
      let moduleId = option.moduleId;
      let chapterId = option.chapterId;
      let sectionId = option.sectionId;
      let index = 0;

      for (let i = 0; i < rows.length; i++) {
        if (
          rows[i].moduleId == moduleId &&
          rows[i].chapterId == chapterId &&
          rows[i].sectionId == sectionId
        ) {
          index = i;
          break;
        }
      }

      if (i == 0) {
        return false;
      } else {
        return true;
      }
    },
    async initVideo(option) {
      if (this.businessData.goodsLearningOrder == 2 && !option.isRebuild) {
        //要按从头到尾顺序学习, 且不是重修课程

        let rows = await this.studyRecordMenuAllList();
        if (!this.hasPreItem(rows, option)) {
          //判断是否有上一节
          let newRows = [];
          for (let i = 0; i < rows.length; i++) {
            let moduleTrue =
              rows[i].moduleId == option.moduleId || rows[i].moduleId == 0;
            let chapterTrue =
              rows[i].chapterId == option.chapterId || rows[i].chapterId == 0;
            let sectionTrue =
              rows[i].sectionId == option.sectionId ||
              rows[i].sectionId == option.menuId;
            if (moduleTrue && chapterTrue && sectionTrue) {
              break;
            } else {
              if (rows[i].sectionType != 2) {
                newRows.push(rows[i]);
              }
            }
          }

          let isAllLearn = newRows.every((item) => {
            return item.studyStatus == 1;
          });

          if (isAllLearn) {
            this.playVideo(option);
          } else {
            this.$message({
              type: "warning",
              message: "请按顺序学习视频课程",
            });
          }
        } else {
          //第一章第一节
          this.playVideo(option);
        }
      } else {
        this.playVideo(option);
      }

      return;
    },
    /**
     * 判断是否是当前播放的节
     */
    isActive(section) {
      let moduleId = section.moduleId || 0;
      let chapterId = section.chapterId || 0;
      let sectionId = section.sectionId || section.menuId;
      if (
        moduleId == this.moduleId &&
        chapterId == this.chapterId &&
        sectionId == this.playSectionId
      ) {
        return true;
      } else {
        return false;
      }
    },

    async playVideo(option) {
      if (option.sectionType == 1 || option.sectionType == 3) {
        //录播

        let learnNum = await this.goodsTodayStudySectionNum(option);
        let hasLearn = await this.gradeCheckGoodsStudy(option);
        console.log(hasLearn, "hasLearn");
        console.log(learnNum, "learnNum");
        if (this.goodsData.sectionMaxNum > 0) {
          if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
            this.$message({
              type: "warning",
              message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
            });
            return;
          }
        }
        if (!option.recordingUrl) {
          this.$message({
            type: "warning",
            message: `暂无播放地址数据`,
          });
          return;
        }

        if (this.playSectionId > 0) {
          //切换视频
          // let oldSectionId = this.playSectionId;
          // uni.$emit("changeSection", oldSectionId);
        }
        //设置播放的节ID
        await this.clears();
        this.vid = option.recordingUrl;
        this.loadPlayerScript(this.loadPlayer);
        // uni.$emit("levelId", this.levelId);
        // uni.$emit("getSection", this.menuItem);
        // uni.$emit("isRebuild", this.isRebuild);
      }
      if (option.sectionType == 2) {
        //直播

        let learnNum = await this.goodsTodayStudySectionNum(option);
        let hasLearn = await this.gradeCheckGoodsStudy(option);

        if (this.goodsData.sectionMaxNum > 0) {
          if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
            this.$message({
              type: "warning",
              message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
            });
            return;
          }
        }
        if (!option.liveUrl) {
          this.$message({
            type: "warning",
            message: `暂无直播地址数据`,
          });
        }

        //设置播放的节ID
        await this.clears();
        this.vidzb = option.liveUrl;
        this.loadPlayerScriptzb(this.loadPlayerzb);
        // uni.$emit("levelId", this.levelId);
        // uni.$emit("getChannel", this.menuItem);
        // uni.$emit("isRebuild", this.isRebuild);
        // console.log(this.menuItem, "menuItem");
      }
    },

    gradeCheckGoodsStudy(option) {
      return new Promise((resolve) => {
        this.$request
          .gradeCheckGoodsStudy({
            goodsId: this.goodsId,
            gradeId: this.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.goodsId,
            gradeId: this.gradeId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },

    studyRecordMenuAllList() {
      return new Promise((resolve) => {
        this.$request
          .studyRecordMenuAllList({
            courseId: this.courseId,
            gradeId: this.gradeId,
            goodsId: this.goodsId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
    loadPlayerzb() {
      var self = this;
      const polyvLivePlayer = window.polyvLivePlayer;
      this.playerzb = polyvLivePlayer({
        wrap: "#playerzb",
        width: 810,
        height: 455,
        uid: this.uidzb,
        vid: this.vidzb,
      });
      console.log(this.playerzb);
      this.livingTimer = setInterval(self.timeEventLiving, 1000);

      this.playerzb.on("s2j_onPlayOver", () => {
        this.$message({
          type: "success",
          message: "播放完毕",
        });
        this.postStudyRecord(1);
      });
    },
    loadPlayer() {
      var self = this;
      const polyvPlayer = window.polyvPlayer;
      console.log(polyvPlayer);
      self.$request.obtainpolyvvideosign(self.vid).then((res) => {
        console.log(res, "res2");
        self.player = polyvPlayer({
          wrap: "#player",
          width: 810,
          height: 455,
          speed: 2,
          ban_history_time: "on",
          vid: self.vid,
          teaser_show: 1,
          tail_show: 1,
          hideSwitchPlayer: true,
          watchStartTime: this.recordObj.videoCurrentTime,
          autoplay: true,
          ts: res.data.ts,
          sign: res.data.sign,
          // adMatter: [
          //   {
          //     // 广告参数详细配置
          //     location: 1, //广告位置： 1 片头广告，2 暂停广告，3 片尾广告，4 弹窗广告
          //     adtype: 2, //广告资源类型： 1 图片广告，2 视频广告，3 swf广告（flash播放器生效）
          //     matterurl: "https://www.runoob.com/try/demo_source/movie.mp4", //广告资源URL
          //     timesize: 5, //广告时长，单位：秒
          //     skipenabled: false, //是否显示跳过按钮
          //   },
          //   {
          //     // 广告参数详细配置
          //     location: 3, //广告位置： 1 片头广告，2 暂停广告，3 片尾广告，4 弹窗广告
          //     adtype: 2, //广告资源类型： 1 图片广告，2 视频广告，3 swf广告（flash播放器生效）
          //     matterurl: "https://www.runoob.com/try/demo_source/movie.mp4", //广告资源URL
          //     timesize: 5, //广告时长，单位：秒
          //     skipenabled: false, //是否显示跳过按钮
          //   },
          // ],
          playsafe: function (vid, next) {
            next();
          },
        });

        this.player.HTML5.video.addEventListener("timeupdate", self.timeEvent);
        this.player.on("s2j_onPlayStart", () => {
          if (this.recordObj.videoCurrentTime) {
            this.showRecordStatus = true;
            setTimeout(() => {
              this.showRecordStatus = false;
            }, 5000);
          } else {
            //新视频直接提交一条观看记录
            this.postStudyRecord(0);
            this.showRecordStatus = false;
          }
        });

        this.player.on("s2j_onPlayOver", () => {
          this.$message({
            type: "success",
            message: "播放完毕",
          });
          this.postStudyRecord(1);
        });
      });
    },

    timeEventLiving() {
      var polyvPlayerContext = this.playerzb;
      if (polyvPlayerContext) {
        this.liveDuration = this.liveDuration + 1; //每隔1秒
        console.log(this.liveDuration);
        if (this.liveDuration == 2) {
          //直播第2秒拍照
          if (
            this.goodsPhotographConfig.livephotograph == 1 &&
            this.sectionItem.learning != 1
          ) {
            //开启直播拍照

            polyvPlayerContext.j2s_pauseVideo();
            this.openPhoto();
          }
        }
      }
    },

    timeEvent() {
      let self = this;
      var polyvPlayerContext = this.player;
      if (polyvPlayerContext) {
        this.playTime = polyvPlayerContext.j2s_getCurrentTime(); //播放时刻
        //	console.log(this.playTime,789,this.photoHistoryList)
        //判断是否需要拍照
        if (this.photoNum > 0) {
          this.configPhoto();
          let photoTime = 0; //获取拍照秒数
          for (let i = 0; i < this.photoList.length; i++) {
            photoTime = Number(this.photoList[i]); //获取拍照秒数
            if (photoTime < this.playTime && photoTime > this.playTime - 8) {
              //3秒区间内才触发拍照，避免拉动滚动条
              if (
                this.photoHistoryList.indexOf(i) < 0 &&
                this.sectionItem.learning != 1
              ) {
                //不存在拍照历史，没有重修过，没有学过，则拍照
                //启动拍照
                //暂停

                polyvPlayerContext.j2s_pauseVideo();
                this.photoIndex = i;
                this.openPhoto();
              } else {
              }
            }
          }
        }
      }
    },

    getPhotoLastRecord() {
      return new Promise((resolve) => {
        let self = this;
        let data = {
          sectionId: parseInt(self.playSectionId),
          goodsId: parseInt(self.goodsId),
          courseId: parseInt(self.courseId),
          gradeId: parseInt(self.gradeId),
          chapterId: parseInt(self.chapterId),
          moduleId: parseInt(self.moduleId),
        };
        this.$request.getPhotoLastRecord(data).then((res) => {
          //清空历史数据
          self.photoHistoryList = [];
          this.photoIndex = 0;
          self.photoList = [];
          for (let i = 0; i < res.data.length; i++) {
            //-2存储随机拍照数组
            if (res.data[i].photoIndex == -2) {
              self.photoList = res.data[i].timeInterval.split(",");
            } else {
              self.photoHistoryList.push(res.data[i].photoIndex);
            }
          }

          resolve();
        });
      });
    },

    //拍照
    openPhoto() {
      var polyvPlayerContext = this.player;
      if (polyvPlayerContext) {
        if (this.isFullScreen()) {
          this.exitFullscreen();
        }
      }

      var polyvPlayerContext = this.playerzb;
      if (polyvPlayerContext) {
        if (this.isFullScreen()) {
          this.exitFullscreen();
        }
      }

      this.$nextTick(() => {
        if (
          (window.navigator.mediaDevices &&
            window.navigator.mediaDevices.getUserMedia) ||
          window.navigator.getUserMedia ||
          window.navigator.webkitGetUserMedia ||
          window.navigator.mozGetUserMedia
        ) {
          console.log(this.getUserMedia, "getUserMedia");
          // 调用用户媒体设备, 访问摄像头
          this.getUserMedia(
            {
              video: {
                width: 400,
                height: 300,
              },
            },
            this.photographSuccess,
            this.photographError
          );
        } else {
          this.photographError();
        }
      });
    },

    /**
     * 退出全屏
     */
    exitFullscreen() {
      try {
        var de = document;
        console.log(de);
        if (de.exitFullscreen) {
          de.exitFullscreen();
        } else if (de.mozCancelFullScreen) {
          de.mozCancelFullScreen();
        } else if (de.webkitCancelFullScreen) {
          de.webkitCancelFullScreen();
        }
      } catch (err) {}
    },

    fullele() {
      return (
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        null
      );
    },

    //判断是否全屏
    isFullScreen() {
      return !!(document.webkitIsFullScreen || this.fullele());
    },

    //配置随机拍照时间
    configPhoto() {
      var polyvPlayerContext = this.player;
      let totalVideoTime = polyvPlayerContext.j2s_getDuration();
      let duration = polyvPlayerContext.j2s_getCurrentTime();
      let photoNum = this.photoNum;
      if (!this.photoConfig) {
        this.photoConfig = true;
        //没有历史拍照间隔数据
        if (this.photoList.length == 0) {
          if (totalVideoTime >= 900) {
            //大于15分钟
            if (photoNum == 1) {
              //开头拍1张
              this.photoList.push(1);
            } else if (photoNum == 3) {
              //拍3张
              this.photoList.push(0); //开头拍一张
              let centerTime = Math.floor(totalVideoTime / 2); //获取中间时间
              let centerMinTime = centerTime - 300; //前后5分钟
              let centerMaxTime = centerTime + 300;
              let centerTakeTime = this.randomNum(centerMinTime, centerMaxTime);
              this.photoList.push(centerTakeTime); //中间拍一张
              let endMaxTime = totalVideoTime - 60;
              let endMinTime = totalVideoTime - 300;
              let endTakeTime = this.randomNum(endMinTime, endMaxTime);
              this.photoList.push(endTakeTime); //最后拍一张
            }
          } else {
            //小于15分钟，只拍前后各一张
            if (photoNum == 1) {
              //开头拍1张
              this.photoList.push(1);
            } else if (photoNum == 3) {
              //拍2张
              if (totalVideoTime <= 300) {
                //小于5分钟
                this.photoList.push(1); //开头拍一张
                let endTakeTime = this.randomNum(10, totalVideoTime); //中间随机取一张
                this.photoList.push(endTakeTime);
              } else {
                this.photoList.push(1); //开头拍一张
                let endMaxTime = totalVideoTime - 60;
                let endMinTime = totalVideoTime - 300;
                let endTakeTime = this.randomNum(endMinTime, endMaxTime);
                this.photoList.push(endTakeTime); //最后1-5分钟拍一张
              }
            }
          }
          console.log(this.photoList, "随机拍照时间数组11", photoNum);
          this.postCoursePhotoRecord(true); //提交随机拍照时间数组
        }
        console.log(this.photoList, "随机拍照时间数组");
        //兼容已有观看历史
        for (let i = 0; i < this.photoList.length - 1; i++) {
          if (
            this.photoList[i] < duration &&
            this.photoList[i + 1] > duration
          ) {
            this.photoIndex = i + 1;
            //				console.log("我的修改了photoIndex")
            break;
          }
          if (duration > this.photoList[this.photoList.length - 1]) {
            this.photoIndex = this.photoList.length - 1; //取最后一个下标
            //				console.log("我的修改了photoIndex")
            break;
          }
        }
      }
    },
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    //postTime 只提交随机时间
    postCoursePhotoRecord(postTime = false) {
      return new Promise((resolve, reject) => {
        let currentTime = 0;
        var polyvPlayerContext = this.player;
        if (polyvPlayerContext) {
          currentTime = polyvPlayerContext.j2s_getCurrentTime();
        }
        let self = this;
        let photoIndex = self.photoIndex;
        let data = {
          photo: self.ossAvatarUrl,
          sectionId: parseInt(self.playSectionId),
          goodsId: parseInt(self.goodsId),
          courseId: parseInt(self.courseId),
          photoTime: parseInt(currentTime > 0 ? currentTime : 0),
          gradeId: parseInt(self.gradeId),
          photoIndex: postTime ? -2 : parseInt(photoIndex), //从0算起,-2只提交随机时间
          photoNum: parseInt(self.photoNum),
          chapterId: parseInt(self.chapterId),
          moduleId: parseInt(self.moduleId),
          timeInterval: postTime ? self.photoList.join(",") : "",
        };
        console.log("提交接口", data);
        this.$request
          .coursePhotoRecord(data)
          .then((res) => {
            console.log(res, "res");
            resolve();
          })
          .catch((err) => {
            console.log(err, "err");
            reject();
          });
      });
    },
    /**
     * @param {String} 直播预览
     */
    loadPlayerScriptzb(callback) {
      if (!window.polyvLivePlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.playerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
    clears() {
      return new Promise((resolve, reject) => {
        this.vid = "";
        this.vidzb = "";
        if (this.player) {
          this.player.destroy();
        }
        if (this.playerzb) {
          this.playerzb.destroy();
        }
        resolve();
      });
    },

    /**
     * 提交观看记录
     */
    postStudyRecord(status = 0, sectionId = this.playSectionId) {
      let currentTime = 0;
      let PlayDuration = 0;
      var polyvPlayerContext = this.player;
      if (polyvPlayerContext) {
        currentTime = polyvPlayerContext.j2s_getCurrentTime(); //当前视频播放时刻
        PlayDuration = polyvPlayerContext.j2s_realPlayVideoTime(); //本次看的时长
      }
      if (this.vidzb) {
        currentTime = 2; //直播无法获取，无论开始结束都传2秒
      }
      let self = this;
      console.log(this);
      let data = {
        photo: self.ossAvatarUrl,
        sectionId: parseInt(this.playSectionId),
        goodsId: parseInt(this.goodsId),
        courseId: parseInt(this.courseId),
        studyDuration: parseInt(PlayDuration > 0 ? PlayDuration : 0),
        gradeId: parseInt(this.gradeId),
        chapterId: parseInt(this.chapterId),
        moduleId: parseInt(this.moduleId),
        videoCurrentTime: parseInt(currentTime > 0 ? currentTime : 0),
      };
      if (status > 0) {
        data.status = status;
      }
      this.$request
        .studyRecord(data)
        .then((res) => {
          if (status > 0) {
            //看完视频刷新父级列表
            let rebuildObj = this.getSameObj(this.sectionItem);
            this.refreshParentList(this.sectionItem, rebuildObj);
          }

          self.ossAvatarUrl = "";
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "warning",
            message: err.msg,
          });
        });
    },

    /**
     * 获取重修列表中是否有相同对象
     */
    getSameObj(metaObj) {
      let newObj = false;
      if (this.reMenuList.length) {
        console.log(this.reMenuList, "this.reMenuList");
        this.reMenuList.forEach((menu) => {
          if (menu.type == 3) {
            let isSame = this.contrast(metaObj, menu);
            if (isSame) {
              newObj = isSame;
            }
          } else {
            if (menu.list && menu.list.length) {
              menu.list.forEach((menuItem) => {
                if (menuItem.type == 1) {
                  console.log(menuItem, metaObj);
                  let isSame = this.contrast(metaObj, menuItem);
                  if (isSame) {
                    newObj = isSame;
                  }
                } else {
                  if (menuItem.list && menuItem.list.length) {
                    menuItem.list.forEach((menuChild) => {
                      if (menuChild.type == 1) {
                        let isSame = this.contrast(metaObj, menuChild);
                        if (isSame) {
                          newObj = isSame;
                        }
                      }
                    });
                  }
                }
              });
            }
          }
        });

        return newObj;
      } else {
        return false;
      }
    },

    contrast(obj1, obj2) {
      let moduleId1 = obj1.moduleId || 0;
      let chapterId1 = obj1.chapterId || 0;
      let sectionId1 = obj1.sectionId || obj1.menuId;
      let moduleId2 = obj2.moduleId || 0;
      let chapterId2 = obj2.chapterId || 0;
      let sectionId2 = obj2.sectionId || obj2.menuId;
      //转字符串后对比是否一致
      return moduleId1 == moduleId2 &&
        chapterId1 == chapterId2 &&
        sectionId1 == sectionId2
        ? obj2
        : false;
    },

    /**
     * 刷新父级列表
     */
    refreshParentList(sectionItem, rebuildObj) {
      console.log(sectionItem, "sectionItem");
      console.log(rebuildObj, "rebuildObj");
      if (sectionItem.menuId) {
        //最外层节有menuid
        //普通章节目录
        let self = this;
        this.$request
          .reMenuList({ courseId: this.courseId, gradeId: this.gradeId })
          .then((res) => {
            for (let i = 0; i < res.rows.length; i++) {
              let item = res.rows[i];
              if (item.type == 3) {
                self.menuList[i].learning = item.learning;
                self.menuList[i].rebuild = item.rebuild;
              }
            }
          });

        if (this.menuTab.length > 1) {
          //有重修目录
          this.$request
            .reMenuList({
              courseId: this.courseId,
              gradeId: this.gradeId,
              rebuild: 1,
            })
            .then((res) => {
              if (res.rows.length > 0) {
                for (let i = 0; i < res.rows.length; i++) {
                  let item = res.rows[i];
                  item.id = item.menuId;
                  item.name = item.menuName;
                  item.menuType = item.type;
                  item.showList = false;
                  item.list = [];
                  item.isRebuild = 1;
                }
                self.reMenuList = self.reMenuList.filter((reMenu) => {
                  //筛选剩下的选项
                  return res.rows.find((row) => row.menuId == reMenu.menuId);
                });
              } else {
                this.menuTab = [
                  {
                    name: "1",
                    label: "章节目录",
                  },
                ];
                this.courseTabIndex = "1";
                self.reMenuList = [];
              }
            });
        }
      } else if (!sectionItem.moduleId) {
        //第二层节没有moduleid
        this.$request
          .reSectionList({
            chapterId: sectionItem.chapterId,
            gradeId: this.gradeId,
            courseId: this.courseId,
            moduleId: 0,
          })
          .then((res) => {
            let newArr = res.data.filter((item) => {
              return item.type != 2;
            });
            sectionItem.parent.canLearn = newArr.every((item) => {
              if (item.learning == 1) {
                return true;
              } else {
                return false;
              }
            });
            res.data.forEach((section) => {
              section.isRebuild = 1;
              section.parent = sectionItem.parent;
            });

            this.menuList.forEach((menu) => {
              if (menu.menuId == sectionItem.chapterId) {
                menu.list = res.data;
              }
            });
          });

        if (this.menuTab.length > 1 && rebuildObj) {
          this.$request
            .reSectionList({
              chapterId: rebuildObj.chapterId,
              gradeId: this.gradeId,
              courseId: this.courseId,
              moduleId: 0,
              rebuild: 1,
            })
            .then((res) => {
              let newArr = res.data.filter((item) => {
                return item.type != 2;
              });
              rebuildObj.parent.canLearn = newArr.every((item) => {
                if (item.learning == 1) {
                  return true;
                } else {
                  return false;
                }
              });

              res.data.forEach((section) => {
                section.parent = rebuildObj.parent;
              });

              this.reMenuList.forEach((menu) => {
                if (menu.menuId == rebuildObj.chapterId) {
                  menu.list = res.data;
                }
              });
            });

          this.$request
            .reMenuList({
              courseId: this.courseId,
              gradeId: this.gradeId,
              rebuild: 1,
            })
            .then((res) => {
              if (res.rows.length > 0) {
                for (let i = 0; i < res.rows.length; i++) {
                  let item = res.rows[i];
                  item.id = item.menuId;
                  item.name = item.menuName;
                  item.menuType = item.type;
                  item.showList = false;
                  item.list = [];
                  item.isRebuild = 1;
                }
                self.reMenuList = self.reMenuList.filter((reMenu) => {
                  //筛选剩下的选项
                  return res.rows.find((row) => row.menuId == reMenu.menuId);
                });
              } else {
                this.menuTab = [
                  {
                    name: "1",
                    label: "章节目录",
                  },
                ];
                this.courseTabIndex = "1";
                self.reMenuList = [];
              }
            });
        }
      } else {
        //第三层节有moduleid和chapterid都有
        this.$request
          .reSectionList({
            chapterId: sectionItem.chapterId,
            gradeId: this.gradeId,
            courseId: this.courseId,
            moduleId: sectionItem.moduleId,
          })
          .then((res) => {
            let newArr = res.data.filter((item) => {
              return item.type != 2;
            });
            sectionItem.parent.canLearn = newArr.every((item) => {
              if (item.learning == 1) {
                return true;
              } else {
                return false;
              }
            });

            res.data.forEach((section) => {
              section.parent = sectionItem.parent;
            });

            this.menuList.forEach((menu) => {
              if (menu.list && menu.list.length) {
                menu.list.forEach((chapter) => {
                  if (
                    chapter.moduleId == sectionItem.moduleId &&
                    chapter.chapterId == sectionItem.chapterId
                  ) {
                    console.log(res.data, "res.data");
                    console.log(chapter.list, "chapter.list");
                    chapter.list = res.data;
                  }
                });
              }
            });
          });

        if (this.menuTab.length > 1 && rebuildObj) {
          this.$request
            .reSectionList({
              chapterId: rebuildObj.chapterId,
              gradeId: this.gradeId,
              courseId: this.courseId,
              moduleId: rebuildObj.moduleId,
              rebuild: 1,
            })
            .then((res) => {
              let newArr = res.data.filter((item) => {
                return item.type != 2;
              });
              rebuildObj.parent.canLearn = newArr.every((item) => {
                if (item.learning == 1) {
                  return true;
                } else {
                  return false;
                }
              });

              res.data.forEach((section) => {
                section.parent = rebuildObj.parent;
              });

              this.reMenuList.forEach((menu) => {
                if (menu.list && menu.list.length) {
                  menu.list.forEach((chapter) => {
                    if (
                      chapter.moduleId == rebuildObj.moduleId &&
                      chapter.chapterId == rebuildObj.chapterId
                    ) {
                      chapter.list = res.data;
                    }
                  });
                }
              });
            });

          this.$request
            .reMenuList({
              courseId: this.courseId,
              gradeId: this.gradeId,
              rebuild: 1,
            })
            .then((res) => {
              if (res.rows.length > 0) {
                for (let i = 0; i < res.rows.length; i++) {
                  let item = res.rows[i];
                  item.id = item.menuId;
                  item.name = item.menuName;
                  item.menuType = item.type;
                  item.showList = false;
                  item.list = [];
                  item.isRebuild = 1;
                }
                self.reMenuList = self.reMenuList.filter((reMenu) => {
                  //筛选剩下的选项
                  return res.rows.find((row) => row.menuId == reMenu.menuId);
                });
              } else {
                this.menuTab = [
                  {
                    name: "1",
                    label: "章节目录",
                  },
                ];
                this.courseTabIndex = "1";
                self.reMenuList = [];
              }
            });
        }
      }
    },

    getRecordLast() {
      let self = this;
      return new Promise((resolve) => {
        let data = {
          gradeId: Number(self.gradeId),
          goodsId: Number(self.goodsId),
          sectionId: Number(self.playSectionId),
          courseId: Number(self.courseId),
          chapterId: parseInt(self.chapterId),
          moduleId: parseInt(self.moduleId),
        };
        self.$request.recordLast(data).then((res) => {
          resolve(res.data);
        });
      });
    },
    /**
     * 获取笔记列表
     */
    getNoteList() {
      let self = this;
      self.noteList = [];
      let data = {
        courseId: this.courseId,
        gradeId: this.gradeId,
        goodsId: this.goodsId,
        pageNum: this.noteParams.pageNum,
        pageSize: this.noteParams.pageSize,
      };
      if (this.playSectionId > 0) {
        data.sectionId = this.playSectionId;
      }
      this.$request.noteList(data).then((res) => {
        self.noteList = res.rows;
        self.noteTotal = res.total;
      });
    },

    noteClick(note) {
      if (this.vid) {
        //切换视频
        if (this.vid == note.recordingUrl) {
          var polyvPlayerContext = this.player;
          if (polyvPlayerContext) {
            polyvPlayerContext.j2s_seekVideo(note.noteSecond);
          }
        } else {
          var polyvPlayerContext = this.player;
          if (polyvPlayerContext) {
            polyvPlayerContext.changeVid(note.recordingUrl);
          }
        }
      } else {
        var polyvPlayerContext = this.player;
        console.log(polyvPlayerContext);
        if (polyvPlayerContext) {
          polyvPlayerContext.changeVid(note.recordingUrl);
        } else {
          this.vid = note.recordingUrl;
          console.log(note.recordingUrl);
          this.moduleId = note.moduleId;
          this.chapterId = note.chapterId;
          this.playSectionId = note.sectionId;
          note.sectionType = 3;
          this.loadPlayerScript(this.loadPlayer);
        }
      }
      this.recordObj = { videoCurrentTime: note.noteSecond };
    },

    getMenuList() {
      let self = this;
      this.$request
        .reMenuList({ courseId: this.courseId, gradeId: this.gradeId })
        .then((res) => {
          for (let i = 0; i < res.rows.length; i++) {
            let item = res.rows[i];
            item.id = item.menuId;
            item.name = item.menuName;
            item.menuType = item.type;
            item.showList = false;
            item.list = [];
            item.parent = this.menuList;
          }
          self.menuList = res.rows;
        });
    },

    getReMenuList() {
      let self = this;
      this.$request
        .reMenuList({
          courseId: this.courseId,
          rebuild: 1,
          gradeId: this.gradeId,
        })
        .then((res) => {
          for (let i = 0; i < res.rows.length; i++) {
            let item = res.rows[i];
            item.id = item.menuId;
            item.name = item.menuName;
            item.menuType = item.type;
            item.showList = false;
            item.list = [];
            item.parent = this.reMenuList;
            item.isRebuild = 1;
          }
          self.reMenuList = res.rows;
          if (self.reMenuList.length > 0) {
            this.menuTab = [
              {
                name: "1",
                label: "章节目录",
              },
              {
                name: "2",
                label: "重修目录",
              },
            ];

            if (this.courseTabIndex == "2") {
              return;
            }
            this.courseTabIndex = "1";
          } else {
            this.menuTab = [
              {
                name: "1",
                label: "章节目录",
              },
            ];
            this.courseTabIndex = "1";
          }
        });
    },

    /**
     * 获取讲义权限
     */
    courseHandouts() {
      this.$request
        .courseHandouts(this.goodsData.handoutsId)
        .then((res) => {
          this.courseHandoutsData = res.data;
          const loadingTask = pdf.createLoadingTask(
            this.$tools.splitImgHost(this.courseHandoutsData.handoutsUrl)
          );
          loadingTask.promise
            .then((pdf) => {
              this.numPages = pdf.numPages;
            })
            .catch((err) => {});
        })
        .catch((err) => {});
    },

    /**
     * 获取业务层次详情
     */
    courseBusiness() {
      this.$request.courseBusiness(this.goodsData.businessId).then((res) => {
        this.businessData = res.data;
      });
    },
    /**提出答疑 */
    addAnswer() {
      if (!this.textarea) {
        this.$message.warning("请输入疑问内容");
        return;
      }
      let data = {
        courseId: this.courseId,
        goodsId: this.goodsId,
        orderGoodsId: this.orderGoodsId,
        answerText: this.textarea,
      };
      this.$request.addAnswer(data).then((res) => {
        this.textarea = "";
        this.getAnswerList();
      });
    },
    /**回复 */
    answerBack(row) {
      this.$prompt(`${row.realname}：${row.answerText}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          if (!value) {
            this.$message.warning("请输入回复内容");
            return;
          }

          let data = {
            assignUserId: row.userId,
            assignAnswerId: row.answerId,
            courseId: this.courseId,
            goodsId: this.goodsId,
            orderGoodsId: this.orderGoodsId,
            answerText: value,
            assignAnswerText: row.assignAnswerText,
          };
          this.$request.addAnswer(data).then((res) => {
            this.getAnswerList();
          });
        })
        .catch(() => {});
    },
    getAnswerList() {
      let self = this;
      this.$request
        .answerList({ courseId: this.courseId, goodsId: this.goodsId })
        .then((res) => {
          let data1 = [];
          let data2 = [];
          let copydata2 = [];
          res.rows.forEach((item) => {
            if (!item.assignAnswerId) {
              data1.push(item);
            } else {
              data2.push(item);
              copydata2.push(item);
            }
          });
          data2.forEach((item, index) => {
            //回复层
            data1.forEach((items) => {
              //提问层
              if (items.answerId === item.assignAnswerId) {
                if (
                  items.newArraysAnswerList &&
                  items.newArraysAnswerList.length
                ) {
                  items.newArraysAnswerList.push(item);
                } else {
                  items.newArraysAnswerList = [item];
                }
                let indexInd = copydata2.findIndex((itemsxs) => {
                  return itemsxs.answerId === item.answerId;
                });
                if (indexInd !== -1) {
                  copydata2.splice(indexInd, 1);
                }
              }
            });
          });
          console.log(copydata2);
          copydata2.forEach((it) => {
            for (let i = 0; i < data1.length; i++) {
              const STATUS = data1[i].newArraysAnswerList.some((items) => {
                return items.answerId === it.assignAnswerId;
              });
              if (STATUS) {
                data1[i].newArraysAnswerList.push(it);
                break;
              }
            }
          });
          self.answerList = data1;
        });
    },
    courseCourseList() {
      this.param.goodsId = this.goodsId;
      this.param.gradeId = this.gradeId;
      this.$request.courseCourseList(this.param).then((res) => {
        this.courseList.push(...res.rows);
        if (!this.courseId) {
          this.courseId = this.courseList[0].courseId;
        }
        this.param.total = res.total;
        this.courseChange();
      });
    },

    download(url, fileName) {
      let xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.setRequestHeader("Content-Type", `application/pdf`);
      xhr.responseType = "blob";
      let that = this;
      xhr.onload = function () {
        if (this.status == 200) {
          //接受二进制文件流
          var blob = this.response;
          that.downloadExportFile(blob, fileName);
        }
      };
      xhr.send();
    },

    downloadExportFile(blob, tagFileName) {
      let downloadElement = document.createElement("a");
      let href = "";
      if (typeof blob == "string") {
        downloadElement.target = "_blank";
      } else {
        href = window.URL.createObjectURL(blob); //创建下载的链接
      }
      downloadElement.href = href;
      downloadElement.download = tagFileName;
      //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      if (typeof blob != "string") {
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }
    },

    print() {
      document.getElementById("printIframe").contentWindow.print();
    },

    previvew(url) {
      this.showPdf = true;
    },
    noteSubmit() {
      let self = this;
      if (!(this.playSectionId > 0)) {
        this.$message({
          message: "目前无播放视频",
          type: "warning",
        });
        return;
      }
      if (!this.textareaNote) {
        this.$message({
          message: "请输入内容",
          type: "warning",
        });
        return;
      }
      if (!this.gradeId) {
        this.$message({
          message: "暂无班级数据",
          type: "warning",
        });
        return;
      }
      var polyvPlayerContext = this.player;
      let noteDate = this.$tools.getZeroTime();
      let noteSecond = polyvPlayerContext.j2s_getCurrentTime();
      if (!noteSecond) {
        if (noteSecond == 0) {
          //播放结束
          noteSecond = polyvPlayerContext.j2s_getDuration();
          console.log(noteSecond, 63398);
        }
        if (!noteSecond) {
          this.$message({
            message: "视频暂未开始",
            type: "warning",
          });
          return;
        }
      }
      let data = {
        gradeId: this.gradeId,
        goodsId: this.goodsId,
        sectionId: this.playSectionId,
        courseId: this.courseId,
        noteText: this.textareaNote,
        noteDate: noteDate,
        noteSecond: noteSecond,
        moduleId: this.moduleId,
        chapterId: this.chapterId,
      };
      this.$request.postNote(data).then((res) => {
        this.$message({
          message: "发布成功",
          type: "success",
        });
        self.getNoteList();
        this.textareaNote = "";
      });
    },

    del(item) {
      console.log(item);
      let data = { answerId: item.answerId, status: -1 };
      this.$request.delAnswer(data).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.getAnswerList();
      });
    },
    /**
     * 打印
     */
    printView(url) {
      console.log("触发打印", url);
      printJS({
        printable: url,
        type: "pdf",
        header: null,
        targetStyles: ["*"],
        style: "@page {margin:0 10mm}",
      });
      // this.print(url);
    },
    // 打印方法
    print(filePath) {
      console.log("执行打印");
      let iframe = document.createElement("iframe");
      iframe.style.border = "0px";
      iframe.style.position = "absolute";
      iframe.style.width = "0px";
      iframe.style.height = "0px";
      iframe.style.right = "0px";
      iframe.style.top = "0px";
      iframe.setAttribute("src", filePath);
      iframe.onload = () => {
        iframe.contentWindow.print();
        // setTimeout(() => {
        //     document.body.removeChild(iframe);
        // });
      };
      document.body.append(iframe);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.course-detail {
  .section {
    padding-bottom: 30px;
    &__header {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }

    &__body {
      .course-info {
        &__header {
          .left-box {
            width: 810px;
            height: 455px;
            float: left;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            position: relative;
            .video {
              width: 100%;
              height: 100%;
            }
          }
          .recordStyle {
            position: absolute;
            bottom: 90px;
            padding: 6px 12px;
            left: 8px;
            background-color: rgba(0, 0, 0, 0.4);
            color: #fff;
            border-radius: 24px;
            user-select: none;
            .btn_sty {
              cursor: pointer;
            }
          }

          .right-box {
            width: 462px;
            height: 455px;
            background: #060e1a;
            border-radius: 0px;
            float: right;

            &__header {
              .tabs {
                /deep/.el-tabs__nav-wrap::after {
                  background-color: #999;
                }

                /deep/ .el-tabs__header {
                  margin: 0;
                }

                .label {
                  color: #fff;
                  height: 40px;
                  line-height: 40px;
                  padding: 0 20px;
                }

                .item {
                  &__title {
                    padding-left: 12px;
                    height: 40px;
                    line-height: 40px;
                    cursor: pointer;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #fff;

                    .el-icon-caret-right,
                    .el-icon-caret-bottom {
                      color: #999;
                    }
                  }

                  &__content {
                    .bank-chapter {
                      &__item {
                        color: #fff;
                        font-size: 14px;

                        &__text {
                          height: 40px;
                          line-height: 40px;
                          padding-left: 24px;
                          cursor: pointer;
                          flex: 1;

                          .el-icon-caret-right,
                          .el-icon-caret-bottom {
                            color: #999;
                          }
                        }
                      }
                    }

                    .bank-section {
                      &__item {
                        color: #fff;
                        font-size: 14px;
                        display: flex;
                        align-items: center;

                        &.active {
                          background: #132b4d;
                          font-size: 14px;
                          font-family: Microsoft YaHei;
                          font-weight: bold;
                          color: #3f8dfd;
                        }

                        &__text {
                          padding-left: 12px;
                          flex: 1;
                          height: 40px;
                          line-height: 40px;
                          cursor: pointer;

                          .el-icon-caret-right,
                          .el-icon-caret-bottom {
                            color: #999;
                          }
                        }

                        .test-btn {
                          margin-left: 10px;
                          width: 32px;
                          height: 20px;
                          background: #007aff;
                          border-radius: 4px;
                          line-height: 18px;
                          color: #fff;
                          text-align: center;
                        }

                        .note {
                          margin-left: 10px;
                          width: 32px;
                          height: 20px;
                          border: 1px solid #ff3b30;
                          border-radius: 4px;
                          line-height: 18px;
                          color: #ff3b30;
                          text-align: center;

                          &--yellow {
                            border-color: #ff9500;
                            color: #ff9500;
                          }

                          &--blue {
                            border-color: #3f8dfd;
                            color: #3f8dfd;
                          }
                        }

                        .during {
                          color: #999;
                          margin-right: 10px;
                        }

                        .btn {
                          margin-right: 12px;
                          width: 48px;
                          height: 20px;
                          border: 1px solid #ff3b30;
                          background: #ff3b30;
                          border-radius: 4px;
                          line-height: 18px;
                          color: #fff;
                          text-align: center;

                          &--green {
                            border: 1px solid #34c759;
                            background: #34c759;
                          }
                        }

                        .live-btn {
                          margin-left: 20px;
                          width: 60px;
                          height: 20px;
                          border-radius: 4px;
                          background: #eeeeee;
                          line-height: 18px;
                          color: #666666;
                          text-align: center;

                          &--yellow {
                            background: #fff7eb;
                            color: #ff9500;
                          }

                          &--blue {
                            border-color: #ebf4ff;
                            color: #007aff;
                          }
                        }
                      }
                    }
                  }
                }
              }

              .title {
                height: 40px;
                border-bottom: 1px solid #999;
                color: #fff;

                .select {
                  width: 100%;
                }

                /deep/ .el-input__icon {
                  width: 20px;
                  height: 20px;
                  border: 1px solid #fff;
                  border-radius: 4px;
                  margin-top: 10px;
                  line-height: 20px;
                }

                /deep/ .el-input__inner {
                  color: #fff;
                  font-size: 16px;
                  background: none;
                  border: 0;
                }
              }
            }

            &__body {
              height: 374px;
              overflow-y: scroll;
              &::-webkit-scrollbar {
                width: 6px;
              }
              &::-webkit-scrollbar-track {
                background-color: #060e1a;
                -webkit-border-radius: 2em;
                -moz-border-radius: 2em;
                border-radius: 2em;
              }
              &::-webkit-scrollbar-thumb {
                background-color: #eeeeee;
                -webkit-border-radius: 2em;
                -moz-border-radius: 2em;
                border-radius: 2em;
              }
            }
          }
        }

        &__body {
          /deep/ .el-tabs__item {
            padding: 0 20px !important;
            height: 80px;
            line-height: 80px;
          }

          .course-img {
            width: 100%;
          }

          .course-menu {
            margin-top: 25px;
            .left-box {
              width: 948px;
              float: left;

              &__header {
                padding-right: 50px;
                position: relative;
                .item {
                  width: auto;
                  margin-right: 24px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  background: #eeeeee;
                  border-radius: 8px;
                  padding: 12px;
                  position: relative;

                  &.canlearn {
                    background: #3f8dfd;
                    color: #fff;
                  }
                }
              }

              &__body {
                .item {
                  margin-top: 24px;
                  padding: 16px;
                  background: #eee;
                  border-radius: 10px;

                  &__title {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #333333;

                    .note {
                      display: inline-block;
                      margin-left: 20px;
                      width: 40px;
                      height: 24px;
                      border: 1px solid #ff3b30;
                      border-radius: 8px;
                      line-height: 22px;
                      color: #ff3b30;
                      text-align: center;
                    }
                  }

                  &__content {
                    margin-top: 12px;
                    background: #f5f7fa;
                  }
                }
              }
            }

            .right-box {
              width: 323px;
              float: right;
              .title {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                text-shadow: 0px 6px 6px rgba(85, 158, 255, 0.08);
                position: relative;

                .more {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #999999;
                  position: absolute;
                  right: 0;
                  top: 10px;
                }
              }

              .list {
                .course-item {
                  margin: 110px 9px 0;
                  width: 300px;
                  height: 178px;
                  background: #ffffff;
                  box-shadow: 0px 10px 13px 3px rgba(63, 141, 253, 0.1);
                  border-radius: 10px;
                  position: relative;
                  background: #fff;
                  padding-top: 100px;

                  &__img {
                    width: 280px;
                    height: 178px;
                    background: #ffffff;
                    box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
                    border-radius: 10px;
                    position: absolute;
                    left: 10px;
                    top: -78px;
                    background: rgba(122, 136, 246, 1);
                    overflow: hidden;

                    .note {
                      width: 80px;
                      height: 24px;
                      background: #d94404;
                      box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
                      border-radius: 10px 0px 20px 0px;
                      text-align: center;
                      line-height: 24px;
                      color: #fff;
                    }
                  }

                  &__title {
                    margin: 0 8px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    line-height: 24px;
                  }

                  &__desc {
                    height: 32px;
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin-left: 8px;
                    display: flex;
                    justify-content: space-between;

                    .price {
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #ff2d55;
                      line-height: 32px;
                    }

                    .add {
                      display: block;
                      width: 118px;
                      height: 32px;
                      line-height: 30px;
                      background: #f2f4f7;
                      border-radius: 10px 0px 10px 0px;
                      font-size: 16px;
                      color: #3f8dfd;
                      text-align: center;

                      &:hover {
                        background: #3f8dfd;
                        color: #f2f4f7;
                      }
                    }
                  }
                }
              }
            }
          }

          .answer-question {
            &__header {
              border-bottom: 1px solid #eee;
              .textarea-wrap {
                background: #f9f9f9;
                border: 1px solid #eeeeee;
                border-radius: 8px;

                .textarea {
                  height: 100%;
                }
              }

              .submit {
                padding: 10px 20px;
                border-radius: 20px;
                text-align: center;
                font-size: 16px;
                margin: 10px 0;
                float: right;
              }
            }

            &__body {
              .question-list {
                &__item {
                  padding: 20px 0;
                  display: flex;

                  &__avatar {
                    width: 40px;
                    height: 40px;
                    display: table-cell;
                    border-radius: 50%;
                    text-align: center;

                    img {
                      display: inline-block;
                      vertical-align: middle;
                      max-width: 100%;
                      max-height: 100%;
                    }
                  }

                  &__content {
                    flex: 1;
                    border-bottom: 1px solid #ccc;
                    margin-left: 10px;

                    .nickname {
                      font-size: 14px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #333333;
                      line-height: 24px;
                    }

                    .desc {
                      font-size: 14px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #666666;
                      line-height: 24px;
                    }

                    .time {
                      font-size: 14px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #999999;
                      line-height: 24px;

                      .replay {
                        float: right;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #3f8dfd;
                        line-height: 24px;
                        margin-right: 20px;
                      }

                      .del {
                        float: right;
                        cursor: pointer;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #ff3b30;
                        line-height: 24px;
                        margin-right: 20px;
                      }
                    }

                    .reply-list {
                      margin: 20px 0;
                      width: 100%;
                      background: #f9f9f9;
                      border-radius: 8px;
                      padding: 0 0 0 20px;

                      &__item {
                        padding: 20px 0;
                        display: flex;
                        border-bottom: 1px solid #ccc;

                        &:nth-last-of-type(1) {
                          border: 0;
                        }

                        &__avatar {
                          width: 40px;
                          height: 40px;
                          display: table-cell;
                          border-radius: 50%;
                          text-align: center;

                          img {
                            display: inline-block;
                            vertical-align: middle;
                            max-width: 100%;
                            max-height: 100%;
                          }
                        }

                        &__content {
                          border-radius: 8px;
                          flex: 1;
                          margin-left: 10px;

                          .nickname {
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: bold;
                            color: #333333;
                            line-height: 24px;
                          }

                          .desc {
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #666666;
                            line-height: 24px;
                          }

                          .time {
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #999999;
                            line-height: 24px;

                            .reply {
                              float: right;
                              font-size: 14px;
                              font-family: Microsoft YaHei;
                              font-weight: 400;
                              color: #3f8dfd;
                              line-height: 24px;
                              margin-right: 20px;
                              cursor: pointer;
                              user-select: none;
                            }

                            .del {
                              cursor: pointer;
                              margin-right: 20px;
                              float: right;
                              font-size: 14px;
                              font-family: Microsoft YaHei;
                              font-weight: 400;
                              color: #ff3b30;
                              line-height: 24px;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .lecture-notes {
            &__content {
              .left-box {
                float: left;
                width: 462px;

                .textarea {
                  border-bottom: 1px solid #eee;
                  .submit {
                    float: right;
                    width: 138px;
                    padding: 10px 0;
                    margin: 10px 0 25px 0;
                    border-radius: 20px;
                    text-align: center;
                    font-size: 16px;
                  }
                }

                .note-list {
                  &__content {
                    border-bottom: 1px solid #eee;
                    &__title {
                      width: 216px;
                      height: 24px;
                      background: #ccc;
                      border-radius: 24px;
                      font-size: 14px;
                      color: #666666;
                      text-align: center;
                      line-height: 24px;
                      margin: 20px 0;
                    }
                  }
                  &__item {
                    display: flex;
                    padding: 15px;
                    .el-icon-video-play {
                      cursor: pointer;
                      font-size: 20px;
                      color: #3f8dfd;
                    }

                    &__content {
                      flex: 1;
                      margin-left: 10px;

                      .title {
                        cursor: pointer;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        color: #3f8dfd;
                        line-height: 24px;
                      }

                      .desc {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #666666;
                        line-height: 24px;
                      }

                      .time {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #999999;
                        line-height: 24px;
                      }
                    }
                  }
                }

                .pagination {
                  margin-top: 30px;
                  text-align: center;
                }
              }

              .right-box {
                width: 786px;
                float: right;

                .lecture-list {
                  background: #f5f7fa;
                  border-radius: 8px;
                  &__header {
                    padding: 0 16px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #333333;

                    .slide-btn {
                      cursor: pointer;
                      float: right;
                      font-size: 14px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #999999;
                    }
                  }

                  &__body {
                    .list {
                      &__item {
                        border-top: 1px solid #fff;
                        padding: 0 8px 0 16px;
                        height: 56px;
                        line-height: 55px;
                        display: flex;
                        align-items: center;
                        .title {
                          flex: 1;
                          font-size: 16px;
                          font-family: Microsoft YaHei;
                          font-weight: 400;
                          color: #333333;
                        }

                        .btns {
                          .btn {
                            cursor: pointer;
                            display: inline-block;
                            vertical-align: middle;
                            width: 80px;
                            height: 32px;
                            background: #ffffff;
                            border: 1px solid #3f8dfd;
                            border-radius: 16px;
                            text-align: center;
                            line-height: 30px;
                            color: #3f8dfd;
                            margin: 0 8px;
                          }
                        }
                      }
                    }
                  }

                  &__footer {
                    margin-top: 24px;
                    .lecture-scan {
                      background: #f5f7fa;
                      border-radius: 8px;
                      overflow: hidden;
                      &__header {
                        height: 40px;
                        line-height: 40px;
                        padding: 0 16px;
                        font-size: 16px;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        color: #333333;
                      }

                      &__body {
                        height: 800px;
                        text-align: center;
                        overflow-y: scroll;

                        .iframe {
                          width: 100%;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .take-photo {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__close {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: -28px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #eee;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    &__header {
      height: 40px;
      border-bottom: 1px solid #eee;
      line-height: 40px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      padding-left: 24px;
    }

    &__body {
      height: 400px;
      padding: 40px 24px;
      .left-box {
        width: 336px;
        float: left;

        .title {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ff3b30;
          line-height: 24px;
        }

        .content {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          line-height: 28px;
          margin-top: 32px;
        }
      }

      .right-box {
        float: right;
        width: 400px;
        height: 300px;

        video {
          width: 100%;
          height: 100%;
        }
      }
    }

    &__footer {
      height: 90px;
      border-top: 1px solid #eee;
      text-align: center;
      .take {
        display: inline-block;
        width: 200px;
        height: 40px;
        padding: 0;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        margin: 24px auto;
      }
    }
  }

  .info {
    &__content {
      height: 500px;
      overflow-y: scroll;

      .handCenter {
        width: 600px;
        height: 300px;
        background: #ccc;
      }

      .upload-box {
        display: inline-block;
        vertical-align: top;

        .el-icon-error {
          cursor: pointer;
          z-index: 99;
          position: absolute;
          left: 100%;
          bottom: 100%;
          font-size: 20px;
          color: red;
        }
      }
    }
  }
}
</style>