<!--
 * @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"
      @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="menuLeft">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-edit"
          @click="addFn">
          创建试卷
        </el-button>
      </template>
      <template slot="itemQty" slot-scope="scope">
        <span>{{ scope.row.expand ? scope.row.expand.itemQty : '' }}</span>
      </template>
      <template slot="totalMark" slot-scope="scope">
        <span>{{ scope.row.expand ? scope.row.expand.totalMark : '' }}</span>
      </template>
      <template slot="passingMark" slot-scope="scope">
        <span>{{ scope.row.expand ? scope.row.expand.passingMark : '' }}</span>
      </template>
      <template
        slot="menu"
        slot-scope="scope">
        <el-button
          type="text"
          size="small"
          @click="copyFn(scope.row)">复制
        </el-button>
        <el-button
          type="text"
          size="small"
          @click="editFn(scope.row)">编辑
        </el-button>
        <el-button
          v-if="scope.row.state === 'RELEASE'"
          type="text"
          size="small"
          @click="stopFn(scope.row)">停止
        </el-button>
        <el-button
          v-if="['CREATE', 'STOP'].includes(scope.row.state)"
          type="text"
          size="small"
          @click="releaseFn(scope.row)">发布
        </el-button>
      </template>
    </avue-crud>
    <copyQuizDialog :showDialog.sync="showCopyQuizDialog" :currentRow="currentRow" @getList="getListFn" />
  </div>
</template>

<script>
import {optionData} from "@/const/crud/test";
import {getQuizPage, releaseQuiz, stopQuiz} from "@/api/test";
import copyQuizDialog from "@/views/admin/quiz/components/copyQuizDialog";

export default {
  name: "questionnaire",
  components: { copyQuizDialog },
  data () {
    return {
      optionData: optionData,
      tableLoading: false,
      tableData: [],
      page: {
        pageSize: 20,
        pagerCount: 5,
      },
      createTime: '', // 创建时间
      showCopyQuizDialog: false,
      currentRow: {}
    }
  },
  methods: {
    addFn () {
      this.$router.push('/admin/quiz/add')
    },
    // 初始化页面
    getList (page, params) {
      this.tableLoading = true;
      getQuizPage(
        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 = ''
    },
    copyFn (row) {
      this.currentRow = Object.assign({}, row)
      this.showCopyQuizDialog = true
    },
    getListFn () {
      this.getList(this.page)
    },
    editFn (row) {
      this.$router.push(`/admin/quiz/edit?id=${row.quizId}`)
    },
    stopFn (row) {
      this.$confirm('是否中止？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await stopQuiz({ quizId: row.quizId, state: 'STOP' })
        if (res.data.code === 0) {
          this.$message.success('中止成功')
          this.getList(this.page)
        }
      }).catch(() => {})
    },
    releaseFn (row) {
      this.$confirm('是否发布？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await releaseQuiz({ quizId: row.quizId, state: 'RELEASE' })
        if (res.data.code === 0) {
          this.$message.success('发布成功')
          this.getList(this.page)
        }
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>

</style>
