<!--考核列表-->
<template>
  <div class="page-container assessList">
    <div class="assessList-page" v-if="pageType == 1">
      <div class="page-top-title-box">
        <p class="page-top-title-name-p"></p>
        <p class="page-top-title-out-p" @click="backPage">返回</p>
      </div>
      <el-table v-loading="loading" class="table-box" border :data="tableList">
        <el-table-column label="考核名称" align="left" prop="assessName" :show-overflow-tooltip="true"/>
        <el-table-column label="考核时间" align="left" prop="assessTime"  width="200"/>
        <el-table-column label="题目数量" align="left" prop="allQu" width="140"/>
        <el-table-column label="错题数" align="left" prop="errors"  width="140"/>
        <el-table-column label="考核结果" align="left" prop="accuracy" width="140">
          <template slot-scope="scope">{{scope.row.accuracy == 100?'通过':'未通过'}}</template>
        </el-table-column>
        <el-table-column label="获得奖励分" align="left" prop="points"  width="140"/>
        <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
          <template slot-scope="scope">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p"
                 @click="goAssessInfo(scope.row)"
              >查看详情</p>
              <p class="table-button-null"></p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-sizes="[20, 30, 40, 50]"
        v-show="total>0"
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <assess-info v-if="pageType == 2" :paperId="paperId" :cateTitle="cateTitle" :assessName="assessName"></assess-info>
  </div>
</template>

<script>
  import { examElChapterAssessList } from "@/api/safetyEducationExam/index";
  import assessInfo from './assessInfo.vue'
  export default {
    name: 'assessList',
    components: {
      assessInfo
    },
    props:{
      chapterId:{},
      cateTitle:{},
    },
    data() {
      return {
        pageType:1,
        loading:false,
        total:0,
        tableList:[],
        //检索数据
        queryParams:{
          page: 1,
          pageSize:20,
          type:null
        },
        // 选项数据
        scopeTypes: [
          {
            type: 1,
            value: "通过",
          },
          {
            type: 2,
            value: "未通过",
          }
        ],
        //考核id
        paperId:"",
        //考核名称
        assessName:"",
      }
    },
    created(){

    },
    mounted(){
      this.getList();
    },
    methods:{
      offMinPage(){
        this.pageType = 1;
      },
      //去详情
      goAssessInfo(row){
        this.paperId = row.paperId;
        this.assessName = row.assessName;
        this.pageType = 2;
      },
      //返回
      backPage(){
        this.$parent.offMinPage();
      },
      getList(){
        this.loading = true;
        examElChapterAssessList({id:this.chapterId}).then( response => {
          this.tableList =  response.data.records;
          this.total =  response.data.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.page = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.dateRange=[];
        this.handleQuery();
      },
      /** 查询学习资源列表 */
    }
  }
</script>

<style scoped lang="scss">
  .assessList{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .assessList-page{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding:20px;
    }

  }
</style>
