<template>
  <div>
    <!-- <transition name="slide-fade" enter-active-class="animate__animated animate__bounceInLeft" leave-active-class=" animate__animated animate__bounceOutLeft"> -->

    <el-container v-show="showIt" v-loading="loading">
      <el-header>
        <div class="flex a-center j-between">
          <div class="flex a-center" style="width: 28%">
            <p>实训项目</p>
            <el-select v-model.trim="projectId" placeholder="请选择" class="select" disabled @change="selectProject">
              <el-option v-for="item in topicList" :key="item.projectId" :label="item.projectName"
                :value="item.projectId"></el-option>
            </el-select>
          </div>
          <div class="countDownBox">
            <div style="margin-left: -40px;">
              <div :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal">
                实训{{ text }}时间
                <span class="timeSpan">{{ day }}</span>天
                <span class="timeSpan">{{ hour }}</span>小时
                <span class="timeSpan">{{ minutes }}</span>分
                <span class="timeSpan">{{ seconds }}</span>秒
              </div>
            </div>
          </div>
          <div class="countDownBox">
            <div>
              总得分：
              <span class="gradeSpan">{{ grade }}</span>
            </div>
          </div>
          <div>
            <el-button @click="toReport" v-if="popContainer">查看实验报告</el-button>
            <el-button style="background: #202020;color: #d0d0d0;font-size:16px;" v-show="projectPermissions == 0"
              @click="reloadConfirm"
              :disabled="popContainer && (assessmentId != '' && assessmentId != 'null' && assessmentId != null)">
              重新开始
            </el-button>
            <el-button class="submit-btn" style="margin-right:7px" @click="Submit()"
              :disabled="popContainer || requires.length == 0">提交</el-button>
          </div>
        </div>
      </el-header>

      <el-container>
        <el-aside width="30%" class="flex flex-col">
          <div class="aside-header">
            <div class="header_h flex a-center">
              <i class="el-icon-s-order"></i>
              <p>实验目标</p>
            </div>
            <div class="font_css">
              <div class="experimentalGoal">
                <div class="break-all" v-html="projectManage.experimentTarget" style="font-size: 0.875rem;">
                </div>
              </div>
            </div>
          </div>
          <div class="aside-footer flex-grow">
            <div class="header_h flex a-center">
              <i class="el-icon-s-management"></i>
              <p>实验任务</p>
            </div>
            <div>
              <el-row>
                <el-col :span="24">
                  <el-card shadow="hover">
                    <el-table :data="requires" height="43.5vh" ref='testTable'>
                      <el-table-column type="index"></el-table-column>
                      <el-table-column prop="name" label="判分点" align="left">
                      </el-table-column>
                      <el-table-column prop="score" label="分值" width="60" align="center">
                      </el-table-column>
                      <el-table-column prop="right" label="完成结果" width="80" align="center">
                        <template slot-scope="scope">
                          <i v-if="scope.row.right == true" class="el-icon-check" style="color:green;"></i>
                          <i v-else-if="scope.row.right == false" class="el-icon-close" style="color:red;"></i>
                        </template>
                      </el-table-column>
                      <el-table-column prop="scores" label="得分" width="60" align="center"></el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-aside>
        <el-main>
          <el-tabs v-model.trim="activeName" type="card">
            <el-tab-pane label="案例" name="first">
              <div class="break-all" v-html="projectManage.experimentDescription"></div>
            </el-tab-pane>
            <el-tab-pane label="实验要求" name="second">
              <el-collapse :value="activeNames" accordion>
                <el-collapse-item v-for="(item, index) in requires" :key="index" :name="item.id">
                  <template slot="title" style='line-height: 0px;'>
                    <i class='el-icon-s-ticket'></i>
                    <span style="margin: 0px 10px;font-size: 1rem;">{{ item.name }}</span>
                  </template>
                  <div class="break-all" v-html="item.experimentalRequirements"></div>
                </el-collapse-item>
                <!-- <p ref="scrollTag" style="font-size:16px;"></p> -->
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="实验提示" name="fifth" v-if="hintOpen == 0">
              <div class="break-all" v-html="projectManage.experimentHint"></div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
    <!-- </transition> -->
    <!-- </div> -->
    <div class="panel" :class="{ active: showIt }">
      <div @click="toggleCase">
        <img src="../../assets/img/case/left.png" alt v-if="showIt" />
        <img src="../../assets/img/case/right.png" alt v-else />
      </div>
    </div>

    <div class='popContainer' v-if='popContainer'></div>

    <!-- 遮罩层 -->
    <div class="absolute z-50 h-screen bg-transparent inset-0" v-show="showIt"></div>

    <el-dialog title="提示" :visible.sync="closePaneJudge" width="30%" center>
      <h4 class="antialiased text-center text-2xl">请选择你将进行的操作</h4>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closePane()">再试一次</el-button>
        <!-- <el-button type="primary" @click="closePane(true)">其他业务</el-button> -->
      </span>
    </el-dialog>

  </div>

</template>

<script>
import Cookie from 'js-cookie'
import Util from '@/libs/util'
import Setting from '@/setting'
// 引入封装好的接口
import { getProjectBySystemId, getProjectDetail, submit, getQueryCache, deleteCache, checkTest, checkTest2 } from "@/api/http.js";
import { mapMutations } from 'vuex'
import { async } from 'q';
import Bus from '@/libs/bus'
export default {
  props: {
    sendSync: {
      type: Boolean,
      default: false
    },
    autoStart: {
      type: Boolean,
      default: false
    },
    defaultVal: {
      type: Number,
      default: null
    },
    showIt: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      closePaneJudge: false,
      lockIt: false,
      intervalJudge: {},
      systemId: Setting.systemId,
      workbench: [],
      test: [],
      caseVisible: true,
      grade: "00",
      exampleData: "",
      codeid: "",
      judgmentPointsIds: [],
      text: "",
      isStart: false,
      globalTimer: null, //获取setInterval对象值
      millisecond: 0,
      countVal: this.defaultVal, //获取初始值
      pauseTime: 0,
      day: '00',
      seconds: '00',
      minutes: '00',
      hour: '00',
      createTime: "", //开始时间
      actEndTime: "", //倒计时结束时间
      projectId: '', //选中后绑定的对象
      // projectId: "" || sessionStorage.getItem('projectId'), //选中后绑定的对象
      value: [
        { projectName: '项目1', projectId: 1 }
      ],
      experimentalGoal: "", //实验目标
      caseDescription: "", //案例描述
      experimentSuggests: "", //实验提示
      judgmentPointsName: "", //	判分点名称
      points: [],
      // activeNames: [],
      tableData: [],
      activeName: "first",
      schoolId: '',
      studentId: "",
      courseId: "",
      assessmentId: "",
      classId: '',
      projectPermissions: 0, //项目权限(0、练习 1、考核 2、竞赛)
      competitionId: '',
      stageId: '',
      teamId: '',
      isSubmit: false,
      entryTime: Util.formatDate('yyyy-MM-dd hh:mm:ss'),
      startTime: '',
      stopTime: '',
      isSelected: false,
      userId: '',
      hintOpen: 0,
      topicList: [],
      projectManage: {},
      requires: [],
      projectName: '',
      loading: false,
      sss: 1,
      popContainer: false,
      timestamp: '',
      curSystemId: '',
      reportId: '',
      submitType: false
    }
  },
  computed: {
    needSendSunc: function () {
      return this.sendSync;
    },
    // 倒计时
    second: function () {
      return this.num(this.seconds);
    },
    minute: function () {
      return this.num(this.minutes);
    },
    activeNames () {
      // 默认展开所有
      return this.requires.map(item => item.id)
    },
  },
  watch: {
    countVal: {
      deep: true,
      handler: function (val, oldVal) {
        let vm = this;
        if (vm.needSendSunc) {
          vm.passToParent(val);
        }
      }
    },
    needSendSunc: {
      deep: true,
      handler: function (val) {
        let vm = this;
        if (val) {
          vm.passToParent(vm.countString);
        }
      }
    },
  },
  created () {
    let assessmentId = this.getQueryVariable('assessmentId')
    sessionStorage.setItem('assessmentId', assessmentId)
    this.assessmentId = assessmentId
    if (assessmentId == '' || assessmentId == null || assessmentId == 'null') {

    } else {
      this.intervalJudge = setInterval(() => {
        const data = {
          id: parseInt(sessionStorage.getItem('assessmentId')),
        }
        checkTest(data).then(data => {
          const { data: { data: { status } } } = data
          if (status !== 1) {
            this.popContainer = true
            clearInterval(this.intervalJudge)
            this.$alert('考试已结束，已自动为您提交。', '提示', {
              confirmButtonText: '确定',
              type: 'warning',
              center: true
            });
            // 提交
            this.sureSubmit(true)
          }
        })
      }, 4000)
    }
    Bus.$on('setSubmited', data => {
      this.popContainer = data
    })
  },
  mounted () {
    let token = this.getParam('token')
    let cid = this.getParam('cid')
    let systemId = this.getParam('systemId')
    let projectId = this.getParam('projectId')
    let assessmentId = this.getParam('assessmentId')
    let competitionId = this.getParam('competitionId')
    let stageId = this.getParam('stageId')
    let teamId = this.getParam('teamId')
    let classId = this.getParam('classId')
    let stopTime = this.getParam('stopTime')
    let mallId = this.getParam('mallId')
    let timestamp = +stopTime
    timestamp || sessionStorage.removeItem('timestamp')

    if (token) {
      sessionStorage.setItem('token', token)
      sessionStorage.setItem('cid', cid)
      sessionStorage.setItem('systemId', systemId)
      sessionStorage.setItem('timestamp', timestamp)
      console.log("🚀 ~ mounted ~ projectId:", token, projectId)
      sessionStorage.setItem('projectId', projectId)
      sessionStorage.setItem('assessmentId', assessmentId)
      sessionStorage.setItem('competitionId', competitionId)
      sessionStorage.setItem('stageId', stageId)
      sessionStorage.setItem('teamId', teamId)
      sessionStorage.setItem('classId', classId)
      this.assessmentId = assessmentId
      this.competitionId = competitionId
      this.stageId = stageId
      this.teamId = teamId
      this.classId = classId
      this.mallId = mallId
      this.projectId = projectId
    }
    if (token) {
      this.projectPermissions = this.assessmentId ?
        1 :
        this.competitionId ?
          2 :
          0
      this.assessmentId && this.projectId && this.checkVer()
      if (assessmentId || this.competitionId) {
        this.selectProjects({
          projectId
        })
      } else {
        this.getData()
      }
    }
  },
  methods: {
    ...mapMutations({
      setPopId: 'system/setPopId',
      setBusinessKey: 'system/setBusinessKey',
      initState: 'system/initState',
      setShowBusiness: 'system/setShowBusiness',
    }),
    clearStore () {
      // // 清空缓存
      let token = sessionStorage.getItem('token')
      let cid = sessionStorage.getItem('cid')
      let systemId = sessionStorage.getItem('systemId')
      let projectId = sessionStorage.getItem('projectId')
      let assessmentId = sessionStorage.getItem('assessmentId')
      let classId = sessionStorage.getItem('classId')
      let timestamp = sessionStorage.getItem('timestamp')
      let startTime = sessionStorage.getItem('startTime')

      const storeProjectId = sessionStorage.getItem('storeProjectId')
      Util.clearSession()
      sessionStorage.setItem('token', token)
      sessionStorage.setItem('cid', cid)
      sessionStorage.setItem('systemId', systemId)
      sessionStorage.setItem('projectId', projectId)
      sessionStorage.setItem('firstLoad2', true)
      if (assessmentId) {
        sessionStorage.setItem('assessmentId', assessmentId)
      }
      if (classId) {
        sessionStorage.setItem('classId', classId)
      }
      if (timestamp) {
        sessionStorage.setItem('timestamp', timestamp)
      }
      if (startTime) {
        sessionStorage.setItem('startTime', startTime)
      }
      if (storeProjectId) {
        sessionStorage.setItem('storeProjectId', storeProjectId)
      }


      // 初始化vuex中的state
      this.initState();
    },
    closePane (judge = false) {
      this.closePaneJudge = false
      // this.lockIt = false
      this.reload()
      if (judge) {
        this.toggleCase()
      }
    },
    // 获取参数
    getParam (field) {
      const s = sessionStorage.getItem(field)
      const routeParam = this.getQueryVariable(field)
      return routeParam ? routeParam : s !== 'null' && s !== 'undefined' && s ? s : ''
    },
    getQueryVariable (name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      if (window.location.href.split('?')[1]) {
        var r = window.location.href.split('?')[1].match(reg)
        if (r != null) {
          return (r[2])
        } else {
          return null
        }
      }
    },
    //获取项目列表
    getData () {
      let params = {
        "systemId": sessionStorage.getItem('systemId'),
        "cId": sessionStorage.getItem('cid'),
        "permissions": 0,
        mallId: this.mallId
      }
      getProjectBySystemId(params).then((data) => {
        if (data.status == 200) {
          // this.getQueryCaches()
          //获取当前时间
          this.getBeginTime()
          this.topicList = []

          for (var i = 0; i < data.data.projects.length; i++) {
            if (data.data.projects[i].projectId) {
              this.topicList.push(data.data.projects[i])

            }

          }
          if (this.topicList.length > 0) {
            const storeProjectId = sessionStorage.getItem('storeProjectId') || this.$route.query.projectId
            if (storeProjectId) {
              this.selectProjects({
                projectId: storeProjectId
              })
            } else {
              this.selectProjects({
                projectId: this.topicList[0].projectId
              })
            }
            this.gotuQueryVariable()
            // 加的
          }
          this.getQueryCaches()
        }
      }).catch((error) => {
      })
    },
    getBeginTime () {
      let dates = new Date().getTime();
      let date = new Date(dates)
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      this.startTime = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      sessionStorage.setItem('startTime', this.startTime)
    },
    getQueryCaches () {
      getQueryCache(params).then((data) => {
        if (data.data.status == 200) {
          this.$confirm('有项目未做完,是否回到未做完的项目?', '提示', {
            center: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '切换成功!'
            });
            this.projectId = data.data.projectId
            let params = {
              "projectId": data.data.projectId,
            }
            sessionStorage.setItem('projectId', data.data.projectId)
            this.selectProjects(params)
          }).catch(() => {
            deleteCache().then((data) => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            }).catch(() => {
            })
            this.gotuQueryVariable()
          });
        } else {
          this.gotuQueryVariable()
        }
      }).catch((error) => {
        this.gotuQueryVariable()
      })
    },
    gotuQueryVariable () {
      let projectId = sessionStorage.getItem('projectId') || this.getQueryVariable('projectId')
      if (projectId) {
        this.projectId = projectId
      } else {
        const storeProjectId = sessionStorage.getItem('storeProjectId')
        if (storeProjectId) {
          this.projectId = storeProjectId;
        } else {
          this.projectId = this.topicList[0].projectId;
        }
      }
      sessionStorage.setItem('projectId', this.projectId)
      let params = {
        "projectId": this.projectId,
      }
      this.selectProjects(params)
    },
    selectProjects (params) {
      getProjectDetail(params).then((data) => {
        if (data.status == 200) {
          this.globalTimer = "";
          let stopTime = sessionStorage.getItem('timestamp')
          let timestamp = +stopTime;
          this.countVal = timestamp;
          this.sss = 1;
          this.hintOpen = data.data.projectManage.hintOpen;
          this.countDown(timestamp);
          this.curSystemId = data.data.projectManage.systemId
          let assessmentId = this.getQueryVariable('assessmentId')
          if (assessmentId != null && assessmentId != '' && assessmentId != 'null') {
            //获取当前时间
            this.getBeginTime()
            this.topicList = [data.data.projectManage];
            this.projectId = +params.projectId
            this.projectName = data.data.projectManage.projectName
            this.projectId = data.data.projectManage.projectId;
            this.projectManage = data.data.projectManage;
            this.requires = data.data.projectJudgmentVos;
          } else {
            this.projectName = data.data.projectManage.projectName
            this.projectId = data.data.projectManage.projectId;
            this.projectManage = data.data.projectManage;
            this.requires = data.data.projectJudgmentVos;
          }
        }
      }).catch((error) => {
      })
    },
    //选择好题目
    selectProject () {
      this.lockIt = false
      this.submitType = false
      this.$router.push('/index/list')

      this.$nextTick(() => {
        this.clearStore()
      })

      let params = {
        "projectId": this.projectId,
      }
      sessionStorage.setItem('storeProjectId', this.projectId)
      let formList = []
      sessionStorage.setItem('ruleReqs', JSON.stringify(formList))
      sessionStorage.setItem('accountVoucher', JSON.stringify(formList))
      sessionStorage.setItem('accountPasswordAll', '')
      sessionStorage.setItem('projectId', this.projectId)
      sessionStorage.removeItem('submited', 0)
      sessionStorage.removeItem('firstLoad2')
      this.setBusinessKey('')
      getProjectDetail(params).then((data) => {
        if (data.status == 200) {
          const { systemId, projectId } = data.data.projectManage
          // systemId=11 为银行项目，为其他值则是python项目，直接跳python
          if (systemId === 11) {
            this.popContainer = false;
            this.hintOpen = data.data.projectManage.hintOpen;
            this.projectName = data.data.projectManage.projectName;
            this.projectId = data.data.projectManage.projectId;
            this.projectManage = data.data.projectManage;
            this.requires = data.data.projectJudgmentVos;
            this.$router.push('/index/list')
          } else {
            const { cid, curriculumName, token, systemId } = this.$route.query
            Cookie.set('admin-assessmentId', '', -1)
            Cookie.set('admin-startTime', '', -1)
            Cookie.set('admin-stopTime', '', -1)
            Cookie.set('admin-projectId', projectId)
            Cookie.set('admin-token', token)
            Cookie.set('admin-courseId', cid)
            Cookie.set('admin-curriculumName', escape(curriculumName))
            Cookie.set('admin-systemId', systemId)
            // 8个python子系统都跳这个地址，子系统会通过cookie里的systemId识别展示哪套系统
            location.href = process.env.NODE_ENV === 'development' ?
              `http://${location.hostname}:8085/#/` :
              location.href.includes('occupationlab.com') ?
                'https://www.occupationlab.com/pyTrials' :
                `${location.origin}/pyTrials`
          }
        }
      }).catch((error) => {
      })
      //获取当前时间
      this.getBeginTime()
      this.globalTimer = "";
      this.countVal = "";
      this.day = "00";
      this.seconds = "00";
      this.minutes = "00";
      this.hour = "00";
      this.sss = 1
      this.startCountFn();
    },
    // 查看实验报告
    toReport () {
      this.popContainer = false
      // this.setShowBusiness(false)
      this.$emit('update:showIt', !this.showIt)
      this.$router.push(`/index/report?reportId=${this.reportId}`)
    },
    //提交
    Submit () {
      this.$confirm('此操作将视为结束考试, 是否继续?', '提示', {
        center: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        this.sureSubmit(true)
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消提交"
        });
      });
    },
    async sureSubmit (judge) {
      // 初始化vuex中的state
      // this.initState();
      this.actEndTime = new Date().getTime();
      let ruleReqs = sessionStorage.getItem('ruleReqs')
      let startTime = sessionStorage.getItem('startTime') || this.entryTime
      let ruleReqsList = JSON.parse(ruleReqs);
      let lcld = []
      for (var i = 0; i < this.requires.length; i++) {
        lcld.push(this.requires[i].judgmentId)
      }
      let cid = sessionStorage.getItem('cid')
      let params = {
        "assessmentId": this.assessmentId,
        "classId": this.classId,
        "curriculumId": +cid,
        "endTime": this.actEndTime,
        "lcId": lcld,
        "projectId": this.projectId,
        "projectName": this.projectName,
        "purpose": this.projectManage.experimentTarget,
        "ruleReqs": ruleReqsList,
        "startTime": startTime,
        "submitTime": this.actEndTime,
        "systemId": this.curSystemId,
        competitionId: this.competitionId,
        stageId: this.stageId,
        teamId: this.teamId,
        mallId: this.mallId
      }
      this.loading = true;
      submit(params).then((data) => {
        if (data.status == 200) {
          sessionStorage.setItem('firstLoad2', true)
          // this.clearStore()
          const { retMap } = data.data
          this.reportId = retMap.reportId
          let firstLoad = null
          let firstLoad2 = null
          if (sessionStorage.getItem('firstLoad')) {
            firstLoad = sessionStorage.getItem('firstLoad')
          }
          if (sessionStorage.getItem('firstLoad2')) {
            firstLoad2 = sessionStorage.getItem('firstLoad2')
          }

          this.lockIt = true
          if (this.assessmentId) {
            this.submitType = true
          }
          if (firstLoad) {
            sessionStorage.setItem('firstLoad', firstLoad)
          }
          if (firstLoad2) {
            sessionStorage.setItem('firstLoad2', firstLoad2)
          }


          let datas = retMap.scoreInfo;
          let formList = []
          sessionStorage.setItem('ruleReqs', JSON.stringify(formList))
          sessionStorage.setItem('accountVoucher', JSON.stringify(formList))
          sessionStorage.setItem('accountPasswordAll', '')
          sessionStorage.setItem('submited', 1)
          let list = this.requires
          this.grade = retMap.totalScore
          for (var j = 0; j < list.length; j++) {
            for (var i = 0; i < datas.length; i++) {
              if (datas[i].lcId == list[j].judgmentId) {
                list[j].flag = datas[i].flag
                list[j].scores = datas[i].questionScore
                list[j].right = datas[i].calculate
              }
            }
          }
          this.sss = 0;
          this.popContainer = true;
          if (judge) {
            this.$message({
              type: 'success',
              message: '提交成功'
            });
          }
          this.requires.splice(0, this.requires.length, ...list)
        } else {
          this.$message({
            type: "error",
            message: data.message
          });
        }
        this.loading = false
      }).catch((error) => {
        this.loading = false
      })
    },
    //开始计时
    startCountFn () {
      if (!this.isStart) {
        // this.countVal = this.countVal ? this.countVal : 0;
        this.globalTimer = setInterval(() => {
          if (this.sss == 0) {
            this.globalTimer = null;
            clearInterval(this.globalTimer);
          } else if (this.timestamp) {
            this.counterFn(this.countVal--);
          } else {
            this.counterFn(this.countVal++);
          }
        }, 1000);
        this.isStart = true;
      }
    },
    //倒计时
    countDown (timestamp) {
      this.timestamp = timestamp
      this.sss = 1;
      this.globalTimer = null;
      clearInterval(this.globalTimer);
      this.startCountFn()
    },
    counterFn (counterTime) {
      if (this.timestamp) {
        let countDown = (new Date(counterTime).getTime() - new Date().getTime()) / 1000
        if (countDown > 0) {
          let d = Math.floor(countDown / (60 * 60 * 24));
          let h = Math.floor(countDown / (60 * 60));
          let m = Math.floor(countDown % (60 * 60) / 60);
          let s = Math.floor(countDown % (60 * 60) % 60);
          this.day = `${d > 9 ? d : `0${d}`}`;
          this.hour = `${h > 9 ? h : `0${h}`}`;
          this.minutes = `${m > 9 ? m : `0${m}`}`;
          this.seconds = `${s > 9 ? s : `0${s}`}`;
        } else {
          this.$confirm('此操作将视为结束考试, 是否继续?', '提示', {
            center: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.sureSubmit(true)

          }).catch(() => {
            // this.$message({
            //   type: "info",
            //   message: "已取消提交"
            // });
          });
          // this.$alert('考试已结束，已自动为您提交。', '提示', {
          //         confirmButtonText: '确定',
          //         type: 'warning',
          //         center: true
          //     });
          this.sss = 0
          this.sureSubmit(true)
          this.day = '00';
          this.hour = '00';
          this.minutes = '00';
          this.seconds = '00';
        }
      } else {
        let leave1 = counterTime % (24 * 3600 * 1); //计算天数后剩余的毫秒数
        let leave2 = leave1 % (3600 * 1); //计算小时数后剩余的毫秒数
        let leave3 = leave2 % (60 * 1); //计算分钟数后剩余的毫秒数
        let day = Math.floor(counterTime / (24 * 3600 * 1)); //计算相差天数
        let hour = Math.floor(leave1 / (3600 * 1)); //计算相差小时
        let minutes = Math.floor(leave2 / (60 * 1)); //计算相差分钟
        let seconds = Math.round(leave3 / 1); //计算相差秒
        day = day >= 10 ? day : "0" + day;
        hour = hour >= 10 ? hour : "0" + hour;
        minutes = minutes >= 10 ? minutes : "0" + minutes;
        seconds = seconds >= 10 ? seconds : "0" + seconds;
        this.day = day;
        this.hour = hour;
        this.minutes = minutes;
        this.seconds = seconds;
      }
    },
    //重新开始
    async reloadConfirm () {
      // 已提交状态则直接重新开始，未提交则询问弹框
      if (this.popContainer) {
        this.reload()
      } else {
        try {
          await this.$confirm('<p style="color: #f56c6c;">点击重新开始，之前操作会清空。</p><p>确定重新开始吗？</p>', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            // closeOnClickModal: false,
            dangerouslyUseHTMLString: true,
          })
          this.reload()
        } catch (e) { }
      }
    },
    reload () {
      this.submitType = false
      this.lockIt = false
      this.clearStore()
      let token = sessionStorage.getItem('token')
      let cid = sessionStorage.getItem('cid')
      let systemId = sessionStorage.getItem('systemId')
      let projectId = sessionStorage.getItem('projectId')
      let formList = []
      sessionStorage.setItem('ruleReqs', JSON.stringify(formList))
      sessionStorage.setItem('accountVoucher', JSON.stringify(formList))
      sessionStorage.setItem('accountPasswordAll', '')
      this.setPopId('')
      this.setBusinessKey('')
      let params = {
        "projectId": projectId,
      }
      this.selectProjects(params)
      this.popContainer = false
      this.sss = 1
      this.startCountFn();
      deleteCache().then((data) => {

      }).catch(() => {

      })
      this.globalTimer = "";
      this.countVal = "";
      this.day = "00";
      this.seconds = "00";
      this.minutes = "00";
      this.hour = "00";
      this.grade = '00'
      this.$router.push('/index/list')
      this.getBeginTime()
    },

    checkVer () {
      let data = {
        userId: this.userId,
        id: this.assessmentId
      }
      this.$get(this.api.qualifications, data).then(res => {
        if (res.message == 'false') {
          this.isSubmit = true;
        }
      });
    },
    // 倒计时
    timeFormat (param) {
      return param < 10 ? "0" + param : param;
    },
    toggleCase () {
      if (this.submitType) return
      // if (!this.lockIt) {
      this.$emit('update:showIt', !this.showIt)
      // } else {
      // this.closePaneJudge = true
      // }

      // this.caseVisible = !this.caseVisible
    },
    collapse () {

    },
    passToParent (data) {
      this.$emit("getDataFromChild", data);
    },
    getCookie (cookie_name) {
      //获取cookie中指定key的value
      var allcookies = document.cookie; //索引长度，开始索引的位置
      var cookie_pos = allcookies.indexOf(cookie_name); //如果找到了索引，就代表cookie存在,否则不存在
      if (cookie_pos != -1) {
        //把cookie_pos放在值的开始，只要给值加1即可
        //计算取cookie值得开始索引，加的1为“=”
        cookie_pos = cookie_pos + cookie_name.length + 1; //计算取cookie值得结束索引
        var cookie_end = allcookies.indexOf(";", cookie_pos);
        if (cookie_end == -1) {
          cookie_end = allcookies.length;
        } //得到想要的cookie的值
        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
      }
      return value;
    }
  }
};
</script>

<style lang="scss" scoped>
$togetherFontSize: 16px;

/deep/ .el-tab-pane {
  font-size: 1rem !important;
}

.scrollbar {
  z-index: 100000000;
}

.popContainer {
  position: absolute;
  width: 100%;
  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height: 100%;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

/deep/.el-container {
  height: 80%;

  &.is-vertical {
    position: fixed;
    top: 200px;
    bottom: 20px;
    left: 0;
    width: 85%;
    height: 70%;
    background-color: #f5f5f5;
    z-index: 1001;
  }

  .el-header {
    color: #333;
    padding: 0 12px 0 20px;

    .el-button {
      background-color: $main-color;
      color: #fff;
      border: none;
      margin: 5px 0px 5px 5px;
      font-size: 16px;
    }

    .submit-btn {
      padding-left: 30px;
      padding-right: 30px;
      background: $main-color url(../../assets/img/case/btn.png) 0 0/100% 100% no-repeat;
    }
  }

  .el-aside {
    font-size: $togetherFontSize;
    color: #333;

    [class*=' el-icon-'],
    [class^='el-icon-'] {
      line-height: 40px;
      font-size: 16px;
      font-size: $togetherFontSize;
    }
  }

  .el-main {
    width: 60%;
    background-color: #fff;
    color: #333;
    padding: 0;
    font-size: $togetherFontSize;
    margin: 0px 20px 10px 10px;
    white-space: pre-wrap;
    background: #fff url(../../assets/img/case/bg.png) top right no-repeat;
    // overflow: visible;
  }

  .aside-header {
    margin: 0px 10px 10px 10px;
    background-color: #fff;
    font-size: 0.875rem;
  }

  .aside-footer {
    margin: 0px 10px 10px 10px;
    background-color: #fff;
  }

  .header_h {
    height: 40px;
    background: url(../../assets/img/case/header.png) 0 0/100% 100% no-repeat;
    justify-content: center;

    i {
      color: #fff;
    }

    p {
      line-height: 40px;
      font-size: 16px;
      color: #fff;
      padding-left: 10px;
    }
  }

  .el-card {
    border: 0;
    border-radius: 0;

    .el-card__body {
      padding: 0;
    }
  }

  .select {
    flex: 1;

    input::-webkit-input-placeholder {
      color: #333;
    }

    .el-input__icon {
      line-height: 60px;
    }

    .el-select__caret:before {
      content: '\e78f';
      font-size: 16px;
      padding: 3px;
      background-color: $main-color;
      border-radius: 50%;
      color: #ffffff;
    }

    .el-input--suffix .el-input__inner {
      color: #333;
      font-size: $togetherFontSize;
      border-radius: 30px;
      border: none;
      background-color: #fff;
      margin-left: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .el-input {
      padding: 10px 0;
    }
  }

  .font_css {
    margin: 0 10px;
    text-indent: 2em;
    font-size: $togetherFontSize;
    padding: 10px 0;
  }

  .countDownBox {
    font-size: $togetherFontSize;
    margin: 0 10px;
    padding: 20px 0;
  }

  .timeSpan {
    color: #333333;
    padding: 5px 15px;
    font-size: $togetherFontSize;
    background: #ffffff;
    border-radius: 18px;
    margin: 0 5px;
    text-align: center;
  }

  .gradeSpan {
    color: #878787;
    padding: 10px;
    font-size: $togetherFontSize;
    background: #e0e0e0;
    border-radius: 6px;
    text-align: center;
  }

  .el-header /deep/.el-button:hover,
  .el-button:focus,
  .el-button:active {
    background-color: $main-color;
    color: #fff;
  }

  /deep/.el-table {
    font-size: 12px;

    thead {
      color: #fff;
    }

    .el-table__cell {
      padding: 12px 0;
    }

    .cell {
      font-weight: 100;
      font-size: 12px;
    }

    td,
    th.is-leaf {
      border-bottom: 0 !important;
    }
  }

  .el-table__header-wrapper {
    thead {
      color: #ffffff;
      font-size: 12px;

      th {
        font-weight: 100;
      }
    }

    th,
    tr {
      background-color: #badfff;
    }
  }

  .el-table__row--striped {
    td {
      background-color: #badfff !important;
    }
  }

  /deep/ .el-collapse {
    font-size: 0.875rem;
  }

  .el-collapse-item__content {
    padding-left: 10px;
    padding-right: 10px;
    font-size: $togetherFontSize;
  }

  .el-collapse-item__wrap {
    border-bottom: none;
  }

  /deep/.el-collapse-item__header {
    font-size: 1rem;

    border-bottom: none;
  }

  .el-tabs__content {
    margin: 0 20px;
  }

  .el-icon-s-ticket:before {
    font-size: togetherFontSize;
    //padding: 5px;
    color: $main-color;
  }

  .el-collapse-item__arrow {
    margin: 0 5px 0 0;
  }

  .el-icon-arrow-right:before {
    font-size: 12px;
    font-size: $togetherFontSize;
    //padding: 1px;
    //margin-left: 10px;
    background-color: $main-color;
    border-radius: 50%;
    color: #ffffff;
  }

  .el-tabs__item {
    font-size: 16px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-left: none;
  }

  .el-tabs--card>.el-tabs__header {
    border-bottom: none;
  }

  .el-collapse {
    border-bottom: none;
    border-top: none;
    height: calc(100vh - 422px);
    overflow: hidden;
    overflow-y: auto;
  }

  /deep/.el-collapse-item {
    font-size: $togetherFontSize;
    background-color: red;
    color: red;
  }

  .el-tabs__item.is-active {
    color: #fff;
    background-color: $main-color;
  }

  .el-tabs__header {
    padding: 5px 20px;
  }
}

.break-all {
  font-size: 16px;
  word-break: break-all;
}

.panel {
  position: fixed;
  z-index: 10010000;
  top: 50%;

  &.active {
    //z-index: 10;
    left: 85%;
    z-index: 1001;
  }

  img {
    height: 175px;
    cursor: pointer;
  }
}
</style>