<!--
 * @desc 题库管理
 * @author linyuanjie
 * @date 2023/10/16
-->

<template>
  <div>
    <avue-crud
      :data="tableData"
      :option="optionData"
      :page.sync="page"
      :table-loading="tableLoading"
      @on-load="getList"
      @size-change="sizeChange"
      @search-change="searchVal"
      @current-change="currentChange">
      <template slot="menuLeft">
        <el-button
          type="primary"
          size="small"
          @click="addFn">
          添加试题
        </el-button>
      </template>
      <template
        slot="menu"
        slot-scope="scope">
        <el-button
          type="text"
          size="small"
          @click="viewFn(scope.row)">查看
        </el-button>
        <el-button
          type="text"
          size="small"
          @click="editFn(scope.row)">编辑
        </el-button>
        <el-button
          type="text"
          size="small"
          @click="delFn(scope.row)">删除
        </el-button>
      </template>
    </avue-crud>
    <addQuestionDialog
      :showDialog.sync="showAddQuestionDialog"
      :dialogType="dialogType"
      :questionDetail="questionDetail"
      @openSuccessTip="openSuccessTip"
    />
    <addQuestionSuccessTip :showDialog.sync="showAddSuccessDialog" :dialogType="dialogType" @addFn="addFn" />
  </div>
</template>

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

export default {
  name: "questionnaire",
  components: { addQuestionDialog, addQuestionSuccessTip },
  data () {
    return {
      optionData: questionBankOptionData,
      tableLoading: false,
      tableData: [],
      page: {
        pageSize: 20,
        pagerCount: 5,
      },
      dialogType: 'add',
      showAddQuestionDialog: false,
      questionDetail: null,
      showAddSuccessDialog: false
    }
  },
  methods: {
    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
      }
    },
    async editFn (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 = 'edit'
        this.showAddQuestionDialog = true
      }
    },
    delFn (row) {
      this.$confirm('是否删除？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteQuestion({  questionId: row.details.questionId })
        if (res.data.code === 0) {
          this.$message.success('删除成功')
          this.getList(this.page)
        }
      }).catch(() => {})
    },
    addFn () {
      this.dialogType = 'add'
      this.showAddQuestionDialog = true
    },
    openSuccessTip () {
      this.showAddSuccessDialog = true
      this.getList(this.page)
    },
    // 初始化页面
    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.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    }
  }
}
</script>
