<template>
    <el-dialog title="选取试题" :visible.sync="chooseVisible_" width="80%" >
      <div style="margin-top:10px">
        <el-select v-model="questioncatC" placeholder="分类" clearable style="width: 200px" class="filter-item" @change="handleFilter">
                <el-option v-for="item in questioncatData" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        <el-select
          v-model="listQuery.type"
          placeholder="题型"
          clearable
          style="width: 120px"
          class="filter-item"
          @change="handleFilter"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.key"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="search"
          placeholder="输入题干进行搜索"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleSearch"
        />
        <el-button
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
            >搜索</el-button>
            <el-button
              class="filter-item"
              type="primary"
              icon="el-icon-refresh-left"
              @click="resetFilter"
            >刷新重置</el-button>
            </div>
            <div style="margin-top:10px">
      </div>
  <el-table
        :data="tableData.results"
        style="width: 100%;margin-top:10px;"
        border
        stripe
        fit
        v-loading="listLoading"
        highlight-current-row
        max-height="400"
        ref="table"
      >
        <el-table-column
        type="selection"
        width="55">
      </el-table-column>
        <el-table-column align="left" label="题干">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column align="left" label="所属题库">
          <template slot-scope="scope">{{ scope.row.questioncat_name }}</template>
        </el-table-column>
        <el-table-column align="left" label="题型">
          <template slot-scope="scope">{{ scope.row.type }}</template>
        </el-table-column>
        <el-table-column align="left" label="难易度">
          <template slot-scope="scope">{{ scope.row.level }}</template>
        </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
              <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleDetail(scope)"
              icon="el-icon-more"
            ></el-button>
          </template>
        </el-table-column>
  </el-table>
      <pagination
        v-show="tableData.count>0"
        :total="tableData.count"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
  <el-dialog
    title="题目详情"
    :visible.sync="dialogVisible"
    width="30%"
    append-to-body>
    <div>{{question.type}}</div>
    <div>{{question.name}}</div>
    <ul id="repeat">
    <li v-for="(value,key,index) in question.options">
      {{ key }}:{{value}}
    </li>
    </ul>
    <div>正确答案{{question.right}}</div>
    <div>{{question.resolution}}</div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
        <div style="text-align:left;">
          <el-button type="primary" @click="choseQuestions('table')">选中</el-button>
        </div>
    </el-dialog>
  </template>
  
  <script>
  import {
    getQuestioncatList,
    getQuestionList,
  } from "@/api/exam";
  import Pagination from "@/components/Pagination";
  
  const listQuery = {
    page: 1,
    limit: 20,
    search:''
  };
  export default {
    name:'Questionchoose',
    components: { Pagination },
    props: {
      chooseVisible: Boolean,
    },
    data() {
      return {
        questioncat: {
          id: "",
          name: ""
        },
        listQuery: listQuery,
        search:"",
        tableData: {
          count:0,
          results:[]
        },
        questioncatData:[],
        listLoading: true,
        dialogVisible: false,
        typeOptions: [
          { key: 1, label: "单选", value: "单选" },
          { key: 2, label: "多选", value: "多选"},
          { key: 3, label: "判断", value: "判断" }
        ],
        question:{},
        questioncatC:[]
      };
    },
    computed: {
      chooseVisible_: {
          get() {
            return this.chooseVisible;
          },
          set(val) {
            this.$emit('closeDg',val);
          }
        }
    },
    created() {
      this.getList();
      this.getQuestioncatAll();
    },
    methods: {
      getList(query = this.listQuery) {
        this.listLoading = true;
        getQuestionList(query).then(response => {
          if(response.data.results){
            this.tableData = response.data
          }
          this.listLoading = false;
        });
      },
      getQuestioncatAll() {
        getQuestioncatList().then(response => {
          this.questioncatData = response.data.results;
        });
        
      },
      handleFilter() {
        if(this.questioncatC.length) {
        this.listQuery.questioncat = this.questioncatC[this.questioncatC.length-1]
      }else{
        this.listQuery.questioncat = ''
      }
        this.listQuery.page = 1;
        this.getList();
      },
      resetFilter() {
        this.search = ""
        this.listQuery = listQuery
        this.getList();
      },
      handleSearch() {
        this.getList({ search: this.search });
      },
      handleDetail(scope) {
        this.dialogVisible = true
        this.question = scope.row
      },
      choseQuestions(table) {
          const _selectData = this.$refs.table.selection
          this.$emit('choseQ',_selectData);
          this.$emit('closeDg',false);
          this.$refs.table.clearSelection();
      }
    }
  };
  </script>
  