<template>
  <div>
    <Dec :content="content" />
    <div class="testpaper">
      <div class="search">
        <span>选择试卷</span>
        <el-select v-model="testpaperVal" size="small" placeholder="请选择">
          <el-option
            v-for="item in testpaper"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" size="small" @click="classclick">班级排名</el-button>
        <el-button type="primary" size="small" @click="gradeclick">年级排名</el-button>
        <el-button type="primary" size="small">清空</el-button>
      </div>
      <div class="export">
        <el-button type="primary" size="small">导出EXCEL</el-button>
      </div>
      <el-table
        v-if="classFlag"
        ref="multipleTable"
        :data="classData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          prop="no"
          width="50"
          label="排名"
        />
        <el-table-column
          prop="classes"
          label="班级"
        />
        <el-table-column
          prop="classid"
          width="100"
          label="班级ID"
        />
        <el-table-column
          prop="testtime"
          width="150"
          label="考试时间"
        />
        <el-table-column
          prop="avg"
          label="平均分"
        />
        <el-table-column
          prop="younum"
          label="优秀人数"
        />
        <el-table-column
          prop="youbl"
          label="优秀占比"
        />
        <el-table-column
          prop="liangnum"
          label="良好人数"
        />
        <el-table-column
          prop="liangbl"
          label="良好占比"
        />
        <el-table-column
          prop="hegenum"
          label="合格人数"
        />
        <el-table-column
          prop="hegebl"
          label="合格占比"
        />
        <el-table-column
          prop="buhegenum"
          width="120"
          label="不合格人数"
        />
        <el-table-column
          prop="buhegebl"
          width="120"
          label="不合格占比"
        />
        <el-table-column
          label="操作"
          fixed="right"
          width="150"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">考试分析</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-if="gradeFlag"
        ref="multipleTable"
        :data="gradeData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          prop="no"
          width="50"
          label="排名"
        />
        <el-table-column
          prop="name"
          label="姓名"
        />
        <el-table-column
          prop="studentno"
          label="学号"
        />
        <el-table-column
          prop="testtime"
          label="考试时间"
        />
        <el-table-column
          prop="score"
          label="得分"
        />
        <el-table-column
          prop="rightbl"
          label="正确率"
        />
      </el-table>
    </div>
  </div>
</template>
<script>
import Dec from '@/components/Dec'
export default {
  name: 'Testpaper',
  components: {
    Dec
  },
  data() {
    return {
      content: '',
      testpaperVal: '',
      classFlag: false,
      gradeFlag: false,
      testpaper: [
        {
          label: '试卷1',
          value: '001'
        }
      ],
      classData: [
        {
          no: '1',
          classes: '三年二班',
          classid: '20190202',
          testtime: '2020-02-02 03:03',
          avg: '98',
          younum: '50',
          youbl: '100%',
          laingnum: '0',
          liangbl: '0%',
          hegenum: '0',
          hegebl: '0%',
          buhegenum: '0',
          buhegebl: '0%'

        }
      ],
      gradeData: [
        {
          no: '1',
          name: '张三',
          studentno: '20100304',
          testtime: '',
          score: '98',
          rightbl: ''
        }
      ]
    }
  },
  methods: {
    classclick() {
      this.classFlag = true
      this.gradeFlag = false
    },
    gradeclick() {
      this.classFlag = false
      this.gradeFlag = true
    }

  }
}
</script>
<style scoped>
.testpaper{
    max-width: 1100px;
    height:calc(100vh - 115px);
    margin:0 auto;
    background: #fff;
    margin-top:15px;
    padding:20px;
}
.search{
    padding-bottom:10px;
    border-bottom:1px solid #ccc
}
.export{
    text-align: right;
    padding:10px 0
}
</style>
