<!-- 我的成绩 -->
<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="topCheckId == item.id?'check-button':''"
           @click="topCheckButton(item.id)"
           v-for="(item,index) in topDataList" :key="index">{{item.label}} {{item.num}}</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="shareStatus === ''?'check-table-button':''" @click="tableTypeButton('')">全部</p>
              <p :class="shareStatus === 1?'check-table-button':''" @click="tableTypeButton(1)">通过</p>
              <p :class="shareStatus === 2?'check-table-button':''" @click="tableTypeButton(2)">未通过</p>
            </div>
          </div>
          <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">
            <p class="title-p">{{item.data1}}</p>
            <p class="text-p">{{item.data2}}</p>
            <p class="text-p">{{item.data3}}</p>
            <p class="color-p">时长：{{item.data4}}分钟 丨 总分：{{item.data5}}分 丨 及格分：{{item.data6}}分 丨 考试次数：{{item.data7}}/{{item.data8}}次</p>
            <div class="color-box">
              <p>我的用时：{{item.data9}}</p>
              <p>最高成绩：{{item.data10}}</p>
              <p>获得积分：{{item.data11}}</p>
              <p>考试结果：<span :class="item.data12?'colorA':'colorB'">{{item.data12?'通过':'未通过'}}</span></p>
            </div>
            <p class="position-p-1" @click="tableButton(1)">考试记录</p>
            <p class="position-p-2" v-if="item.data12" @click="tableButton(2)">历史错题</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 :propsData="propsData" v-if="pageType === 3"></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 examRecords from "@/views/safetyEducationExaminationNew/components/examRecords.vue";
  export default {
    name: 'index',
    components: {
      historyOfIncorrectQuestions,
      examRecords,
    },
    data() {
      return {
        tableButtonType: this.hasPermiDom(['demo:demo:detail', 'demo:demo:edit', 'demo:demo:del']),
        //页面状态
        pageType: 1,
        //横向列表
        topDataList:[
          {label:'全部',id:'1',num:'10'},{label:'全部',id:'2',num:'10'},{label:'全部',id:'3',num:'10'},
          {label:'全部',id:'4',num:'10'},{label:'全部',id:'5',num:'10'},{label:'全部',id:'6',num:'10'},
          {label:'全部',id:'1',num:'10'},{label:'全部',id:'2',num:'10'},{label:'全部',id:'3',num:'10'},
          {label:'全部',id:'4',num:'10'},{label:'全部',id:'5',num:'10'},{label:'全部',id:'6',num:'10'},
        ],
        //查询条件
        topCheckId:'1',
        shareStatus:'',
        queryParams: {
          page: 1,
          pageSize: 20,
        },
        //时间数据
        dateRange: [],
        //列表数据
        dataList: [
          { data1:'分级分类考试', data2:'考试名称考试名称考试名称',
            data3:'2026-09-01  9:30 ~ 2026-09-01 10:00',
            data4:'30',data5:'100',data6:'60',data7:'6',data8:'10',
            data9:'20分16秒',data10:'90',data11:'6',data12:true, },
          { data1:'分级分类考试', data2:'考试名称考试名称考试名称',
            data3:'2026-09-01  9:30 ~ 2026-09-01 10:00',
            data4:'30',data5:'100',data6:'60',data7:'6',data8:'10',
            data9:'20分16秒',data10:'90',data11:'6',data12:false, },
          { data1:'分级分类考试', data2:'考试名称考试名称考试名称',
            data3:'2026-09-01  9:30 ~ 2026-09-01 10:00',
            data4:'30',data5:'100',data6:'60',data7:'6',data8:'10',
            data9:'20分16秒',data10:'90',data11:'6',data12:true, },
          { data1:'分级分类考试', data2:'考试名称考试名称考试名称',
            data3:'2026-09-01  9:30 ~ 2026-09-01 10:00',
            data4:'30',data5:'100',data6:'60',data7:'6',data8:'10',
            data9:'20分16秒',data10:'90',data11:'6',data12:false, },
          { data1:'分级分类考试', data2:'考试名称考试名称考试名称',
            data3:'2026-09-01  9:30 ~ 2026-09-01 10:00',
            data4:'30',data5:'100',data6:'60',data7:'6',data8:'10',
            data9:'20分16秒',data10:'90',data11:'6',data12:true, },
          { data1:'分级分类考试', data2:'考试名称考试名称考试名称',
            data3:'2026-09-01  9:30 ~ 2026-09-01 10:00',
            data4:'30',data5:'100',data6:'60',data7:'6',data8:'10',
            data9:'20分16秒',data10:'90',data11:'6',data12:false, },
        ],
        //数据数量
        total: 0,
        //组件传参
        propsData: {}
      }
    },
    created() {

    },
    mounted() {
      //this.getList();
    },
    methods: {
      topCheckButton(id){
        if(this.topCheckId != id){
          this.$set(this,'topCheckId',id);
        }
      },
      //切换按钮
      tableTypeButton(val){
        if(this.shareStatus != val){
          this.$set(this,'shareStatus',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,
        })
        this.getList()
      },
      //获取数据列表
      getList() {
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        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 = ''
        }
        getListFunction(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', {})
        } else if (type == 2) {
          //历史错题
          this.$set(this, 'pageType', 3)
          this.$set(this, 'propsData', {})
        } else if (type == 6) {
          //返回并刷新
          this.$set(this, 'pageType', 1)
          this.getList()
        }
      },
    }
  }
</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 0 15px rgba(0, 0, 0, 0.2);
          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-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>
