<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="题目管理" name="题目管理">
        <div class="manage-search-wrapper">
          <el-select
            v-model="inputType"
            placeholder="--按题型--"
          >
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-input
            v-model="inputKeyword"
            style="margin-left: 20px;width: 280px;"
            placeholder="关键字"
          />
          <el-button style="margin-left: 20px;" type="success" size="medium">搜索</el-button>
        </div>
        <div class="manage-tools-wrapper">
          <el-button size="small" icon="el-icon-plus" type="primary" @click="singleDialogShow">单选题</el-button>
          <el-button style="margin-left: 20px;" size="small" icon="el-icon-plus" type="primary" @click="multiDialogShow">多选题</el-button>
          <el-button style="margin-left: 20px;" size="small" icon="el-icon-plus" type="primary" @click="justifyDialogShow">判断题</el-button>
        </div>
        <div class="manage-table-wrapper">
          <el-table
            :data="subjectTable"
          >
            <el-table-column
              label="题干"
              prop="title"
            />
            <el-table-column
              label="类型"
              prop="type"
            />
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="试卷管理" name="试卷管理">
        <div class="search-tester-tools-wrapper">
          <div class="">
            <el-input v-model="searchTesterName" placeholder="请输入关键字" />
            <el-button type="primary" size="medium">搜索</el-button>
          </div>
          <div>
            <el-button type="primary" @click="makeTester">手动组卷</el-button>
          </div>
        </div>
        <div class="el-table-wrapper">
          <el-table
            :data="testerTableData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
            />
            <el-table-column
              prop="name"
              label="名称"
              width="380"
            />
            <el-table-column
              prop="state"
              label="状态"
              width="180"
            />
            <el-table-column
              label="题目统计"
              width="160"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.subjectSum }}题 {{ '/' + scope.row.scoreSum + '分' }}</div>
              </template>
            </el-table-column>
          </el-table>
          <div class="delete-tester-wrapper">
            <el-button type="primary">删除</el-button>
          </div>
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: '题目管理',
      typeOptions: [
        {
          label: '单选题',
          value: '单选题'
        },
        {
          label: '多选题',
          value: '多选题'
        },
        {
          label: '判断题',
          value: '判断题'
        }
      ],
      inputType: '',
      inputKeyword: '',
      subjectTable: [
        {
          title: '乡镇人民政府不具备安全生产监督管理的职责。（）',
          type: '判断题'
        },
        {
          title: '工会对生产经营单位的安全生产工作无监督的权力和义务。（）',
          type: '判断题'
        },
        {
          title: '道路交通安全适用于《中华人民共和国安全生产法》。（）',
          type: '判断题'
        }
      ],
      singleSelectionShow: false,
      searchTesterName: '',
      testerTableData: [
        {
          name: '大学习、大培训、大考试试卷21',
          state: '已发布',
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: '大学习、大培训、大考试试卷20',
          state: '已发布',
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: '大学习、大培训、大考试试卷19',
          state: '已发布',
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: '大学习、大培训、大考试试卷18',
          state: '已发布',
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: '大学习、大培训、大考试试卷17',
          state: '已发布',
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: '大学习、大培训、大考试试卷16',
          state: '已发布',
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: '大学习、大培训、大考试试卷15',
          state: '已发布',
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: '大学习、大培训、大考试试卷14',
          state: '已发布',
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: '大学习、大培训、大考试试卷13',
          state: '已发布',
          subjectSum: 90,
          scoreSum: 100.0
        }
      ],
      multipleSelection: [],
      totalSize: 40,
      pageSize: 10,
      currentPage: 1
    }
  },
  mounted() {
    this.$route.params.name
  },
  methods: {
    singleDialogShow() {
      // 显示单选题
      this.$router.push({
        path: '/train/exam/single/11223344'
      })
    },
    multiDialogShow() {
      // 显示多选题
      this.$router.push({
        path: '/train/exam/multi/2345654'
      })
    },
    justifyDialogShow() {
      // 显示判断题
      this.$router.push({
        path: '/train/exam/justify/44335566'
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    makeTester() {
      // 手动组卷
      this.$router.push({
        path: '/train/exam/maketester/123442211'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .manage-search-wrapper {
    display: flex;
  }
</style>
