<!-- 在线考试 -->
<template>
  <div class="app-container onlineExam">
    <div class="page-container onlineExamPage" v-if="pageType === 1">
      <p class="pageTitle">在线考试</p>
      <div class="top-max-button-box scrollbar-x-box">
        <p :class="examTypeId == item.examTypeId?'check-button':''"
           @click="topCheckButton(item.examTypeId)"
          v-for="(item,index) in topDataList" :key="index">{{item.examTypeName}} {{item.examTypeCount}}</p>
      </div>
      <div class="page-form-title-box">
        <el-form :model="queryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <div class="table-top-button-box">
            <div>
              <p :class="practiceStatus === ''?'check-table-button':''" @click="tableTypeButton('')">全部</p>
              <p :class="practiceStatus === 0?'check-table-button':''" @click="tableTypeButton(0)">未开始</p>
              <p :class="practiceStatus === 1?'check-table-button':''" @click="tableTypeButton(1)">进行中</p>
              <p :class="practiceStatus === 2?'check-table-button':''" @click="tableTypeButton(2)">已完成</p>
            </div>
          </div>
          <el-form-item label="" prop="queryParamsData1">
            <el-input
              maxLength="30"
              v-model="queryParams.queryParamsData1"
              placeholder="搜索名称"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="" prop="state">
            <el-date-picker
              :clearable="false"
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <div class="for-max-big-box scrollbar-box">
          <div class="for-big-box" v-for="(item,index) in dataList" :key="index">
            <div class="top-box">
              <p class="title-p">{{item.examTypeName}}</p>
              <p class="text-p" v-if="item.conditionType != 4">满足前置条件后可参加考试</p>
              <p class="text-p" v-else>已满足前置条件,可参加考试</p>
            </div>
            <div class="bottom-box">
              <p class="text-big-p">{{item.examName}}</p>
              <p class="text-p">{{parseTime(item.startTime,"{y}-{m}-{d} {h}:{i}")}} 至 {{parseTime(item.endTime,"{y}-{m}-{d} {h}:{i}")}}</p>
              <p class="time-p">时长：{{item.answerDuration}}分钟 丨 总分：{{item.totalScore}}分 丨 及格分：{{item.passScore}}分 丨 可考试次数：{{item.attemptLimit===0?'无限':item.attemptLimit}}次</p>
            </div>
            <p class="position-p-1" @click="tableButton(1,item)">
              {{item.conditionType==1?'完成学时要求后解锁':(item.conditionType==2?'完成考前课程学习后解锁':(item.conditionType==3?'完成模拟考试练习后解锁':(item.conditionType==4?'开始考试':'')))}}
            </p>
          </div>
        </div>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    style="margin-right:20px;"
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
    <historyOfIncorrectQuestions :propsData="propsData" v-if="pageType === 2"></historyOfIncorrectQuestions>
  </div>
</template>
<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  //import addPage from "./addPage.vue";
  import historyOfIncorrectQuestions from "@/views/safetyEducationExaminationNew/components/historyOfIncorrectQuestions.vue";
  import { examUserExamList,examUserExamTypeSelectExamType, } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'index',
    components: {
      historyOfIncorrectQuestions,
    },
    data() {
      return {
        tableButtonType: this.hasPermiDom(['demo:demo:detail', 'demo:demo:edit', 'demo:demo:del']),
        //页面状态
        pageType: 1,
        //横向列表
        topDataList:[],
        //查询条件
        examTypeId:'',
        practiceStatus:'',
        queryParams: {
          page: 1,
          pageSize: 20,
          queryParamsData1: '',
        },
        //时间数据
        dateRange: [],
        //列表数据
        dataList: [],
        //数据数量
        total: 0,
        //组件传参
        propsData: {}
      }
    },
    created() {

    },
    mounted() {
      this.examUserExamTypeSelectExamType();
    },
    methods: {
      topCheckButton(examTypeId){
        if(this.examTypeId !== examTypeId){
          this.$set(this,'examTypeId',examTypeId);
          this.handleQuery()
        }
      },
      //切换按钮
      tableTypeButton(val){
        if(this.practiceStatus !== val){
          this.$set(this,'practiceStatus',val);
          this.handleQuery();
        }
      },
      //查询按钮
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.getList()
      },
      //重置按钮
      resetQuery() {
        this.$set(this, 'dateRange', [])
        this.$set(this, 'queryParams', {
          page: 1,
          pageSize: 20,
          queryParamsData1: '',
        })
        this.getList()
      },
      //获取数据列表
      getList() {
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        obj.examTypeId = this.examTypeId;
        obj.practiceStatus = this.practiceStatus;
        if (this.dateRange[0]) {
          obj.startTime = this.dateRange[0] + 'T00:00:00'
          obj.endTime = this.dateRange[1] + 'T23:59:59'
        } else {
          obj.startTime = ''
          obj.endTime = ''
        }
        examUserExamList(obj).then(response => {
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
        })
      },
      //操作按钮
      tableButton(type, item) {
        let self = this
        if (type == 1) {
          this.$router.push({
            name: 'startTheExam',
            params: {
              attemptId: '2081995162915893249',
              type: '1'
            }
          })
          if(item.conditionType == 1){

          }else if(item.conditionType == 2){

          }else if(item.conditionType == 3){

          }else if(item.conditionType == 4){
            //开始考试
          }

        } else if (type == 6) {
          //返回并刷新
          this.$set(this, 'pageType', 1)
          this.getList()
        }
      },
      examUserExamTypeSelectExamType(){
        let self = this;
        examUserExamTypeSelectExamType({examType:1}).then(response => {
          let num = 0;
          for(let i=0;i<response.data.length;i++){
            num = self.accAdd(num,response.data[i].examTypeCount);
          }
          let list = [{
            examTypeId:'',
            examTypeName:'全部',
            examTypeCount:num
          }];
          this.$set(this,'topDataList',[...list,...response.data])
          this.getList();
        })
      },
      //加法
      accAdd(arg1,arg2){
        var r1,r2,m;
        try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
        try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
        m=Math.pow(10,Math.max(r1,r2))
        return ((arg1*m+arg2*m)/m).toFixed(0);
      },
    }
  }
</script>
<style scoped lang="scss">
  .onlineExam {
    .onlineExamPage {
      .pageTitle{
        height:60px;
        line-height:60px;
        padding:0 20px;
        border-bottom:1px solid #dedede;
      }
      .page-form-title-box{
        padding-top:8px;
        height: 72px;
      }
      .top-max-button-box{
        padding:20px 20px 8px;
        p{
          display: inline-block;
          padding:0 20px;
          text-align: center;
          color:#666;
          border:1px solid #666;
          line-height:40px;
          font-size:16px;
          border-radius:4px;
          min-width:80px;
          margin-right:10px;
          cursor: pointer;
        }
        .check-button{
          background-color: #0183fa;
          color:#fff;
          border:1px solid #0183fa;
        }
      }
      .table-top-button-box{
        display: inline-block;
        vertical-align: top;
        margin-right:10px;
        div{
          display: flex;
          p{
            border:1px solid #DCDFE6;
            width:80px;
            text-align: center;
            height:40px;
            line-height:40px;
            cursor: pointer;
            font-size:14px;
          }
          p:nth-child(1){
            border-top-left-radius:4px;
            border-bottom-left-radius:4px;
          }
          p:nth-child(2){
            border-left:none;
          }
          p:nth-child(3){
            border-left:none;
            border-right:none;
          }
          p:nth-child(4){
            border-top-right-radius:4px;
            border-bottom-right-radius:4px;
          }
          .check-table-button{
            border:1px solid #0183fa;
            background-color: #0183fa;
            color:#fff;
          }
        }
      }
      .page-content-box{
        padding:10px 0;
      }
      .for-max-big-box{
        flex:1;
        .for-big-box{
          display: inline-block;
          width:760px;
          margin:10px 0 10px 20px;
          border-radius:10px;
          overflow: hidden;
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
          position: relative;
          padding:20px;
          .top-box{
            height:60px;
          }
          .bottom-box{
            background-color: rgba(1,131,250,0.1);
            padding:10px 20px 20px;
            border-radius:10px;
            margin-top:10px;
          }
          .title-p{
            color:#0183fa;
            font-size:16px;
            font-weight:700;
            line-height:20px;
          }
          .text-p{
            font-size:14px;
            margin-top:10px;
            line-height:20px;
          }
          .text-big-p{
            font-size:14px;
            margin-top:10px;
            line-height:20px;
          }
          .time-p{
            border-radius:4px;
            font-size:14px;
            margin-top:20px;
            line-height:20px;
          }
          .position-p-1{
            position:absolute;
            top:30px;
            right:30px;
            border:1px solid #0183fa;
            color:#0183fa;
            background-color: rgba(1,131,250,0.2);
            border-radius:4px;
            font-size:14px;
            line-height:30px;
            width:180px;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
