<template>
  <el-row class="p20 waphide">
    <el-col :span="6">
      <img :src="tpl.tb" width="200px" style="border-radius: 20px;" />
    </el-col>
    <el-col :span="6">
      <div>
        <p style="font-size: 24px;"> 课程信息 </p>
        <p class="mt10">岗位名称：{{tpl.name}} </p>
        <p class="mt10" v-if="tpl.examGroupId">课程年度：
          <strong style="color: red;">{{tpl.nd}} </strong>
        </p>
       <p class="mt10">学习需求：
          <p class="mt10 ml20"> 视频学时：<strong style="color: red;">{{(tpl.xs - tpl.examXs-tpl.testXs)/10}}</strong>学时

          </p>
          <p class="ml20"> 专项练习：<strong style="color: red;">{{tpl.testXs/10}}</strong>学时</p>
          <p class="ml20"> 模拟试卷：<strong style="color: red;">{{tpl.examXs/10}}</strong>学时</p>
        </p>

        <p class="mt10">学习情况：
          完成 <strong style="color: red;">{{info.getXs/10}} </strong>
          共计 <strong style="color: red;">{{info.totalXs/10}}</strong>
        </p>
        <p class="mt10" v-if="tpl.examGroupId">开始时间：
          <strong style="color: red;">{{info.startDate}} </strong>
        </p>

      </div>
    </el-col>

    <el-col :span="12">
      <div>
        <p style="font-size: 24px;"> 考试情况 </p>
        <p class="mt5">
          <span style="width:240px;margin: 0px;padding: 0px;">
            专项练习1: 完成<strong style="color: red;"> {{extraXs|testCount}}</strong>题
          </span>
          <el-button @click="startExamTest()" type="text">开始练习</el-button>
        </p>
        <p class="mt5">
          <span style="width:240px;margin: 0px;padding: 0px;">
            全真模拟1: 最高<strong style="color: red;"> {{extraXs.score1||0}}</strong>分
          </span>
          <el-button @click="startExam(7)" type="text" v-if="!extraXs.score1||extraXs.score1<60">开始考试</el-button>
          <el-button v-else>考试通过</el-button>
        </p>

        <p class="mt5">
          <span style="width:240px;margin: 0px;padding: 0px;">
            全真模拟2: 最高<strong style="color: red;"> {{extraXs.score2||0}}</strong>分
          </span>
          <el-button v-if="!extraXs.score2||extraXs.score2<60" @click="startExam(8)" type="text">开始考试</el-button>
          <el-button v-else>考试通过</el-button>
        </p>

        <p class="mt5">
          <span style="width:240px;margin: 0px;padding: 0px;">
            全真模拟3: 最高<strong style="color: red;"> {{extraXs.score3||0}}</strong>分
          </span>
          <el-button v-if="!extraXs.score3||extraXs.score3<60" @click="startExam(9)" type="text">开始考试</el-button>
          <el-button v-else>考试通过</el-button>
        </p>
        <p class="mt5">
          <strong style="color: red;" class="pl20">
            专项练习{{tpl.testXs/10}}学时（累计答题100题：包含单选、多选、判断、案例）<br>全真模拟{{tpl.examXs/10}}学时（创建3份试卷不计成绩多少完成即可）,学习时长5天
          </strong>
        </p>
      </div>
    </el-col>

    <el-col :span="3">
      <div>
        <el-button type="primary" style="font-size: 14px;margin-top: ;" @click="printCert" v-if="tpl.tplId>0">
          学时证明
        </el-button>
      </div>
    </el-col>

  </el-row>
</template>

<script>
  import setting from '@/setting';
  import { getTime,packTime,toDate } from "@/utils/date";
  import { mapGetters, mapActions } from "vuex";
  export default {
    name: "iCourseInfoTest",
    data() {
      return {
        setting,
        timer: 0,
        end: {
          d: 0,
          h: 0,
          m: 0,
          s: 0
        }
      }
    },
    props: ['tpl', 'info', 'extraXs'],
    destroyed(){
      this.timer &&  window.clearInterval(this.timer)
    },
    created(){
      this.initTimer()
    },
    computed: {
      ...mapGetters("user", ["notices"])
    },
    filters:{
      add80Date( date ){
        let val = new Date(date).getTime() + 80*86400*1000;
        return toDate( val )
      },
      testCount(val){
        return val.index1+val.index2+val.index3+val.index4 ||0
      }
    },
    methods: {
      ...mapActions("user", ["setNotice"]),
      initTimer() {
        if (this.timer) {
          window.clearInterval(this.timer);
        }
        this.tickTimer();
        this.timer = window.setInterval(() => {
          this.tickTimer();
        }, 1000);
      },
      tickTimer(  ) {
        let nowSec = getTime();
        let timeLast =  this.info.examTime -nowSec;
        this.end = packTime(timeLast);
        if (timeLast < 0) {
          window.clearInterval(this.timer);
        }
      },
      startExam(index) {
        if( this.end.v <=0 && this.info.examTime>0 ) {
          this.$message.errorMsg("开考超过三天，不能继续考试")
          return;
        }
        let courseId = this.info.courseId
        if( !this.notices[courseId] ){
          let endDate = toDate( +new Date() - 5*86400*1000)
          if( this.info.startDate < endDate){
            this.$message.errorMsg("开通超过5天，请联系管理员", 2)
            this.setNotice( courseId )
          }
        }
        if( this.tpl.isClosed ==1 ) {
          this.$message.errorMsg("课程已经关闭", 2)
          return;
        }
        this.$emit("startExam", +index)
      },
      startExamTest(){
        this.$emit("startExamTest")
      },
      printCert() {
        this.$emit("printCert")
      }
    }
  }
</script>
