<template>
  <div class="make-tester-wrapper">
    <el-form
      ref="addform"
      :model="formInfo"
      label-width="120px"
      :rules="rules"
    >
      <el-form-item
        label="试卷名称"
        prop="title"
      >
        <el-input v-model="formInfo.title" />
      </el-form-item>
    </el-form>
    <div class="selection-type-radio-wrapper">
      <el-radio v-model="curSubjectType" label="单选题" />
      <el-radio v-model="curSubjectType" label="多选题" />
      <el-radio v-model="curSubjectType" label="判断题" />
      <el-button type="primary" @click="addSubject">新增试题</el-button>
    </div>
    <div class="save-btn-wrapper">
      <el-button type="primary">保存试卷</el-button>
    </div>
    <el-dialog
      title="添加题目"
      :visible.sync="addSubjectDialogShow"
    >
      <div class="search-subject-wrapper">
        <el-input v-model="searchSubjectKeyword" placeholder="关键字" />
        <el-button type="primary">搜索</el-button>
      </div>
      <div class="subject-table-wrapper">
        <el-table
          :data="subjectTable"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="outline"
            label="题干"
          />
        </el-table>
        <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>
      <div class="table-wrapper">
        {{ "共选了 " + " " + multipleSelection.length + "个题目" }}
      </div>
      <el-button>保存</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInfo: {
        title: ''
      },
      // 单选题、多选题、判断题、新增试题
      curSubjectType: '单选题',
      rules: {
        title: [
          {
            required: true,
            message: '请输入试卷名称',
            trigger: 'blur'
          }
        ]
      },
      addSubjectDialogShow: false,
      searchSubjectKeyword: '',
      subjectTable: [
        {
          outline: '乡镇人民政府不具备安全生产监督管理的职责。（）'
        },
        {
          outline: '工会对生产经营单位的安全生产工作无监督的权力和义务。（）'
        },
        {
          outline: '道路交通安全适用于《中华人民共和国安全生产法》。（）'
        }
      ],
      multipleSelection: [],
      pageSize: 10,
      TotalSize: 40,
      currentPage: 1
    }
  },
  methods: {
    addSubject() {
      //
      this.addSubjectDialogShow = true
    },
    handleSelectionChange(val) {
      //
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
