zc_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>
                <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"
                            >提出疑问</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">
                                  <template v-if="item.assignRealname">
                                    {{ item.assignRealname }}
                                  </template>
                                  <template v-else>
                                    {{
                                      item.assignUserId > 0 && !item.realname
                                        ? "祥粤老师"
                                        : item.realname
                                    }}
                                  </template>
                                </div>
                                <div class="desc">
                                  <template v-if="item.assignRealname"
                                    >我猜这堂课没人听了不会做美梦吧。</template
                                  >
                                  <template v-else>
                                    {{ item.answerText }}
                                  </template>
                                </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.assignRealname"
                                >
                                  <div class="reply-list__item">
                                    <div class="reply-list__item__avatar">
                                      <img
                                        :src="$tools.splitImgHost(item.avatar)"
                                        alt=""
                                      />
                                    </div>
                                    <div class="reply-list__item__content">
                                      <div class="nickname">
                                        {{
                                          item.assignUserId > 0 &&
                                          !item.realname
                                            ? "祥粤老师"
                                            : item.realname
                                        }}
                                      </div>
                                      <div class="desc">
                                        {{ item.answerText }}
                                      </div>
                                      <div class="time">
                                        {{
                                          $tools.timestampToTime(
                                            item.createTime,
                                            false
                                          )
                                        }}
                                        <!-- <div class="del" v-if="index % 2 == 0">
                                          删除
                                        </div>
                                        <div class="reply" v-else>回复</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">
                              <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">打印</div> -->
                                      <div
                                        class="btn"
                                        @click="
                                          download(
                                            $tools.splitImgHost(
                                              courseHandoutsData.handoutsUrl
                                            ),
                                            courseHandoutsData.urlName
                                          )
                                        "
                                      >
                                        下载
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="lecture-list__footer">
                              <div class="lecture-scan">
                                <div class="lecture-scan__header">
                                  {{ courseHandoutsData.urlName }}
                                </div>
                                <div class="lecture-scan__body">
                                  <iframe
                                    class="iframe"
                                    :src="
                                      $tools.splitImgHost(
                                        courseHandoutsData.handoutsUrl
                                      )
                                    "
                                    frameborder="0"
                                  ></iframe>
                                  <!-- <img src="@/assets/banner.png" alt="" /> -->
                                </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"
            @click="reTake"
            >重拍</el-button
          >
          <el-button
            type="primary"
            v-if="!isTaking"
            class="take"
            @click="takeOk"
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog>

    <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";
export default {
  name: "CourseDetail",
  components: {
    Footer,
    Header,
    ToolBar,
  },
  data() {
    return {
      recordObj: {},
      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: "",
      sectionItem: {},
      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: [],
      noteList: [],
      photoList: [],
      noteTotal: 0,
      duration: 0,
      noteParams: {
        pageNum: 1,
        pageSize: 4,
      },
      ossAvatarUrl: "", //照片地址
      nowTime: 0,
      faceUrl: "",
      loading: null,
    };
  },
  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;

    this.courseCourseList();
  },
  beforeDestroy() {
    try {
      this.$msgbox.close();
    } catch (err) {}
  },
  methods: {
    async takeOk() {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.1)",
        target: document.querySelector(".section__body"),
      });
      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.loading.close();
            this.$message({
              type: "success",
              message: "拍照成功",
            });
            this.takePhotoModal = false;
            this.isTaking = false;
            var polyvPlayerContext = this.player;
            if (polyvPlayerContext) {
              polyvPlayerContext.j2s_resumeVideo();
            }
          })
          .catch((err) => {
            this.loading.close();
            console.log(err, "err");
            this.$message({
              type: "warning",
              message: "上传接口报错，请重新拍照上传",
            });
            this.reTake();
          });
      } else {
        this.$message({
          type: "warning",
          message: "人脸匹配不通过，请重新拍照上传",
        });

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

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

    uploadFile(options, int) {
      var self = this;
      return new Promise((resolve, reject) => {
        var data = {
          imageStatus: int,
          gradeId: this.gradeId,
        };
        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.data),
            });
            return;
          });
      });
    },

    faceRecognition() {
      return new Promise((resolve) => {
        this.$request
          .faceCertificationCompareFace({
            imageA: this.faceUrl,
            orderGoodsId: this.orderGoodsId,
            gradeId: this.gradeId,
          })
          .then((res) => {
            console.log(res, "res");
            resolve(res.data);
          })
          .catch((err) => {
            this.loading.close();
            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 = "";
      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.sectionItem = section;
        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() {
      const polyvLivePlayer = window.polyvLivePlayer;
      this.playerzb = polyvLivePlayer({
        wrap: "#playerzb",
        width: 810,
        height: 455,
        uid: this.uidzb,
        vid: this.vidzb,
      });
    },
    loadPlayer() {
      var self = this;
      const polyvPlayer = window.polyvPlayer;
      self.$request.obtainpolyvvideosign(self.vid).then((res) => {
        self.player = polyvPlayer({
          wrap: "#player",
          width: 810,
          height: 455,
          speed: 2,
          vid: self.vid,
          watchStartTime: this.recordObj.videoCurrentTime,
          autoplay: true,
          teaser_show: 0,
          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.postStudyRecord(0);
          }
        });

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

    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();
        }
      }

      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) => {
              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 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;
                }
              });
            });
        }
      } 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;
                    }
                  });
                }
              });
            });
        }
      }
    },

    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) {
        //切换视频
        var polyvPlayerContext = this.player;
        polyvPlayerContext.changeVid(note.recordingUrl);
      } else {
        this.vid = note.recordingUrl;
        note.sectionType = 3;
        this.initVideo(note);
      }
      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: "重修目录",
              },
            ];
            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;
        })
        .catch((err) => {});
    },

    /**
     * 获取业务层次详情
     */
    courseBusiness() {
      this.$request.courseBusiness(this.goodsData.businessId).then((res) => {
        this.businessData = res.data;
      });
    },
    getAnswerList() {
      let self = this;
      this.$request
        .answerList({ courseId: this.courseId, goodsId: this.goodsId })
        .then((res) => {
          self.answerList = res.rows;
        });
    },
    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) {
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      a.download = fileName;
      a.href = url;
      a.dispatchEvent(event);
    },

    previvew(url) {
      window.open(url, "_blank");
    },
    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,
      };
      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();
      });
    },
  },
};
</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;

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

          .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: 32px;
                          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;
                            }

                            .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;

                        .iframe {
                          width: 100%;
                          height: 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;
      }
    }
  }
}
</style>