pbl-student-table/src/components/liveProjectDetailKH.vue

<template>
  <div
    style="
      background: rgb(230, 234, 240);
      width: 100%;
      margin: 0;
      position: relate;
      height: 100%;
    "
  >
    <div class="blackBottom">
      <div
        style="
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: stretch;
          padding-left: 10px;
        "
      >
        <div class="logoLive">
          <img src="../assets/icon/logo.png" alt />
        </div>
        <div style="color: #fff; line-height: 45px; padding-left: 15px">
          introduce a festival (Final)
        </div>
      </div>
    </div>
    <div class="isNoOther">
      <div
        class="imgMiddle"
        :class="isBlock > 0 ? 'imghalf' : 'imgMiddle'"
        v-show="!full"
      >
        <pdf
          :pdfUrl="pdfUrl"
          style="width: 100%; height: 100%"
          :ppage="ppage"
          @getPageTotal="getPageTotal"
          @getWidth="getWidth"
        ></pdf>
        <div
          class="workd_media"
          style="height: 100%"
          v-if="videoBlock == 6"
          :style="{ width: Vwidth }"
        >
          <video-player
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :options="playerO[0]"
            ref="zVideo"
            @play="onPlayerPlay($event)"
            style="width: 100%; height: 100%"
          ></video-player>
        </div>
        <div class="video_wrapper" v-if="videoBlock == 6"></div>
      </div>
      <div
        style="
          background: #d0d6e4;
          width: 40%;
          height: 100%;
          max-width: 40%;
          overflow: auto;
        "
        :class="{ fullStyle: full }"
        v-if="isBlock > 0"
      >
        <div
          style="
            background: #fff;
            width: 96%;
            margin: 10px auto;
            height: 96%;
            position: relative;
          "
        >
          <div
            style="color: #bfbfbf; padding: 15px 0 15px 25px; font-size: 20px"
            v-if="isBlock == 3"
          >
            课堂评价
          </div>
          <div
            style="color: #bfbfbf; padding: 15px 0 15px 25px; font-size: 20px"
            v-if="isBlock == 8"
          >
            根据题目选择对应的答案
          </div>
          <div
            style="
              margin-left: 25px;
              border-bottom: 3px solid #2c83ee;
              width: 70px;
              padding-bottom: 3px;
              text-align: center;
              padding-top: 15px;
            "
            v-if="isBlock == 1"
          >
            开始答题
          </div>
          <div class="answerBox" v-if="isBlock == 1">
            <div class="answerBox">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  flex-wrap: wrap;
                  align-items: center;
                  justify-content: center;
                "
                v-for="item in 1"
                :key="item"
              >
                <div class="choose_style">
                  <span
                    @click="isChooseActive(1)"
                    :class="typeC.indexOf(1) != -1 ? 'isChoose' : ''"
                    v-if="
                      tools[ppage - 1].choice && tools[ppage - 1].choice > 0
                    "
                    >A</span
                  >
                  <span
                    @click="isChooseActive(2)"
                    :class="typeC.indexOf(2) != -1 ? 'isChoose' : ''"
                    v-if="
                      tools[ppage - 1].choice && tools[ppage - 1].choice > 1
                    "
                    >B</span
                  >
                  <span
                    @click="isChooseActive(3)"
                    :class="typeC.indexOf(3) != -1 ? 'isChoose' : ''"
                    v-if="
                      tools[ppage - 1].choice && tools[ppage - 1].choice > 2
                    "
                    >C</span
                  >
                  <span
                    @click="isChooseActive(4)"
                    :class="typeC.indexOf(4) != -1 ? 'isChoose' : ''"
                    v-if="
                      tools[ppage - 1].choice && tools[ppage - 1].choice > 3
                    "
                    >D</span
                  >
                </div>
                <el-button style="margin: 0 auto" @click="showMember(item)"
                  >提交</el-button
                >
              </div>
            </div>
          </div>
          <div
            class="answerBox tools_box"
            v-if="isBlock == 4"
            style="padding: 10px 0 0 25px; width: 100%; max-width: 100%"
          >
            <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
            <div
              style="
                margin: 20px 0 20px 0;
                border-bottom: 4px solid #3e86f3;
                width: 75px;
                text-align: center;
                padding-bottom: 3px;
              "
            >
              选择工具
            </div>
            <div
              style="
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                justify-content: flex-start;
                align-items: center;
              "
            >
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(1) != -1
                "
                @click="checkTools(1)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img src="../assets/icon/secondToolList/whiteBoard.png" alt />
                  <div>电子白板</div>
                </div>
              </div>
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(3) != -1
                "
                @click="checkTools(3)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img
                    src="../assets/icon/secondToolList/mindMapping.png"
                    alt
                  />
                  <div>思维导图</div>
                </div>
              </div>
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(28) != -1
                "
                @click="checkTools(28)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img src="../assets/icon/thirdToolList/translation.png" alt />
                  <div>翻译</div>
                </div>
              </div>
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(4) != -1
                "
                @click="checkTools(4)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img src="../assets/icon/thirdToolList/ask.png" alt />
                  <div>问卷调查</div>
                </div>
              </div>
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(6) != -1
                "
                @click="checkTools(6)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img src="../assets/icon/secondToolList/doc.png" alt />
                  <div>协同文档</div>
                </div>
              </div>
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(7) != -1
                "
                @click="checkTools(7)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img
                    src="../assets/icon/secondToolList/mindNetwork.png"
                    alt
                  />
                  <div>思维网格</div>
                </div>
              </div>
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(16) != -1
                "
                @click="addImg($event)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img src="../assets/icon/firstToolList/myMessage.png" alt />
                  <div>
                    上传文件
                    <input
                      type="file"
                      accept="image/*"
                      capture="camera"
                      style="display: none"
                      @change="beforeUpload1($event, 1)"
                    />
                  </div>
                </div>
              </div>
              <div
                v-if="
                  tools[ppage - 1].tools &&
                  tools[ppage - 1].tools.indexOf(29) != -1
                "
                @click="addImg($event)"
                class="toolCss"
              >
                <div class="toolImg">
                  <img src="../assets/icon/firstToolList/myMessage.png" alt />
                  <div>
                    上传视频
                    <input
                      type="file"
                      accept="video/mp4, video/quicktime, video/x-msvideo"
                      capture="camera"
                      style="display: none"
                      @change="beforeUpload1($event, 2)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="answerBox"
            style="height: 100%"
            v-if="isBlock == 2"
            ref="qrcodePicture"
          >
            <div style="height: 100%; width: 100%">
              <div v-if="toolCount == 1" class="tools_child_box">
                <div class="tools_title">
                  <span>电子白板</span>
                  <div>
                    <img
                      src="../assets/full.png"
                      class="full"
                      @click="fullTools"
                    />
                  </div>
                </div>
                <iframe
                  webkitallowfullscreen
                  mozallowfullscreen
                  allowfullscreen
                  style="width: 100%; height: 100%; border: none"
                  src="https://iwb.cocorobo.cn/"
                  ref="whiteBoard"
                ></iframe>
              </div>
              <div v-if="toolCount == 3" class="tools_child_box">
                <div class="tools_title">
                  <span>思维导图</span>
                  <div>
                    <img
                      src="../assets/full.png"
                      class="full"
                      @click="fullTools"
                    />
                  </div>
                </div>
                <iframe
                  webkitallowfullscreen
                  mozallowfullscreen
                  allowfullscreen
                  style="width: 100%; height: 100%; border: none"
                  src="//cloud.cocorobo.cn/kityminder-editor/dist/index.html"
                  ref="mind"
                ></iframe>
              </div>
              <div v-if="toolCount == 28" class="tools_child_box">
                <div class="tools_title">
                  <span>翻译</span>
                  <div>
                    <img
                      src="../assets/full.png"
                      class="full"
                      @click="fullTools"
                    />
                  </div>
                </div>
                <iframe
                  webkitallowfullscreen
                  mozallowfullscreen
                  allowfullscreen
                  style="width: 100%; height: 100%; border: none"
                  src="//dict.youdao.com/"
                  ref="mind"
                ></iframe>
              </div>
              <div v-if="toolCount == 6" class="tools_child_box">
                <div class="tools_title">
                  <span>协同文档</span>
                  <div>
                    <img
                      src="../assets/full.png"
                      class="full"
                      @click="fullTools"
                    />
                  </div>
                </div>
                <iframe
                  webkitallowfullscreen
                  mozallowfullscreen
                  allowfullscreen
                  style="width: 100%; height: 100%; border: none"
                  src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
                ></iframe>
              </div>
              <div v-if="toolCount == 7" class="tools_child_box">
                <div class="tools_title">
                  <span>思维网格</span>
                  <div>
                    <img
                      src="../assets/full.png"
                      class="full"
                      @click="fullTools"
                    />
                  </div>
                </div>
                <iframe
                  webkitallowfullscreen
                  mozallowfullscreen
                  allowfullscreen
                  style="width: 100%; height: 100%; border: none"
                  src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
                  ref="grid"
                ></iframe>
              </div>
              <div
                id="shishi_loading"
                style="
                  width: 100%;
                  height: 100%;
                  background: #0000008f;
                  position: absolute;
                  top: 0;
                  left: 0;
                  z-index: 99999999999999;
                  display: none;
                  justify-content: center;
                  align-items: center;
                "
              >
                <div
                  style="
                    color: #fff;
                    padding: 15px;
                    background: #00000070;
                    border-radius: 5px;
                    font-size: 18px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <img
                    src="https://pbl.cocorobo.cn/pbl-student-table/dist/js/loading.gif"
                    alt
                    style="width: 26px; margin-right: 10px"
                  />
                  <span>上传中...</span>
                </div>
              </div>
              <!-- <div class="nextStepBox">
                <div class="nextStepOne" @click="(isBlock = 4), (full = false)">
                  返回
                </div>
              </div> -->
              <div
                class="nextStepOne"
                style="float: right"
                @click="addJtWork(4)"
                v-if="toolCount == 1 || toolCount == 3 || toolCount == 7"
              >
                截图
              </div>
              <!-- <div
                class="nextStepOne"
                style="float: right"
                @click="addImg($event)"
                v-if="toolCount == 1 || toolCount == 3 || toolCount == 7"
              >
                上传文件
                <input
                  type="file"
                  accept="image/png, image/gif, image/jpeg"
                  style="display: none"
                  @change="beforeUpload1($event, 1)"
                />
              </div>-->
            </div>
          </div>
          <div
            class="answerBox"
            v-if="
              isBlock == 3 &&
              tools[ppage - 1].tools &&
              tools[ppage - 1].tools.indexOf(14) != -1
            "
            style="padding: 0 0 0 25px"
          >
            <div>
              <div
                class="score_box"
                v-for="(ra, raIndex) in tools[ppage - 1].rateArray"
                :key="raIndex"
              >
                <span>{{ ra }} </span>
                <el-rate v-model="rateList[raIndex]"></el-rate>
              </div>
            </div>
            <span
              slot="footer"
              class="dialog-footer sztFooter"
              style="
                padding: 0 0 30px 0px;
                position: absolute;
                right: 20px;
                bottom: 0;
              "
            >
              <!-- <el-button @click="isBlock = 0">取消</el-button> -->
              <el-button type="primary" @click="addWork(6)">确定</el-button>
            </span>
          </div>
          <div
            class="answerBox"
            v-if="
              isBlock == 8 &&
              tools[ppage - 1].tools &&
              tools[ppage - 1].tools.indexOf(27) != -1
            "
            style="padding: 0 0 0 25px"
          >
            <div>
              <div
                v-for="(tk, tIndex) in tools[ppage - 1].choice"
                :key="tIndex"
                class="tkCss"
              >
                <div style="margin-right: 10px; font-size: 18px">
                  {{ tIndex + 1 }}、
                </div>
                <el-select v-model="tkAnswer[tIndex]" placeholder="请选择答案">
                  <el-option
                    v-for="(tkA, tkAIndex) in tools[ppage - 1].tkAnswerBox"
                    :key="tkAIndex"
                    :label="tkA"
                    :value="tkA"
                  ></el-option>
                </el-select>
                <span
                  v-if="tiankongAnswer.length && isNoHomeWork"
                  class="tiankongAnswer"
                  :class="{
                    tfalse: tiankongAnswer[tIndex] != tkAnswer[tIndex],
                  }"
                  >正确答案：{{ tiankongAnswer[tIndex] }}</span
                >
              </div>
            </div>
            <span
              slot="footer"
              class="dialog-footer sztFooter"
              style="
                padding: 0 0 30px 0px;
                position: absolute;
                right: 20px;
                bottom: 0;
              "
            >
              <!-- <el-button @click="isBlock = 0">取消</el-button> -->
              <el-button type="primary" @click="addWork(5)">提交</el-button>
            </span>
          </div>
          <div
            class="answerBox"
            v-if="isBlock == 5"
            style="padding: 10px 0 0 25px"
          >
            <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
            <div
              style="
                margin: 20px 0 20px 0;
                border-bottom: 4px solid #3e86f3;
                width: 75px;
                text-align: center;
                padding-bottom: 3px;
              "
            >
              选择附件
            </div>
            <div
              style="
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                justify-content: flex-start;
                align-items: center;
              "
            >
              <div
                v-if="tools[ppage - 1].file && tools[ppage - 1].file.length"
                class="fileBox"
              >
                <div
                  class="fileListCss"
                  v-for="(v, vIndex) in videoList"
                  :key="vIndex"
                >
                  <div class="fileCss" @click="playVideo(v.src, vIndex)">
                    <img src="../assets/uploadMp4.png" alt />
                  </div>
                  <div>{{ v.name }}</div>
                </div>
                <div
                  class="fileListCss"
                  v-for="(f, fIndex) in fileList"
                  :key="fIndex"
                >
                  <div class="fileCss" @click="openFile(f.src)">
                    <img src="../assets/file.png" alt />
                  </div>
                  <div>{{ f.name }}</div>
                </div>
              </div>
            </div>
            <!-- <div class="nextStepBox">
              <div class="nextStepOne" @click="isBlock = 0">关闭</div>
            </div>-->
          </div>
          <!-- <div class="answerBox" :class="{ fullStyle: full }" v-if="isBlock == 6">
            <div style="height: 70%; width: 100%">
              <div class="wheel">
                     <div class="workd_media" style="height: 100%">
          <video-player
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :options="playerO[0]"
            @play="onPlayerPlay($event)"
            style="width: 90%; height: 100%; margin: 0 0 0 30px"
          ></video-player>
        </div>
              </div>
            </div>
          </div>-->
          <div
            class="answerBox"
            style="height: 100%"
            :class="{ fullStyle: full }"
            v-if="isBlock == 7"
          >
            <div style="height: 70%; width: 100%">
              <div class="wheel" style="height: 520px; width: 100%">
                <iframe
                  style="width: 100%; height: 100%; border: none"
                  :src="pptImgUrl"
                ></iframe>
              </div>
              <div class="nextStepBox" style="margin-top: 5%">
                <div class="nextStepOne" @click="isBlock = 5">返回</div>
              </div>
            </div>
          </div>
          <div
            class="answerBox"
            :class="{ fullStyle: full }"
            v-if="isBlock == 9"
          >
            <div style="height: 70%; width: 100%">
              <div class="wheel">
                <div style="height: 100%">
                  <audio
                    style="margin: 0 auto; display: block"
                    :src="audioUrl"
                    controls="controls"
                    ref="audio"
                  >
                    Your browser does not support the audio element.
                  </audio>
                </div>
              </div>
              <!-- <div class="nextStepBox" style="margin-top: 5%">
                <div class="nextStepOne" @click="isBlock = 0">关闭</div>
              </div>-->
            </div>
          </div>
          <div
            class="answerBox"
            :class="{ fullStyle: full }"
            v-if="isBlock == 10"
          >
            <div style="height: 70%; width: 100%">
              <div class="wheel">
                <div style="height: 100%">
                  <el-button type="primary" @click="startRecorder()">{{
                    !isRecord ? "开始录音" : "结束录音"
                  }}</el-button>
                  <el-button type="primary" @click="playRecorder()">{{
                    !isPlayerRecord ? "录音播放" : "停止播放"
                  }}</el-button>
                  <el-button type="primary" @click="getMp3Data()"
                    >上传录音</el-button
                  >

                  <div
                    style="
                      margin: 10px auto 0;
                      display: flex;
                      align-items: center;
                    "
                    v-if="LuAudioUrl"
                  >
                    <span>已上传录音：</span>
                    <audio :src="LuAudioUrl" controls="controls" ref="audio">
                      Your browser does not support the audio element.
                    </audio>
                  </div>
                </div>
              </div>
              <!-- <div class="nextStepBox" style="margin-top: 5%">
                <div class="nextStepOne" @click="isBlock = 0">关闭</div>
              </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="blackBottomB" v-if="false">
      <!-- <div
        class="nextStepOne"
        style="float: right"
        @click="addImg($event)"
        v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(16) != -1"
      >
        上传文件
        <input
          type="file"
          accept="image/png, image/gif, image/jpeg"
          style="display: none"
          @change="beforeUpload1($event, 1)"
        />
      </div>
      <div
        class="nextStepOne"
        style="float: right"
        @click="addImg($event)"
        v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(29) != -1"
      >
        上传视频
        <input
          type="file"
          accept="video/mp4, video/quicktime, video/x-msvideo"
          style="display: none"
          @change="beforeUpload1($event, 2)"
        />
      </div>-->
    </div>
    <div v-if="proVisible" class="mask">
      <div class="progressBox">
        <div class="lbox">
          <img src="../assets/loading.gif" />上传中，请稍后
        </div>
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="progress"
          style="width: 80%"
        ></el-progress>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
        提交成功
      </div>
      <div
        style="
          width: 200px;
          background: #4d8ae0;
          height: 35px;
          margin: 0 auto;
          text-align: center;
          line-height: 35px;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
        @click="dialogVisible = false"
      >
        确定
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisiblePick"
      :append-to-body="true"
      width="500px"
      class="dialog_diy"
      :close-on-click-modal="false"
    >
      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
        你被老师点名起来回答了！！！
      </div>
      <div
        style="
          width: 200px;
          background: #4d8ae0;
          height: 35px;
          margin: 0 auto;
          text-align: center;
          line-height: 35px;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
        @click="pick2"
      >
        确定
      </div>
    </el-dialog>
    <div v-html="iframeInnerHtml" ref="iframeIh" class="iframeBox"></div>
  </div>
</template>

<script>
import pdf from "./components/pdf";
import html2canvas from "html2canvas";

import Recorder from "js-audio-recorder";
const lamejs = require("lamejs");

const recorder = new Recorder({
  sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
  sampleRate: 48000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
  numChannels: 1, // 声道，支持 1 或 2， 默认是1
  // compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false
});

// 绑定事件-打印的是当前录音数据
recorder.onprogress = function (params) {
  // console.log('--------------START---------------')
  // console.log('录音时长(秒)', params.duration);
  // console.log('录音大小(字节)', params.fileSize);
  // console.log('录音音量百分比(%)', params.vol);
  // console.log('当前录音的总数据([DataView, DataView...])', params.data);
  // console.log('--------------END---------------')
};

export default {
  components: {
    pdf,
  },
  data() {
    return {
      iframeInnerHtml: "",
      pdfUrl:
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E4%B8%8A%E8%AF%BE%E8%AF%BE%E4%BB%B6---%E4%BA%94%E4%B8%8Bintroduce%20a%20festival%20%28Final%20%29%281%291661829428281.pdf",
      pptImgUrl: "",
      ppage: 2,
      full: false,
      pageTotal: 0,
      howTools: 0,
      toolsList: [],
      timer: null,
      isLoading: false,
      formLabelWidth: "100px",
      userid: this.$route.query.userid,
      cid: this.$route.query.courseId,
      oid: this.$route.query.oid,
      mr: require("../assets/kc1.png"),
      timu: [],
      dialogVisible: false,
      dialogVisiblePick: false,
      answerBox: "",
      isNoHomeWork: false,
      answer: [
        { name: "A.1568" },
        { name: "B.720" },
        { name: "C.1728" },
        { name: "D.480" },
      ],
      steps: 0,
      isBlock: 0,
      isNext: false,
      isAnswer: false,
      upload: [
        {
          url: "",
        },
      ],
      noneBtnImg: false,
      proVisible: false,
      progress: 0,
      typeC: [],
      toolCount: 0,
      tools: [
        {}, //tools: [30]
        //  {
        //   file: [
        //     {
        //       name: "音频1.MP3",
        //       src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%9F%B3%E8%BD%BB%E9%A2%82%20-%20%E6%BA%AF%EF%BC%88%E9%92%A2%E7%90%B4%E7%89%88%EF%BC%891661673251415.mp3",
        //     },
        //   ],
        // }
        "",
        {
          file: [
            {
              name: "视频1.mp4",
              src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9311661413782505.mp4",
            },
          ],
        },
        "", //问答题
        { tools: [9], choice: 3, answer: [2, 3] },
        { tools: [9], choice: 3, answer: [2] }, //协同文档
        { tools: [9], choice: 3, answer: [3] }, //思维导图
        { tools: [9], choice: 3, answer: [1] },
        { tools: [9], choice: 3, answer: [2] },
        { tools: [12] },
        {
          tools: [27],
          answer: [
            "Time",
            "Weather",
            "Activities before the festival",
            "Activities during the festival",
            "Food",
            "Reason",
            "Feelings",
          ],
          choice: 7,
          tkAnswerBox: [
            "Feelings",
            "Weather",
            "Activities before the festival",
            "Origin",
            "Food",
            "Time",
            "Activities during the festival",
            "Reason",
          ],
        },
        {
          file: [
            {
              name: "视频2.mp4",
              src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9321661413797366.mp4",
            },
          ],
        },
        { tools: [9] },
        { tools: [3] },
        { tools: [16] },
        {
          tools: [14],
          rateArray: [
            "聚焦主题",
            "有开头结尾",
            "语言正确,流畅",
            "书写规范,美观",
          ],
        },
        "",
        "",
        { tools: [29] },
        "",
        "",
        //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价 15、问答 16、作业提交 17、学习资料 18、训练平台 19、目标管理 20、课程设计 21、编程平台 22、AI体验 23、python 24、AI平台
      ],
      rateList: [],
      tkAnswerBox: [],
      tkAnswer: [],
      imgUrl: "",
      imgFile: "",
      imgFileUp: [],
      videoList: [],
      videoList2: [],
      audioUrl: "",
      fileList: [],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: "", //url地址require("../../assets/media/aaa.mp4")
          },
        ],
        // poster: require("../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerO: {},
      videoindex: 0,
      videoBlock: 0,
      Vwidth: 0,
      tiankongAnswer: [],
      LuAudioUrl: "",
      isRecord: false,
      isPlayerRecord: false,
      handle: {},
    };
  },
  methods: {
    // 开始录音
    startRecorder() {
      let _this = this;
      if (!_this.isRecord) {
        recorder.destroy(); // 销毁录音
        _this.isRecord = true;
        recorder.start().then(
          () => {},
          (error) => {
            _this.$message.error(`${error.name} : ${error.message}`);
            // 出错了
            console.log(`${error.name} : ${error.message}`);
          }
        );
      } else {
        _this.isRecord = false;
        recorder.stop(); // 结束录音
      }
    },

    // 录音播放
    playRecorder() {
      if (!recorder.fileSize) {
        return;
      }
      if (!this.isPlayerRecord) {
        this.isPlayerRecord = true;
        recorder.play();
      } else {
        this.isPlayerRecord = false;
        recorder.stopPlay(); // 停止录音播放
      }
      recorder.onplayend = () => {
        this.isPlayerRecord = false;
        console.log("onplayend");
      };
    },

    /**
     * 文件格式转换 wav-map3
     * */
    getMp3Data() {
      if (!recorder.fileSize) {
        this.$message.error("请录音后在上传语音");
        return;
      }
      const mp3Blob = this.convertToMp3(recorder.getWAV());
      let audioFile = this.dataURLtoAudio(mp3Blob, "音频");
      console.log(audioFile);
      this.beforeUpload1(audioFile, 3);
      // recorder.download(mp3Blob, "recorder", "mp3");
    },
    convertToMp3(wavDataView) {
      // 获取wav头信息
      const wav = lamejs.WavHeader.readHeader(wavDataView); // 此处其实可以不用去读wav头信息，毕竟有对应的config配置
      const { channels, sampleRate } = wav;
      const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128);
      // 获取左右通道数据
      const result = recorder.getChannelData();
      const buffer = [];
      const leftData =
        result.left &&
        new Int16Array(result.left.buffer, 0, result.left.byteLength / 2);
      const rightData =
        result.right &&
        new Int16Array(result.right.buffer, 0, result.right.byteLength / 2);
      const remaining = leftData.length + (rightData ? rightData.length : 0);
      const maxSamples = 1152;
      for (let i = 0; i < remaining; i += maxSamples) {
        const left = leftData.subarray(i, i + maxSamples);
        let right = null;
        let mp3buf = null;
        if (channels === 2) {
          right = rightData.subarray(i, i + maxSamples);
          mp3buf = mp3enc.encodeBuffer(left, right);
        } else {
          mp3buf = mp3enc.encodeBuffer(left);
        }
        if (mp3buf.length > 0) {
          buffer.push(mp3buf);
        }
      }

      const enc = mp3enc.flush();
      if (enc.length > 0) {
        buffer.push(enc);
      }
      return new Blob(buffer, { type: "audio/mp3" });
    },
    dataURLtoAudio(blob, filename) {
      return new File([blob], filename, { type: "audio/mp3" });
    },
    change(val) {
      console.log(val);
    },
    goTo(path) {
      this.$router.push(path);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    jump(cid) {
      window.parent.postMessage({ cid: cid, type: "1" }, "*");
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
    },
    init() {},
    handleClose(done) {
      done();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    onExceed() {
      this.$message.error("课程海报仅支持上传一张，请删除后再进行上传");
    },
    //uuid生成
    guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    // answerWork() {
    //   this.steps++;
    // },
    addTool(t) {
      if (t == 1) {
        window.parent.postMessage({ tools: "1" }, "*");
      } else if (t == 3) {
        window.parent.postMessage({ tools: "3" }, "*");
      } else if (t == 7) {
        window.parent.postMessage({ tools: "7" }, "*");
      }
    },
    answerQue() {
      this.dialogVisible = true;
    },
    isChooseActive(t) {
      if (this.typeC.length == 0) {
        this.typeC.push(t);
      } else {
        if (this.typeC.indexOf(t) != -1) {
          this.typeC.splice(this.typeC.indexOf(t), 1);
        } else {
          this.typeC.push(t);
        }
      }
    },
    showMember(i) {
      if (this.typeC.length > 0) {
        this.addWork(1);
      } else {
        this.$message.error("至少选择一个答案！");
      }
    },
    clean(type) {
      if (type == 1) {
        this.upload[0].url.splice(0, 1);
      } else if (type == 2) {
        this.upload[0].upVedio.splice(0, 1);
      }
    },
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },
    imgChange(file, fileList, type) {
      if (type == 1) {
        var _tmp = this.upload[0].url;
      } else if (type == 2) {
        // var _tmp = this.upload[0].upVedio;
        var _tmp = this.upload[0].url;
      } else if (type == 100) {
        var _tmp = this.imgFileUp;
      }
      this.noneBtnImg = _tmp.length >= 1;
    },
    beforeUpload1(event, type) {
      var file;
      if (type == 3) {
        file = event;
      } else {
        file = event.target.files[0];
      }
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;

      if (file) {
        _this.progress = 0;
        _this.proVisible = true;
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[file.name.split(".").length - 1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
            _this.progress = parseInt((evt.loaded * 80) / evt.total);
          })
          .send(function (err, data) {
            _this.progress = 100;
            setTimeout(() => {
              _this.proVisible = false;
            }, 1000);
            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              _this.upload[0].url = "";
              if (type == 1) {
                _this.upload[0].url = data.Location;
                _this.imgChange(null, null, type);
                _this.addWork(4);
              } else if (type == 2) {
                _this.upload[0].url = data.Location;
                _this.imgChange(null, null, type);
                _this.addWork(7);
              } else if (type == 3) {
                _this.LuAudioUrl = data.Location;
                _this.addWork(8);
              }
              console.log(data.Location);
            }
          });
      }
    },
    beforeUpload2(event) {
      var file = event;
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;
      _this.progress = 0;
      _this.proVisible = true;

      if (file) {
        var params = {
          Key: file.name.split(".")[0] + new Date().getTime() + "." + "png",
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
            _this.progress = parseInt((evt.loaded * 80) / evt.total);
          })
          .send(function (err, data) {
            _this.progress = 100;
            setTimeout(() => {
              _this.proVisible = false;
            }, 1000);
            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              _this.imgFileUp.push({
                name: file.name,
                url: data.Location,
                uid: file.uid,
              });
              _this.imgChange(null, null, type);
              console.log(data.Location);
            }
          });
      }
    },
    addJtWork(type) {
      if (this.isNoHomeWork == true || this.isAnswer == true) {
        this.$confirm(
          "您已经提交了该作业了，如果您再提交将覆盖上次提交的作业！",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.getImg();
            this.addSWork(type);
          })
          .catch(() => {});
      } else {
        this.getImg();
        // this.addSWork(type);
      }
    },
    addWork(type) {
      if (type == 5) {
        if (this.tkAnswer.length == 0) {
          this.$message.error("请选择对应的答案");
          return;
        }
      }
      //  else if (this.upload[0].upVedio.length == 0) {
      //   this.$message.error("请上传视频");
      //   return;
      // }
      // else if (this.upload[0].upIntro == "") {
      //   this.$message.error("请填写简要描述");
      //   return;
      // }
      var _str = "";
      if (type == 6) {
        _str = "您已经提交了评价了，如果您再提交将覆盖上次提交的评价！";
      } else {
        _str = "您已经提交了该作业了，如果您再提交将覆盖上次提交的作业！";
      }

      if (this.isNoHomeWork == true || this.isAnswer == true) {
        this.$confirm(_str, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.addSWork(type);
          })
          .catch(() => {});
      } else {
        this.addSWork(type);
      }
    },
    addSWork(type) {
      var a;
      if (type == 4 || type == 7) {
        a = this.upload[0].url;
      } else if (type == 6) {
        a = JSON.stringify(this.rateList);
      } else if (type == 1) {
        a = JSON.stringify(this.typeC);
      } else if (type == 5) {
        a = JSON.stringify(this.tkAnswer);
      } else {
        a = this.LuAudioUrl;
      }
      let params = {
        uid: this.userid,
        cid: this.cid,
        p: this.ppage - 1,
        t: type,
        upload: a,
        // upload: JSON.stringify(this.imgFileUp),
      };
      this.ajax
        .get(this.$store.state.api + "insertSWork", params)
        .then((res) => {
          // this.isNoHomeWork = true;
          // this.dialogVisible = true;
          // this.upload = res.data[0][0].upload;
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.selectSWork();
          if (this.tools[this.ppage - 1].tools.indexOf(12) != -1) {
            this.pick();
            this.isBlock = 0;
          }
        })
        .catch((err) => {
          this.$message.error("提交成功");
          console.error(err);
        });
    },
    selectSWork() {
      let _type = 0;
      if (this.tools[this.ppage - 1].tools) {
        if (
          this.tools[this.ppage - 1].tools.indexOf(1) != -1 ||
          this.tools[this.ppage - 1].tools.indexOf(3) != -1 ||
          this.tools[this.ppage - 1].tools.indexOf(6) != -1 ||
          this.tools[this.ppage - 1].tools.indexOf(7) != -1 ||
          this.tools[this.ppage - 1].tools.indexOf(10) != -1 ||
          this.tools[this.ppage - 1].tools.indexOf(16) != -1 ||
          this.tools[this.ppage - 1].tools.indexOf(13) != -1
        ) {
          _type = 4;
        } else if (this.tools[this.ppage - 1].tools.indexOf(9) != -1) {
          _type = 1;
        } else if (this.tools[this.ppage - 1].tools.indexOf(27) != -1) {
          _type = 5;
        } else if (this.tools[this.ppage - 1].tools.indexOf(14) != -1) {
          _type = 6;
        } else if (this.tools[this.ppage - 1].tools.indexOf(29) != -1) {
          _type = 7;
        } else if (
          this.tools[this.ppage - 1].tools.indexOf(30) != -1 ||
          this.tools[this.ppage - 1].tools.indexOf(12) != -1
        ) {
          _type = 8;
        }
      }
      this.isAnswer = false;
      this.isNoHomeWork = false;
      let params = {
        uid: this.userid,
        cid: this.cid,
        p: this.ppage - 1,
        type: _type,
      };
      this.ajax
        .get(this.$store.state.api + "selectSWork", params)
        .then((res) => {
          if (res.data[0].length > 0) {
            if (res.data[0][0].type == 1) {
              this.isAnswer = true;
              this.typeC = JSON.parse(res.data[0][0].upload);
            } else if (res.data[0][0].type == 5) {
              this.isNoHomeWork = true;
              this.tkAnswer = JSON.parse(res.data[0][0].upload);
            } else if (res.data[0][0].type == 4 || res.data[0][0].type == 7) {
              this.isNoHomeWork = true;
              this.upload[0].url = res.data[0][0].upload;
            } else if (res.data[0][0].type == 6) {
              this.isNoHomeWork = true;
              this.rateList = JSON.parse(res.data[0][0].upload);
            } else if (res.data[0][0].type == 8) {
              this.isNoHomeWork = true;
              this.LuAudioUrl = res.data[0][0].upload;
            }
          }
        })
        .catch((err) => {
          console.log("暂无作业");
          console.error(err);
        });
    },
    getImg() {
      var iframeHtml;
      let iframeBody;
      if (this.toolCount == 1) {
        iframeHtml = this.$refs.whiteBoard;
      } else if (this.toolCount == 3) {
        iframeHtml = this.$refs.mind;
      } else if (this.toolCount == 7) {
        iframeHtml = this.$refs.grid;
      }
      iframeBody = iframeHtml.contentWindow.document.body;
      this.iframeInnerHtml = iframeBody.innerHTML;
      var iframeIh = this.$refs.iframeIh;
      iframeIh.innerHTML = this.iframeInnerHtml;
      this.$forceUpdate();
      console.log(iframeIh);

      // var iframeHtml = this.$refs.whiteBoard;
      document.getElementById("shishi_loading").style.display = "flex";
      var _ajs = iframeHtml.contentWindow.document.createElement("script");
      _ajs.type = "text/javascript";
      _ajs.innerHTML =
        'var _js = document.createElement("script");\n' +
        '_js.type="text/javascript";\n' +
        '_js.src="https://html2canvas.hertzen.com/dist/html2canvas.min.js";\n' +
        "_js.onload = function(){\n" +
        ' var a = document.getElementsByTagName("img")\n' +
        ' for(var i = 0;i<a.length;i++){a[i].crossOrigin="anonymous"}\n' +
        " html2canvas(document.body).then(canvas => {\n" +
        '  var base64Url = canvas.toDataURL("image/png");\n' +
        'var base64 = "<img src=" + base64Url + " />"\n' +
        'var file = dataURLtoFile_shishi(base64Url, "截图")\n' +
        "beforeUpload_shishi(file," +
        "'" +
        this.userid +
        "'" +
        ", " +
        "'" +
        this.cid +
        "'" +
        ", " +
        "'" +
        (this.ppage - 1) +
        "'" +
        ", " +
        "'4'" +
        ")\n" +
        " });\n" +
        "}\n" +
        "document.head.appendChild(_js);\n";
      iframeHtml.contentWindow.document.head.appendChild(_ajs);

      // iframeHtml.contentWindow.jietu_shishi(this.userid, this.cid);

      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      // html2canvas(iframeBody, {
      //   allowTaint: true,
      //   backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
      //   useCORS: true, //支持图片跨域
      //   scale: 1, //设置放大的倍数
      // }).then((canvas) => {
      //   // 把生成的base64位图片上传到服务器,生成在线图片地址
      //   let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
      //   this.imgUrl = url; //将图片下载到本地
      //   let a = document.createElement("a"); // 生成一个a元素
      //   let event = new MouseEvent("click"); // 创建一个单击事件
      //   a.download = "作业"; // 设置图片名称没有设置则为默认
      //   a.href = this.imgUrl; // 将生成的URL设置为a.href属性
      //   a.dispatchEvent(event); // 触发a的单击事件
      //   let file = this.dataURLtoFile(url, "作业");
      //   this.imgFile = file;
      //   this.beforeUpload2(this.imgFile);
      //   this.addSWork();
      //   console.log(this.imgFile);
      // });
    },
    dataURLtoFile(dataurl, filename) {
      let arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    search() {},
    selectFile() {
      this.fileList = [];
      this.videoList = [];
      this.videoList2 = [];
      var a = ["PDF", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
      var b = this.tools[this.ppage - 1].file;
      for (var i = 0; i < b.length; i++) {
        if (
          a.indexOf(
            b[i].src
              .split(".")
              [b[i].src.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.fileList.push(b[i]);
        } else if (
          b[i].src
            .split(".")
            [b[i].src.split(".").length - 1].toLocaleUpperCase() == "MP3"
        ) {
          this.videoList2.push(b[i]);
        } else {
          this.videoList.push(b[i]);
        }
      }
      if (this.videoList.length) {
        this.playVideo();
      } else if (this.videoList2.length) {
        this.playVideo2();
      } else {
        this.videoBlock = 0;
      }
    },
    openFile(u) {
      this.pptImgUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + u;
      this.isBlock = 7;
    },
    playVideo() {
      var d = JSON.parse(JSON.stringify(this.playerOptions));
      // for (var i = 0; i < this.videoList.length; i++) {
      d.sources[0].src = this.videoList[0].src;
      this.playerO[0] = d;
      // this.videoindex = i;
      // }
      // this.isBlock = 6;
      this.videoBlock = 6;
    },
    playVideo2() {
      this.audioUrl = this.videoList2[0].src;
      this.isBlock = 9;
    },
    switchVideo(media) {
      this.playerO = {};
      this.playerOptions.poster = "";
      this.playerOptions.sources[0].src = media;
      this.playerO = this.playerOptions;
    },
    onPlayerPlay() {},
    howPage(page) {
      if (!this.pageTotal) {
        return;
      }
      if (page == this.pageTotal) {
        // this.isBlock = 3;
      } else {
        this.isBlock = 0;
        if (
          this.tools[page - 1].tools &&
          this.tools[page - 1].tools.indexOf(9) != -1
        ) {
          this.isBlock = 1;
        }
        // if (this.ppage > 3) {
        //   this.isBlock = 2;
        // }
        this.full = false;
        this.howTools = 0;
        this.toolCount = 0;
        if (this.tools[page - 1].tools && this.tools[page - 1].tools[0] == 12) {
          this.isBlock = 0;
        }
        if (
          this.tools[page - 1].tools &&
          (this.tools[page - 1].tools.indexOf(1) != -1 ||
            this.tools[page - 1].tools.indexOf(3) != -1 ||
            this.tools[page - 1].tools.indexOf(7) != -1)
        ) {
          this.isBlock = 4;
        }
        if (
          this.tools[page - 1].tools &&
          this.tools[page - 1].tools.length > 1
        ) {
          this.isBlock = 4;
        }
        if (this.tools[page - 1].tools && !this.tools[page - 1].tools.length) {
          this.isBlock = 0;
        }
        if (
          this.tools[this.ppage - 1].tools &&
          this.tools[this.ppage - 1].tools.indexOf(14) != -1
        ) {
          this.isBlock = 3;
        } else if (
          this.tools[this.ppage - 1].tools &&
          (this.tools[this.ppage - 1].tools.indexOf(3) != -1 ||
            this.tools[this.ppage - 1].tools.indexOf(3) != -1 ||
            this.tools[this.ppage - 1].tools.indexOf(6) != -1 ||
            this.tools[this.ppage - 1].tools.indexOf(7) != -1 ||
            this.tools[this.ppage - 1].tools.indexOf(10) != -1 ||
            this.tools[this.ppage - 1].tools.indexOf(16) != -1 ||
            this.tools[this.ppage - 1].tools.indexOf(29) != -1 ||
            this.tools[this.ppage - 1].tools.indexOf(13) != -1)
        ) {
          if (this.tools[this.ppage - 1].tools.indexOf(1) != -1) {
            // this.toolCount = 1;
            this.checkTools(1);
          } else if (this.tools[this.ppage - 1].tools.indexOf(3) != -1) {
            this.checkTools(3);
          } else if (this.tools[this.ppage - 1].tools.indexOf(28) != -1) {
            this.checkTools(28);
          } else if (this.tools[this.ppage - 1].tools.indexOf(4) != -1) {
            this.checkTools(4);
          } else if (this.tools[this.ppage - 1].tools.indexOf(6) != -1) {
            this.checkTools(6);
          } else if (this.tools[this.ppage - 1].tools.indexOf(7) != -1) {
            this.checkTools(7);
          }
          // this.isBlock = 2;
        } else if (
          this.tools[this.ppage - 1].file &&
          this.tools[this.ppage - 1].file.length
        ) {
          this.selectFile();
        } else if (
          this.tools[this.ppage - 1].tools &&
          this.tools[this.ppage - 1].tools.indexOf(27) != -1
        ) {
          if (this.tools[this.ppage - 1].answer) {
            this.tiankongAnswer = this.tools[this.ppage - 1].answer;
          }
          this.isBlock = 8;
        }

        if (this.tools[page - 1].tools && this.tools[page - 1].tools[0] == 30) {
          this.isBlock = 10;
        }

        if (
          this.tools[this.ppage - 1].file &&
          this.tools[this.ppage - 1].file.length
        ) {
        } else {
          this.videoBlock = 0;
        }
      }

      this.selectSWork();
    },
    pick() {
      this.handle.type = 0;
      this.handle.userid = "";
      let params = [
        {
          h: JSON.stringfy(this.handle),
          cid: this.cid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updatePptPage", params)
        .then((res) => {
          // this.dialogVisiblePick = false;
          let mindinfo = this.setInfo(
            this.cid,
            "us.mindNetwork",
            this.handle,
            "update",
            this.userid
          );
          this.updateSocket(mindinfo);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    pick2() {
      this.dialogVisiblePick = false;
      this.isBlock = 10;
    },
    setPage() {
      let params = {
        id: this.cid,
      };
      this.ajax
        .get(this.$store.state.api + "selectPptPage", params)
        .then((res) => {
          if (res.data[0].length > 0) {
            let _res = JSON.parse(res.data[0][0].page);
            this.handle = _res;
            if (
              _res.type == 2 &&
              _res.userid == this.userid &&
              this.isBlock != 10 &&
              this.tools[_res.page - 1].tools.indexOf(12) != -1
            ) {
              this.dialogVisiblePick = true;
            }
            if (_res.type == 1 && this.videoList.length) {
              let handle = _res;
              let a = this.$refs.zVideo;

              if (handle.isPlay == 1) {
                a.player.play();
              } else if (handle.isPlay == 2) {
                a.player.pause();
              }
            } else if (this.$refs.zVideo) {
              this.$refs.zVideo.player.pause();
            }

            if (this.ppage == _res.page && this.isBlock !== 0) {
              return;
            } else {
              this.ppage = _res.page;
              // this.ppage = 1;
              // this.ppage = 11;
              this.typeC = [];
              this.isAnswer = false;
              this.howPage(this.ppage);
            }
          }
        })
        .catch((err) => {
          // this.$message.error("查询失败");
          console.error(err);
        });
    },
    getPageTotal(total) {
      this.pageTotal = total;
    },
    getWidth(total) {
      this.Vwidth = total;
    },
    fullTools() {
      this.full = !this.full;
    },
    checkTools(tcount) {
      this.isBlock = 2;
      this.toolCount = tcount;
      let _this = this;
      _this.$nextTick(() => {
        setTimeout(() => {
          const script1 = document.createElement("script");
          script1.type = "text/javascript";
          script1.src =
            "https://pbl.cocorobo.cn/pbl-student-table/dist/js/jquery-3.6.0.min.js";
          const script2 = document.createElement("script");
          script2.type = "text/javascript";
          script2.src =
            "https://pbl.cocorobo.cn/pbl-student-table/dist/js/aws-sdk-2.235.1.min.js";
          const script3 = document.createElement("script");
          script3.type = "text/javascript";
          script3.src =
            "https://html2canvas.hertzen.com/dist/js/html2canvas.min.js";
          const script4 = document.createElement("script");
          script4.type = "text/javascript";
          script4.src =
            "https://pbl.cocorobo.cn/pbl-student-table/dist/js/jietu.js";

          if (_this.toolCount == 1) {
            _this.$refs.whiteBoard.onload = () => {
              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(
                script1
              );
              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(
                script2
              );
              // _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script3);
              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(
                script4
              );
            };
          } else if (_this.toolCount == 3) {
            _this.$refs.mind.onload = () => {
              _this.$refs.mind.contentWindow.document.body.appendChild(script1);
              _this.$refs.mind.contentWindow.document.body.appendChild(script2);
              // _this.$refs.mind.contentWindow.document.body.appendChild(script3);
              _this.$refs.mind.contentWindow.document.body.appendChild(script4);
            };
          } else if (_this.toolCount == 7) {
            _this.$refs.grid.onload = () => {
              _this.$refs.grid.contentWindow.document.body.appendChild(script1);
              _this.$refs.grid.contentWindow.document.body.appendChild(script2);
              // _this.$refs.grid.contentWindow.document.body.appendChild(script3);
              _this.$refs.grid.contentWindow.document.body.appendChild(script4);
            };
          }
        }, 0);
      });
    },
    getData() {
      let params = {
        id: this.cid,
      };
      this.ajax
        .get(this.$store.state.api + "getRealTimeClassById", params)
        .then((r) => {
          let res = r.data[0][0];
          this.pdfUrl = res.url;
          this.tools = JSON.parse(res.content);
        })
        .catch((err) => {
          // this.$message.error("查询失败");
          console.error(err);
        });
    },
    setData() {
      let _this = this;
      this.timer = setInterval(() => {
        _this.setPage();
      }, 1000);
    },
    getRealTimeClass() {
      let params = [
        {
          type: "getRealTimeClass",
          docid: this.cid,
          pageid: window.parent.US.pageId,
          userid: this.userid,
          post: "1",
        },
      ];
      this.ajax
        .post(this.$store.state.socket, params)
        .then((res) => {
          if (res.data[0].length) {
            let _res = {};
            try {
              _res = JSON.parse(res.data[0][0].page);
            } catch (error) {
              _res = res.data[0][0].page;
            }
            this.setPptData(_res)
          }
          console.log(res);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    setPptData(res) {
      let _res = res
      this.handle = _res;
      if (
        _res.type == 2 &&
        _res.userid == this.userid &&
        this.isBlock != 10 &&
        this.tools[_res.page - 1].tools.indexOf(12) != -1
      ) {
        this.dialogVisiblePick = true;
      }
      if (_res.type == 1 && this.videoList.length) {
        let handle = _res;
        let a = this.$refs.zVideo;

        if (handle.isPlay == 1) {
          a.player.play();
        } else if (handle.isPlay == 2) {
          a.player.pause();
        }
      } else if (this.$refs.zVideo) {
        this.$refs.zVideo.player.pause();
      }

      if (this.ppage == _res.page && this.isBlock !== 0) {
        return;
      } else {
        this.ppage = _res.page;
        // this.ppage = 1;
        // this.ppage = 11;
        this.typeC = [];
        this.isAnswer = false;
        this.howPage(this.ppage);
      }
    },
    setInfo(id, navid, content, type, userid) {
      var _data = {
        "us.realTimeClass": [
          {
            sendId: userid, //发送人id
            receiveId: id, //文件id
            type: navid, //消息类型
            messageInfo: {
              id: id, //操作ID
              type: type, //类型
              content: content, //内容
              docId: id, //文档id
              pageId: top.US.pageId, //当前页面id
            },
          },
        ],
      };
      return _data;
    },
    updateSocket(mindinfo) {
      let params = [
        {
          type: "send",
          mindinfo: encodeURIComponent(
            encodeURIComponent(JSON.stringify(mindinfo))
          ),
          post: 1,
        },
      ];
      this.ajax
        .post(this.$store.state.socket, params)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
    window.removeEventListener("message");
  },
  created() {
    this.getData();
    this.getRealTimeClass()

    let _this = this;
    window.addEventListener("message", function (e) {
      // 监听 message 事件
      if (
        e.data.type &&
        e.data.type == "realTimeClass_update" &&
        e.data.info.docId == _this.cid
      ) {
        // _this.data[e.data.info.id] = e.data.info.content;
        this.setPptData(e.data.info.content)
      }
      _this.$forceUpdate();
    });
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 9px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.blackBottom {
  background: rgb(0, 0, 0);
  height: 45px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.imgMiddle {
  width: 100%;
  position: relative;
  height: 100%;
}

.imgMiddle > img,
.imghalf > img,
.szt > img,
.uploadImg > img,
.uploadVedio > img,
.uploadImgPic > img,
.logoLive > img,
.close > img,
.deleteWord > img {
  width: 100%;
  height: 100%;
}
.deleteWord {
  width: 22px !important;
  height: 22px;
  position: absolute;
  right: -5px;
  top: -5px;
  cursor: pointer;
}
.blackBottomB {
  position: sticky;
  bottom: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  background: rgb(0, 0, 0);
  height: 45px;
  width: 100%;
}

.blackBottomB > div:nth-child(1) {
  margin-left: 10px !important;
}

.blackButton {
  color: #fff;
  background: #066ebe;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0 25px;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
}

.isNoOther {
  width: 100%;
  display: flex;
  height: calc(100% - 45px);
}

.imghalf {
  width: 60% !important;
}
.answerBox {
  padding: 25px;
  overflow: auto;
  height: 70%;
  box-sizing: border-box;
}
.answerTimuBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
}
.memberBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.memberBox > div {
  background: rgb(240, 185, 204);
  width: 120px;
  color: #fff;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  margin: 0 15px 15px 0;
  cursor: pointer;
}
.viewSta {
  background: rgb(97, 97, 97);
  color: #bebebe;
  margin: 20% auto 20px;
  width: 300px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  cursor: pointer;
}
.szt {
  width: 450px;
  margin: 20px auto;
}
.sztFooter {
  padding: 20px 10px 50px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

.timuButton {
  background: #649ef2;
  width: 75px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  margin-right: 20px;
  display: inline-block;
}
.anserBoxCss {
  margin: 30px 0 20px 0;
}
.anserBoxCss >>> .el-radio__label {
  font-size: 18px;
}
.anserBoxCss >>> .el-radio__inner {
  border-radius: 0px !important;
}
.nextStepBox {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.nextStepOne {
  background: #6b92c9;
  color: #fff;
  width: 110px;
  text-align: center;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}

.nextStepOne,
.nextStepOne {
  margin-left: 10px;
}
.toolList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}
.tools > div:nth-child(1) {
  width: 60px;
}
.tools > div:nth-child(1) > img {
  width: 100%;
  height: 100%;
}
.uploadImg {
  width: 100px;
  margin: 10px 0 0 15px;
  cursor: pointer;
}
.upImg {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  color: rgb(182, 182, 182);
  font-size: 20px;
}

.binfo_input {
  font: inherit;
  color: currentColor;
  width: 100%;
  margin: 0;
  padding: 15px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: content-box;
  background: none;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
}

.binfo_input:focus-visible {
  border: 1px solid rgba(61, 103, 188);
}
.hengCss {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px 0 0 20px;
}
.uploadImgPic {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 20px 0 0;
}
.uploadImgPic > div {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mask {
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progressBox {
  width: 500px;
  height: 180px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px 1px #bfbfbf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.progressBox .lbox {
  height: 100px;
  font-size: 19px;
  display: flex;
  align-items: center;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}

.progressBox >>> .el-progress-bar__outer {
  background-color: #d1dfff !important;
}
.progressBox .lbox {
  height: 100px;
  font-size: 19px;
  display: flex;
  align-items: center;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}
.logoLive {
  width: 35px;
}
.choose_style {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 10px 0 30px;
}

.choose_style span {
  background: #f8f9ff;
  color: #677fff;
  border: 1px solid #95b5ff;
  padding: 15px 20px;
  font-size: 25px;
  border-radius: 18px;
  cursor: pointer;
}

.choose_style span + span {
  margin-left: 25px;
}

.isChoose {
  color: #fff !important;
  background: #5e78fa !important;
}
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  cursor: pointer;
}
.score_box {
  font-size: 14px;
}
.score_box >>> .el-rate {
  margin: 10px 0 20px 0;
}
.score_box >>> .el-rate__icon {
  font-size: 23px;
}
.bz >>> .el-textarea__inner {
  width: 80%;
  background: #f9f9f9;
  border: 1px solid #afafaf;
  border-radius: 0px;
}

.tools_title {
  background: #000;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 40px;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}
.tools_title span {
  color: #fff;
}
.tools_title div {
  display: flex;
  align-items: center;
}
.full,
.closeImg {
  height: 22px;
  cursor: pointer;
}
.tools_title img,
img {
  margin-left: 10px;
}

.tools_box {
  width: 38.5%;
  max-width: 38.5%;
  overflow: auto;
  background: rgb(255, 255, 255);
  height: 91.5%;
  position: relative;
  margin: 10px 15px;
}

.tools_child_box {
  width: 100%;
  height: calc(90% - 40px);
  padding-top: 40px;
}

.fullStyle {
  width: 100% !important;
  max-width: 100% !important;
}
.toolCss {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: calc(100% / 6);
  align-items: center;
  text-align: center;
}
.toolImg {
  width: 70px;
  height: 70px;
  cursor: pointer;
}
.toolImg > img {
  width: 100%;
  height: 100%;
  margin: 0 !important;
}
.toolImg > div {
  font-size: 14px;
}
.iframeBox {
  overflow: auto;
  position: absolute;
  top: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.fileBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  width: 100%;
}
.fileListCss {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 15px 15px 0;
}
.fileCss {
  width: 70px;
  height: 70px;
  cursor: pointer;
  margin: 0 0 10px 0;
}
.fileCss > img {
  width: 100%;
  height: 100%;
  margin: 0;
}
.wheel {
  width: 100%;
  height: 100%;
}
.video-player >>> .video-js {
  height: 100%;
}
.tkCss {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 15px;
}
.workd_media {
  /* width: 1497.42px; */
  /* width: auto; */
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}

.tiankongAnswer {
  margin-left: 10px;
  color: #1834c0;
}

.tfalse {
  color: rgb(189, 30, 30) !important;
}

.video_wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99999;
  background: #fff;
  background: transparent;
  top: 0;
}
</style>