<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">
      <el-header>
        <div class="flex a-center j-between">
          <div class="flex a-center" style="width: 28%">
            <p>实训项目</p>
            <el-select v-model="projectId" placeholder="请选择" class="select" :disabled="projectPermissions != 0" @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 style="background: #202020;color: #d0d0d0;font-size:16px;" v-show="projectPermissions == 0"
                       @click="reload" :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" v-loading="loading" 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="right" label="完成结果" 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="得分" align="center"></el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-aside>
        <el-main>
          <el-tabs v-model="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 w-screen 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 util from '@/libs/util'
import Setting from '@/setting'
// 引入封装好的接口
import {getProjectBySystemId,getProjectDetail,submit,getQueryCache,deleteCache,checkTest,checkTest2} from "@/api/http.js";
import { mapMutations } from 'vuex'
export default {
  props: {
    sendSync: {
      type: Boolean,
      default: false
    },
    autoStart: {
      type: Boolean,
      default: false
    },
    defaultVal: {
      type: Number,
      default: null
    },
    codeId: {
      type: Number,
      default: 0
    },
    showIt: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      closePaneJudge: false,
      lockIt: false,
      intervalJudge: {},
      systemId: Setting.systemId,
      workbench: [],
      test: [],
      caseVisible: true,
      grade: "00",
      exampleData: "",
      codeid: "",
      codeIds: [],
      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: "", //选中后绑定的对象
      value: [
        {projectName:'项目1',projectId:1}
      ],
      experimentalGoal: "", //实验目标
      caseDescription: "", //案例描述
      experimentSuggests: "", //实验提示
      judgmentPointsName: "", //	判分点名称
      points: [],
      // activeNames: [],
      tableData: [],
      activeName: "first",
      schoolId: '',
      studentId: "",
      courseId: "",
      // projectId: "",
      assessmentId: "",
        classId:'',
      projectPermissions: 0, //项目权限(0、练习 1、考核 2、竞赛)
      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:'',
    }
  },
  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)
                }else {
                }
            })
        }, 4000)
    }
  },
  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);
        }
      }
    },
    // caseVisible(newVal) {
    //   if(!newVal) {
    //     console.log(this.$refs.scrollTag)
    //   }
    // }
  },
  
  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)
    },
  },
  mounted() {
      let token = this.getQueryVariable('token')
      let cid = this.getQueryVariable('cid')
      let systemId = this.getQueryVariable('systemId')
      let projectId = this.getQueryVariable('projectId')
      let assessmentId = this.getQueryVariable('assessmentId')
      let classId = this.getQueryVariable('classId')
      let stopTime = this.getQueryVariable('stopTime')
      let timestamp = +stopTime;
      if (timestamp != null){
      }else{
          sessionStorage.setItem('timestamp', null)
      }
      if (token != null){
          sessionStorage.setItem('token', token)
          sessionStorage.setItem('cid', cid)
          sessionStorage.setItem('systemId', systemId)
          sessionStorage.setItem('timestamp', timestamp)
          sessionStorage.setItem('projectId', projectId)
          sessionStorage.setItem('assessmentId', assessmentId)
          sessionStorage.setItem('classId', classId)
          this.assessmentId = assessmentId
          this.classId = classId
      }
      let tokens = sessionStorage.getItem('token')
        if(tokens || token){
            this.projectPermissions = this.projectId ? 1 : 0
            this.assessmentId && this.projectId && this.checkVer()
            this.codeId && this.codeIds.push(this.codeId)
            if (projectId !=null && projectId != '' && projectId !='null'){
                let params = {
                    "projectId":projectId,
                }
                this.selectProjects(params)
            }else{
                this.getData()
            }
        }
  },
  methods: {
    ...mapMutations({
      initState: 'system/initState'
    }),
    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')
      sessionStorage.clear()
      sessionStorage.setItem('token', token)
      sessionStorage.setItem('cid', cid)
      sessionStorage.setItem('systemId', systemId)
      sessionStorage.setItem('projectId', projectId)
      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()
      }
    },
    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,
      }
      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 projectIndex = JSON.parse(sessionStorage.getItem('projectIndex'))
                // const projectId = sessionStorage.getItem('projectId')
                // console.log('---projectId')
                // console.log(projectId)
                // if(!projectId) {
                //   this.selectProjects({
                //     projectId: this.topicList[0].projectId
                //   })
                //   // localStorage.setItem('projectId')
                // }else {
                //   this.selectProjects({
                //     projectId: projectId
                //   })
                // }
                const storeProjectId = sessionStorage.getItem('storeProjectId')
                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 = 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);
                  let projectId = this.getQueryVariable('projectId')
                  if(projectId != null && projectId != '' && projectId != '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.$router.push('/index/list')
      // 和重新开始区别开，不再问是否再试一次
      // this.lockIt = false
      // let token = sessionStorage.getItem('token')
      // let cid = sessionStorage.getItem('cid')
      // let systemId = sessionStorage.getItem('systemId')
      // let projectId = sessionStorage.getItem('projectId')
      // sessionStorage.clear()
      // sessionStorage.setItem('token', token)
      // sessionStorage.setItem('cid', cid)
      // sessionStorage.setItem('systemId', systemId)
      // sessionStorage.setItem('projectId', projectId)
      // this.topicList[localProjectIndex].projectId
      // localStorage.setItem('localProjectIndex', JSON.stringify(this.projectId))

      this.$nextTick(() => {
        this.clearStore()
      })
      
      
      
      // deleteCache().then((data)=>{

      // }).catch(() => {

      // })

      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)
      getProjectDetail(params).then((data)=>{
        if(data.status == 200){
            this.popContainer = false;
            this.hintOpen = data.data.projectManage.hintOpen;
            let token = sessionStorage.getItem('token')
            let cid = sessionStorage.getItem('cid')
            let systemId = sessionStorage.getItem('systemId')
            this.projectName = data.data.projectManage.projectName;
            this.projectId = data.data.projectManage.projectId;
            this.projectManage = data.data.projectManage;
            this.requires = data.data.projectJudgmentVos;
            //线上
            // location.href = 'http://124.71.12.62/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId
            // location.href = 'http://www.huorantech.cn/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId
            //测试服
            if(process.env.NODE_ENV === 'development') {
              location.href = "http://192.168.31.155:8093/#/index/list?"+'token='+token+'&cid='+cid+'&systemId='+systemId
              
            }else {
              location.href = 'http://39.108.250.202/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId
            }
            
            //本地
            // location.href = "http://192.168.31.155:8093/#/index/list?"+'token='+token+'&cid='+cid+'&systemId='+systemId
        }
      }).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();
    },
    //提交
    Submit() {
        this.$confirm('此操作将视为结束考试, 是否继续?', '提示', {
            center: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {

            this.sureSubmit(true)
        }).catch(() => {
              this.$message({
                type: "info",
                message: "已取消提交"
              });
        });
    },
    sureSubmit(judge){
        // 初始化vuex中的state
        // this.initState();
        this.actEndTime = new Date().getTime();
        let ruleReqs = sessionStorage.getItem('ruleReqs')
        let startTime = sessionStorage.getItem('startTime')
        let ruleReqsList = JSON.parse(ruleReqs);
        let lcld = []
        for (var i=0;i<this.requires.length;i++){
            lcld.push(this.requires[i].judgmentId)
        }
        let systemId = sessionStorage.getItem('systemId')
        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": systemId,
        }
        this.loading = true;
        submit(params).then((data)=>{
            if(data.status == 200){
                this.clearStore()

                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(firstLoad) {
                  sessionStorage.setItem('firstLoad', firstLoad)
                }
                if(firstLoad2) {
                  sessionStorage.setItem('firstLoad2', firstLoad2)
                }
               
                
                let datas= data.data.retMap.scoreInfo;
                let formList = []
                sessionStorage.setItem('ruleReqs', JSON.stringify(formList))
                sessionStorage.setItem('accountVoucher', JSON.stringify(formList))
                sessionStorage.setItem('accountPasswordAll', '')
                let list = this.requires
                this.grade = data.data.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)
            }
            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;
        }
    },
    reload() {
        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', '')
        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()
        //线上git sta
        // location.href = 'http://124.71.12.62/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId
        // location.href = 'http://www.huorantech.cn/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId
        //测试服
        if(process.env.NODE_ENV === 'development') {
          location.href = "http://192.168.31.155:8093/#/index/list?"+'token='+token+'&cid='+cid+'&systemId='+systemId
        }else {
          location.href = 'http://39.108.250.202/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId
        }
        
        //本地
        // location.href = "http://192.168.31.155:8093/#/index/list?"+'token='+token+'&cid='+cid+'&systemId='+systemId
        console.log(process.env.NODE_ENV)
    },
    
    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.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;
    }
    .aside-header {
      margin: 0px 10px 10px 10px;
      background-color: #fff;
      font-size: .875rem;
    }
    .aside-footer {
      margin: 0px 10px 10px 10px;
      background-color: #fff;
    }
    .header_h {
      height: 50px;
      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;
    }
    
    .el-table{
      // font-size: $togetherFontSize;
      // font-size: .75rem;
      overflow: auto;
      color: #202020;
      .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #eef7ff;
      }
      .el-table td,.el-table th.is-leaf{
        border-bottom: 0;
      }
      thead{
        color: #ffffff;
        font-size: togetherFontSize;
        font-size: $togetherFontSize;
        th{
          padding: 5px 0;
        }
      }
      th > .cell{
        font-weight: 100;
          font-size: .875rem;
      }
      th,tr{
        background-color: #fff;
      }
    }

    .el-table__header-wrapper{
        thead{
            color: #ffffff;
            font-size: .875rem;
            font-size: $togetherFontSize;
            th{
                padding: 5px 0;
            }
        }
        th > .cell{
            font-weight: 100;
        }
        th,tr{
            background-color: #badfff;
        }
    }
      .el-table__row--striped {
          td{
              background-color: #badfff!important;
          }
      }
    /deep/ .el-collapse{
      font-size: .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: 500px;
      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: 1rem;
    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>