<!--
 * @desc 创建试卷-从题库中选择
 * @author linyuanjie
 * @date 2023/10/18
-->

<template>
  <el-dialog
    title="选择试题"
    :visible.sync="showDialog"
    width="50%"
    center
    :modal-append-to-body="false"
    :append-to-body="true"
    :before-close="handleClose">
    <avue-crud
      :data="tableData"
      :option="optionData"
      :page.sync="page"
      :table-loading="tableLoading"
      @selection-change="selectionChange"
      @on-load="getList"
      @size-change="sizeChange"
      @search-change="searchVal"
      @current-change="currentChange"
      @search-reset="searchReset">
      <template slot="createTimeSearch">
        <el-date-picker
          v-model="createTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </template>
      <template
        slot="menu"
        slot-scope="scope">
        <el-button
          type="text"
          size="small"
          @click="viewFn(scope.row)">查看
        </el-button>
      </template>
    </avue-crud>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitFn">确 定</el-button>
    </span>
    <addQuestionDialog
      :showDialog.sync="showAddQuestionDialog"
      :dialogType="dialogType"
      :questionDetail="questionDetail"
    />
  </el-dialog>
</template>

<script>
import {getQuestionDetail, getQuestionPage} from "@/api/test";
import {selectQuestionBankOptionData} from "@/const/crud/test";
import addQuestionDialog from "@/views/admin/quiz/components/addQuestionDialog";

export default {
  name: "addQuizTitleDialog",
  components: { addQuestionDialog },
  props:{
    showDialog: {
      type: Boolean,
      required: true,
      default:  false
    }
  },
  data () {
    return {
      optionData: selectQuestionBankOptionData,
      tableLoading: false,
      tableData: [],
      page: {
        pageSize: 20,
        pagerCount: 5,
      },
      createTime: '', // 创建时间
      selectionList: [], // 当前表格选中项
      dialogType: 'view',
      showAddQuestionDialog: false,
      questionDetail: null
    }
  },
  methods: {
    submitFn () {
      if (!this.selectionList.length) {
        return this.$message.warning('请选择题目')
      }
      this.$emit('setSelection', this.selectionList)
      this.handleClose()
    },
    handleClose () {
      this.selectionList = []
      this.$emit('update:showDialog', false)
    },
    async viewFn (row) {
      const res = await getQuestionDetail({ questionId: row.details.questionId, sn: row.details.serialNumber })
      if (res.data.code === 0) {
        this.questionDetail = Object.assign({}, res.data.data)
        this.dialogType = 'view'
        this.showAddQuestionDialog = true
      }
    },
    selectionChange(list) {
      this.selectionList = list
    },
    // 初始化页面
    getList (page, params) {
      this.tableLoading = true;
      getQuestionPage(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      ).then((response) => {
        this.tableData = [];
        this.tableData = response.data.data.records;
        this.page.total = response.data.data.total;
        this.tableLoading = false;
      }).catch(() => {
        this.tableLoading = false;
      });
    },
    // 分页查询
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    // 查询
    searchVal(form, done) {
      this.searchForm = form;
      this.searchForm.createTime = this.createTime
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    searchReset() {
      this.createTime = ''
    }
  }
}
</script>
