<!--负面清单历史记录-->
<template>
  <div class="page-container violationInfo">
    <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>
    <div class="page-container">
      <div class="page-form-title-box" style="border:none;">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="" prop="overStatus">
            <el-select v-model="queryParams.overStatus" clearable placeholder="请选择状态">
              <el-option
                v-for="dict in bonusTypeOptions"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="dateRange">
            <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" style="margin:0 20px;" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
        </el-form>
      </div>
      <div class="page-content-box" style="padding-top:0;">
        <el-table class="table-box" v-loading="loading" border :data="recordList">
          <el-table-column label="姓名" align="left" prop="joinUserName" width="120" show-overflow-tooltip/>
          <el-table-column label="违规原因" align="left" prop="reason" show-overflow-tooltip/>
          <el-table-column label="实验室" align="left" prop="subjectName"  width="200" show-overflow-tooltip/>
          <el-table-column label="添加人" align="left"  prop="createByName"  width="120" show-overflow-tooltip/>
          <el-table-column label="添加时间" align="left"  prop="createTime"  width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="扣分值" align="left"  prop="deductionVal" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="color:#FF3131;">-{{scope.row.deductionVal}}</span>
            </template>
          </el-table-column>
          <el-table-column label="处理方式" align="left"  prop="treatmentMethod" width="180" show-overflow-tooltip/>
          <el-table-column label="处理状态" align="left" width="310" show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="display: flex">
                <div class="scope-big-box" v-if="scope.row.learnStatus == 0 || scope.row.learnStatus == 1 || scope.row.learnStatus == 2">
                  <p>学习</p>
                  <p :class="scope.row.learnStatus == 0 ?'scopeColorA':(scope.row.learnStatus == 1 ?'scopeColorB':(scope.row.learnStatus == 2 ?'scopeColorC':''))">{{scope.row.learnStatus == 0 ?'未完成':(scope.row.learnStatus == 1 ?'已完成':(scope.row.learnStatus == 2 ?'已恢复':''))}}</p>
                </div>
                <div style="margin-left:10px;" class="scope-big-box" v-if="scope.row.practiceStatus == 0 || scope.row.practiceStatus == 1 || scope.row.practiceStatus == 2">
                  <p>做题</p>
                  <p :class="scope.row.practiceStatus == 0 ?'scopeColorA':(scope.row.practiceStatus == 1 ?'scopeColorB':(scope.row.practiceStatus == 2 ?'scopeColorC':''))">{{scope.row.practiceStatus == 0 ?'未完成':(scope.row.practiceStatus == 1 ?'已完成':(scope.row.practiceStatus == 2 ?'已恢复':''))}}</p>
                </div>
                <div style="margin-left:10px;" class="scope-big-box" v-if="scope.row.testStatus == 0 || scope.row.testStatus == 1 || scope.row.testStatus == 2">
                  <p>考试</p>
                  <p :class="scope.row.testStatus == 0 ?'scopeColorA':(scope.row.testStatus == 1 ?'scopeColorB':(scope.row.testStatus == 2 ?'scopeColorC':''))">{{scope.row.testStatus == 0 ?'未完成':(scope.row.testStatus == 1 ?'已完成':(scope.row.testStatus == 2 ?'已恢复':''))}}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="处理截止日期" align="left"  prop="handleDay" width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.handleDay,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="信用分" align="left"  prop="creditScore" width="100" show-overflow-tooltip/>
        </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>
    </div>
  </div>
</template>

<script>
  import { examViolationHistoryList,getSemesterList } from "@/api/creditViolation/index";
  export default {
    props:{
      propsData:{},
    },
    name: "violationInfo",
    data() {
      return {
        //加载状态
        loading:false,
        // 显示搜索条件
        showSearch: true,
        // 查询参数
        queryParams: {
          page: 1,
          pageSize:20,
          overStatus: null,
        },
        //状态条件
        bonusTypeOptions:[
          {id:1,name:"已完成"},
          {id:0,name:"未完成"},
          {id:2,name:"已恢复"},
        ],
        //列表数据
        recordList:[],
        total:0,
        // 日期范围
        dateRange: [],
      }
    },
    created(){
      this.getList();
    },
    methods:{
      //返回上级页面
      backPage(){
        this.$parent.goPage(1);
      },
      /** 查询数据 */
      getList() {
        this.loading = true;
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        if(this.dateRange&&this.dateRange.length>0) {
          obj.startTime=this.dateRange[0]+'T00:00:00'
          obj.endTime=this.dateRange[1]+'T23:59:59'
        } else {
          obj.startTime=null;
          obj.endTime=null
        }
        obj.joinUserId = this.propsData.joinUserId;
        examViolationHistoryList(obj).then( response => {
          this.$set(this,'recordList',response.data.records);
          this.$set(this,'total',response.data.total);
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'dateRange',[]);
        this.$set(this,'queryParams',{
          page: 1,
          pageSize:20,
          overStatus: null,
        });
        this.handleQuery();
      },
    },
  }
</script>

<style scoped lang="scss">
  .violationInfo {
    .scope-big-box{
      display: flex;
      p{
        font-size:14px;
        height:20px;
        line-height:20px;
        margin:4px 0;
      }
      p:nth-child(1){
        margin-right:10px;
      }
      p:nth-child(2){

      }
      .scopeColorA{
        padding:0 4px;
        border-radius:4px;
        color:#fff;
        background: #FF3131;
      }
      .scopeColorB{
        padding:0 4px;
        border-radius:4px;
        color:#fff;
        background: #39A922;
      }
      .scopeColorC{
        padding:0 4px;
        border-radius:4px;
        color:#fff;
        background: #0183FA;
      }
    }
  }
</style>
