<template>
  <div>
    <el-dialog
      :visible.sync="dialogAddVisible"
      v-if="dialogAddVisible"
      width="70%"
      title="添加试题"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-form style="margin: 10px 0" :inline="true">
        <el-form-item label="题目标题：">
          <el-input type="text" v-model="search.paperName" />
        </el-form-item>
        <el-form-item label="题目类型：">
          <el-select v-model="search.questionTypes">
            <el-option label="全部" value="0" />
            <el-option label="单选题" value="1" />
            <el-option label="多选题" value="2" />
            <el-option label="判断题" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            style="margin-left: 10px"
            type="primary"
            icon="el-icon-search"
            @click="initList"
          >
            搜索
          </el-button>
          <el-button class="commonBtn" icon="el-icon-refresh" @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="list.length ? list : questionTitleList"
        height="calc(100% - 200px)"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
        :cell-style="{ 'text-align': 'center', padding: '2px' }"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="left" type="selection" width="90">
        </el-table-column>
        <!-- <el-table-column width="80" type="index" label="序号" align="center">
          <template slot-scope="scope">
            {{ scope.$index + (search.pageNo - 1) * search.pageSize + 1 }}
          </template>
        </el-table-column> -->
        <el-table-column width="80" type="index" label="序号" align="center" />
        <el-table-column
          prop="questionTitle"
          show-overflow-tooltip
          label="题目标题"
          align="center"
        />
        <el-table-column show-overflow-tooltip label="题目类型" align="center">
          <template #default="{ row }">
            {{ initSubject(row.questionTypes) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="questionScore"
          show-overflow-tooltip
          label="题目分值"
          align="center"
        />
      </el-table>

      <span slot="footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'RuoyiQuestionDialog',
  props: {
    dialogAddVisible: {
      type: Boolean,
      default: false
    },
    questionTitleList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      search: {
        questionTitle: '',
        questionTypes: ''
      },
      list: [],
      multipleSelection: []
    }
  },

  mounted() {},

  methods: {
    // 取消
    cancle() {
      this.multipleSelection = []
      this.$parent.$parent.dialogAddVisible = false
    },
    // 提交
    submit() {
      this.$emit('doAddQuestion', this.multipleSelection);
      this.$parent.$parent.dialogAddVisible = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    initSubject(type) {
      switch (type) {
        case '0':
          return '全部'
        case '1':
          return '单选题'
        case '2':
          return '多选题'
        case '3':
          return '判断题'
        default:
          return '-'
      }
    },
    initList() {
      this.list = []
      if(this.search.questionTypes){
         this.questionTitleList.forEach(item=>{
          if(item.questionTypes ==this.search.questionTypes){
            this.list.push(item)
          }
        })
      }
    },
    reset() {
      this.search = {
        questionTitle: '',
        questionTypes: ''
      }
      this.list = []
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep
  .el-table__header
  .el-table-column--selection
  .cell
  .el-checkbox:after {
  color: rgb(1, 214, 237);
  content: '全选/选择';
  /* font-size: 12px; */
  margin-left: 2px;
  font-weight: bold;
}
</style>
