<template>
  <div class="exam-wrapper">
    <el-tabs v-model="activeName">
      <el-tab-pane label="题库管理" name="题库管理">
        <div class="add-question-bank-wrapper">
          <el-button type="primary" @click="addQuestionBank"
            >添加题库</el-button
          >
        </div>
        <div class="tools-search-question-bank-wrapper">
          <el-select v-model="searchType" placeholder="所属分类">
            <el-option
              v-for="item in questionTypeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input
            v-model="inputSearchName"
            style="width: 480px;margin-left: 20px;"
            placeholder="请输入名称"
          />
          <el-button
            style="margin-left: 20px;"
            type="success"
            @click="initExamLibrary"
            >搜索</el-button
          >
        </div>
        <div class="table-wrapper">
          <el-table :data="tableData">
            <el-table-column prop="title" label="名称" />
            <el-table-column label="包含内容">
              <template slot-scope="scope">
                <div>
                  试卷:&nbsp;{{ scope.row.testerSum }}&nbsp;&nbsp;题目:
                  {{ scope.row.subjectSum }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="分类" prop="type" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="jumpToManage(scope.row)">管理</el-button>
                <el-button @click="showEditDialog(scope.row)">编辑</el-button>
                <el-button @click="deleteEditDialog(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="curPageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalElements"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="题库分类管理" name="题库分类管理">
        <div class="edit-question-bank-wrapper">
          <el-button type="primary" @click="addTypeDialog">添加分类</el-button>
        </div>
        <div class="edit-type-table-wrapper">
          <el-table :data="tableTypeData">
            <el-table-column prop="title" label="名称" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="warning" @click="showEditTypeDialog(scope.row)"
                  >编辑</el-button
                >
                <el-button type="danger" @click="deleteType(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="试卷管理" name="试卷管理">
        <div class="pager-total-wrapper">
          <div class="pager-form-wrapper">
            <el-button type="primary" @click="navigateToMakeTester"
              >手动组卷</el-button
            >
            <el-button type="primary" @click="navigateToMakeTesterAuto"
              >智能组卷</el-button
            >
          </div>
          <div class="pager-tools-wrapper">
            <el-input
              placeholder="关键字"
              :style="{ width: '50%' }"
              v-model="searchPaperKeyWord"
            ></el-input>
            <el-button
              type="primary"
              style="margin-left: 40px;"
              @click="initPaper"
              >搜索</el-button
            >
          </div>
          <div class="pager-table-wrapper">
            <el-table :data="paperTableData">
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column
                prop="status"
                label="状态"
                width="80"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="info" @click="closePaper(scope.row)"
                    >关闭试卷</el-button
                  >
                  <el-button type="primary" @click="publishPaper(scope.row)"
                    >发布试卷</el-button
                  >
                  <el-button type="danger" @click="deletePublish(scope.row)"
                    >删除试卷</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handlePagerSizeChange"
              @current-change="handlePagerCurrentChange"
              :current-page="currentPagerPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="curPagerPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPagerElements"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="创建题库" :visible.sync="addFormDialogShow">
      <el-form
        v-if="addFormDialogShow"
        ref="addform"
        :model="formInfo"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="名称" prop="title">
          <el-input v-model="formInfo.title" />
        </el-form-item>
        <el-form-item label="分类" prop="type">
          <el-select v-model="formInfo.type" placeholder="所属分类">
            <el-option
              v-for="item in questionTypeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="addFormDialogShow = false"
          >取消</el-button
        >
        <el-button type="success" @click="submitAddForm">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑题库" :visible.sync="editFormDialogShow">
      <el-form
        v-if="editFormDialogShow"
        ref="editform"
        :model="editFormInfo"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="名称" prop="title">
          <el-input v-model="editFormInfo.title" />
        </el-form-item>
        <el-form-item label="分类" prop="type">
          <el-select v-model="editFormInfo.type" placeholder="所属分类">
            <el-option
              v-for="item in questionTypeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="editFormDialogShow = false"
          >取消</el-button
        >
        <el-button type="success" @click="submitEditForm">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加分类" :visible.sync="addTypeFormDialog">
      <el-form
        v-if="addTypeFormDialog"
        ref="addTypeform"
        :model="typeFormInfo"
        label-width="120px"
        :rules="typeRules"
      >
        <el-form-item label="名称" prop="title">
          <el-input v-model="typeFormInfo.title" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="addTypeFormDialog = false"
          >取消</el-button
        >
        <el-button type="primary" @click="submitAddType">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑分类" :visible.sync="editTypeFormDialog">
      <el-form
        v-if="editTypeFormDialog"
        ref="editTypeform"
        :model="editTypeFormInfo"
        label-width="120px"
        :rules="typeRules"
      >
        <el-form-item label="名称" prop="title">
          <el-input v-model="editTypeFormInfo.title" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="cancelEditType">取消</el-button>
        <el-button type="primary" @click="submitEditType">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import axiosFile from '@/utils/requestfile.js'
import {
  getExamLibrary,
  postExamLibrary,
  putExamLibrary,
  deleteExamLibrary,
  getExamLibraryCategory,
  postExamLibraryCategory,
  putExamLibraryCategory,
  deleteExamLibraryCategory,
  findPagePager,
  changePaperStatus,
  deleteExamPaper
} from "@/api/test.js";
export default {
  data() {
    return {
      activeName: "题库管理",
      questionTypeOption: [
        {
          label: "视频问题回答",
          value: "视频问题回答"
        },
        {
          label: "安全生产培训",
          value: "安全生产培训"
        },
        {
          label: "职业卫生培训",
          value: "职业卫生培训"
        }
      ],
      searchType: "",
      inputSearchName: "",
      tableData: [
        {
          title: "大学习、大培训、大考试",
          type: "大学习、大培训、大考试",
          testerSum: 10,
          subjectSum: 10
        },
        {
          title: "放射诊疗防护",
          type: "放射诊疗防护",
          testerSum: 8,
          subjectSum: 8
        },
        {
          title: "职业卫生视频验证",
          type: "职业卫生视频验证",
          testerSum: 2,
          subjectSum: 4
        }
      ],
      addFormDialogShow: false,
      formInfo: {
        title: "",
        type: ""
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请输入课程类型",
            trigger: "change"
          }
        ]
      },
      editFormDialogShow: false,
      editFormInfo: {
        title: "",
        type: ""
      },
      tableTypeData: [
        {
          title: "视频问题回答",
          questionSum: 1
        },
        {
          title: "放射诊疗防护",
          questionSum: 1
        },
        {
          title: "职业卫生培训",
          questionSum: 3
        }
      ],
      addTypeFormDialog: false,
      typeFormInfo: {
        title: ""
      },
      typeRules: {
        title: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur"
          }
        ]
      },
      editTypeFormDialog: false,
      editTypeFormInfo: {
        title: ""
      },
      currentPage: 1,
      curPageSize: 10,
      totalElements: 10,
      searchPaperKeyWord: "",
      paperTableData: [],
      currentPagerPage: 1,
      curPagerPageSize: 10,
      totalPagerElements: 10
    };
  },
  mounted() {
    this.initExamLibraryCategory();
    this.initExamLibrary();
    this.initPaper();
  },
  methods: {
    async initExamLibrary() {
      const params = {};
      params.page = this.currentPage - 1;
      params.size = this.curPageSize;
      if (this.searchType) {
        params.categoryId = this.searchType;
      }
      if (this.inputSearchName) {
        params.name = this.inputSearchName;
      }
      await getExamLibrary(params).then(res => {
        if (res) {
          console.log(res, "getExamLibrary getExamLibrary");
          this.tableData = [
            ...res.content.map(item => {
              return {
                title: item.name,
                type: item.category,
                subjectSum: item.subjectNum,
                paperNum: item.testerSum,
                id: item.id
              };
            })
          ];
        }
      });
    },
    async initExamLibraryCategory() {
      const params = {
        page: 0,
        size: 9999
      };
      await getExamLibraryCategory(params).then(res => {
        console.log(res, "getExamLibraryCategory getExamLibraryCategory");
        this.tableTypeData = [
          ...res.content.map(item => {
            return {
              title: item.name,
              ...item
            };
          })
        ];
        this.questionTypeOption = [
          ...res.content.map(item => {
            return {
              label: item.name,
              value: item.id
            };
          })
        ];
      });
    },
    async initPaper() {
      const data = {
        page: this.currentPagerPage - 1,
        size: this.curPagerPageSize
      };
      if (this.searchPaperKeyWord) {
        data.name = this.searchPaperKeyWord;
      }
      await findPagePager(data).then(res => {
        console.log(res, "findPagePager findPagePager");
        this.paperTableData = [...res.content];
        this.totalPagerElements = res.totalElements;
      });
    },
    addQuestionBank() {
      this.addFormDialogShow = true;
      this.formInfo.title = "";
      this.formInfo.type = "";
    },
    cancelAddForm() {
      this.addFormDialogShow = false;
      this.formInfo.title = "";
      this.formInfo.type = "";
    },
    submitAddForm() {
      // 提交 axios
      this.$refs.addform.validate(valid => {
        if (valid) {
          const data = {};
          data.categoryId = this.formInfo.type;
          data.name = this.formInfo.title;
          postExamLibrary(data)
            .then(res => {
              if (res) {
                this.$message({
                  type: "success",
                  message: "添加成功"
                });
              }
              this.addFormDialogShow = false;
              this.initExamLibrary();
            })
            .catch(() => {
              this.$message.error("添加失败");
            });
        }
      });
    },
    cancelEditForm() {
      this.editFormDialogShow = false;
    },
    submitEditForm() {
      // axios
      this.$refs.editform.validate(valid => {
        if (valid) {
          const data = {
            categoryId: this.editFormInfo.type,
            id: this.editFormInfo.id,
            name: this.editFormInfo.title
          };
          putExamLibrary(data)
            .then(res => {
              this.$message({
                type: "success",
                message: "修改成功"
              });
              this.initExamLibrary();
              this.editFormDialogShow = false;
            })
            .catch(() => {
              this.$message.error("修改失败");
            });
        }
      });
    },
    showEditDialog(row) {
      this.editFormDialogShow = true;
      console.log(row, "showEditDialog showEditDialog showEditDialog");
      console.log(
        this.questionTypeOption,
        "this.questionTypeOption this.questionTypeOption this.questionTypeOption this.questionTypeOption"
      );
      this.editFormInfo.title = row.title;
      this.editFormInfo.id = row.id;
      this.editFormInfo.type = this.questionTypeOption.filter(
        item => item.label === row.type
      ).length
        ? this.questionTypeOption.filter(item => item.label === row.type)[0]
            .value
        : "";
    },
    deleteEditDialog(row) {
      this.$confirm("此操作将永久删除题库, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteExamLibrary([row.id])
            .then(res => {
              this.$message({
                type: "success",
                message: "删除成功"
              });
              this.initExamLibrary();
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    deleteType(row) {
      // row
      // 删除类型
      this.$confirm("此操作将永久删除类型，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteExamLibraryCategory([row.id])
            .then(res => {
              this.$message({
                type: "message",
                message: "删除成功"
              });
              this.initExamLibraryCategory();
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    cancelEditType() {
      this.editTypeFormDialog = false;
    },
    submitEditType() {
      // 提交编辑类型
      //
      this.$refs.editTypeform.validate(valid => {
        if (valid) {
          console.log("editTypeform editTypeform editTypeform ");
          const data = {
            name: this.editTypeFormInfo.title,
            id: this.editTypeFormInfo.id
          };
          putExamLibraryCategory(data)
            .then(res => {
              this.$message({
                type: "success",
                message: "修改成功"
              });
              this.initExamLibraryCategory();
              this.editTypeFormDialog = false;
            })
            .catch(() => {
              this.$message.error("修改失败");
            });
        }
      });
    },
    showEditTypeDialog(row) {
      //
      this.editTypeFormDialog = true;
      //
      this.editTypeFormInfo = {
        ...row
      };
      // console.log(row, 'showEditTypeDialog showEditTypeDialog')
    },
    addTypeDialog() {
      // 添加分类对话框
      this.addTypeFormDialog = true;
      this.typeFormInfo.title = "";
    },
    jumpToManage(row) {
      // console.log(row)
      this.$router.push({
        path: "/train/exam/manage/" + row.id
      });
    },
    submitAddType() {
      this.$refs.addTypeform.validate(valid => {
        if (valid) {
          // submitAddType
          const data = {
            name: this.typeFormInfo.title
          };
          postExamLibraryCategory(data)
            .then(res => {
              console.log(
                res,
                "postExamLibraryCategory postExamLibraryCategory"
              );
              this.$message({
                type: "success",
                message: "添加成功"
              });
              this.initExamLibraryCategory();
              this.addTypeFormDialog = false;
            })
            .catch(() => {
              this.$message.error("添加失败");
            });
        }
      });
    },
    handleSizeChange(val) {
      this.curPageSize = val;
      this.initExamLibrary();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initExamLibrary();
    },
    handlePagerSizeChange(val) {
      this.curPagerPageSize = val;
      this.initPaper();
    },
    handlePagerCurrentChange(val) {
      this.currentPagerPage = val;
      this.initPaper();
    },
    navigateToMakeTester() {
      this.$router.push("/exam/maketester/1");
    },
    navigateToMakeTesterAuto() {
      this.$router.push("/exam/maketesterauto");
    },
    closePaper(row) {
      const data = {
        id: row.id,
        status: "已关闭"
      };
      changePaperStatus(data)
        .then(res => {
          this.$message({
            type: "success",
            message: "修改成功"
          });
          this.initPaper();
        })
        .catch(() => {
          this.$message.error("修改失败");
        });
    },
    publishPaper(row) {
      const data = {
        id: row.id,
        status: "已发布"
      };
      changePaperStatus(data)
        .then(res => {
          this.$message({
            type: "success",
            message: "修改成功"
          });
          this.initPaper();
        })
        .catch(() => {
          this.$message.error("修改失败");
        });
    },
    deletePublish(row) {
      console.log(row, "deletePublish deletePublish deletePublish");
      this.$confirm("此操作将永久删除该试卷, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteExamPaper([row.id])
            .then(res => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.initPaper();
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style>
.app-main {
  background-color: #f5f6fb;
  /*height: 100vh;*/
}
</style>
<style lang="scss" scoped>
.exam-wrapper {
  padding: 20px;
  margin: 10px 10px;
  border-radius: 5px;
}
.add-question-bank-wrapper {
  padding: 20px;
  margin: 20px 10px;
  border-radius: 5px;
  background: #fff;
}
.tools-search-question-bank-wrapper {
  padding: 20px;
  margin: 20px 10px;
  border-radius: 5px;
  background: #fff;
}
.table-wrapper {
  padding: 20px;
  margin: 20px 10px;
  border-radius: 5px;
  background: #fff;
}
.edit-question-bank-wrapper {
  padding: 20px;
  margin: 10px 10px;
  border-radius: 5px;
  background-color: #fff;
}
.edit-type-table-wrapper {
  padding: 20px;
  margin: 10px 10px;
  border-radius: 5px;
  background-color: #fff;
}
.pager-total-wrapper {
  padding: 10px;
  border-radius: 30px;
  margin: 10px 0;
  .pager-form-wrapper {
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    background-color: #fff;
  }
  .pager-tools-wrapper {
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    display: flex;
    background-color: #fff;
  }
  .pager-table-wrapper {
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    background-color: #fff;
  }
}
/* .add-question-bank-wrapper {
    position: absolute;
    right: 20px;
    top: 0;
  }
  .tools-search-question-bank-wrapper {
    display: flex;
    margin-bottom: 20px;
    margin-top: 40px;
  }
  .edit-question-bank-wrapper {
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
  } */
</style>
