pbl-teacher-table/src/components/pages/liveRoom.vue

<template>
  <div
    style="
      background: #d0d6e4;
      width: 100%;
      height: 100%;
      margin: 0;
      position: relate;
    "
  >
    <!-- <div class="pb_content_body" style="height: 100%">
    </div>-->
    <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">湖心亭看雪可可乐博模拟展示课件</div>
      </div>
    </div>
    <div class="isNoOther">
      <div class="imgMiddle" :class="isBlock > 0 ? 'imghalf' : 'imgMiddle'" v-show="!full">
        <!-- <img src="../../assets/icon/kc1.png" alt /> -->
        <!-- <iframe
          style="width: 100%; height: 100%; border: none"
          src="https://view.officeapps.live.com/op/view.aspx?src=https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0701%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656644341323.pptx"
        ></iframe>-->
        <pdf :pdfUrl="pdfUrl" style="width: 100%; height: 100%" :getPage="getPage"></pdf>
      </div>
      <div
        style="
          background: #d0d6e4;
          height: 100%;
          min-width: 40%;
          max-width: 40%;
          overflow: auto;
          padding: 0px 0 50px;
        "
        v-if="isBlock == 1 || isBlock == 6"
      >
        <div style="background: #fff; height: 92%; width: 96%; margin: 10px auto">
          <div style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px">答题查看</div>
          <!-- <div class="answerBox" v-if="isBlock == 1">
            <div class="answerTimuBox" v-for="item in 1" :key="item">
              <div class="choose_style">
                <span>A</span>
                <span>B</span>
                <span>C</span>
                <span>D</span>
              </div>
            </div>
          </div>-->
          <div class="answerBox" v-if="isBlock == 1 || isBlock == 6">
            <div class="memberBox" v-if="isBlock == 1">
              <div
                :class="{ pAnswer: item.is == 2 }"
                v-for="(item, index) in studentArray"
                :key="index"
              >{{ item.name }}</div>
            </div>
            <div class="memberBox" v-if="isBlock == 6">
              <div
                :class="{ pAnswer: item.is == 2 }"
                v-for="(item, index) in studentArray2"
                :key="index"
                @click="whoAnswer(item, index)"
              >{{ item.name }}</div>
            </div>
            <div style="color: #948bdc; padding-top: 15px" v-if="isBlock == 1">共有四个选项，正在答题......</div>
            <div class="viewSta" @click="isBlock = 3" v-if="isBlock == 1">查看数据统计</div>
            <span slot="footer" class="dialog-footer sztFooter" v-if="isBlock == 6">
              <el-button type="primary" @click="isBlock = 0">结束</el-button>
              <!-- <el-button type="primary" @click="isBlock = 2">返回</el-button> -->
            </span>
          </div>
        </div>
      </div>
      <div
        style="
          background: #d0d6e4;
          height: 92%;
          min-width: 40%;
          max-width: 40%;
          overflow: auto;
          padding: 0px 0 50px;
        "
        v-if="isBlock == 3"
      >
        <div
          style="
            background: #fff;
            width: 96%;
            margin: 10px auto;
            position: relative;
          "
        >
          <div class="close" @click="isBlock = 0">
            <img src="../../assets/icon/close.png" alt />
          </div>
          <div style="color: #bfbfbf; padding: 15px 0 20px 25px">数据统计</div>
          <div style="padding-left: 25px">
            目前A选项
            <span class>{{ answerJson.A }}票</span>、B选项
            <span>{{ answerJson.B }}票</span>、C选项
            <span>{{ answerJson.C }}票</span>、D选项
            <span>{{ answerJson.D }}票</span>
          </div>
          <div class="szt">
            <!-- <img src="../../assets/szt.png" alt /> -->
            <AnswerData :problemJson="answerJson"></AnswerData>
          </div>
          <span slot="footer" class="dialog-footer sztFooter">
            <el-button type="primary" @click="isBlock = 0">关闭</el-button>
            <el-button type="primary" @click="isBlock = 1">返回</el-button>
          </span>
        </div>
      </div>
      <div class="answerBox tools_box" v-if="isBlock == 2" 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="toolsList[0].tools.indexOf(1) != -1"
            @click="(isBlock = 5), (toolCount = 1)"
            class="toolCss"
          >
            <!-- <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://iwb.cocorobo.cn/"
            ></iframe>-->
            <div class="toolImg">
              <img src="../../assets/icon/secondToolList/whiteBoard.png" alt />
              <div>电子白板</div>
            </div>
          </div>
          <div
            v-if="toolsList[0].tools.indexOf(2) != -1"
            @click="(isBlock = 5), (toolCount = 2)"
            class="toolCss"
          >
            <!-- <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://iwb.cocorobo.cn/"
            ></iframe>-->
            <div class="toolImg">
              <img src="../../assets/icon/secondToolList/note.png" alt />
              <div>便签</div>
            </div>
          </div>
          <div
            v-if="toolsList[0].tools.indexOf(3) != -1"
            @click="(isBlock = 5), (toolCount = 3)"
            class="toolCss"
          >
            <!-- <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
            ></iframe>-->
            <div class="toolImg">
              <img src="../../assets/icon/secondToolList/mindMapping.png" alt />
              <div>思维导图</div>
            </div>
          </div>
          <div
            v-if="toolsList[0].tools.indexOf(4) != -1"
            @click="(isBlock = 5), (toolCount = 4)"
            class="toolCss"
          >
            <!-- <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
            ></iframe>-->
            <div class="toolImg">
              <img src="../../assets/icon/thirdToolList/ask.png" alt />
              <div>问卷调查</div>
            </div>
          </div>
          <div
            v-if="toolsList[0].tools.indexOf(6) != -1"
            @click="(isBlock = 5), (toolCount = 6)"
            class="toolCss"
          >
            <!-- <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
            ></iframe>-->
            <div class="toolImg">
              <img src="../../assets/icon/secondToolList/doc.png" alt />
              <div>协同文档</div>
            </div>
          </div>
          <div
            v-if="toolsList[0].tools.indexOf(7) != -1"
            @click="(isBlock = 5), (toolCount = 7)"
            class="toolCss"
          >
            <!-- <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
            ></iframe>-->
            <div class="toolImg">
              <img src="../../assets/icon/secondToolList/mindNetwork.png" alt />
              <div>思维网格</div>
            </div>
          </div>
          <div
            v-if="toolsList[0].tools.indexOf(8) != -1"
            @click="(isBlock = 5), (toolCount = 8)"
            class="toolCss"
          >
            <!-- <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
            ></iframe>-->
            <div class="toolImg">
              <img src="../../assets/icon/secondToolList/library.png" alt />
              <div>素材库</div>
            </div>
          </div>
          <div v-if="toolsList[0].tools.indexOf(10) != -1" class="toolCss">
            <!-- <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
            ></iframe>-->
            <div class="toolImg">
              <div>倒计时</div>
            </div>
          </div>
          <div v-if="toolsList[0].tools.indexOf(11) != -1" class="toolCss">
            <!-- <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
            ></iframe>-->
            <div class="toolImg">
              <div>问答题</div>
            </div>
          </div>
          <div v-if="toolsList[0].tools.indexOf(13) != -1" class="toolCss">
            <!-- <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
            ></iframe>-->
            <div class="toolImg">
              <div>分小组</div>
            </div>
          </div>
          <div v-if="toolsList[0].tools.indexOf(14) != -1" class="toolCss">
            <!-- <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
            ></iframe>-->
            <div class="toolImg">
              <div>作业评价</div>
            </div>
          </div>
        </div>
      </div>
      <div class="answerBox tools_box" :class="{ fullStyle: full }" v-if="isBlock == 5">
        <!-- <div
          style="
            border-bottom: 3px solid rgb(44, 131, 238);
            width: 70px;
            padding-bottom: 3px;
            text-align: center;
            margin-bottom: 20px;
          "
        >
          选择工具
        </div>-->
        <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" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <iframe style="width: 100%; height: 100%; border: none" src="https://iwb.cocorobo.cn/"></iframe>
          </div>
          <div v-if="toolsList[0].tools[howTools] == 2" class="tools_child_box">
            <div class="tools_title">
              <span>便签</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <iframe
              style="width: 100%; height: 100%; border: none"
              src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/note"
            ></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" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <iframe
              style="width: 100%; height: 100%; border: none"
              src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
            ></iframe>
          </div>
          <div v-if="toolsList[0].tools[howTools] == 4" class="tools_child_box">
            <div class="tools_title">
              <span>问卷调查</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <iframe
              style="width: 100%; height: 100%; border: none"
              src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/ask"
            ></iframe>
          </div>
          <div v-if="toolsList[0].tools[howTools] == 6" class="tools_child_box">
            <div class="tools_title">
              <span>协同文档</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <iframe
              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" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <iframe
              style="width: 100%; height: 100%; border: none"
              src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
            ></iframe>
          </div>
          <div v-if="toolsList[0].tools[howTools] == 8" class="tools_child_box">
            <div class="tools_title">
              <span>素材库</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <iframe
              style="width: 100%; height: 100%; border: none"
              src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/library"
            ></iframe>
          </div>
          <div v-if="toolsList[0].tools[howTools] == 9" class="tools_child_box">
            <div class="tools_title">
              <span>选择题</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <div>选择题</div>
          </div>
          <div v-if="toolsList[0].tools[howTools] == 10" class="tools_child_box">
            <div class="tools_title">
              <span>倒计时</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <div>倒计时</div>
          </div>
          <div v-if="toolsList[0].tools[howTools] == 11" class="tools_child_box">
            <div class="tools_title">
              <span>问答题</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <div>问答题</div>
          </div>
          <div v-if="toolsList[0].tools[howTools] == 13" class="tools_child_box">
            <div class="tools_title">
              <span>分小组</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <div>分小组</div>
          </div>
          <div v-if="toolsList[0].tools[howTools] == 14" class="tools_child_box">
            <div class="tools_title">
              <span>作业评价</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <div>作业评价</div>
          </div>
          <div class="nextStepBox" v-if="toolsList[0].tools.length > 1">
            <!-- <div class="nextStepOne" @click="howTools--" v-if="howTools != 0">
              上一步
            </div>
            <div
              class="nextStepOne"
              @click="howTools++"
              v-if="howTools != toolsList[0].tools.length - 1"
            >
              下一步
            </div>-->
            <div class="nextStepOne" @click="isBlock = 2">返回</div>
          </div>
        </div>
        <!-- <div v-if="toolCount == 0" style="height: 90%">
          <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
          ></iframe>
        </div>
        <div v-if="toolCount == 1" style="height: 90%">
          <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://iwb.cocorobo.cn/"
          ></iframe>
        </div>
        <div v-if="toolCount == 2" style="height: 90%">
          <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
          ></iframe>
        </div>
        <div class="nextStepOne" @click="nextTool">下一步</div>-->
      </div>

      <div
        class="answerBox"
        style="
          width: 38.5%;
          max-width: 38.5%;
          overflow: auto;
          background: rgb(255, 255, 255);
          height: 91.5%;
          position: relative;
          margin: 10px 15px;
        "
        v-if="isBlock == 4"
      >
        <div
          style="
            color: #b7b7b7;
            border-left: 5px solid #a5b6e2;
            padding-left: 7px;
            height: 25px;
            line-height: 25px;
          "
        >查看作业</div>
        <div class="workBox">
          <div class="works" v-for="(w, wIndex) in worksList" :key="wIndex">
            <div class="workImg">
              <img
                :src="w.upload.upImg ? w.upload.upImg[0].url : mr"
                @click="previewImg(w.upload.upImg ? w.upload.upImg[0].url : mr)"
                alt
              />
            </div>
            <div class="workDetail">
              <div class="workLeft">
                <div class="workTx">
                  <img src="../../assets/avatar.png" alt />
                </div>
                <div class="workName">{{ w.sName }}</div>
              </div>
              <div class="workRight">{{ w.time }}</div>
              <div class="workBtn" @click="isBlock = 7">查看评价</div>
            </div>
          </div>
        </div>
        <div class="returnButton" @click="isBlock = 0">关闭</div>
      </div>
      <div
        class="answerBox"
        v-if="isBlock == 7"
        style="
          padding: 0 0 0 25px;
          width: 38.5%;
          max-width: 38.5%;
          overflow: auto;
          background: rgb(255, 255, 255);
          height: 91.5%;
          position: relative;
          margin: 10px 15px;
        "
      >
        <div style="color: #bfbfbf; padding: 15px 0 15px 0; font-size: 20px">课堂评价</div>
        <div>
          <div class="score_box">
            <span>自我评价</span>
            <el-rate v-model="rateList.ca"></el-rate>
          </div>
          <div class="score_box">
            <span>他人评价</span>
            <el-rate v-model="rateList.sia"></el-rate>
          </div>
        </div>
        <div>
          <div style="padding-bottom: 15px; sont-size: 14px">备注</div>
          <div class="bz">
            <el-input
              type="textarea"
              placeholder="请输入备注…"
              :rows="6"
              resize="none"
              v-model="rateList.content"
            ></el-input>
          </div>
        </div>
        <span
          slot="footer"
          class="dialog-footer sztFooter"
          style="
            padding: 0 0 30px 0px;
            position: absolute;
            right: 20px;
            bottom: 0;
          "
        >
          <el-button type="primary" @click="isBlock = 4">返回</el-button>
        </span>
      </div>
    </div>

    <div class="blackBottomB">
      <div style="display: flex">
        <div class="blackButton" @click="showMember(0)" v-if="steps == 3">开始答题</div>
        <div
          class="blackButton"
          @click="isBlock = 2"
          v-if="
            4 <= steps &&
            steps <= 12 &&
            steps != 8 &&
            steps != 11 &&
            steps != 12 &&
            toolsList[0].tools[howTools] != 10 &&
            toolsList[0].tools[howTools] != 11 &&
            toolsList[0].tools[howTools] != 13
          "
        >查看工具</div>
        <div class="blackButton" @click="checkStudentAnswer" v-if="steps == 8">选择学生回答</div>
        <div
          class="blackButton"
          @click="selectSWork"
          v-if="
            steps == 11 ||
            steps == 12 ||
            (4 <= steps &&
              steps <= 12 &&
              steps != 8 &&
              steps != 11 &&
              steps != 12 &&
              toolsList[0].tools[howTools] != 10 &&
              toolsList[0].tools[howTools] != 11 &&
              toolsList[0].tools[howTools] != 13)
          "
        >查看作业</div>
      </div>
      <!-- <div
        class="blackButton"
        style="margin-right: 10px"
        @click="dialogVisible2 = true"
      >
        查看报告
      </div>-->
    </div>
    <el-dialog
      title="选择答题"
      :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"
      >是否让“{{ answerStudent }}”同学进行单独答题？</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="dialogVisible1"
      :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="dialogVisible1 = false"
      >确定</div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible2"
      :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="dialogVisible2 = false"
      >确定</div>
    </el-dialog>
    <ImgDraw :drawShow="drawShow" @closeDraw="closeDraw" :bg="bg"></ImgDraw>
    <img id="img1" ref="img1" hidden="hidden" />
  </div>
</template>

<script>
import "../../common/aws-sdk-2.235.1.min";
import EditorBar from "../../components/tools/wangEnduit";
import AnswerData from "./components/answerData";
import pdf from "./components/pdf";
import ImgDraw from "./components/imgDraw/imgDraw";
export default {
  components: { EditorBar, AnswerData, pdf, ImgDraw },
  data() {
    return {
      pdfUrl:
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
      isLoading: false,
      full: false,
      drawShow: false,
      bg: null,
      formLabelWidth: "100px",
      userid: this.$route.query.userid,
      cid: this.$route.query.cid,
      oid: this.$route.query.oid,
      mr: require("../../assets/icon/kc1.png"),
      timu: [],
      // a: false,
      // b: false,
      // c: false,
      steps: 0,
      isBlock: 0,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      toolCount: 0,
      answerBox: "",
      answer: [
        { name: "A.1568" },
        { name: "B.720" },
        { name: "C.1728" },
        { name: "D.480" },
      ],
      studentArray: [
        { name: "张可松", is: 1 },
        { name: "陈佳佳", is: 1 },
        { name: "许琦基", is: 1 },
        { name: "洛维奇", is: 1 },
        { name: "罗伟", is: 1 },
        { name: "李孝雄", is: 1 },
        { name: "李琪琪", is: 1 },
        { name: "黄子韬", is: 1 },
        { name: "张嘉琪", is: 1 },
        { name: "陈家", is: 1 },
        { name: "张可", is: 1 },
        { name: "庄小小", is: 1 },
        { name: "梁思成", is: 1 },
        { name: "房小玲", is: 1 },
        { name: "李卫涛", is: 1 },
        { name: "李玫儿", is: 1 },
        { name: "张可梦", is: 1 },
        { name: "李琦", is: 1 },
        { name: "梁惠", is: 1 },
        { name: "许佳琪", is: 1 },
      ],
      studentArray2: [
        { name: "张可松", is: 1 },
        { name: "陈佳佳", is: 1 },
        { name: "许琦基", is: 1 },
        { name: "洛维奇", is: 1 },
        { name: "罗伟", is: 1 },
        { name: "李孝雄", is: 1 },
        { name: "李琪琪", is: 1 },
        { name: "黄子韬", is: 1 },
        { name: "张嘉琪", is: 1 },
        { name: "陈家", is: 1 },
        { name: "张可", is: 1 },
        { name: "庄小小", is: 1 },
        { name: "梁思成", is: 1 },
        { name: "房小玲", is: 1 },
        { name: "李卫涛", is: 1 },
        { name: "李玫儿", is: 1 },
        { name: "张可梦", is: 1 },
        { name: "李琦", is: 1 },
        { name: "梁惠", is: 1 },
        { name: "许佳琪", is: 1 },
      ],
      askCount: 0,
      answerJson: {
        A: 0,
        B: 0,
        C: 0,
        D: 0,
      },
      answerStudent: "",
      tools: [
        "",
        "",
        { tools: [9] }, //选择题
        { tools: [10] }, //倒计时
        { tools: [11] }, //问答题
        { tools: [11] }, //问答题
        { tools: [3, 1] }, //思维导图/电子白板
        { tools: [12] }, //选人回答
        { tools: [10, 13] }, //倒计时、分小组
        { tools: [3, 1, 7] }, //思维导图/电子白板/思维网格
        { tools: [14] }, //查看作业
        { tools: [14] }, //查看作业
        "", //查看作业
        //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价
      ],
      howTools: 0,
      worksDetail: [],
      worksList: [],
      toolsList: [],
      isNext: false,
      rateList: {
        ca: 5,
        sia: 5,
        content: "老师讲得真好",
      },
    };
  },
  methods: {
    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();
    },
    //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;
        }
      }
    },
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    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" }, "*");
      }
    },
    nextTool() {
      if (this.howTools < this.toolsList[0].tools.length - 1) {
        this.howTools++;
        if (this.howTools == this.toolsList[0].tools.length - 1) {
          this.isNext = true;
        }
      } else if (this.howTools == this.toolsList[0].tools.length - 1) {
        if (this.isNext == true) {
          this.howTools = this.howTools - 1;
          this.isNext = false;
        }
      }
      // if (this.toolCount < 2) {
      //   this.toolCount++;
      // } else {
      //   this.steps = 0;
      //   this.type = 0;
      //   this.toolCount = 0;
      // }
    },
    // answerWork() {
    //   this.isBlock = 1;
    // },
    checkStudentAnswer() {
      this.isBlock = 6;
      for (var i = 0; i < this.studentArray.length; i++) {
        this.studentArray2[i].is = 1;
      }
    },
    showMember(i) {
      let _this = this;
      this.isBlock = 1;
      setTimeout(() => {
        for (var i = 0; i < 10; i++) {
          var a = _this.randomNum(0, _this.studentArray.length - 1);
          _this.studentArray[a].is = 2;
        }
        this.askCount = 0;
        for (var i in _this.studentArray) {
          if (_this.studentArray[i].is == 2) {
            _this.askCount++;
          }
        }
        i = 0;
        this.answerJson = {
          A: 0,
          B: 0,
          C: 0,
          D: 0,
        };
        for (var i = 0; i < _this.askCount; i++) {
          var a = _this.randomNum(0, 3);
          if (a === 0) {
            _this.answerJson.A++;
          } else if (a === 1) {
            _this.answerJson.B++;
          } else if (a === 2) {
            _this.answerJson.C++;
          } else if (a === 3) {
            _this.answerJson.D++;
          }
        }
      }, 2000);
    },
    whoAnswer(item, index) {
      for (var i = 0; i < this.studentArray.length; i++) {
        this.studentArray2[i].is = 1;
      }
      this.studentArray2[index].is = 2;
      this.answerStudent = item.name;
      this.dialogVisible = true;
    },
    howPage(page) {
      this.howTools = 0;
      if (this.toolsList.length > 0) {
        this.toolsList = [];
        this.toolsList.push({ tools: this.tools[page - 1].tools });
      } else {
        this.toolsList.push({ tools: this.tools[page - 1].tools });
      }
    },
    getPage(page) {
      console.log(page);
      let params = [
        {
          page: page,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updatePptPage", params)
        .then((res) => {
          this.steps = page;
          this.isBlock = 0;
          if (page == 3) {
            this.howPage(page);
          } else if (page == 4) {
            this.howPage(page);
          } else if (page == 5) {
            this.howPage(page);
          } else if (page == 6) {
            this.howPage(page);
          } else if (page == 7) {
            this.howPage(page);
          } else if (page == 8) {
            this.howPage(page);
          } else if (page == 9) {
            this.howPage(page);
          } else if (page == 10) {
            this.howPage(page);
          } else if (page == 11) {
            this.howPage(page);
          } else if (page == 12) {
            this.howPage(page);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectSWork() {
      this.worksList = [];
      let params = {
        uid: "",
        cid: this.cid,
      };
      this.ajax
        .get(this.$store.state.api + "selectSWork", params)
        .then((res) => {
          this.worksDetail = res.data[0];
          for (var i = 0; i < this.worksDetail.length; i++) {
            this.worksList.push({
              upload: JSON.parse(this.worksDetail[i].upload)[0],
              sName: this.worksDetail[i].username,
              time: this.worksDetail[i].time,
            });
          }
          this.isBlock = 4;
        })
        .catch((err) => {
          this.$message.error("查询失败");
          console.error(err);
        });
    },
    previewImg(url) {
      // this.$hevueImgPreview(url);
      // this.$hevueImgPreview(url);
      this.drawShow = true;
      this.bg = url;
      // this.setAvatarBase64(url, (base64) => {
      //   this.$nextTick(() => {
      //     this.drawShow = true;
      //     this.bg = base64;
      //   });
      // });
    },
    closeDraw() {
      this.bg = null;
      this.drawShow = false;
    },
    fullTools() {
      this.full = !this.full;
    },
    closeTools() {
      this.full = false;
      this.isBlock = 2;
    },
    // 将网络图片转换成base64格式
    transBase64FromImage(image) {
      let canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0, image.width, image.height);
      // 可选其他值 image/jpeg
      return canvas.toDataURL("image/jpeg");
    },
    // 设置需要展示的图片  base64
    setAvatarBase64(src, callback) {
      let _this = this;
      let image = new Image();
      // let image = this.$refs.img1;
      // 处理缓存
      // image.src = src + "?v=" + Math.random();
      image.src = src;
      // 支持跨域图片
      // image.crossOrigin = "anonymous";
      // crossorigin="anonymous"
      image.onload = function () {
        let base64 = _this.transBase64FromImage(image);
        callback && callback(base64);
        // console.log(base64);
        // return base64
      };
    },
  },
  created() {},
};
</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%;
}

.imgMiddle {
  width: 100%;
  height: calc(100% - 45px);
  /* max-height: 920px; */
}

.imgMiddle > img,
.imghalf > img,
.szt > img,
.logoLive > img,
.close > img {
  width: 100%;
  height: 100%;
  /* max-height: 920px; */
}

.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 5px;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
}

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

.imghalf {
  width: 60% !important;
  height: calc(100% - 45px);
  /* max-height: 920px; */
}
.answerBox {
  padding-left: 25px;
  padding: 25px;
  box-sizing: border-box;
  /* max-height: 800px;
  overflow: auto; */
}
.answerTimuBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding-bottom: 15px;
}
.memberBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.memberBox > div {
  background: rgb(79 213 163);
  width: 120px;
  color: #fff;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  margin: 0 15px 15px 0;
  cursor: pointer;
}

.memberBox .pAnswer {
  background: rgb(55 197 144);
}

.viewSta {
  background: rgb(97, 97, 97);
  color: #bebebe;
  margin: 20px auto 20px;
  width: 300px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  cursor: pointer;
}
.szt {
  width: 100%;
  margin: 20px auto;
}
.sztFooter {
  padding: 20px 10px 50px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
.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,
.workImg > img,
.workTx > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  margin: 0;
}
.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;
}

.logoLive {
  width: 35px;
}
.anserBoxCss {
  box-sizing: border-box;
  padding: 20px 0;
}
.anserBoxCss >>> .el-radio__label {
  font-size: 18px;
}
.anserBoxCss >>> .el-radio__inner {
  border-radius: 0px !important;
}

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

.choose_style .active {
  color: #fff;
  background: #5e78fa;
}
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  cursor: pointer;
}
.workBox {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.works {
  width: 31%;
  border: 1px solid #ececec;
  /* height: 160px; */
  margin: 0 10px 10px 0;
  /* cursor: pointer; */
  min-width: 180px;
  border-radius: 3px;
  overflow: hidden;
}
.workImg {
  /* width: 214px; */
  height: 117px;
}
.workDetail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 0 0;
  flex-direction: column;
}
.workLeft {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  padding: 0px 5px;
  box-sizing: border-box;
}
.workTx {
  width: 25px;
}
.workName {
  font-size: 14px;
  padding-left: 13px;
}
.workRight {
  font-size: 14px;
  color: #ccc;
  margin: 0 0 3px;
  padding: 0 5px;
  width: 100%;
  box-sizing: border-box;
}

.workBtn {
  width: 100%;
  background: rgb(110 145 203);
  color: #fff;
  cursor: pointer;
  text-align: center;
  padding: 5px 0;
}

.returnButton {
  position: absolute;
  bottom: 20px;
  width: 230px;
  background: #616161;
  left: 35%;
  color: #ababab;
  text-align: center;
  border-radius: 5px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  cursor: pointer;
}

.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: 150px;
  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;
}
.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: 40%;
  background: #f9f9f9;
  border: 1px solid #afafaf;
  border-radius: 0px;
}
</style>