<template>
  <div>
    <Dec :content="content" />
    <div class="test">
      <div class="top-box">
        <el-row>
          <el-col :span="9">
            <el-button type="primary" size="small">新增分类</el-button>
            <el-button type="primary" size="small" @click="creatpaper">创建试卷</el-button>
            <el-button type="primary" size="small">移动</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </el-col>
          <el-col :span="15" style="text-align:right">
            <span class="font14">状态：</span>
            <el-select v-model="value" style="width:120px" size="small" placeholder="请选择">
              <el-option :value="0" label="全部" />
              <el-option :value="1" label="毕业" />
              <el-option :value="2" label="在读启用" />
              <el-option :value="3" label="在读禁用" />
            </el-select>
            <span class="font14">创建者：</span>
            <el-select v-model="value" style="width:120px" size="small" placeholder="请选择">
              <el-option :value="0" label="仅显示我的" />
              <el-option :value="1" label="仅显示他人的" />
            </el-select>
            <el-input
              v-model="searchtext"
              size="small"
              placeholder="班级名称或编号"
              style="width:220px"
            >
              <i slot="suffix" class="el-input__icon el-icon-search" @click="search" />
            </el-input>
          </el-col>
        </el-row>
      </div>
      <el-row style="height:calc(100% - 56px);">
        <el-col :span="6" style="height:100%;border-right:1px solid #eee">
          <ListBox
            ref="listbox"
            title="试卷分类"
            title-bg="#ccc"
            :data="listData"
            active-color="rgb(64, 158, 255)"
            :acitve-index="1"
            @clicklist="clicklist"
            @removelist="removelist"
            @submitname="submitname"
          />
        </el-col>
        <el-col :span="18" style="padding:10px;">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="no"
              label="序号"
            />
            <el-table-column
              prop="paperno"
              label="试卷编号"
            />
            <el-table-column
              prop="papertitle"
              :show-overflow-tooltip="true"
              width="240"
              label="试卷名称"
            />
            <el-table-column
              prop="state"
              label="状态"
            />
            <el-table-column
              prop="auther"
              label="创建者"
            />
            <el-table-column
              prop="classify"
              label="分类"
            />
            <el-table-column
              prop="testnum"
              label="考试次数"
            />
            <el-table-column
              prop="creattime"
              width="150"
              label="创建时间"
            />
            <el-table-column label="操作" fixed="right" width="100">
              <template slot-scope="scope">
                <el-button type="primary" size="small" icon="el-icon-edit-outline" circle @click="enable(scope)" />
                <el-button type="danger" size="small" icon="el-icon-delete" circle @click="enable(scope)" />
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Dec from '@/components/Dec'
import ListBox from '@/components/ListBox'
export default {
  name: 'Test',
  components: {
    Dec,
    ListBox
  },
  data() {
    return {
      value: 0,
      searchtext: '',
      content: '',
      hoverIndex: -1,
      listData: [
        { id: 0, name: '全部', removeIcon: false },
        { id: 2, name: '月考' },
        { id: 3, name: '周考' },
        { id: 4, name: '期末考' }
      ],
      tableData: [
        {
          no: '1',
          paperno: '1001',
          papertitle: '2020年初一数学期末考试',
          state: '草稿',
          auther: '李样',
          classify: '月考',
          testnum: '23',
          creattime: '2019-12-26 12:00'
        }
      ]
    }
  },
  methods: {
    search() {

    },
    clicklist(index) {
      console.log(index)
    },
    removelist(index) {
      console.log(index)
    },
    submitname(index) {
      this.listData[index].edit = false
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    creatpaper() {
      this.$router.push('/testpaper/creatpaper')
    }
  }
}
</script>
<style scoped>
.test{
    max-width: 1100px;
    height:calc(100vh - 115px);
    margin:0 auto;
    background: #fff;
    margin-top:15px;
    padding:20px;
}
.top-box{
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
}
.font14{
  font-size:14px;
}
</style>
