<template>
  <div>
    <Dec :content="content" />
    <div class="test">
      <div class="search">
        <span>分类：</span>
        <el-select v-model="classVal" size="small" style="width:120px" placeholder="请选择">
          <el-option
            v-for="item in classify"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span>年级：</span>
        <el-select v-model="gradeVal" size="small" style="width:120px" placeholder="请选择">
          <el-option
            v-for="item in grade"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span>科目：</span>
        <el-select v-model="objectVal" size="small" style="width:120px" placeholder="请选择">
          <el-option
            v-for="item in object"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="searchtext"
          size="small"
          placeholder="试卷名称、编号、班级名称、班级ID"
          style="width:260px"
        >
          <i slot="suffix" class="el-input__icon el-icon-search" @click="search" />
        </el-input>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="25"
        />
        <el-table-column
          prop="no"
          width="50"
          label="序号"
        />
        <el-table-column
          prop="testtime"
          width="150"
          label="考试时间"
        />
        <el-table-column
          prop="testno"
          label="考试编号"
        />
        <el-table-column
          prop="testtitle"
          width="200"
          :show-overflow-tooltip="true"
          label="试卷名称"
        />
        <el-table-column
          prop="classify"
          label="分类"
        />
        <el-table-column
          prop="subject"
          label="科目"
        />
        <el-table-column
          prop="classes"
          label="班级"
        />
        <el-table-column
          prop="avg"
          label="平均分"
        />
        <el-table-column
          prop="total"
          label="总分"
        />
        <el-table-column
          prop="highest"
          label="最高分"
        >
          <template slot-scope="scope">
            <span style="color:green">{{ scope.row.highest }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="lowest"
          label="最低分"
        >
          <template slot-scope="scope">
            <span style="color:red">{{ scope.row.lowest }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="150"
        >
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-data-line" size="small" circle @click="handleEdit(scope.$index, scope.row)" />
            <el-button type="primary" icon="el-icon-document" size="small" circle @click="detail(scope.$index, scope.row)" />
            <el-button type="danger" icon="el-icon-delete" size="small" circle @click="handleDelete(scope.$index, scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import Dec from '@/components/Dec'
export default {
  name: 'Test',
  components: {
    Dec
  },
  data() {
    return {
      content: '',
      classVal: '',
      gradeVal: '',
      objectVal: '',
      searchtext: '',
      classify: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      grade: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      object: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      tableData: [
        {
          no: '1',
          testtime: '2019-12-26 12:00',
          testno: '1001',
          testtitle: '【第六章-经济学人】测试试卷（中）',
          classify: '月考',
          subject: '高中数学',
          classes: '高三一班',
          avg: '88',
          total: '100',
          highest: '98',
          lowest: '23'
        }
      ]
    }
  },
  methods: {
    search() {

    },
    handleEdit(index, row) {
      this.$router.push('/analysis/testinfo')
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    detail(index, row) {
      this.$router.push('/analysis/testdetail')
      console.log(row)
    }
  }
}
</script>
<style scoped>
.test{
    max-width: 1100px;
    height:calc(100vh - 115px);
    margin:0 auto;
    background: #fff;
    margin-top:15px;
    padding:20px;
}
.search{
    text-align: right;
    font-size: 12px;
}
</style>
