<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"
                                            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.isRebuild ||
                                                    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>
                                        </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"
                                            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.isRebuild ||
                                                    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>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>

                                <template v-if="menu.type == 3">
                                  <div class="item__content">
                                    <div class="bank-section">
                                      <div
                                        class="bank-section__item"
                                        @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.isRebuild || 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"
                                            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.isRebuild ||
                                                    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>
                                        </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"
                                            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.isRebuild ||
                                                    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>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>

                                <template v-if="menu.type == 3">
                                  <div class="item__content">
                                    <div class="bank-section">
                                      <div
                                        class="bank-section__item"
                                        @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.isRebuild || 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="initVideo(note)"
                                  ></i>
                                  <div class="note-list__item__content">
                                    <div class="title" @click="initVideo(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"
                              >
                              </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"></div>
        </div>
        <div class="take-photo__footer">
          <div class="take">拍照</div>
        </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 {
      playSectionId: 0,
      menuTab: [],
      lectureShow: true,
      textarea: "",
      textareaNote: "",
      takePhotoModal: false,
      activeName: "1",
      courseId: "",
      courseTabIndex: "1",
      goodsId: "",
      gradeId: "",
      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: [],
      noteTotal: 0,
      duration: 0,
      noteParams: {
        pageNum: 1,
        pageSize: 4,
      },
      nowTime: 0,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    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();
  },
  methods: {
    /**
     * 切换科目
     */
    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 = [];
          }
          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 = [];
          }
          menuItem.list = res.data;
        });
    },
    openChapter(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;
            }
          });
          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;
            }
          });
          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;
          }
        }
      });
    },
    /**
     * 点击节
     */
    getResource(section) {
      //逻辑

      if (section.type == 2) {
        //试卷
        console.log("试卷");
        return;
      }

      if (section.type != 2) {
        //播放视频
        this.playSectionId = section.sectionId;
        this.getNoteList();
        this.initVideo(section);
      }
    },
    async initVideo(option) {
      await this.clears();
      console.log(option);
      if (option.sectionType === 2) {
        this.vidzb = option.liveUrl;
        this.loadPlayerScriptzb(this.loadPlayerzb);
      } else {
        this.vid = option.recordingUrl;
        this.duration = option.noteSecond || option.durationTime || 0;
        this.loadPlayerScript(this.loadPlayer);
      }
    },
    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.duration,
          autoplay: true,
          teaser_show: 0,
          ts: res.data.ts,
          sign: res.data.sign,
          playsafe: function (vid, next) {
            next();
          },
        });
      });
    },
    /**
     * @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();
      });
    },
    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;
      });
    },

    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.down = true;
            item.id = item.menuId;
            item.name = item.menuName;
            item.menuType = item.type;
            item.showList = false;
            item.list = [];
          }
          self.menuList = res.rows;
          console.log(this.menuList);
        });
    },

    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.down = true;
            item.id = item.menuId;
            item.name = item.menuName;
          }
          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;
      });
    },

    /**
     * 获取业务层次详情
     */
    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);
        this.courseId = this.courseList[0].courseId;
        this.param.total = res.total;
        this.courseChange();
      });
    },

    download(url, fileName) {
      let xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.setRequestHeader("Content-Type", `application/pdf`);
      xhr.responseType = "blob";
      let that = this;
      xhr.onload = function () {
        if (this.status == 200) {
          //接受二进制文件流
          var blob = this.response;
          that.downloadExportFile(blob, fileName);
        }
      };
      xhr.send();
    },
    downloadExportFile(blob, tagFileName) {
      let downloadElement = document.createElement("a");
      let href = blob;
      if (typeof blob == "string") {
        downloadElement.target = "_blank";
      } else {
        href = window.URL.createObjectURL(blob); //创建下载的链接
      }
      downloadElement.href = href;
      downloadElement.download = tagFileName;
      //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      if (typeof blob != "string") {
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }
    },
    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.$method.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;

                        &__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;

        background: #000;
      }
    }

    &__footer {
      height: 90px;
      border-top: 1px solid #eee;
      .take {
        width: 200px;
        height: 40px;
        background: #3f8dfd;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        margin: 24px auto;
      }
    }
  }
}
</style>
