zc_saas_pc/src/pages/goods-detail/course-detail.vue

<template>
  <div class="goods-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="goods-info">
              <div class="goods-info__header">
                <div class="img">
                  <img
                    :src="$tools.splitImgHost(goodsDetail.coverUrl, false)"
                    alt=""
                  />
                </div>
                <div class="text">
                  <div class="title">
                    {{ goodsDetail.goodsName }}
                  </div>
                  <div class="desc">
                    {{ courseList.length }} 课程
                    {{ goodsDetail.classHours || "-" }}学时
                  </div>
                  <div class="price" v-if="goodsDetail.standPrice === 0">
                    免费
                  </div>
                  <div class="price" v-else>
                    ￥{{ goodsDetail.standPrice | toFixed }}
                  </div>
                  <div class="btns">
                    <el-button
                      type="primary"
                      round
                      class="buynow"
                      @click="buyNow()"
                      >立即购买</el-button
                    >
                    <el-button
                      type="primary"
                      round
                      plain
                      class="add"
                      @click="addCart()"
                      >加入购物车</el-button
                    >
                  </div>
                </div>
              </div>
              <div class="goods-info__body">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="课程详情" name="1">
                    <div class="detail" v-html="goodsDetail.pcDetailHtml"></div>
                  </el-tab-pane>
                  <el-tab-pane label="章节目录" name="2">
                    <div slot="label" style="position: relative">
                      <span class="label">章节目录</span>
                      <span v-if="listenConfigList.length" class="view-note"
                        >试看</span
                      >
                    </div>
                    <div class="goods-menu clearfix">
                      <div class="left-box">
                        <div class="left-box__body">
                          <div
                            class="course-list-item"
                            v-for="(course, index) in courseList"
                            :key="index"
                          >
                            <div
                              class="course-list-item__title"
                              @click="openCourse(course)"
                            >
                              <i
                                :class="{
                                  'el-icon-caret-right': !course.showList,
                                  'el-icon-caret-bottom': course.showList,
                                }"
                              ></i>
                              {{ course.courseName }}
                            </div>
                            <template v-if="course.showList">
                              <div
                                class="item"
                                v-for="(item, index) in course.list"
                                :key="index"
                              >
                                <template v-if="item.type == 1">
                                  <div
                                    class="item__title"
                                    @click="openModule(item)"
                                  >
                                    <i
                                      :class="{
                                        'el-icon-caret-right': !item.showList,
                                        'el-icon-caret-bottom': item.showList,
                                      }"
                                    ></i>
                                    {{ item.name }}
                                  </div>
                                  <div class="item__content">
                                    <div
                                      class="bank-chapter"
                                      v-if="item.showList"
                                    >
                                      <div
                                        class="bank-chapter__item"
                                        v-for="(
                                          chapter, chapterIndex
                                        ) in item.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"
                                          >
                                            <div
                                              class="bank-section__item__text"
                                            >
                                              {{ section.name }}
                                            </div>
                                            <div
                                              v-if="section.tryListen"
                                              @click="
                                                toDo(section, item.courseId)
                                              "
                                              class="btn"
                                            >
                                              试看
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>

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

                                        <div
                                          class="bank-section"
                                          v-if="item.showList"
                                        >
                                          <div
                                            class="bank-section__item"
                                            v-for="(
                                              section, sectionIndex
                                            ) in item.list"
                                            :key="sectionIndex"
                                          >
                                            <div
                                              class="bank-section__item__text"
                                            >
                                              {{ section.name }}
                                            </div>
                                            <div
                                              v-if="section.tryListen"
                                              @click="
                                                toDo(section, item.courseId)
                                              "
                                              class="btn"
                                            >
                                              试看
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>

                                <template v-if="item.type == 3">
                                  <div class="item__content">
                                    <div class="bank-section">
                                      <div class="bank-section__item">
                                        <div class="bank-section__item__text">
                                          {{ item.name }}
                                        </div>
                                        <div
                                          v-if="item.tryListen"
                                          @click="toDo(item, item.courseId)"
                                          class="btn"
                                        >
                                          试看
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>
                              </div>
                            </template>
                          </div>
                        </div>
                      </div>
                      <div class="right-box">
                        <div class="title" v-if="recommendList.goodsList">
                          推荐课程
                          <a class="more" @click="comeMoreList">更多></a>
                        </div>
                        <ul class="list" v-if="recommendList.goodsList">
                          <li
                            class="course-item"
                            v-for="(itemy, index) in compyRecommend(
                              recommendList.goodsList
                            )"
                            :key="index"
                          >
                            <GoodsItem :item="itemy"></GoodsItem>
                            <!-- <div
                              class="course-item__img"
                              :style="`background-image:url(${$tools.splitImgHost(
                                itemy.coverUrl,
                                true
                              )})`"
                              @click="toGoodsDetail(itemy)"
                            >
                              <div class="note" v-if="itemy.year">
                                {{ itemy.year }}
                              </div>
                            </div>
                            <div class="course-item__title">
                              {{ itemy.goodsName }}
                            </div>
                            <div class="course-item__desc">
                              <div class="price">￥{{ itemy.standPrice }}</div>
                              <a
                                class="add"
                                @click="addCart(true, itemy.goodsId)"
                                >加购物车</a
                              >
                            </div> -->
                          </li>
                        </ul>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="学员须知" name="3">
                    <div
                      v-html="
                        goodsDetail.buyNote &&
                        goodsDetail.buyNote.replace(/\n|\r\n/g, '<br>')
                      "
                    ></div>
                  </el-tab-pane>
                  <el-tab-pane
                    label="赠送题卷"
                    name="4"
                    v-if="freeMenuList.length > 0"
                  >
                    <div class="goods-menu clearfix">
                      <div class="left-box">
                        <div class="left-box__body">
                          <div
                            class="course-list-item"
                            v-for="(course, index) in freeMenuList"
                            :key="index"
                          >
                            <div class="item__content">
                              <div class="bank-section">
                                <div class="bank-section__item">
                                  <div class="bank-section__item__text">
                                    {{ course.freeExamName }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="right-box">
                        <div class="title" v-if="recommendList.goodsList">
                          推荐课程
                          <a class="more" @click="comeMoreList">更多></a>
                        </div>
                        <ul class="list" v-if="recommendList.goodsList">
                          <li
                            class="course-item"
                            v-for="(itemy, index) in compyRecommend(
                              recommendList.goodsList
                            )"
                            :key="index"
                          >
                            <GoodsItem :item="itemy"></GoodsItem>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>

        <div
          class="section__footer"
          v-if="
            recommendList.goodsList &&
            recommendList.goodsList.length &&
            (activeName == 1 || activeName == 3)
          "
        >
          <div class="recommend">
            <div class="recommend__header">
              <div class="title">相关推荐</div>
            </div>
            <div class="recommend__body">
              <ul class="list clearfix">
                <li
                  class="recommend-item"
                  v-for="(itemy, index) in compyRecommend(
                    recommendList.goodsList
                  )"
                  :key="index"
                >
                  <GoodsItem :item="itemy"></GoodsItem>
                </li>
              </ul>
            </div>

            <div class="recommend__footer">
              <div class="btn" @click="comeMoreList">查看更多</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <el-dialog
      width="800px"
      class="video-modal"
      :visible.sync="videoModalShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="video-modal__content">
        <a class="video-modal__close" @click="videoModalClose()">X</a>

        <div class="video-modal__header">课程试看</div>
        <div class="video-modal__body">
          <div class="video">
            <div class="video__title">{{ sectionItem.name }}</div>
            <div class="video__wrap">
              <div v-show="vid" id="player"></div>
              <div v-show="vidzb" id="playerzb"></div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      width="800px"
      class="select-class"
      :visible.sync="selectClassModal"
    >
      <div class="select-class__content">
        <div
          class="selection"
          v-if="
            goodsDetail.templateType == 'class' && goodsDetail.goodsType == 1
          "
        >
          <el-select
            class="select"
            v-model="gradeId"
            placeholder="请选择班级"
            size="small"
            @click.native="selectClick(goodsDetail, 'class')"
          >
            <el-option
              v-for="item in gradeList"
              :key="item.gradeId"
              :disabled="
                item.studentNum > 0 && item.studentNum == item.studentUpper
              "
              :label="
                item.classEndTime
                  ? `${item.className} 有效期至：${$tools.timestampToTime(
                      item.classEndTime
                    )}，本班还剩${$tools.GetRTime(
                      item.classEndTime
                    )}天将结束学习`
                  : `${item.className}`
              "
              :value="item.gradeId"
            >
            </el-option>
          </el-select>
        </div>

        <div
          class="selection"
          v-if="
            goodsDetail.templateType == 'apply' && goodsDetail.goodsType == 1
          "
        >
          <el-select
            v-model="educationId"
            placeholder="请选择考期"
            size="small"
            @click.native="selectClick(goodsDetail, 'exam')"
          >
            <el-option
              v-for="item in examineList"
              :key="item.educationId"
              :label="item.examineName"
              :value="item.educationId"
            >
            </el-option>
          </el-select>
          <el-cascader
            size="small"
            :props="props"
            ref="cascader"
            :options="provinceList"
            v-model="examArea"
            @change="areaChange(goodsDetail)"
            clearable
            placeholder="请选择报考地区"
          ></el-cascader>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="pay">确 定</el-button>
      </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 GoodsItem from "@/components/goodsItem/index";
import { mapMutations } from "vuex";
export default {
  name: "GoodsDetail",
  components: {
    Footer,
    Header,
    ToolBar,
    GoodsItem,
  },
  data() {
    return {
      questionList: [],
      goodsExamConfig: [],
      goodsDetail: {
        standPrice: 0,
      },
      courseList: [],
      goodsId: "",
      checked: false,
      textarea: "",
      selectClassModal: false,
      videoModalShow: false,
      activeName: "1",
      questionModalData: {
        activeName: "0",
        num: 0, //试做题数
        current: 0,
      },
      judge: ["错误", "正确"],
      ast: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      goodsAuditionConfigIdList: [], //试听列表
      listenConfigList: [],
      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",
      gradeList: [],
      gradeId: "",
      examineList: [],
      examArea: [],
      educationId: "",
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
      },
      applyAreas: [],
      provinceList: [],
      sectionItem: {},
      playCourseId: 0,
      recommendList: {}, //推荐课程
      needOpen: true, //是否需要一进来展开第一章节
      menuIndex: [], //需要展开的章节索引值
      freeMenuList: [], //赠送题卷列表
    };
  },
  beforeDestroy() {
    if (this.player) {
      this.player.destroy();
    }
  },
  watch: {
    "$route.params.goodsId": {
      handler(newVal, oldVal) {
        this.getInit();
        console.log(newVal, oldVal, "你好");
        //判断newVal有没有值监听路由变化
      },
      deep: true,
    },
  },
  mounted() {
    this.getInit();
  },
  computed: {
    compyRecommend: function () {
      return function (array) {
        let ary = [];
        if (array) {
          for (let i = 0; i < array.length; i++) {
            if (i >= 5) {
              break;
            } else {
              ary.push(array[i]);
            }
          }
        }
        return ary;
      };
    },
  },
  methods: {
    ...mapMutations(["setCurrentRouter", "getCartCount"]),
    getInit() {
      this.goodsId = this.$route.params.goodsId;
      this.getGoodsDetail();
      this.goodsCourseList();
      this.appCommonGoodsCourseModuleFreeExamList();
      if (this.$tools.isLogin()) {
        this.getProvinceList();
      }
    },
    videoModalClose() {
      this.videoModalShow = false;
      this.player.destroy();
    },
    appCommonGoodsCourseModuleFreeExamList() {
      this.$request
        .appCommonGoodsCourseModuleFreeExamList(this.goodsId)
        .then((res) => {
          if (res.data.length) {
            this.freeMenuList = res.data;
          }
        });
    },
    toGoodsDetail(item) {
      this.$router.push({
        path: "/course-detail/" + item.goodsId,
      });
      location.reload();
    },
    /**
     * 查看更多
     */
    comeMoreList() {
      this.$router.push({
        path: "/course-list",
        query: {
          educationId: this.goodsDetail.educationTypeId,
          projectId: this.goodsDetail.projectId,
          businessId: this.goodsDetail.businessId,
        },
      });
    },
    /**
     * 点击课程大目录
     */
    openCourse(course) {
      course.showList = !course.showList;

      if (!course.list.length) {
        this.getMenuList(course);
      }
    },
    /**
     * 
     获取推荐列表
     */
    getRecommend() {
      this.$request
        .appCommonActivityRecommendList({
          businessId: this.goodsDetail.businessId,
          type: 1,
        })
        .then((res) => {
          if (res.rows.length) {
            this.recommendList = res.rows[0];
          }
        });
    },
    /**
     * 获取模块列表
     */
    getMenuList(item) {
      this.$request.menuList({ courseId: item.courseId }).then((res) => {
        for (let i = 0; i < res.rows.length; i++) {
          let item = res.rows[i];
          item.showList = false;
          item.id = item.menuId;
          item.name = item.menuName;

          if (item.type == 3) {
            //判断是否试听
            item.tryListen = false;
            if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
              item.tryListen = true;
            }
          } else {
            item.list = [];
          }
        }
        item.list = res.rows;

        if (this.needOpen) {
          if (item.list[this.menuIndex[1]].type == 1) {
            this.openModule(item.list[this.menuIndex[1]]);
          } else if (item.list[this.menuIndex[1]].type == 2) {
            this.needOpen = false;
            this.openChapter(item.list[this.menuIndex[1]]);
          }
        }
      });
    },
    /**
     * @param {Object}
     * 单选点击确认
     */
    radioSelect(question, questionIndex, optionsId) {
      if (this.questionList[questionIndex].ques) return;
      this.$set(this.questionList[questionIndex], "ques", optionsId);
    },

    /**
     * @param {Object}
     * 案例单选点击
     */
    radioSelectChild(questionIndex, jsonIndex, optionsId) {
      if (this.questionList[questionIndex].ques[jsonIndex]) return;
      this.$set(this.questionList[questionIndex].ques, jsonIndex, optionsId);
    },
    /**
     * 多选点击确认
     */
    checkboxSubmit(question, questionIndex) {
      if (this.questionList[questionIndex].ques) return;
      let arr = [];
      this.questionList[questionIndex].jsonStr.forEach((item) => {
        if (item.checked) {
          arr.push(item.optionsId);
        }
      });
      if (!arr.length) {
        this.$message({
          type: "warning",
          message: "请选择答案",
        });
        return;
      }
      this.$set(this.questionList[questionIndex], "ques", arr);
    },
    /**
     * @param {Object}
     * 案例多选确认
     */
    checkboxSubmitChild(questionIndex, ansIndex) {
      if (this.questionList[questionIndex].ques[ansIndex]) return;
      let arr = [];
      this.questionList[questionIndex].jsonStr[ansIndex].optionsList.forEach(
        (item) => {
          if (item.checked) {
            arr.push(item.optionsId);
          }
        }
      );

      if (!arr.length) {
        this.$message({
          type: "warning",
          message: "请选择答案",
        });
        return;
      }

      this.$set(this.questionList[questionIndex].ques, ansIndex, arr);
    },
    /**
     * 判断点击确认
     */
    judgeSelect(question, questionIndex, index) {
      if (question.ques) return;
      this.$set(this.questionList[questionIndex], "ques", index + "");
    },
    judgeSelectChild(questionIndex, jsonIndex, index) {
      console.log(this.questionList[questionIndex].ques[jsonIndex]);
      if (this.questionList[questionIndex].ques[jsonIndex]) return;
      this.$set(this.questionList[questionIndex].ques, jsonIndex, index + "");
    },

    /**
     * 上传图片
     */
    uploadImg(e, question, questionIndex) {
      var file = e.target.files[0];
      if (file.size > 2 * 1024 * 1024) {
        this.$message.warn("图片不得大于2000kb");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        e.target.value = "";
        return;
      }

      this.$upload.upload(file, 0).then((res) => {
        question.ansText.imageList.push(res);
      });
    },

    /**
     * 案例上传图片
     */
    uploadImgChild(e, questionIndex, jsonIndex) {
      var file = e.target.files[0];
      if (file.size > 2 * 1024 * 1024) {
        this.$message.warn("图片不得大于2000kb");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        e.target.value = "";
        return;
      }

      this.$upload.upload(file, 0).then((res) => {
        this.questionList[questionIndex].jsonStr[
          jsonIndex
        ].ansText.imageList.push(res);
      });
    },
    isOver(item, index) {
      if (this.questionList[index].ques) {
        if (item.type == 4) {
          //案例题
          let isOver = item.jsonStr.every((jsonItem, indexs) => {
            if (
              jsonItem.type == 1 ||
              jsonItem.type == 2 ||
              jsonItem.type == 3
            ) {
              if (item.ques[indexs]) {
                return true;
              } else {
                return false;
              }
            } else if (jsonItem.type == 5) {
              if (
                item.ques[indexs] &&
                (item.ques[indexs].text || item.ques[indexs].imageList.length)
              ) {
                console.log("chil");
                return true;
              } else {
                return false;
              }
            }
          });

          if (isOver) {
            return true;
          } else {
            return false;
          }
        } else if (item.type == 5) {
          //简答题
          //每一项都相等
          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
            return true;
          }
          //判断
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    ansSubmit(question, questionIndex) {
      if (!question.ansText.text && !question.ansText.imageList.length) {
        this.$message({
          type: "warning",
          message: "请输入内容或上传图片",
        });
        return;
      }

      question.ques.imageList = question.ansText.imageList;
      question.ques.text = question.ansText.text;

      console.log(question.ques);
    },
    ansSubmitChild(question, questionIndex, jsonIndex) {
      if (
        !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text &&
        !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.imageList
          .length
      ) {
        this.$message({
          type: "warning",
          message: "请输入内容或上传图片",
        });
        return;
      }

      this.$set(this.questionList[questionIndex].ques, jsonIndex, {
        imageList:
          this.questionList[questionIndex].jsonStr[jsonIndex].ansText
            .imageList || [],
        text:
          this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text ||
          "",
      });
    },
    /**
     * 试看
     */
    toDo(section, courseId) {
      this.videoModalShow = true;
      this.section;
      this.playCourseId = courseId;
      console.log(this.playCourseId, "playCourseId");
      this.initVideo(section);
    },

    async initVideo(option) {
      await this.clears();
      console.log(option);
      this.sectionItem = option;
      if (option.sectionType === 2) {
        this.vidzb = option.liveUrl;
        this.loadPlayerScriptzb(this.loadPlayerzb);
      } else {
        this.vid = option.recordingUrl;
        this.loadPlayerScript(this.loadPlayer);
      }
    },
    loadPlayerzb() {
      const polyvLivePlayer = window.polyvLivePlayer;
      this.playerzb = polyvLivePlayer({
        wrap: "#playerzb",
        width: 800,
        height: 450,
        uid: this.uidzb,
        vid: this.vidzb,
      });
    },
    loadPlayer() {
      var self = this;
      const polyvPlayer = window.polyvPlayer;
      let auditionMinute = this.listenConfigList.find((item) => {
        if (
          item.sectionId ==
            (this.sectionItem.sectionId || this.sectionItem.menuId) &&
          item.courseId == this.playCourseId
        ) {
          return true;
        }
      }).auditionMinute;

      // self.$request.obtainpolyvvideosign(self.vid).then((res) => {
      self.player = polyvPlayer({
        wrap: "#player",
        width: 800,
        height: 450,
        vid: self.vid,
        start: 0,
        end: auditionMinute,
        teaser_show: 0,
        // ts: res.data.ts,
        // sign: res.data.sign,
        playsafe: function (vid, next) {
          next();
        },
      });

      self.player.on("s2j_onPlayOver", () => {
        this.$confirm("试看结束，购买课程可学习全部", "提示", {
          closeOnClickModal: false,
          showCancelButton: false,
          closeOnPressEscape: false,
          distinguishCancelAndClose: false,
          showClose: false,
        }).then((res) => {
          this.videoModalShow = false;
        });
      });
      // });
    },
    /**
     * @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();
      }
    },
    /**
     * @param {String} 关闭视频窗口-销毁实例
     */
    clears() {
      return new Promise((resolve, reject) => {
        this.vid = "";
        this.vidzb = "";
        if (this.player) {
          this.player.destroy();
        }
        if (this.playerzb) {
          this.playerzb.destroy();
        }
        resolve();
      });
    },
    changeIndex(index) {
      if (index <= this.questionModalData.num - 1) {
        this.questionModalData.current = index;
      } else {
        this.$message({
          type: "warning",
          message: "试做题目已经结束~",
        });
      }
    },
    nextQuestion() {
      if (this.questionModalData.current >= this.questionModalData.num - 1) {
        this.$message({
          type: "warning",
          message: "试做题目已经结束~",
        });
        return;
      } else {
        this.questionModalData.current++;
      }
    },
    prevQuestion() {
      if (this.questionModalData.current == 0) {
        return;
      } else {
        this.questionModalData.current--;
      }
    },
    isRight(item, index) {
      //单选
      if (this.questionList[index].ques) {
        if (item.type == 1) {
          console.log(
            this.questionList[index].ques == this.questionList[index].ans
          );
          return this.questionList[index].ques == this.questionList[index].ans;
          //多选
        } else if (item.type == 2) {
          //每一项都相等
          return this.questionList[index].ans.every((item, i) => {
            return item == this.questionList[index].ques[i];
          });
          //判断
        } else if (item.type == 3) {
          return this.questionList[index].ques == this.questionList[index].ans;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    isWrong(item, index) {
      if (this.questionList[index].ques) {
        //单选
        if (item.type == 1) {
          return this.questionList[index].ques != this.questionList[index].ans;
          //多选
        } else if (item.type == 2) {
          //每一项都相等
          return this.questionList[index].ques.some((item, i) => {
            return this.questionList[index].ans.indexOf(item) == -1;
          });
          //判断
        } else if (item.type == 3) {
          return this.questionList[index].ques != this.questionList[index].ans;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    isPart(item, index) {
      if (this.questionList[index].ques) {
        if (item.type == 2) {
          let isWrong = this.questionList[index].ques.some((item, i) => {
            return this.questionList[index].ans.indexOf(item) == -1;
          });

          let isRight = this.questionList[index].ans.every((item, i) => {
            return item == this.questionList[index].ques[i];
          });

          if (!isRight && !isWrong) {
            return true;
          }
        }
      } else {
        return false;
      }
    },
    right(bankIndex, ansIndex, option) {
      if (
        this.questionList[bankIndex].ques[ansIndex] &&
        this.questionList[bankIndex].ans[ansIndex]
      ) {
        if (
          this.questionList[bankIndex].ques[ansIndex].indexOf(
            option.optionsId
          ) != -1 ||
          this.questionList[bankIndex].ans[ansIndex].indexOf(
            option.optionsId
          ) != -1
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    wrong(bankIndex, ansIndex, option) {
      if (
        this.questionList[bankIndex].ques[ansIndex] &&
        this.questionList[bankIndex].ans[ansIndex]
      ) {
        if (
          this.questionList[bankIndex].ques[ansIndex].indexOf(
            option.optionsId
          ) != -1 &&
          this.questionList[bankIndex].ans[ansIndex].indexOf(
            option.optionsId
          ) == -1
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    /**
     * 获取已经回答的题目数
     * hasSpecail (是否包含简答和案例)
     */
    questionOverNum(hasSpecail) {
      let count = 0;
      this.questionList.forEach((item) => {
        if (item.type == 1 || item.type == 2 || item.type == 3) {
          if (item.ques) {
            count++;
          }
        } else if (item.type == 4) {
          //案例题
          if (hasSpecail) {
            let isOver = item.jsonStr.every((jsonItem, index) => {
              if (
                jsonItem.type == 1 ||
                jsonItem.type == 2 ||
                jsonItem.type == 3
              ) {
                if (item.ques[index]) {
                  return true;
                } else {
                  return false;
                }
              } else if (jsonItem.type == 5) {
                if (
                  item.ques[index] &&
                  (item.ques[index].text || item.ques[index].imageList.length)
                ) {
                  return true;
                } else {
                  return false;
                }
              }
            });

            if (isOver) {
              count++;
              console.log(item, 444);
            }
          }
        } else if (item.type == 5) {
          //简答题
          if (hasSpecail) {
            if (item.ques && (item.ques.text || item.ques.imageList.length)) {
              console.log(5, item);
              count++;
            }
          }
        }
      });

      return count;
    },
    /**
     * 展开模块卷
     */
    openModule(Module) {
      this.$set(Module, "showList", !Module.showList);
      if (!Module.list.length) {
        this.getChapterList(Module);
      }
    },
    getChapterList(Module) {
      this.$request.chapterList(Module.id).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          let item = res.data[i];
          item.id = item.chapterId;
          item.showList = false;
          item.list = [];
          item.menuType = 2;
        }
        Module.list = res.data;

        if (this.needOpen) {
          this.needOpen = false;
          this.openChapter(Module.list[0]);
        }
      });
    },
    /**
     * 展开章卷
     */
    openChapter(chapter) {
      this.$set(chapter, "showList", !chapter.showList);

      if (!chapter.list.length) {
        this.getSectionList(chapter);
      }
    },

    lazyLoad(node, resolve) {
      const { level } = node;
      console.log(node);
      if (level == 0) {
      } else if (level == 1) {
        this.$request.getCityList({ parentId: node.value }).then((res) => {
          const nodes = res.rows.map((item) => ({
            value: item.areaId,
            label: `${item.areaName}`,
            leaf: level >= 1,
          }));
          resolve(nodes);
        });
      }
    },

    getSectionList(chapter) {
      this.$request.sectionList(chapter.id).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          let item = res.data[i];
          item.id = item.sectionId;
          item.menuType = 3;
          //判断是否试听
          item.tryListen = false;
          if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
            item.tryListen = true;
          }
        }
        chapter.list = res.data;
      });
    },
    selectClick(goodsDetail, type) {
      if (type == "class") {
        //选择班级
        if (!this.gradeList.length) {
          this.$request
            .goodsGradeList({ goodsId: goodsDetail.goodsId })
            .then((res) => {
              this.gradeList = res.rows;
              if (this.gradeList.length == 0) {
                let item = {
                  className: "系统分班",
                  gradeId: 0,
                };
                this.gradeList.push(item);
              } else {
                let isGradeFull = this.gradeList.every(
                  (item) =>
                    item.studentNum > 0 && item.studentNum == item.studentUpper
                );
                //所有班级都满了
                if (isGradeFull) {
                  let item = {
                    className: "系统分班",
                    gradeId: 0,
                  };
                  this.gradeList.unshift(item);
                }
              }
            });
        }
      } else if (type == "apply") {
        //选择考试地点
      } else if (type == "exam") {
        //选择考期
        this.$request
          .getExamineList({ projectId: goodsDetail.projectId })
          .then((res) => {
            this.examineList = res.rows;
          });
      }
    },
    /**
     * 获取所有省份
     */
    getProvinceList() {
      this.$request.getProvinceList().then((res) => {
        this.provinceList = res.rows.map((item) => ({
          value: item.areaId,
          label: `${item.areaName}`,
          leaf: false,
        }));
      });
    },
    areaChange() {
      let node = this.$refs["cascader"].getCheckedNodes()[0]; //选中的根节点
      console.log(node);
      this.applyAreas = {
        areaName: node.parent.label,
        areaId: node.parent.value,
        cityId: node.value,
        cityName: node.label,
      };
    },
    buyNow() {
      if (this.$tools.isLogin()) {
        if (this.goodsDetail.templateType) {
          this.selectClassModal = true;
        } else {
          let selectGoodsList = JSON.parse(JSON.stringify([this.goodsDetail]));
          selectGoodsList.forEach((item) => {
            if (item.goodsType == 1) {
              if (item.templateType == "class") {
                let goodsInputData = {
                  type: "class",
                  gradeId: this.gradeId,
                  gradeJson: JSON.stringify(
                    this.gradeList.find(
                      (grade) => grade.gradeId == this.gradeId
                    )
                  ),
                };
                item.goodsInputData = goodsInputData;
              }
              if (item.templateType == "apply") {
                let goodsInputData = {
                  type: "apply",
                  applyAreasJson: JSON.stringify(this.applyAreas),
                  examDateJson: JSON.stringify(
                    this.examineList.find(
                      (exam) => exam.educationId == this.educationId
                    )
                  ),
                };
                item.goodsInputData = goodsInputData;
              }
            }
          });

          localStorage.setItem(
            "checkGoodsList",
            JSON.stringify(selectGoodsList)
          );

          this.$router.push({
            path: "/payment",
          });
        }
      } else {
        this.setCurrentRouter(this.$route);
        this.$router.push({
          path: "/login",
        });
        return;
      }
    },
    pay() {
      if (
        this.goodsDetail.templateType == "class" &&
        this.goodsDetail.goodsType == 1
      ) {
        if (!this.gradeId && this.gradeId !== 0) {
          this.$message({
            message: "请选择班级",
            type: "warning",
          });
          return;
        }
      }

      if (
        this.goodsDetail.templateType == "apply" &&
        this.goodsDetail.goodsType == 1
      ) {
        // if (!item.applyAreas.areaName) {
        // 	uni.showModal({
        // 		title: '提示',
        // 		content: '请选择报考地区',
        // 		showCancel: false
        // 	});
        // 	return false;
        // }
        if (!this.educationId) {
          this.$message({
            message: "请选择考期",
            type: "warning",
          });
          return false;
        }
      }

      let selectGoodsList = JSON.parse(JSON.stringify([this.goodsDetail]));
      selectGoodsList.forEach((item) => {
        if (item.goodsType == 1) {
          if (item.templateType == "class") {
            let goodsInputData = {
              type: "class",
              gradeId: this.gradeId,
              gradeJson: JSON.stringify(
                this.gradeList.find((grade) => grade.gradeId == this.gradeId)
              ),
            };
            item.goodsInputData = goodsInputData;
          }
          if (item.templateType == "apply") {
            let goodsInputData = {
              type: "apply",
              applyAreasJson: JSON.stringify(this.applyAreas),
              examDateJson: JSON.stringify(
                this.examineList.find(
                  (exam) => exam.educationId == this.educationId
                )
              ),
            };
            item.goodsInputData = goodsInputData;
          }
        }
      });

      localStorage.setItem("checkGoodsList", JSON.stringify(selectGoodsList));

      this.$router.push({
        path: "/payment",
      });
    },
    addCart(status, goodsId) {
      if (!this.$tools.isLogin()) {
        this.setCurrentRouter(this.$route);
        this.$router.push({
          path: "/login",
        });
        return;
      }
      this.$request
        .addCart({ goodsId: status ? goodsId : this.goodsId })
        .then((res) => {
          this.getCartCount();
          this.$message({
            message: "加入购物车成功",
            type: "success",
          });
        })
        .catch((err) => {
          if (err.code == 500) {
            this.$message({
              message: err.msg,
              type: "warning",
            });
          }
        });
    },
    /**
     * 获取商品详情
     */
    getGoodsDetail() {
      this.$request.commonGoodsDetail(this.goodsId).then((res) => {
        if (res.data.pcDetailHtml) {
          res.data.pcDetailHtml =
            res.data.pcDetailHtml &&
            res.data.pcDetailHtml.replace(
              /<img/gi,
              '<img style="max-width:100%;height:100%;display:block;margin:0px auto;"'
            );
        }
        this.goodsDetail = res.data;
        this.goodsExamConfig = JSON.parse(res.data.goodsExamConfig);

        // this.courseBusiness();
        if (this.goodsDetail.goodsAuditionConfig) {
          this.listenConfigList = JSON.parse(
            this.goodsDetail.goodsAuditionConfig
          );
          for (var itemChild of this.listenConfigList) {
            this.goodsAuditionConfigIdList.push(itemChild.sectionId); //存储试听节ID
          }
          console.log(
            this.goodsAuditionConfigIdList,
            "this.goodsAuditionConfigIdList"
          );
        }
        this.getRecommend();
      });
    },
    /**
     * 是否是试做
     */
    isTest(id) {
      return this.goodsExamConfig.find((item) => item.examId == id);
    },
    /**
     * 获取课程章节列表
     */
    goodsCourseList() {
      this.$request.goodsCourseList(this.goodsId).then(async (res) => {
        res.rows.forEach((item) => {
          item.showList = false;
          item.list = [];
        });
        this.courseList = res.rows;

        if (this.needOpen) {
          for (let i = 0; i < this.courseList.length; i++) {
            let menuIndexOrFalse = await this.getCourseMenus(
              this.courseList[i]
            );

            if (menuIndexOrFalse !== false) {
              this.menuIndex = [i, menuIndexOrFalse];
              this.openCourse(this.courseList[i]);
              break;
            }
          }
        }
      });
    },

    getCourseMenus(item) {
      return new Promise((resolve) => {
        this.$request.menuList({ courseId: item.courseId }).then((res) => {
          if (res.code == 200) {
            for (let i = 0; i < res.rows.length; i++) {
              if (res.rows[i].type == 1 || res.rows[i].type == 2) {
                resolve(i);
                break;
              }
            }
          }
        });
      });
    },
    collect() {
      this.$message({
        message: "试做题目，不支持收藏~",
        type: "warning",
      });
      return;
    },
    examSubmit() {
      this.$confirm("当前为试用做题不可交卷，购买题卷后方可交卷", "提示", {
        confirmButtonText: "继续作答",
        cancelButtonText: "返回详情",
        closeOnClickModal: false,
        closeOnPressEscape: false,
        distinguishCancelAndClose: false,
        showClose: false,
      })
        .then((_) => {})
        .catch((_) => {
          this.questionModalShow = false;
        });
    },
  },
};
</script>

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

    &__body {
      .goods-info {
        &__header {
          width: 100%;
          height: 288px;
          background: #f5f7fa;
          border-radius: 10px;
          padding: 20px;
          display: flex;

          .img {
            width: 442px;
            height: 248px;
            border-radius: 10px;
            overflow: hidden;

            img {
              max-width: 100%;
              max-height: 100%;
              width: 100%;
              height: 100%;
            }
          }

          .text {
            flex: 1;
            margin-left: 24px;
            .title {
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              line-height: 24px;
            }

            .desc {
              padding: 1px 5px;
              display: inline-block;
              border: 1px solid #333333;
              border-radius: 4px;
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
            }

            .price {
              margin-top: 10px;
              font-size: 24px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #ff2d55;
              line-height: 24px;
            }

            .btns {
              margin-top: 124px;
              display: flex;

              .buynow {
                margin-right: 16px;
                width: 160px;
                height: 40px;
                padding: 0;
                border-radius: 20px;
                text-align: center;
                line-height: 40px;
              }

              .add {
                padding: 0;
                width: 128px;
                height: 40px;
                border-radius: 20px;
                text-align: center;
                line-height: 40px;
              }
            }
          }
        }

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

          .label {
            font-size: 18px;
          }

          .view-note {
            width: 40px;
            height: 24px;
            background: #ff3b30;
            border-radius: 4px 4px 0px 4px;
            border: 1px solid #ff3b30;
            text-align: center;
            line-height: 22px;
            color: #fff;
            position: absolute;
            right: -10px;
            top: 5px;
          }

          .detail {
            img {
              max-width: 100% !important;
            }
          }

          .goods-img {
            width: 100%;
          }

          .goods-menu {
            margin-top: 15px;
            .left-box {
              width: 948px;
              float: left;

              &__body {
                .course-list-item {
                  margin-top: 24px;
                  padding: 16px;
                  background: #f5f7fa;
                  border-radius: 10px;
                  &__title {
                    font-size: 18px;
                    color: #333;
                    font-weight: bold;
                    cursor: pointer;
                  }

                  .item {
                    overflow: hidden;
                    background: #fff;
                    margin-top: 12px;
                    &__title {
                      padding: 10px 0;
                      cursor: pointer;
                      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 {
                      background: #fff;

                      .bank-chapter {
                        margin-left: 4px;

                        &__item {
                          padding-top: 20px;
                          padding-bottom: 20px;
                          border-bottom: 1px solid #eeeeee;
                          font-size: 16px;

                          &__text {
                            cursor: pointer;
                            flex: 1;
                          }
                        }
                      }

                      .bank-section {
                        margin-left: 40px;

                        &__item {
                          padding-top: 20px;
                          padding-bottom: 20px;
                          border-bottom: 1px solid #eeeeee;
                          font-size: 16px;
                          display: flex;

                          &__text {
                            flex: 1;
                          }

                          .btn {
                            margin-right: 20px;
                            width: 40px;
                            height: 24px;
                            border: 1px solid #ff3b30;
                            border-radius: 8px;
                            line-height: 22px;
                            color: #ff3b30;
                            text-align: center;
                            cursor: pointer;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }

            .right-box {
              width: 255px;
              float: right;
              .title {
                margin-left: 10px;
                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: 10px;
                  top: 0;
                }
              }

              .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;
                  //   background: no-repeat center center;
                  //   background-size: 280px 178px;
                  //   .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;
                  //     }
                  //   }
                  // }
                }
              }
            }
          }
        }
      }
    }

    &__footer {
      .recommend {
        padding-top: 40px;

        &__header {
          display: flex;
          align-items: center;

          .title {
            font-size: 24px;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: #333333;
            text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
          }
        }

        &__body {
          .list {
            width: 100%;

            .recommend-item {
              float: left;
              // margin: 100px 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;
              //   background: no-repeat center center;
              //   background-size: 280px 178px;
              //   .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;
              //     }
              //   }
              // }
            }
          }
        }

        &__footer {
          overflow: hidden;
          .btn {
            cursor: pointer;
            width: 146px;
            height: 40px;
            background: #e3eaf7;
            border-radius: 8px;
            margin: 20px auto 40px;
            color: #3f8dfd;
            text-align: center;
            line-height: 40px;

            &:hover {
              color: #fff;
              box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
              background: #3f8dfd;
            }
          }
        }
      }
    }
  }

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

    &__close {
      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%;
    }

    &__content {
      width: 800px;
      height: 530px;
      position: relative;
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04);
      border-radius: 8px;

      .left-box {
        float: left;
        width: 500px;
        border-right: 1px solid #eee;

        &__header {
          height: 40px;
          padding-left: 12px;
          border-bottom: 1px solid #eeeeee;
          display: flex;
          align-items: center;

          .progress {
            width: 200px;
          }

          .text {
            margin-left: 15px;
            font-size: 16px;
            span {
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #3f8dfd;
              line-height: 24px;
            }
          }
        }

        &__body {
          height: 450px;
          border-bottom: 1px solid #eee;

          .question {
            padding: 12px 0 0 12px;
            display: flex;
            flex-direction: column;
            height: 100%;

            &__title {
              padding-left: 12px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              line-height: 24px;
            }

            &__desc {
              padding-left: 12px;
              margin-top: 20px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #666666;
              line-height: 24px;
            }

            &__content {
              flex: 1;
              overflow-y: scroll;

              &::-webkit-scrollbar {
                width: 6px;
              }
              &::-webkit-scrollbar-track {
                background-color: #fff;
                -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;
              }

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

              .question__content {
                height: auto;
                overflow: auto;
              }

              .question-list {
                padding: 24px 0 0 24px;
                .checkbox,
                .radio {
                  cursor: pointer;
                  margin-right: 24px;
                  padding: 0 24px;
                  display: flex;
                  align-items: center;
                  margin-top: 2px;
                  min-height: 40px;
                  padding-top: 10px;
                  padding-bottom: 10px;
                  background: #f5f9ff;
                  border-radius: 8px;
                  box-sizing: border-box;

                  &.right {
                    background: #37c65b;
                  }
                  &.wrong {
                    background: #ff3a30;
                  }
                }
                &.textarea {
                  margin-right: 12px;

                  .upload {
                    margin-top: 10px;

                    &__imgs {
                      margin-right: 10px;
                      width: 80px;
                      height: 80px;
                      background: #ffffff;
                      border: 1px solid #eeeeee;
                      border-radius: 4px;
                      position: relative;
                      display: flex;
                      float: left;
                      align-items: center;
                      justify-content: center;

                      img {
                        max-width: 100%;
                        max-height: 100%;
                      }
                    }
                    &__btn {
                      margin-right: 10px;
                      width: 80px;
                      height: 80px;
                      background: #ffffff;
                      border: 1px solid #eeeeee;
                      border-radius: 4px;
                      position: relative;
                      display: flex;
                      float: left;
                      align-items: center;
                      justify-content: center;
                      flex-direction: column;

                      .icon {
                        font-size: 20px;
                        color: #3f8dfd;
                      }

                      p {
                        font-size: 12px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #999999;
                        line-height: 24px;
                      }

                      input {
                        position: absolute;
                        left: 0;
                        top: 0;
                        display: block;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                      }
                    }
                  }
                }

                /deep/ .el-checkbox {
                  white-space: pre-wrap;
                }
              }

              .answer-list {
                height: 40px;
                border-top: 1px solid #eee;
                border-bottom: 1px solid #eee;
                margin-top: 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 24px;

                &__left {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  line-height: 24px;
                }

                &__right {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  line-height: 24px;
                }
              }

              .explain-list {
                padding: 12px 24px;

                &__header {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #666666;
                  line-height: 24px;
                }

                &__body {
                  margin-top: 12px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #666666;
                  line-height: 24px;
                }

                .upload {
                  margin-top: 10px;

                  &__imgs {
                    margin-right: 10px;
                    width: 80px;
                    height: 80px;
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                    border-radius: 4px;
                    position: relative;
                    display: flex;
                    float: left;
                    align-items: center;
                    justify-content: center;

                    img {
                      max-width: 100%;
                      max-height: 100%;
                    }
                  }
                }
              }
            }

            &__btns {
              position: relative;
              height: 32px;
              .submit {
                cursor: pointer;
                margin: 0 auto;
                width: 140px;
                height: 32px;
                background: #3f8dfd;
                box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
                border-radius: 16px;
                text-align: center;
                line-height: 32px;
                color: #fff;
                font-size: 16px;
              }

              .collect {
                cursor: pointer;
                position: absolute;
                right: 0;
                top: 5px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #3f8dfd;
                line-height: 24px;
              }
            }
          }
        }

        &__footer {
          height: 40px;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .btn {
            cursor: pointer;
            width: 140px;
            height: 32px;
            background: #ffffff;
            border: 1px solid #3f8dfd;
            border-radius: 16px;
            line-height: 32px;
            text-align: center;
            color: #3f8dfd;
          }
        }
      }

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

        &__header {
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
          text-align: center;
          border-bottom: 1px solid #eeeeee;
        }

        &__body {
          height: 450px;
          border-bottom: 1px solid #eee;

          .card {
            &__note {
              display: flex;
              height: 40px;
              align-items: center;
              border-bottom: 1px solid #eee;

              .item {
                display: flex;
                align-items: center;
                margin-left: 10px;

                .box {
                  margin-right: 5px;
                  width: 16px;
                  height: 16px;
                  border-radius: 4px;

                  &.white {
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                  }

                  &.green {
                    background: #37c65b;
                  }

                  &.red {
                    background: #ff3a30;
                  }

                  &.blue {
                    background: #3f8dfd;
                  }
                }
              }
            }

            &__content {
              height: 410px;
              overflow-y: scroll;

              &::-webkit-scrollbar {
                width: 6px;
              }
              &::-webkit-scrollbar-track {
                background-color: #fff;
                -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;
              }
              .list {
                display: flex;
                flex-wrap: wrap;

                .item {
                  width: 40px;
                  height: 40px;
                  border-radius: 10px;
                  text-align: center;
                  line-height: 40px;
                  margin-left: 16px;
                  margin-top: 16px;
                  cursor: pointer;

                  &.white {
                    line-height: 38px;
                    color: #333333;
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                  }

                  &.green {
                    color: #fff;
                    background: #37c65b;
                  }

                  &.red {
                    color: #fff;
                    background: #ff3a30;
                  }

                  &.blue {
                    border: 1rpx solid #eeeeee;
                    color: #fff;
                    background: #3f8dfd;
                  }

                  &.disabled {
                    cursor: not-allowed;
                    line-height: 38px;
                    color: #eeeeee;
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                  }
                }
              }
            }
          }
        }

        &__footer {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;

          .submit {
            cursor: pointer;
            width: 140px;
            height: 32px;
            background: #3f8dfd;
            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
            border-radius: 16px;
            line-height: 32px;
            text-align: center;
            color: #fff;
            font-size: 16px;
          }
        }
      }
    }
  }

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

    &__close {
      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;
      color: #ff3b30;
      padding-left: 24px;
    }

    &__body {
      width: 100%;
      position: relative;
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04);
      border-radius: 8px;
      .video {
        &__title {
          padding-left: 24px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }

        &__wrap {
          height: 450px;
          video {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .select-class {
    &__content {
      .selection {
        .el-select {
          width: 100%;
        }
      }
    }
  }
}
</style>