<template>
  <div class="courseDetail">
    <div class="cover" @click="nextLead" v-if="step != 0">
      <img src="../../../static/lead/10.png" class="img10" v-if="step == 10" />
      <img src="../../../static/lead/11.png" class="img11" v-if="step == 11" />
      <img src="../../../static/lead/12.png" class="img12" v-if="step == 12" />
      <img src="../../../static/lead/13.png" class="img13" v-if="step == 13" />
    </div>
    <back title="课程详情"></back>
    <div class="kind">
      <p @click="toggleTabs(1)" :class="choose == 1 ? 'active' : ''">视频</p>
      <p @click="toggleTabs(2)" :class="choose == 2 ? 'active' : ''">讲义</p>
      <p @click="toggleTabs(3)" :class="choose == 3 ? 'active' : ''">练习</p>
    </div>
    <div v-show="choose == 1" class="sp">
      <div class="shipin">
        <!--<video-player  class="video-player-box"-->
        <!--ref="videoPlayer"-->
        <!--:options="playerOptions"-->
        <!--:playsinline="true"-->
        <!--customEventName="customstatechangedeventname"-->
        <!--@play="onPlayerPlay($event)"-->
        <!--@pause="onPlayerPause($event)"-->
        <!--@timeupdate="onPlayerTimeupdate($event)"-->
        <!--@ended="onPlayerEnded($event)"-->
        <!--@ready="playerReadied">-->
        <!--</video-player>-->
        <video id="video" class="video" :src="playerOptions.src" controls="controls" x5-playsinline="" playsinline=""
          webkit-playsinline="true" :poster="playerOptions.poster" controlsList="nodownload"></video>
        <!-- <video
          id="video"
          class="video"
          :src="playerOptions.src"
          controls="controls"
          :poster="playerOptions.poster"
          controlsList="nodownload"
          x5-video-player-fullscreen="true"
          webkit-playsinline="true"
          x-webkit-airplay="true"
          playsinline="true"
          x5-playsinline=""
        ></video> -->
      </div>
      <div class="mulu">
        <h2>课程目录 （共{{ section.length }}讲）</h2>
      </div>
      <div class="mulu" v-for="(item, index) in section" :key="index" @click="changeSection(item.id)">
        <img src="../../../static/img/bofang1.png" alt="" v-if="index == choose_section_index" />
        <img src="../../../static/img/play.png" alt="" v-if="index != choose_section_index" />
        <div class="muluR">
          <p>第{{ index + 1 }}课 {{ item.name }}</p>
          <p>
            讲师：{{ item.teacher_name }} | {{ item.play_num }}人已学 |
            <span v-if="item.is_end == 0" style="color:chocolate">学习中</span><span v-if="item.is_end == 1"
              style="color: #000;">已学完</span><span></span>
          </p>
        </div>
      </div>
    </div>
    <!-- 讲义 -->
    <div v-show="choose == 2" class="sp jy">
      <p class="biaoti">{{ courseData.name }}</p>
      <div class="mulu" v-for="(item, index) in courseData.material" :key="index">
        <img src="../../../static/img/xiazai1.png" alt="" />
        <div class="muluR">
          <p>{{ item.name }}</p>
          <p @click="download(item.url)">点击下载</p>
        </div>
      </div>
    </div>
    <!-- 讲义 -->

    <!-- 练习题 -->
    <div v-show="choose == 3" class="lx">
      <div v-if="current_question_data.type == 13">
        <div class="lianxiTiMu">
          <span class="lianxiTiMu1">是非题</span>
          <span>{{ current_question_data.name }}</span>
        </div>
        <div class="lianxiTiMu" v-for="(item, index) in current_question_data.content" :key="index"
          @click="responseQ(item)">
          <span class="lianxiXueZe" v-bind:class="{ active: current_question_data.response == item }">{{ xuhao[index]
          }}</span>
          <span class="lianxiXueZe1">{{ item }}</span>
        </div>
        <div class="lianxiTiMu cuoti" v-if="current_question_data.is_wrong == 1">
          正确答案：{{ current_question_data.answer }}<br />错题解释：<br />{{
            current_question_data.wrong_text
          }}
        </div>
      </div>
      <div v-if="current_question_data.type == 3">
        <div class="lianxiTiMu">
          <span class="lianxiTiMu1">单选题</span>
          <span>{{ current_question_data.name }}</span>
        </div>
        <div class="lianxiTiMu" v-for="(item, index) in current_question_data.content" :key="index"
          @click="responseQ(item)">
          <span class="lianxiXueZe" v-bind:class="{ active: current_question_data.response == item }">{{ xuhao[index]
          }}</span>
          <span class="lianxiXueZe1">{{ item }}</span>
        </div>
        <div class="lianxiTiMu cuoti" v-if="current_question_data.is_wrong == 1">
          正确答案：{{ current_question_data.answer }}<br />错题解释：<br />{{
            current_question_data.wrong_text
          }}
        </div>
      </div>
      <div v-if="current_question_data.type == 4">
        <div class="lianxiTiMu">
          <span class="lianxiTiMu1">多选题</span>
          <span>{{ current_question_data.name }}</span>
        </div>
        <div class="lianxiTiMu" v-for="(item, index) in current_question_data.content" :key="index"
          @click="responseS(index)">
          <span class="lianxiXueZe" v-bind:class="{
            active: current_question_data.response.indexOf(index) != -1,
          }">{{ xuhao[index] }}</span>
          <span class="lianxiXueZe1">{{ item }}</span>
        </div>
        <div class="lianxiTiMu cuoti" v-if="current_question_data.is_wrong == 1">
          正确答案：{{ current_question_data.answer }}<br />错题解释：<br />{{
            current_question_data.wrong_text
          }}
        </div>
      </div>
      <div v-if="current_question_data.type == 12">
        <div class="lianxiTiMu">
          <span class="lianxiTiMu1">填空题</span>
          <span>{{ current_question_data.name }}</span>
          <div class="tiankong" v-for="(i, key) in tiankongdata" :key="key">
            <div v-for="(item, index) in i.label.length" :key="index">
              <input type="text" class="tiank" maxlength="1" v-model="i.num[index]" :id="'tk' + index"
                @change="responseC()" />
            </div>
          </div>
        </div>
        <div class="lianxiTiMu cuoti" v-if="current_question_data.is_wrong == 1">
          正确答案：{{ current_question_data.answer }}<br />错题解释：<br />{{
            current_question_data.wrong_text
          }}
        </div>
      </div>
      <div class="lianxiBottom">
        <div class="lianxiBottomL">
          <div @click="prevQ">上一题</div>
          <div @click="nextQ">下一题</div>
          <div @click="subQ">交卷</div>
        </div>

        <div class="lianxiBottomR" @click="popupVisible = true">
          <img src="../../../static/img/gengduo.png" alt="" /><span>{{
            current_question + 1
          }}</span>/{{ questions.length }}
        </div>
      </div>
    </div>
    <!-- 练习题 -->
    <mt-popup v-model="popupVisible" position="bottom">
      <div class="order_number">
        <div v-for="(item, index) in questions" :key="index" @click="goQ(index)" v-bind:class="{
          error: item.is_wrong == 1 && current_question != index,
          active: current_question == index,
          done: item.response != '' && !is_end
        }">
          {{ index + 1 }}
        </div>
      </div>
    </mt-popup>
    <WXTake ref="wxchild" @result="printResult"></WXTake>
    <input type="file" ref="fileInput" @change="onFileSelected" accept="image/*" style="display: none" />

    <div class="window-popup" v-show="popupVisible3"></div>
    <div @click="computerTakePhoto" class="computer-take-photo" v-show="popupVisible3">点击上传照片</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Back from "../common/Back";
import { getStore, setStore } from "@/utils/storage";
import { Toast } from "mint-ui";
// import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
import { MessageBox } from "mint-ui";
import WXTake from "../study/weixinTake.vue";

export default {
  name: "courseDetail",
  components: {
    Back,
    // videoPlayer,
    WXTake,
  },
  data() {
    return {
      id: "",
      step: 0,
      choose: 1,
      playerOptions: {
        src: "",
        poster: "../../../static/img/tupian.png",
      },
      courseData: {},
      choose_section_index: 0,
      choose_section_id: 0,
      section: [],
      record: 0, //历史记录
      current_sign: 0, //当前观看的进度
      space_sign: 0, //保存历史记录的跨度
      video_timer: "", //定时器
      video_obj: document.getElementById("video"), //视频对象

      xuhao: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N"],
      questions: [],
      current_question: 0,
      current_question_data: 0,
      popupVisible: false,
      popupVisible3: false,
      is_end: false,
      tiankongdata: [],
      submitCount: 0, //开启相机的次数
      allSubmitCount: 2, //允许拍照次数
      canTakePhoto: true, //节流
      canTips: true, //节流
      last30sTimer: true, // 最后两秒多次调用结束视频接口，节流
      nextSection: true, // 下一课节流
    };
  },
  created() { },
  mounted() {
    let id = this.$route.query.id;
    this.getPageData(id);

    let is_lead = getStore("is_lead1");
    if (is_lead == 0) {
      this.step = 10;
    }
  },
  methods: {
    nextLead() {
      if (this.step == 11) {
        this.step = 0;
        // setStore('is_lead1', 1);
        MessageBox(
          "提示",
          "首次上课进度条不可拖动，暂停后重新进入后从暂停位置继续开始播放"
        );
      } else if (this.step == 13) {
        this.step = 0;
        setStore("is_lead1", 1);
      } else {
        this.step++;
      }
    },
    toggleTabs(tabText) {
      // this.is_end = false;
      this.choose = tabText;
      if (tabText == 3) {
        let is_lead = getStore("is_lead1");
        if (is_lead == 0) {
          this.step = 12;
        }
        this.getStudyQuestions(this.$route.query.id);
      }
    },
    getPageData(id) {
      this.getData("/Home/getCourseDetail", {
        token: getStore("token"),
        id: id,
      }).then(
        (data) => {
          if (data.code == 1) {
            this.courseData = data.data;
            this.courseData.thumbnail = this.courseData.thumbnail.replace(
              "http://img",
              "https://imgs"
            );
            this.section = data.data.section;
            for (let index = 0; index < this.section.length; index++) {
              this.section[index].thumbnail = this.section[index].thumbnail.replace(
                "http://img",
                "https://imgs"
              );
              this.section[index].video_url = this.section[index].video_url.replace(
                "http://img",
                "https://imgs"
              );
            }
            this.changeSection(data.data.recent_section);
          } else {
            Toast(data.msg);
          }
        },
        (err) => { }
      );
    },
    getStudyQuestions(id) {
      this.getData("/Question/getStudyQuestions", {
        token: getStore("token"),
        course_id: id,
      }).then(
        (data) => {
          if (data.code == 1) {
            this.id = data.data.id;
            this.questions = data.data.question_data;
            this.current_question_data = data.data.question_data[0];
            if (this.current_question_data.type == 12) {
              this.tk(this.current_question_data.answer.split("*"));
            }
          } else {
            Toast(data.msg);
          }
        },
        (err) => { }
      );
    },
    changeSection(id) {
      if (id == this.choose_section_id) {
        return;
      } else {
        this.getData("/Home/getSectionDetail", {
          token: getStore("token"),
          id: id,
        }).then(
          (data) => {
            if (data.code == 1) {
              // console.log(data);
              this.space_sign = 0;
              this.current_sign = 0;
              this.record = data.data.record;
              this.choose_section_id = id;
              for (let i = 0; i < this.section.length; i++) {
                if (this.section[i]["id"] == id) {
                  this.playerOptions.src = this.section[i]["video_url"];
                  this.playerOptions.poster = this.section[i]["thumbnail"];
                  this.choose_section_index = i;
                  this.resetVideo();
                  break;
                }
              }
              // Toast(data.msg);
            } else {
              Toast(data.msg);
            }
          },
          (err) => { }
        );
      }
    },
    resetVideo() {
      var _this = this;
      //var resetTime = 0; // 拖动后重置播放时间
      _this.current_sign = 0; // 当前播放时间
      clearInterval(_this.video_timer);

      // 定时器
      function timer() {
        // console.log("被调用了");

        let curTime = document.getElementById("video").currentTime;
        let apartTime = curTime - _this.current_sign;
        if (apartTime > 2 && _this.section[_this.choose_section_index].is_end != 1) {
          document.getElementById("video").currentTime = _this.current_sign;
          Toast("未学完的课程无法快进");
        } else {
          _this.current_sign = curTime;
          if (curTime - _this.space_sign >= 60) {
            _this.space_sign = curTime;
            _this.onPlayerTimeupdate();
          }
        }
        // 提示用户准备拍照
        if (
          Number(curTime.toFixed(0)) != 0 &&
          (Number(curTime.toFixed(0)) + 10) % 900 == 0 &&
          _this.section[_this.choose_section_index].is_end != 1 &&
          _this.loginInfo.need_check_face == 1
        ) {
          _this.exitFullscreen();
          let countDown = 5;
          let countDownInterval = setInterval(() => {
            Toast("稍后开启相机，进行人脸检测，请做好准备");
            countDown--;
            if (countDown < 0) {
              clearInterval(countDownInterval);
            }
          }, 1000);
        }
        // console.log(curTime.toFixed(0))

        //拍照
        if (
          Number(curTime.toFixed(0)) != 0 &&
          Number(curTime.toFixed(0)) % 900 == 0 &&
          _this.section[_this.choose_section_index].is_end != 1 &&
          _this.loginInfo.need_check_face == 1
        ) {
          if (_this.canTakePhoto) {
            _this.canTakePhoto = false;
            console.log("打开相机");
            _this.partakePhoto();
            setTimeout(() => {
              _this.canTakePhoto = true;
            }, 300000);
          }
        }

        // 继续学习
        if (
          curTime.toFixed(0) == 600 &&
          _this.section[_this.choose_section_index].is_end != 1
        ) {
          if (_this.canTips) {
            document.getElementById("video").pause();
            _this.canTips = false;
            const isOnline = window.confirm("是否需要继续学习");
            if (isOnline) {
              document.getElementById("video").play();
            }
            setTimeout(() => {
              _this.canTips = true;
            }, 300000);
          }
        }

        //最后2s调用结束接口
        // 获取视频总时长
        let duration = document.getElementById("video").duration;
        if (curTime >= (duration - 2)) {
          if (_this.last30sTimer && _this.section[_this.choose_section_index].is_end != 1) {
            // console.log("最后2秒我运行了11111111111111111");
            _this.last30sTimer = false;
            for (let index = 0; index < 1; index++) {
              _this.onPlayerEnded();
            }
            setTimeout(() => {
              _this.last30sTimer = true;
            }, 10000);
          }
        }
      }

      function plays() {
        document.getElementById("video").removeEventListener("play", plays, false);
        document.getElementById("video").currentTime = _this.record;
        _this.current_sign = _this.record;
        Toast("从上次记录的地方开始播放");
        setTimeout(function () {
          _this.video_timer = setInterval(timer, 100);
        }, 1000);
      }
      function onPlayerEnded() {
        document
          .getElementById("video")
          .removeEventListener("ended", onPlayerEnded, false);
        _this.onPlayerEnded();
      }

      console.log("视频播放进度:", _this.record);
      if (_this.record > 0.1) {
        _this.current_sign = _this.record;
        document.getElementById("video").addEventListener("play", plays, false);
      } else {
        // vd.play();
        _this.video_timer = setInterval(timer, 100);
      }
      // 监听视频播放完成
      document.getElementById("video").addEventListener("ended", onPlayerEnded, false);
    },
    onPlayerTimeupdate() {
      this.getData("/Home/saveRecord", {
        token: getStore("token"),
        id: this.choose_section_id,
        record: this.space_sign,
      }).then(
        (data) => {
          if (data.code == 1) {
          } else {
            Toast(data.msg);
          }
        },
        (err) => { }
      );
    },
    onPlayerEnded() {
      if (this.section[this.choose_section_index].is_end != 1) {
        this.getData("/Home/saveRecordEnd", {
          token: getStore("token"),
          id: this.choose_section_id,
          record: '',
          is_end: 1,
        }).then(
          (data) => {
            if (data.code == 1) {
              if (this.choose_section_index >= this.section.length - 1) {
                this.section[this.choose_section_index].is_end = 1;
                Toast("此视频已看完");
                location.reload();
                // MessageBox.confirm('此视频已看完').then(action => {
                // 	this.toggleTabs(3)
                // }, () => {});
                // Toast('已是最后一课');
                return;
              } else {
                if (this.nextSection) {
                  this.nextSection = false;
                  let id = this.section[this.choose_section_index + 1]["id"];
                  // 直接通过id改变课程状态为“已学完”
                  this.section[this.choose_section_index].is_end = 1;
                  // location.reload();
                  // console.log("已刷新页面");
                  this.changeSection(id);
                  Toast("正在为您跳入下一节课");

                  setTimeout(() => {
                    this.nextSection = true;
                  }, 5000);
                }
              }
            } else {
              Toast(data.msg);
            }
          },
          (err) => { }
        );
      }
    },
    tk(daan) {
      let _this = this;
      _this.tiankongdata = [];
      let bb = this.questions[this.current_question].response;

      if (bb.length > 0) {
        let cc = bb.split("*");

        for (var i = 0; i < daan.length - 1; i++) {
          var json = {
            label: daan[i],
            num: cc[i].split("|"),
          };
          _this.tiankongdata.push(json);
        }
      } else {
        for (var i = 0; i < daan.length - 1; i++) {
          var json = {
            label: daan[i],
            num: [],
          };
          _this.tiankongdata.push(json);
        }
      }
      // daan.forEach(function(data,i){
      //   var str=['，','。','、',',','.'] //定义一个能够被使用的标点符号集合，这块补充全面，足以注意徐弘雯应中文英文都需要考虑的
      //   //如果是文字。就跳出，如果是标点，就放到具体的位置上面
      //   if(str.indexOf(data)>=0){
      //     //faxian标点，就把标点昂到卡暖绑定的数组相应的位置显示
      //     _this.current_question_data.response[i] = data
      //     setTimeout(function(){
      //       document.getElementById('tk'+i).disabled = true
      //     },100)
      //   }else{
      //     setTimeout(function(){
      //      document.getElementById('tk'+i).disabled = false
      //     },100)
      //   }
      // })
    },
    prevQ() {
      if (this.current_question <= 0) {
        Toast("已是第一题");
      } else {
        this.current_question--;
        this.current_question_data = this.questions[this.current_question];
        if (this.current_question_data.type == 12) {
          this.tk(this.current_question_data.answer.split("*"));
        }
      }
    },
    nextQ() {
      if (this.current_question >= this.questions.length - 1) {
        Toast("已是最后一题");
      } else {
        this.current_question++;
        this.current_question_data = this.questions[this.current_question];
        if (this.current_question_data.type == 12) {
          this.tk(this.current_question_data.answer.split("*"));
        }
      }
    },
    responseQ(item) {
      if (this.is_end) {
        Toast("您已交卷");
        return;
      }
      this.questions[this.current_question].response = item;
      this.current_question_data = {};
      this.current_question_data = this.questions[this.current_question];
    },
    responseS(item) {
      if (this.is_end) {
        Toast("您已交卷");
        return;
      }
      let arr = this.questions[this.current_question].response;
      if (!arr) {
        this.questions[this.current_question].response = [item];
        return;
      }
      let index;
      index = arr.indexOf(item);
      if (index == -1) {
        this.questions[this.current_question].response.push(item);
      } else {
        this.questions[this.current_question].response.splice(index, 1);
      }
      this.current_question_data = {};
      this.current_question_data = this.questions[this.current_question];
    },

    responseC() {
      var str = "";
      for (let i = 0; i < this.tiankongdata.length; i++) {
        var aa = this.tiankongdata[i].num;
        for (var j = 0; j < aa.length; j++) {
          str += aa[j];
          str += "|";
        }
        str += "*";
        // console.log(this.tiankongdata[i].num)
      }
      this.questions[this.current_question].response = str;
    },
    // /*对焦到下一个input框去*/
    // nextFocus(el,index){
    //   var dom = document.getElementsByClassName("tiankong");
    //   var currInput = dom[index];
    //   var nextInput = dom[index + 1];
    //   var lastInput = dom[index - 1];
    //   if (el.keyCode != 8) {
    //   		if (index < (this.tiankongdata.length - 1)) {
    //   				nextInput.focus();
    //   		} else {
    //   				currInput.blur();
    //   		}
    //   }else{
    //   		if (index !=0) {
    //   				lastInput.focus();
    //   		}
    //   }
    // },

    goQ(index) {
      this.current_question = index;
      this.current_question_data = this.questions[this.current_question];
    },
    subQ() {
      this.getData("/Question/getCertificate", {
        token: getStore("token"),
      }).then((data) => { });
      // function compare(a,b){
      //   return a-b;
      // }
      let subQuestions = this.questions;
      // console.log(subQuestions, "--------");
      for (let i = 0; i < subQuestions.length; i++) {
        if (subQuestions[i].type == 4) {
          let arr = subQuestions[i].response;
          let newArr = arr;
          let res = "";
          for (let j = 0; j < newArr.length; j++) {
            res += subQuestions[i].content[newArr[j]];
            if (j < newArr.length - 1) {
              res += "|";
            }
          }
          subQuestions[i].response = res;
        }

        if (subQuestions[i].type == 12) {
          let arrT = subQuestions[i].response;
          if (typeof arrT == "string") {
            subQuestions[i].response = arrT.replace(/\|/g, "");
          }
        }
      }
      // console.log("hahahaha",subQuestions)
      // return
      // this.getData('/Question/sendSimulated',{token:getStore('token'), content: JSON.stringify(subQuestions), id:this.id,num:'1'}).then(
      //   data=>{
      //     if(data.code==1){
      //       if (data.data.is_standard == 1){
      //         MessageBox.alert('您的考试成绩为' + data.data.score + '分，通过了本次考试', '恭喜').then(action => {
      //           // this.getData('/Question/getCertificate',{token:getStore('token'),}).then(data=>{})
      //           //this.$router.push({path: '/'});
      //         });
      //       }else{
      //         MessageBox.alert('您的考试成绩为' + data.data.score + '分，未通过本次考试', '抱歉').then(action => {
      //           // MessageBox.confirm('是否参加补考？').then(action => {
      //           //   this.getStudyQuestions(this.$route.query.id)
      //           //   // location.reload();
      //           // }).catch(err => {
      //           //  this.$router.push({path: '/'});
      //           // });
      //           //this.$router.push({path: '/'});
      //         });
      //       }
      //     }else{
      //       Toast(data.msg);
      //     }
      //   },
      //   err=>{  })

      if (this.is_end) {
        Toast("您已交卷");
        return;
      }
      // function compare(a,b){
      //   return a-b;
      // }

      this.is_end = true;
      let wrong_num = 0;
      for (let i = 0; i < this.questions.length; i++) {
        if (this.questions[i].type == 3) {
          if (this.questions[i].response == this.questions[i].answer) {
            this.questions[i].is_wrong = 0;
          } else {
            wrong_num++;
            this.questions[i].is_wrong = 1;
          }
        } else if (this.questions[i].type == 4) {
          let arr = this.questions[i].response;
          // console.log(arr);
          let newArr = arr;
          let res = "";
          for (let j = 0; j < newArr.length; j++) {
            res += this.questions[i].content[newArr[j]];
            if (j < newArr.length - 1) {
              res += "|";
            }
          }
          if (res == this.questions[i].answer) {
            this.questions[i].is_wrong = 0;
          } else {
            wrong_num++;
            this.questions[i].is_wrong = 1;
          }
        } else if (this.questions[i].type == 13) {
          if (this.questions[i].response == this.questions[i].answer) {
            this.questions[i].is_wrong = 0;
          } else {
            wrong_num++;
            this.questions[i].is_wrong = 1;
          }
        }
      }
      MessageBox("提示", "共" + this.questions.length + "题，您答错" + wrong_num + "题");
      this.current_question_data = {};
      this.current_question_data = this.questions[this.current_question];
      // console.log(this.current_question_data, "111111111");
    },
    download(url) {
      window.open(url);
    },

    // 拍照
    partakePhoto() {
      document.getElementById("video").pause();
      // this.$refs.wxchild.takePhoto();
      if (
        window.navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
      ) {
        console.log("手机端拍照");
        this.$refs.wxchild.takePhoto();
      } else {
        console.log("电脑端拍照");
        this.popupVisible3 = true;
        // this.windowTakePhoto();
      }
    },

    computerTakePhoto() {
      this.popupVisible3 = false;
      document.getElementById("video").pause();
      this.$refs.wxchild.takePhoto();
    },
    // 打印结果
    printResult(e1, e2) {
      if (e2 == 0) {
      } else {
        console.log("result识别结果：", e1);
        this.allSubmitCount--;
        if (e1 == "success") {
          Toast("识别成功，请继续观看");
          this.submitCount = 0;
          document.getElementById("video").play();
        } else {
          this.exitFullscreen();
          this.submitCount = this.submitCount + 1;
          if (this.submitCount > 1) {
            this.submitCount = 0;
            document.getElementById("video").currentTime = this.record;
            //清空调用相机的次数
            setTimeout(() => {
              Toast("人脸检测失败，视频进度已回退至上次保存处");
            }, 5000);
          } else {
            setTimeout(() => {
              Toast("将再次打开相机，请重新拍照提交");
            }, 5000);
            setTimeout(() => {
              this.partakePhoto();
            }, 10000);
          }
        }
      }
    },

    // 电脑端
    // windowTakePhoto(e) {
    //   this.$refs.fileInput.click();
    // },

    onFileSelected(e) {
      // console.log("zhi xing l ");
      // console.log("e");
      // console.log(e);
      // console.log("e.target");
      // console.log(e.target);
      // console.log("e.target.files[0]");
      // console.log(e.target.files[0]);
      // console.log(e.target.files[0].lastModified);
    },
    //如果为全屏状态，则退出全屏状态
    exitFullscreen() {
      const isFullScreen = document.fullscreenElement;

      if (isFullScreen) {
        console.log("退出全屏");
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      }
    },

    //进入全屏状态
    requestFullScreen() {
      console.log("进入全屏");

      var fullscreen = document.getElementById("video");
      if (fullscreen.requestFullscreen) {
        fullscreen.requestFullscreen();
      } else if (fullscreen.mozRequestFullScreen) {
        fullscreen.mozRequestFullScreen();
      } else if (fullscreen.webkitRequestFullscreen) {
        fullscreen.webkitRequestFullscreen();
      } else if (fullscreen.msRequestFullscreen) {
        fullscreen.msRequestFullscreen();
      }
    },
  },
  beforeDestroy() {
    if (this.video_timer) {
      clearInterval(this.video_timer);
    }
  },
  computed: {
    ...mapState(["loginInfo"]),
  },
};
</script>

<style lang="scss" scoped>
.video {
  width: 100%;
  height: 17.7rem;
}

.courseDetail {
  padding-top: 5rem;

  .kind {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 3rem;
    margin: auto;
    border: 1px solid #0083ff;
    border-radius: 0.3rem;
    font-size: 1.56rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #0083ff;
    overflow: hidden;

    p {
      width: 33.3%;
      line-height: 3rem;
      border-right: 1px solid #0083ff;
    }

    p:last-child {
      border-right: none;
    }

    p.active {
      color: #fff;
      background: #0083ff;
    }
  }

  .sp {
    .shipin {
      width: 90%;
      margin: auto;
      border-bottom: 0.5rem solid #f4f4f4;
      padding: 2rem 0;
      position: relative;

      canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 30rem;
        z-index: 999;
      }

      // .show {
      // }
    }

    .mulu {
      border-bottom: 0.05rem solid #f4f4f4;
      display: flex;
      align-items: center;
      padding: 0.5rem 2rem;

      img {
        width: 3rem;
        height: 3rem;
      }

      .muluR {
        text-align: left;
        margin-left: 1rem;

        p:nth-child(1) {
          font-size: 1.67rem;
          font-family: Adobe Heiti Std R;
          font-weight: normal;
        }

        p:nth-child(2) {
          font-size: 1.35rem;
          font-family: SourceHanSansCN-Regular;
          font-weight: 400;
          color: #9a9a9a;
          line-height: 2rem;
        }
      }
    }
  }

  .jy {
    .biaoti {
      font-size: 2.5rem;
      font-family: SourceHanSansCN-Medium;
      font-weight: bold;
      color: #000;
      text-align: left;
      margin: 1.5rem;
    }
  }

  .lx {
    padding-bottom: 5rem;

    .lianxiTiMu {
      width: 90%;
      margin: 2rem auto;
      font-size: 1.56rem;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      text-align: left;
      line-height: 2.5rem;
      color: #333333;

      .lianxiTiMu1 {
        width: 4.9rem;
        line-height: 1.7rem;
        color: #0375e4;
        border: 0.05rem solid #0375e4;
        border-radius: 1rem 0rem 1rem 0rem;
        display: inline-block;
        text-align: center;
        font-size: 1.04rem;
        font-family: MicrosoftYaHei;
        font-weight: 400;
      }

      .lianxiXueZe {
        color: #5e5e5e;
        width: 2.5rem;
        line-height: 2.5rem;
        border: 0.05rem solid #5e5e5e;
        border-radius: 50%;
        display: inline-block;
        font-size: 1.56rem;
        font-family: ArialMT;
        font-weight: 400;
        text-align: center;
        margin-right: 1rem;

        &.active {
          background: #0f93ff;
        }
      }

      .lianxiXueZe1 {
        color: #5e5e5e;
      }

      &.cuoti {
        color: red;
      }

      .tiankong {
        display: flex;
        flex-wrap: wrap;

        .tiank {
          width: 3rem;
          height: 3rem;
          border: 0.05rem solid #9c9c9c;
          margin: 0.5rem;
          text-align: center;
        }
      }
    }

    .lianxiBottom {
      width: 100%;
      height: 5rem;
      border-top: 0.05rem solid #9c9c9c;
      position: fixed;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 2rem;
      font-size: 1.56rem;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      background: white;

      img {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.5rem;
      }

      .lianxiBottomL {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 60%;

        div {
          padding: 0 0.5rem;
          background: #0083ff;
          color: white;
          line-height: 2rem;

          &.disable {
            background: grey;
          }
        }
      }

      .lianxiBottomR {
        color: #a5a5a5;

        span {
          color: #333333;
        }
      }
    }
  }
}

.order_number {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;

  >div {
    width: 10vw;
    font-size: 1.5rem;
    height: 10vw;
    line-height: 10vw;
    border: 1px solid black;
    box-sizing: border-box;

    &.active {
      background: #31a6ff;
    }

    &.error {
      background: red;
    }

    &.done {
      background: #1fff00;
    }
  }
}

.window-popup {
  z-index: 2000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.computer-take-photo {
  padding: 10px;
  border-radius: 10px;
  background-color: white;
  color: black;
  font-size: 20px;
  z-index: 2999;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: 1 !important;
}
</style>
