<!-- 我的成绩 -->
<template>
  <div class="app-container myGrades">
    <div class="page-container myGradesPage" 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="resultStatus === ''?'check-table-button':''" @click="tableTypeButton('')">全部</p>
              <p :class="resultStatus === 2?'check-table-button':''" @click="tableTypeButton(2)">通过</p>
              <p :class="resultStatus === 3?'check-table-button':''" @click="tableTypeButton(3)">未通过</p>
            </div>
          </div>
          <el-form-item label="" prop="examScene">
            <el-select v-model="queryParams.examScene" placeholder="考试类型" style="width: 180px">
              <el-option label="在线考试" :value="1"/>
              <el-option label="模拟考试" :value="2"/>
            </el-select>
          </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>
          <p class="page-submit-common-style-button"
             style="float: right;width:120px;"
             v-if="userType == 2"
             @click="tableButton(3)"
          >成绩报告打印</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">
            <p class="title-p">{{item.examTypeName}}</p>
            <p class="text-p">{{item.examName}}<span :class="item.examScene == 1?'color-A':'color-B'">{{item.examScene == 1?'在线考试':'模拟考试'}}</span></p>
            <p class="text-p">{{parseTime(item.startTime,"{y}-{m}-{d} {h}:{i}")}} 至 {{parseTime(item.endTime,"{y}-{m}-{d} {h}:{i}")}}</p>
            <p class="color-p">时长：{{item.answerDuration}}分钟 丨 总分：{{item.totalScore}}分 丨 及格分：{{item.passScore}}分 丨 考试次数：{{item.attemptCount}}/{{item.attemptLimit==0?'无限':item.attemptLimit}}次</p>
            <div class="color-box">
              <p>我的用时：{{item.myDuration}}</p>
              <p>最高成绩：{{item.bestScore}}</p>
              <p>获得积分：{{item.myScore}}</p>
              <p>考试结果：<span :class="item.resultStatus==2?'colorA':(item.resultStatus==3?'colorB':'')">{{item.resultStatus==1?'考试中':(item.resultStatus==2?'通过':(item.resultStatus==3?'未通过':(item.resultStatus==4?'缺考':'')))}}</span></p>
            </div>
            <p class="position-p-1" v-if="item.attemptCount>0" @click="tableButton(1,item)">考试记录</p>
            <p class="position-p-2" @click="tableButton(2,item)">历史错题</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>
    <examRecords :propsData="propsData" v-if="pageType === 2"></examRecords>
    <historyOfIncorrectQuestions :historyOfIncorrectQuestionsPropsData="historyOfIncorrectQuestionsPropsData" v-if="pageType === 3"></historyOfIncorrectQuestions>
    <el-dialog class="myGrades-dialog"
               :modal-append-to-body="false"
               :close-on-click-modal="false" :close-on-press-escape="false"
               title="毕业教育考试数据统计报告"
               :visible.sync="dialogType"
               v-if="dialogType"
               width="778px"
               append-to-body>
      <div style="height:600px;display: flex;flex-direction: column;overflow: hidden">
        <dataStatisticsReport ref="dataStatisticsReport" :dataStatisticsReportPropsData="dataStatisticsReportPropsData"></dataStatisticsReport>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogCancel">关闭</p>
        <p class="dialog-footer-button-primary" @click="dialogSubmit">下载</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  import dataStatisticsReport from "./dataStatisticsReport.vue";
  import historyOfIncorrectQuestions from "@/views/safetyEducationExaminationNew/components/historyOfIncorrectQuestions.vue";
  import examRecords from "@/views/safetyEducationExaminationNew/components/examRecords.vue";
  import { examElExamUserResultMyScoreListPage,examUserExamTypeSelectExamType,examElLabEduRelationGraduationReport, } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'index',
    components: {
      historyOfIncorrectQuestions,
      examRecords,
      dataStatisticsReport
    },
    data() {
      return {
        userType:localStorage.getItem('userType'),
        //页面状态
        pageType: 1,
        //横向列表
        topDataList:[],
        //查询条件
        examTypeId:'',
        resultStatus:'',
        queryParams: {
          page: 1,
          pageSize: 20,
          examScene:null,
        },
        //时间数据
        dateRange: [],
        //列表数据
        dataList: [],
        //数据数量
        total: 0,
        //组件传参
        propsData: {},
        historyOfIncorrectQuestionsPropsData:{},
        dialogType:false,
        dataStatisticsReportPropsData:{},
      }
    },
    created() {

    },
    mounted() {
      if(sessionStorage.getItem('skipQueryParamsData')){
        let skipQueryParamsData = JSON.parse(sessionStorage.getItem('skipQueryParamsData'))
        this.$set(this,'queryParams',skipQueryParamsData.queryParams);
        this.$set(this,'dateRange',skipQueryParamsData.dateRange);
        this.$set(this,'pageType',skipQueryParamsData.pageType);
        this.$set(this,'examTypeId',skipQueryParamsData.examTypeId);
        this.$set(this,'resultStatus',skipQueryParamsData.resultStatus);
        this.$set(this,'propsData',skipQueryParamsData.propsData);
        this.$set(this,'historyOfIncorrectQuestionsPropsData',skipQueryParamsData.historyOfIncorrectQuestionsPropsData);
        this.$set(this,'dialogType',skipQueryParamsData.dialogType);
        this.$set(this,'dataStatisticsReportPropsData',skipQueryParamsData.dataStatisticsReportPropsData);
        sessionStorage.removeItem('skipQueryParamsData');
      }
      this.examUserExamTypeSelectExamType();
    },
    methods: {
      topCheckButton(examTypeId){
        if(this.examTypeId !== examTypeId){
          this.$set(this,'examTypeId',examTypeId);
          this.handleQuery()
        }
      },
      //切换按钮
      tableTypeButton(val){
        if(this.resultStatus != val){
          this.$set(this,'resultStatus',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,
          examScene:null,
        })
        this.getList()
      },
      //获取数据列表
      getList() {
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        obj.examTypeId = this.examTypeId;
        obj.resultStatus = this.resultStatus;
        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 = ''
        }
        examElExamUserResultMyScoreListPage(obj).then(response => {
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
        })
      },
      //操作按钮
      tableButton(type, row) {
        let self = this
        if (type == 1) {
          //考试记录
          this.$set(this, 'pageType', 2)
          this.$set(this, 'propsData', row)
        } else if (type == 2) {
          //历史错题
          this.$set(this, 'pageType', 3)
          let obj = {
            type:1,
            examId:row.examId,
          };
          this.$set(this, 'historyOfIncorrectQuestionsPropsData', obj)
        }else if(type == 3){
          //成绩报告打印
          examElLabEduRelationGraduationReport({}).then(response => {
            if(response.data.studyHoursList[0]&&response.data.examPassRecords[0]){
              this.$set(this, 'dataStatisticsReportPropsData', response.data);
              this.$set(this,'dialogType',true);
            }else{
              this.msgError('请完成至少一次课程学习与考试')
            }
          });
        } else if (type == 6) {
          //返回并刷新
          this.$set(this, 'pageType', 1)
          this.getList()
        }
      },
      //关闭弹窗
      dialogCancel(){
        this.$set(this,'dialogType',false);
      },
      //下载报告
      dialogSubmit(){
        this.$refs['dataStatisticsReport'].downloadPdf();
        this.msgSuccess('正在下载,请耐心等候')
      },
      examUserExamTypeSelectExamType(){
        let self = this;
        examUserExamTypeSelectExamType({examType:3}).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);
      },
    },
    beforeRouteLeave(to, from, next) {
      if (to.name === 'startTraining') {
        const skipQueryParamsData = {
          queryParams: this.queryParams,
          dateRange: this.dateRange,
          pageType: this.pageType,
          examTypeId: this.examTypeId,
          resultStatus: this.resultStatus,
          propsData: this.propsData,
          historyOfIncorrectQuestionsPropsData: this.historyOfIncorrectQuestionsPropsData,
          dialogType: this.dialogType,
          dataStatisticsReportPropsData: this.dataStatisticsReportPropsData,
        };
        sessionStorage.setItem('skipQueryParamsData', JSON.stringify(skipQueryParamsData));
      } else {
        sessionStorage.removeItem('skipQueryParamsData');
      }
      next(); // 必须调用 next() 放行路由
    },
  }
</script>
<style scoped lang="scss">
  .myGrades {
    .myGradesPage {
      .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;
            border-right:none;
          }
          p:nth-child(3){
            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 2px 8px rgba(37, 50, 74, 0.12);
          position: relative;
          padding:20px;
          .title-p{
            color:#0183fa;
            font-size:16px;
            font-weight:700;
            line-height:20px;
          }
          .text-p{
            font-size:14px;
            margin-top:10px;
            line-height:20px;
          }
          .color-A{
            margin-left:10px;
            padding:0 5px;
            width:60px;
            text-align: center;
            line-height: 10px;
            color:#fff;
            background-color: #0183fa;
            border-radius:4px;
          }
          .color-B{
            margin-left:10px;
            padding:0 5px;
            width:60px;
            text-align: center;
            line-height: 10px;
            color:#fff;
            background-color: #2dc26b;
            border-radius:4px;
          }
          .color-p{
            padding:0 10px;
            border-radius:4px;
            font-size:14px;
            margin-top:10px;
            line-height:30px;
            background-color: rgba(222,222,222,0.4);
          }
          .color-box{
            padding:0 10px;
            border-radius:4px;
            margin-top:10px;
            line-height:30px;
            display: flex;
            font-size:14px;
            background-color: rgba(1,131,250,0.1);
            p{
              flex:1;
            }
            .colorA{
              color:#00B176;
            }
            .colorB{
              color:#E86452;
            }
          }
          .position-p-1{
            position:absolute;
            top:20px;
            right:20px;
            border:1px solid #0183fa;
            color:#0183fa;
            background-color: rgba(1,131,250,0.2);
            border-radius:4px;
            font-size:14px;
            line-height:30px;
            width:80px;
            text-align: center;
            cursor: pointer;
          }
          .position-p-2{
            position:absolute;
            top:60px;
            right:20px;
            border:1px solid #F59A48;
            color:#F59A48;
            background-color: rgba(245,154,72,0.2);
            border-radius:4px;
            font-size:14px;
            line-height:30px;
            width:80px;
            text-align: center;
            cursor: pointer;
          }
        }
      }

    }
  }
</style>
