pbl-student-table/src/components/pptEasyClass/index.vue

<template>
  <div class="pptEasyClass">
    <div class="pec_main" v-loading="pageLoading">
      <!-- 录音转文字 -->
      <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;" :src="iframeSrcop" ref="iiframe"
        v-show="false"></iframe>
      <div class="pec_header">
        <div class="pec_h_left">
          <!-- || tType == 1 -->
          <div @click.stop="back" class="backBtn" v-if="screenType != 2">
            <img src="../../assets/icon/newIcon/return.svg" alt="" />
          </div>
          <div @click.stop="gotoCourseManage" class="backBtn" v-if="screenType == 2 && tType == 1">
            <img src="../../assets/icon/newIcon/return.svg" alt="" />
          </div>
          <div v-if="tcid" class="class-info-group">
            <span class="class-label">{{ lang.ssClass }}</span>
            <span class="class-value class-value2" @click="openSelectClass">
              {{ className }}
              <svg t="1776672009773" class="xia-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="4735" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
                <path
                  d="M562.5 771c-14.3 14.3-33.7 27.5-52 23.5-18.4 3.1-35.7-11.2-50-23.5L18.8 327.3c-22.4-22.4-22.4-59.2 0-81.6s59.2-22.4 81.6 0L511.5 668l412.1-422.3c22.4-22.4 59.2-22.4 81.6 0s22.4 59.2 0 81.6L562.5 771z"
                  p-id="4736" fill="currentColor"></path>
              </svg>
            </span>
          </div>
          <div v-if="tcid" class="class-info-group">
            <span class="class-label" v-if="inviteCode">{{ lang.ssInviteCode }}</span>
            <span class="class-value" v-if="inviteCode">{{ inviteCode }}</span>
          </div>
          <div @click.stop="openShareDialog" class="shareBtn" v-if="tcid && tType == 1">
            <img src="../../assets/share.svg" alt="" />
          </div>
        </div>
        <div class="pec_h_center">
          <el-tooltip effect="dark" :content="lang.ssRefresh" placement="bottom">
            <div class="refresh_icon" @click="refreshCourse">
              <img src="../../assets/icon/course/refresh-2.svg" />
            </div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark"
            :content="recordedForm.status == 1 ? lang.ssFinishClassRecording : lang.ssBeginClassRecording"
            placement="bottom"
            v-show="(jArray.includes(oid) || jArray.includes(org)) && courseDetail.userid == userid && tcid">
            <div class="pec_h_r_btn_refresh" :class="{ 'recording': recordedForm.status == 1 }"
              @click="toggleRecording">
              <svg t="1772588344140" viewBox="0 0 1024 1024" p-id="1693" width="200" height="200">
                <path
                  d="M512 1024a512.568889 512.568889 0 0 1-512-512 512.625778 512.625778 0 0 1 512-512 512.568889 512.568889 0 0 1 512 512 512.568889 512.568889 0 0 1-512 512zM512 73.329778c-241.948444 0-438.670222 196.835556-438.670222 438.670222S270.051556 950.670222 512 950.670222s438.670222-196.835556 438.670222-438.670222S753.948444 73.329778 512 73.329778z m0 686.592a245.191111 245.191111 0 1 1 0-490.382222 245.191111 245.191111 0 0 1 0 490.382222z"
                  p-id="1694"></path>
              </svg>
              <span>{{ recordedForm.status == 1 ? lang.ssStopRecording2 : lang.ssRecord }}</span>
            </div>
          </el-tooltip>

          <el-tooltip effect="dark" :content="courseDetail.title" placement="bottom">
            <div class="pec_h_l_title">
              <span>{{ courseDetail.title }}</span>
            </div>
          </el-tooltip>
          <div class="free-browse-switch" v-if="courseDetail.userid == userid">
            <el-switch v-model="freeBrowse" :active-value="false" :inactive-value="true" class="custom-switch"
              active-color="#03ae2b" inactive-color="#d8d8d8" @change="onFreeBrowseChange"></el-switch>
            <span class="switch-label" :class="{ active: freeBrowse }">{{ freeBrowse ? lang.ssFreeBrowse :
              lang.ssFollowMode }}</span>
          </div>
          <!-- <div class="free-browse-switch" v-if="courseDetail.userid == userid">
            <el-switch v-model="isCan" :active-value="true" :inactive-value="false" class="custom-switch"
              active-color="#03ae2b" inactive-color="#d8d8d8" @change="onIsCanChange"></el-switch>
            <span class="switch-label" :class="{ active: isCan }">{{ isCan ? lang.ssShowResult : lang.ssHideResult }}</span>
          </div> -->
          <div class="free-browse-switch" v-if="tType == 2">
            <span class="switch-label" :class="{ active: freeBrowse }">{{ freeBrowse ? lang.ssFreeBrowse :
              lang.ssFollowMode }}</span>
          </div>

        </div>
        <div class="pec_h_right">
          <div class="pec_h_r_btnArea">
            <!-- openObserveDialog -->
            <!-- toggleRecording -->

            <div class="pec_h_r_btn_uploadVoiceBtn" @click="uploadVoiceBtn" v-if="courseDetail.userid == userid"
              v-show="false">
              <span>{{ lang.ssUploadRecordingFile }}</span>
            </div>

            <div class="pec_h_r_btn_afterClass" @click="afterClass" v-if="courseDetail.userid == userid">
              <img src="../../assets/icon/newIcon/afterClass.svg" alt="" />
              <span>{{ lang.ssEndClass }}</span>
            </div>

            <div class="name_box" v-if="tType == 2">
              {{ userJson.username }}
            </div>
          </div>
        </div>
      </div>

      <div class="pec_content">
        <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;clipboard-write;clipboard-read"
          webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="no" border="0" :src="iframeSrc"
          v-if="showIframe" style="width: 100%; height: 100%; border: none" ref="ppt"></iframe>
      </div>
    </div>

    <!-- 课堂观察弹窗 -->
    <el-dialog :visible.sync="showObserveDialog" :close-on-click-modal="false" :close-on-press-escape="false"
      :show-close="true" width="90%" top="5vh" class="observe-dialog">
      <iframe v-if="showObserveDialog" :src="observeDialogUrl" frameborder="0"
        style="width: 100%; height: 85vh; border: none;"></iframe>
    </el-dialog>
    <selectTeachingClassDialog :courseDetail="courseDetail" :userId="userid" ref="selectTeachingClassDialogRef" @success="selectClassSuccess" @changeClassList="changeClassList"/>


    <!-- 消息提示组件 -->
    <messageInstruction ref="messageInstructionRef"></messageInstruction>
    <!-- 确认提示组件 -->
    <confirmInstruction ref="confirmInstructionRef"></confirmInstruction>
    <!-- 分享弹窗 -->
    <shareDialog ref="shareDialogRef"></shareDialog>
  </div>
</template>

<script>
import { myMixin } from '../../mixins/mixin';
import selectTeachingClassDialog from "../dialog/selectTeachingClassDialog2.vue";

import messageInstruction from '../components/messageInstruction.vue';
import confirmInstruction from '../components/confirmInstruction.vue';
import shareDialog from './shareDialog.vue';
export default {
  mixins: [myMixin],
  components: {
    messageInstruction,
    confirmInstruction,
    selectTeachingClassDialog,
    shareDialog
  },
  data() {
    return {
      id: this.$route.query.courseId,
      userid: this.$route.query.userid,
      classId: this.$route.query.cid,
      role: this.$route.query.role,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      tType: this.$route.query.tType,
      courseType: this.$route.query.type,
      screenType: this.$route.query.screenType,
      tcid2: this.$route.query.tcid,
      classList: [],
      tcid: "",
      className: "",
      showIframe: false,
      iframeSrc: "",
      courseDetail: {},
      pageLoading: false,
      inviteCode: "",
      startTime: "",
      freeBrowse: true, // 默认自由浏览
      opertimer: null, // 定时器
      jArray: [],
      // 录音相关变量
      languageRadio: 2, // 语言选择
      recordedForm: {
        status: 0, // 0: 未开始, 1: 录音中, 2: 暂停, 3: 结束
        startTime: 0,
        endTime: 0,
        timeDuration: 0,
        textList: [],
        audioBlob: []
      },
      controlsStatus: 0, // 控制状态
      showIndexPage: true, // 显示索引页
      pageStatus: 1, // 页面状态
      editorBarData: {
        type: "0",
        content: ""
      },
      uploadFileLoading: false, // 上传文件加载状态
      transcriptionData: {
        content: ""
      },
      showGetTextLoading: false, // 显示获取文本加载状态
      // 弹窗相关
      showObserveDialog: false, // 显示课堂观察弹窗
      observeDialogUrl: "", // 课堂观察链接
      // 录音时间记录
      recordingStartTime: "", // 开始录音时间
      recordingEndTime: "", // 结束录音时间
      isResultArray: [],
      isCan: false,
      timeoutPan: null,
      isTimeOutPan: false,
    };
  },
  computed: {
    iframeSrcop() {
      if (this.$region == 'hk') {
        return `https://cloud.cocorobo.hk/browser/public/index.html`;
      } else if (this.$region == 'com') {
        return `https://cloud.cocorobo.com/browser/public/index.html`;
      } else {
        return `https://beta.cloud.cocorobo.cn/browser/public/index.html`;
      }
    }
  },
  methods: {
    openSelectClass(){
      this.$refs.selectTeachingClassDialogRef.open({classList:this.classList}, this.tcid2)
    },
    addInviteCodeOne(cid) {
      return new Promise((resolve)=>{
        let params = [
        {
          courseId: this.id,
          inviteCode: cid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "add_courseInviteCode2", params)
        .then((res) => {
          console.log(res.data)
          resolve(res.data)
        })
        .catch((err) => {
          resolve(err.messages)
          console.error(err);
        });
      })
    },
    async selectClassSuccess(classId){
      if(classId){
        let data = await this.addInviteCodeOne(classId)
        console.log("addInviteCodeOne",data)
        this.tcid2 = classId
        this.getClassName()
        this.getCourseDetail();
      }else if(this.tcid2){
        this.ticd2 = ''
        this.getCourseDetail();
      }
      // this.gotoCourse(classId);
      this.$refs.selectTeachingClassDialogRef.close();
      this.setoTime("1");
    },
    async changeClassList(data){
      this.classList = JSON.parse(JSON.stringify(data))
      let params = [{
        cid:this.id,
        juri:this.classList.map(i=>i.id).join(',')
      }]
      this.ajax.post(this.$store.state.api+"update_CourseJuriById",params).then(res=>{
        if(res.data==1){
          console.log(this.lang.ssModifySuccess)
        }
      })

      //this.inviteCodeFn();
    },
    goTo(path) {
      this.$router.push(path);
    },
    refreshCourse() {
      this.getCourseDetail();
    },
    audioStart() {
      this.onStartRecordWithMicrosoft();
    },
    toggleRecording() {
      return new Promise(resolve => {
        if (this.recordedForm.status == 1) {
          // 检查录音时间是否至少为5秒
          const now = new Date();
          const duration = (now - new Date(this.recordingStartTime)) / 1000;
          if (duration < 5) {
            this.$message.warning(this.lang.ssRecordingTimeAtLeast5Seconds);
            return;
          }

          this.$refs.confirmInstructionRef.open({
            title: this.lang.ssStopRecordingConfirm,
            message: this.lang.ssStopRecordingNotice,
            cancelText: this.lang.ssCancel,
            submitText: this.lang.ssConfirm,
            submitCallback: () => {
              console.log("确定")
              this.onFinishRecordWithMicrosoft().then(() => {
                resolve(true)
              });
            },
            cancelCallback: () => {
              console.log("取消")
              resolve(false)
            },
          })

          // this.$confirm(this.lang.ssStopRecordingNotice, this.lang.ssStopRecordingConfirm, {
          //   confirmButtonText: this.lang.ssConfirm,
          //   cancelButtonText: this.lang.ssCancel,
          //   confirmButtonClass: "pptEasyClassConfirmButtonText",
          //   cancelButtonClass: "pptEasyClassCancelButtonText"
          // }).then(() => {
          //   console.log("确定")
          //   // this.$message({
          //   //   dangerouslyUseHTMLString: true,
          //   //   customClass:"pptEasyClassMessage",
          //   //   message: '已停止录制 <p style="color:#3AB855;text-decoration: underline;cursor: pointer;float:right;margin-left:10px" target="_blank">查看结果</p>'
          //   // });
          //   this.onFinishRecordWithMicrosoft().then(() => {
          //     resolve(true)
          //   });
          // }).catch(() => {
          //   console.log("取消")
          //   resolve(false)
          // });

        } else {
          const now = new Date();
          const duration = (now - new Date(this.recordingEndTime)) / 1000;
          if (duration < 5) {
            this.$message.warning('录音时间至少间距5秒');
            return;
          }
          this.onStartRecordWithMicrosoft();
          resolve(true)
        }
      })
      // })
    },
    // ============ start 微软录音转译
    onStartRecordWithMicrosoft() {
      let iiframe = this.$refs["iiframe"];
      iiframe.contentWindow.window.document.getElementById(
        "languageOptions"
      ).selectedIndex = this.languageRadio;

      // 录音开始
      let flag = true;
      console.log("开始录音", iiframe);
      this.recordedForm.status = 1;
      // 记录开始录音时间
      this.recordingStartTime = new Date().toLocaleString("zh-CN", {
        hour12: false,
        timeZone: "Asia/Shanghai"
      }).replace(/\//g, "-");
      iiframe.contentWindow.window.onRecognizedResult = e => {
        console.log("onRecognizedResult", e);
        this.recordedForm.endTime = this.recordedForm.timeDuration;
        if (flag) {
          this.controlsStatus = 1;
          this.showIndexPage = false;
          this.pageStatus = 2;
          this.editorBarData.type = "0";
          flag = false;
          this.uploadFileLoading = false;
          this.transcriptionData.content = "";
          this.editorBarData.content = "";
          this.recordedForm.textList = [];
        }
        this.showGetTextLoading = true;
        let privText = e.privText;
        let privSpeakerId = e.privSpeakerId;
        let _copyPrivSpeakerId = privSpeakerId;
        console.log("👇转译对象👇");
        console.log(e);
        console.log("👇转译结果👇");
        console.log(privText);
        if (!privText || !privSpeakerId || privSpeakerId == "Unknown") {
          return;
        }

        const newItem = {
          value: privText,
          role: "",
          startTime: this.updateRecordedTime({
            duration: this.recordedForm.startTime
          }),
          endTime: this.updateRecordedTime({
            duration: this.recordedForm.endTime
          }),
          time: this.updateRecordedTime({
            duration: this.recordedForm.endTime - this.recordedForm.startTime
          })
        };
        this.recordedForm.textList.push(newItem);
        this.recordedForm.startTime = this.recordedForm.timeDuration + 1;
        this.transcriptionData.content +=
          _copyPrivSpeakerId + "：" + privText + "\n";
        this.onRecordAddLine(newItem);
      };

      iiframe.contentWindow.ConversationTranscriber();
      setTimeout(() => {
        navigator.permissions && navigator.permissions.query({ name: 'microphone' }).then(permissionStatus => {
          if (permissionStatus.state !== "granted") {
            // 没有开启录音权限，直接确定停止录音
            this.recordedForm.status = "0";
            let iframe = this.$refs["iiframe"];
            iframe.contentWindow.onSessionStopped = null;
            iframe.contentWindow.window.onRecognizedResult = null;
            this.$message.success(this.lang.ssNoPermStop);
            return;
          }
        })
      }, 10000)

    },
    async onFinishRecordWithMicrosoft() {
      return new Promise(resolve => {
        navigator.permissions && navigator.permissions.query({ name: 'microphone' }).then(async permissionStatus => {
          if (permissionStatus.state !== "granted") {
            // 没有开启录音权限，直接确定停止录音
            this.recordedForm.status = "0";
            let iframe = this.$refs["iiframe"];
            iframe.contentWindow.onSessionStopped = null;
            iframe.contentWindow.window.onRecognizedResult = null;
            this.$message.success(this.lang.ssNoPermStop);
            return;
          }
          if (this.recordedForm.status == 1) {
            //正在录音时
            let iiframe = this.$refs["iiframe"];
            iiframe.contentWindow.window.document
              .getElementById("scenarioStopButton")
              .click();
            // 录音借宿
            iiframe.contentWindow.onSessionStopped = async (s, e) => {
              this.recordedForm.status = 0;
              this.controlsStatus = 2;
              this.showGetTextLoading = false;
              // this.$message.success("已结束录音");

              console.log("结束录音👇");
              console.log("结束录音", e);
              this.recordedForm.audioBlob.push(e.preaudio);
              let blob = new Blob(this.recordedForm.audioBlob, {
                type: "audio/wav"
              });
              let file = new File([blob], "recordedFile.wav", {
                type: "audio/wav"
              });
              // 存储文件和文本到全局对象
              await this.storeRecordingData(file);
              // 记录结束录音时间
              this.recordingEndTime = await this.getServerTime()
              // 调用 addPPTClass 接口
              this.addPPTClass(file);
              iiframe.contentWindow.onSessionStopped = null;
              iiframe.contentWindow.window.onRecognizedResult = null;
              resolve(true)
            };
          } else if (this.recordedForm.status == 2) {
            //暂停录音时
            this.recordedForm.status = 0;
            this.controlsStatus = 2;
            this.showGetTextLoading = false;
            let blob = new Blob(this.recordedForm.audioBlob, {
              type: "audio/wav"
            });
            let file = new File([blob], "recordedFile.wav", { type: "audio/wav" });
            // 存储文件和文本到全局对象
            await this.storeRecordingData(file);
            // 记录结束录音时间
            this.recordingEndTime = await this.getServerTime()
            // 调用 addPPTClass 接口
            this.addPPTClass(file);
            resolve(true)
          }
        })
      })
    },
    storeRecordingData(file) {
      // 配置全局 window 对象存储录音数据
      return new Promise((resolve) => {
        if (!window.recordingData) {
          window.recordingData = {};
        }
        window.recordingData.file = file;
        window.recordingData.text = this.transcriptionData.content;
        window.recordingData.textList = this.recordedForm.textList;
        // 将录音文件转为base64并存入localStorage
        // const reader = new FileReader();
        // reader.onload = function(e) {
        //   const base64data = e.target.result;
        //   try {
        //     localStorage.setItem("recordedFileBase64", base64data);
        //     localStorage.setItem('recordedFileName', file.name);
        //     localStorage.setItem('recordedFileType', file.type);
        resolve(true)
        //     console.log("录音数据已存储到全局对象:", window.recordingData);
        //   } catch (err) {
        //     resolve(false)
        //     console.error("localStorage存储base64文件失败:", err);
        //   }
        // };
        // reader.readAsDataURL(file);
      })
    },
    openObserveDialog(pptid, file) {
      // this.observeDialogUrl = `https://observe.cocorobo.cn/#/newClassroom?userid=${this.userid}&oid=${this.oid}&org=${this.org}&pptid=${pptid}`;
      // this.showObserveDialog = true;

      const url = `https://observe.cocorobo.cn/#/newClassroom?userid=${this.userid}&oid=${this.oid}&org=${this.org}&pptid=${pptid}`;

      const _pageWindow = window.open(url, '_blank');

      // if(!_pageWindow){
      //   alert('浏览器弹窗被拦截，请允许弹窗后重试');
      //   return;
      // }
      const sendData = {
        type: 'fileData',
        file,
      }
      const sendMessageToVue3 = () => {
        _pageWindow.postMessage(
          sendData,
          '*' // targetOrigin：必须是Vue3的实际域名，不要用*（安全）
        );
      };

      const handleVue3Ready = (e) => {
        // 校验消息来源（安全：只处理Vue3域名的消息）

        // 校验消息类型（确认是Vue3的就绪通知）
        if (e.data.type === 'READY') {
          console.log('已就绪，开始发送数据');
          sendMessageToVue3();
        }

        // 校验Vue3的"接收成功"确认（可选，进一步确保送达）
        if (e.data.type === 'DATA_RECEIVED') {
          console.log('数据已被接收');
          // 收到确认后移除监听，避免内存泄漏
          window.removeEventListener('message', handleVue3Ready);
        }
      };
      window.addEventListener('message', handleVue3Ready);
      const timeoutTimer = setTimeout(() => {
        console.log('未收到就绪通知，主动发送数据');
        sendMessageToVue3();
        // 移除监听（兜底后清理）
        window.removeEventListener('message', handleVue3Ready);
      }, 5000);

      const checkWinClosed = setInterval(() => {
        if (_pageWindow.closed) {
          clearTimeout(timeoutTimer);
          clearInterval(checkWinClosed);
          window.removeEventListener('message', handleVue3Ready);
        }
      }, 1000);
      // 优化：仅通过轮询方式检查窗口是否加载完成并发送消息，被打开页面无需做任何处理
      // const sendFileData = () => {
      //   if (_pageWindow && !_pageWindow.closed) {
      //     _pageWindow.postMessage(
      //       {
      //         type: 'fileData',
      //         file,
      //       },
      //       '*'
      //     );
      //   }
      // };

      // let checkCount = 0;
      // const checkLoadedInterval = setInterval(() => {
      //   if (!_pageWindow || _pageWindow.closed) {
      //     clearInterval(checkLoadedInterval);
      //     return;
      //   }
      //   try {
      //     if (_pageWindow.document && _pageWindow.document.readyState === 'complete') {
      //       clearInterval(checkLoadedInterval);
      //       sendFileData();
      //     }
      //   } catch (err) {
      //     // 跨域下直接尝试发送
      //     clearInterval(checkLoadedInterval);
      //     sendFileData();
      //   }
      //   if (++checkCount > 20) {
      //     // 最多检测2秒（20次）
      //     clearInterval(checkLoadedInterval);
      //     sendFileData();
      //   }
      // }, 100);

      setTimeout(() => {
        window.focus()
      }, 100)

      function openPageWindow() {
        _pageWindow.focus()
      }

      this.$refs.messageInstructionRef.pptMessage(`${this.lang.ssStoppedRecording} <p style="color:#3AB855;text-decoration: underline;cursor: pointer;float:right;margin-left:10px" target="_blank" onClick="(${openPageWindow.toString()})()">${this.lang.ssViewRecordingResult}</p>`)

    },
    addPPTClass(file) {
      let params = {
        pptid: this.id,
        cid: this.tcid,
        st: this.recordingStartTime,
        et: this.recordingEndTime
      };
      this.ajax
        .post(this.$store.state.api + "addPPTClass", [params])
        .then(res => {
          console.log("addPPTClass", res);
          let id = res.data[0][0].id;
          this.openObserveDialog(id, file);
        })
        .catch(err => {
          console.error(err);
          this.$message.error("保存录音信息失败");
        });
    },
    updateRecordedTime({ duration }) {
      // 格式化录音时间
      const minutes = Math.floor(duration / 60);
      const seconds = Math.floor(duration % 60);
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
    onRecordAddLine(item) {
      // 添加录音文本行
      console.log("添加录音文本行:", item);
      // 这里可以根据需要添加更多处理逻辑
    },
    getCourseDetail() {
      this.pageLoading = true;
      let params = {
        courseId: this.id
      };

      this.ajax
        .get(this.$store.state.api + "selectCourseDetail3", params)
        .then(res => {
          console.log("getCourseDetail", res);
          this.courseDetail = res.data[0][0];
          this.courseDetail.chapters = JSON.parse(this.courseDetail.chapters);
          this.tcid = this.arrayToArray(
            this.courseDetail.juri ? this.courseDetail.juri.split(",") : [],
            this.tcid2 ? this.tcid2.split(",") : []
          )[0] || "";
          console.log('tcid', this.tcid)
          console.log('tcid2', this.tcid2)
          if (this.tcid && res.data[1].length) {
            let _inviteA = [];
            for (var ik = 0; ik < res.data[1].length; ik++) {
              _inviteA.push({
                cid: res.data[1][ik].classid,
                ic: res.data[1][ik].code,
              });
            }
            for (var ik = 0; ik < _inviteA.length; ik++) {
              if (
                this.arrayToArray(
                  _inviteA[ik].cid.split(","),
                  this.tcid.split(",")
                ).length
              ) {
                this.inviteCode = _inviteA[ik].ic;
                break;
              }
            }
          }
          this.setPptIframe()
          this.classList = res.data[2]
          if(!this.tcid2 && this.tType == '1'){
            this.$refs.selectTeachingClassDialogRef.open({classList:this.classList})
          }
          this.pageLoading = false;
        })
        .catch(err => {
          console.log(err);
          this.$message.error(this.lang.ssGetCourseDataFail);
          this.pageLoading = false;
        });
    },
    setPptIframe() {
      this.showIframe = false;

      this.$nextTick(() => {
        let api = 'https://beta.ppt.cocorobo.cn'
        if (this.$region == 'beta') {
          api = 'https://beta.ppt.cocorobo.cn'
        } else if (this.$region == 'hk') {
          api = 'https://ppt.cocorobo.hk'
        } else if (this.$region == 'com') {
          api = 'https://ppt.cocorobo.com'
        } else {
          api = 'https://ppt.cocorobo.cn'
        }
        let _url = api + `/?mode=student&courseid=${this.id}&userid=${this.userid}&oid=${this.oid}&org=${this.org}&cid=${this.tcid}&type=${this.tType}`;

        this.iframeSrc = _url;

        this.showIframe = true;
      });
    },
    arrayToArray(arrayo, arrayt) {
      let array1 = arrayo;
      let array2 = arrayt;

      let commonElements = [];

      for (let i = 0; i < array1.length; i++) {
        for (let j = 0; j < array2.length; j++) {
          if (array1[i] === array2[j]) {
            commonElements.push(array1[i]);
          }
        }
      }
      return commonElements;
    },
    async getClassName() {
      let courseGrade = await this.ajax.get(this.$store.state.api + "getClassById", { id: this.tcid2 });
      this.className = courseGrade.data[0][0].grade;
    },
    back() {
      // if (this.tType != 2) {
      //   this.goTo(
      //     '/courseDetail?userid=' +
      //     this.userid +
      //     '&oid=' +
      //     this.oid +
      //     '&org=' +
      //     this.org +
      //     '&cid=' +
      //     this.classId +
      //     '&courseId=' +
      //     this.id +
      //     '&tType=' +
      //     this.tType +
      //     '&screenType=' +
      //     this.screenType
      //   )
      // } else {
      this.goTo(
        '/index?userid=' +
        this.userid +
        '&oid=' +
        this.oid +
        '&org=' +
        this.org +
        '&cid=' +
        this.classId +
        '&tType=' +
        this.tType +
        '&screenType=' +
        this.screenType
      )
      // }
    },
    gotoCourseManage(){
      parent.setCourseUrl();
    },
    afterClass() {
      if (this.recordedForm.status == 1) {
        this.toggleRecording().then((flag) => {
          if (flag) {

            this.$refs.confirmInstructionRef.open({
              title: this.lang.ssPrompt,
              message: this.lang.ssEndClassConfirm,
              cancelText: this.lang.ssCancel,
              submitText: this.lang.ssConfirm,
              submitCallback: () => {
                this.isTimeOutPan = false;
                this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
                this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
                setTimeout(() => {
                  this.tcid2 = ""
                  this.refreshCourse()
                }, 1000)
              },
              cancelCallback: () => {
                this.isTimeOutPan = false;
                console.log("取消")
              }
            })


            //   this.$confirm(this.lang.ssEndClassConfirm, this.lang.ssPrompt, {
            //     confirmButtonText: this.lang.ssConfirm,
            //     cancelButtonText: this.lang.ssCancel,
            //     type: 'warning'
            //   }).then(() => {
            //     this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
            //     this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
            //     setTimeout(() => {
            //       this.tcid2 = ""
            //       this.refreshCourse()
            //     }, 1000)
            //   }).catch(() => { });

          }
        })
      } else {
        // this.$confirm(this.lang.ssEndClassConfirm, this.lang.ssPrompt, {
        //   confirmButtonText: this.lang.ssConfirm,
        //   cancelButtonText: this.lang.ssCancel,
        //   type: 'warning'
        // }).then(() => {
        //   this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
        //   this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
        //   setTimeout(() => {
        //     this.tcid2 = ""
        //     this.refreshCourse()
        //   }, 1000)
        // }).catch(() => { });
        this.$refs.confirmInstructionRef.open({
          title: this.lang.ssPrompt,
          message: this.lang.ssEndClassConfirm,
          cancelText: this.lang.ssCancel,
          submitText: this.lang.ssConfirm,
          submitCallback: () => {
            this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
            this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
            setTimeout(() => {
              this.tcid2 = ""
              this.refreshCourse()
            }, 1000)
          },
          cancelCallback: () => {
            console.log("取消")
          }
        })
      }

    },
    onFreeBrowseChange(value) {
      this.freeBrowse = value;
      console.log('自由浏览模式已切换为1：', this.freeBrowse);
      this.$refs.ppt.contentWindow.PPTistStudent.toggleFollowMode()
    },
    onIsCanChange(value) {
      this.isCan = value;
      for(var i = 0; i < this.isResultArray.length; i++){
        let item = this.isResultArray[i];
        if(value && item.isTool){
          item.can = true
        }else if(item.isTool){
          item.can = false
          item.like = false
        }
      }
      this.$refs.ppt.contentWindow.PPTistStudent.setCan(this.isResultArray)
    },
    setOperationTime() {
      let _this = this;
      if (_this.opertimer) {
        clearInterval(_this.opertimer);
        _this.opertimer = null;
      }
      _this.opertimer = setInterval(() => {
        _this.setoTime("600");
      }, 600000);
    },
    setoTime(time) {
      this.doSyncClassData();
      let params = [
        {
          uid: this.userid,
          cid: this.id + (this.tcid2 || ''),
          type: "2",
          time: time,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addOperationTimeT2", params)
        .then((res) => { })
        .catch((err) => {
          console.error(err);
        });
    },
    getAIJ() {
      this.ajax.get(this.$store.state.api + "getAIJ", "").then(res => {
        let a = res.data[4];
        console.log(a)
        let Array = [];
        a.forEach(i => Array.push(i.oid))
        this.jArray = Array;
      })
    },
    async doSyncClassData() {
      let userArray = ['6fbc6471-1d48-11ed-8c78-005056b86db5','333d0dfc-1cd9-11ef-bee5-005056b86db5','6fbce5ef-1d48-11ed-8c78-005056b86db5','66feffcc-ad35-11ed-b13d-005056b86db5']
      if (this.courseDetail.userid == this.userid && (this.org == '16ace517-b5c7-4168-a9bb-a9e0035df840' || userArray.includes(this.userid))) {
        let endTime = await this.getServerTime()
        let courseTime = Math.floor((new Date(endTime) - new Date(this.startTime)) / (1000 * 60))
        this.syncClassData({
          courseId: this.id,
          title: this.courseDetail.title,
          ctitle: this.courseDetail.copyTitle || this.courseDetail.title,
          courseGrade: this.tcid2 ? this.tcid2 : '',
          courseTime: courseTime,
          startTime: this.startTime,
          endTime: endTime,
        })
        console.log('同步数据')
      }
    },
    // 直接上传录制音频/视频
    uploadVoiceBtn() {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.m4a,.mp4,.mov,.mp3,.wav';
      input.click();
      input.onchange = (e) => {
        const fileList = e.target.files;
        const file = fileList[0]
        this.recordingStartTime = new Date(window.recordingStartTime ? window.recordingStartTime : new Date()).toLocaleString("zh-CN", {
          hour12: false,
          timeZone: "Asia/Shanghai"
        }).replace(/\//g, "-");
        this.recordingEndTime = new Date(window.recordingEndTime ? window.recordingEndTime : new Date()).toLocaleString("zh-CN", {
          hour12: false,
          timeZone: "Asia/Shanghai"
        }).replace(/\//g, "-");
        this.addPPTClass(file)
        // 判断文件类型并获取音频或视频时长
        // if (file && (file.type.startsWith('audio/') || file.type.startsWith('video/'))) {
        //   const url = URL.createObjectURL(file);
        //   let media;
        //   if (file.type.startsWith('audio/')) {
        //     media = new Audio();
        //   } else {
        //     media = document.createElement('video');
        //   }
        //   media.preload = 'metadata';
        //   media.src = url;
        //   media.onloadedmetadata = () => {
        //     const duration = media.duration;
        //     console.log('文件时长（秒）:', duration);
        //     // 这里可以赋值或者进一步处理时长 duration
        //     URL.revokeObjectURL(url);
        //   };
        //   media.onerror = () => {
        //     console.error('无法读取文件时长');
        //     URL.revokeObjectURL(url);
        //   };
        // }
      }
    },
    // 打开分享弹窗
    openShareDialog() {
      let code = this.userJson.oidCode || this.userJson.orgCode
      this.$refs.shareDialogRef.open(code, this.inviteCode)
    },
    resetIdleOp(){
      if(this.courseDetail.userId == this.userid){
        this.isTimeOutPan = true;
        this.afterClass()
        setTimeout(() => {
          if(this.isTimeOutPan){
            this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
            this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
            setTimeout(() => {
              this.tcid2 = ""
              this.refreshCourse()
            }, 1000)
          }
        }, 5000);
      }
      // console.log('resetIdleOp','重置空闲定时器')
    }
  },
  destroyed() {
    clearInterval(this.opertimer);
    this.opertimer = null;
    clearTimeout(this.timeoutPan);
    this.timeoutPan = null;
    this.doSyncClassData();
    this.stopIdleDetection(this.resetIdleOp);
  },
  async mounted() {
    this.setoTime("1");
    this.startTime = await this.getServerTime()
    console.log('this.startTime', this.startTime)
    this.timeoutPan = setTimeout(() => {
      this.startIdleDetection(this.resetIdleOp);
    }, 40 * 60 * 1000)
    // this.startIdleDetection(this.resetIdleOp);
    this.getClassName()
    this.getAIJ();
    this.getCourseDetail();
    this.setOperationTime();
    window.onFreeBrowseChange = (value) => {
      this.freeBrowse = value;
      console.log('自由浏览模式已切换为：', this.freeBrowse);
    }
    window.setIsResultArray = (value) => {
      this.isResultArray = value;
      // 判断数组中isTool为true的项的can是否都为true
      const toolItems = value.filter(item => item.isTool);
      if (toolItems.length > 0) {
        const allCanTrue = toolItems.every(item => item.can === true);
        const allCanFalse = toolItems.every(item => item.can === false);
        if (allCanTrue) {
          this.isCan = true;
        } else if (allCanFalse) {
          this.isCan = false;
        }
      }
    }
    if (!this.userJson || !this.userJson.accountNumber) {
      let res = await this.ajax.get(this.$store.state.api + "selectUser", {
        userid: this.$route.query.userid
      });
      this.userJson = res.data[0][0]
    }
    setTimeout(() => {
      this.doSyncClassData();
    }, 1000);
  }
};
</script>

<style scoped>
.pptEasyClass {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #f2f2f2;
  min-height: unset;
}

.pec_main {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.pec_header {
  width: 100%;
  height: 60px;
  background: #FCCF00;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-shadow: 0px 4px 12px 0px #3648601F;
  padding: 0 10px;
  box-sizing: border-box;
}

.pec_h_left {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 25px;
  /* 保持左侧靠左 */
}

.pec_h_center {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  z-index: 1;
}

.pec_h_l_title {
  font-weight: bold;
  font-size: 20px;
  color: #0e1e33;
  overflow: hidden;
  white-space: nowrap;
  max-width: 500px;
  text-overflow: ellipsis;
}

.pec_h_right {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
}

.pec_h_r_btnArea {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pec_h_r_btnArea>div {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: #f0f4fa;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  border: 1px solid #cad1dc;
}

.pec_h_r_btnArea>div+div {
  margin-left: 10px;
}

.pec_h_r_btnArea>div>img {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

.pec_h_center>.pec_h_r_btn_refresh {
  color: #fff;
  /* background-color: #0061ff;
  border-color: #0061ff; */
  padding: 9px 10px;
  margin-right: 15px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #FFF7F5;
  color: #000000;
  font-weight: 400;
  cursor: pointer;
  fill: #666666;
}

.pec_h_center>.pec_h_r_btn_refresh>svg {

  width: 1rem;
  height: 1rem;
}

.pec_h_center>.pec_h_r_btn_refresh.recording {
  /* background-color: #F53F3F;
  border-color: #F53F3F; */
  background: #FFF7E8;
  fill: #FF9300;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 63, 63, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(245, 63, 63, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(245, 63, 63, 0);
  }
}

.pec_h_r_btnArea>.pec_h_r_btn_afterClass {
  border-color: #F0E1DD;
  background-color: #FFF7F5;
  color: #F53F3F;
}

.pec_h_r_btn_uploadVoiceBtn {
  border-color: #F0E1DD;
  background-color: #FFF7F5;
  color: #000;
}

.backBtn {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.backBtn img {
  width: 100%;
  height: 100%;
}

.shareBtn {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.shareBtn img {
  width: 100%;
  height: 100%;
}

.class-info-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.class-label {
  font-size: 18px;
  font-weight: bold;
  color: #222;
  margin-right: 5px;
}

.class-value {
  font-size: 16px;
  color: #222;
  background: #FFFFFF3D;
  border: 1px solid #00000080;
  border-radius: 5px;
  padding: 5px 18px;
  min-width: 60px;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.class-value2 {
  cursor: pointer;
  background: #fff;
}

.class-value > svg{
  width: 13px;
  height: 13px;
  margin-left: 8px;
}

.pec_content {
  width: 100%;
  height: calc(100% - 60px);
  border-radius: 0 0 12px 12px;
  background-color: #fff;
}

.free-browse-switch {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  background: #FFF7F5;
  border-radius: 26px;
  margin-left: 15px;
  gap: 5px;
}

.switch-label {
  /* background: linear-gradient(to right, #F53F3F, #FCCF00); */
  /* -webkit-background-clip: text; */
  color: #000;
}

.refresh_icon {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff7f5;
  border-radius: 45%;
  cursor: pointer;
  margin-right: 15px;
  padding: 0 3px;
}

.refresh_icon img {
  width: 16px;
  height: 16px;
}

.name_box {
  background: unset !important;
  border: none !important;
  cursor: unset !important;
}

.observe-dialog>>>.el-dialog__header {
  padding: 0;
}

.observe-dialog>>>.el-dialog__body {
  padding: 0;
}

.observe-dialog>>>.el-dialog__headerbtn {
  top: 22px;
  right: 20px;
  z-index: 100;
}
</style>