<template>
  <div class="manage-total-wrapper">
    <div class="manage-search-wrapper">
      <el-select v-model="inputType" placeholder="--按题型--">
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="inputKeyword"
        style="margin-left: 20px;width: 280px;"
        placeholder="关键字"
      />
      <el-button
        style="margin-left: 20px;"
        type="success"
        size="medium"
        @click="initAllQuestion"
        >搜索</el-button
      >
    </div>
    <div class="manage-tools-wrapper">
      <el-button
        size="small"
        icon="el-icon-plus"
        type="primary"
        @click="singleDialogShow"
        >单选题</el-button
      >
      <el-button
        style="margin-left: 20px;"
        size="small"
        icon="el-icon-plus"
        type="primary"
        @click="multiDialogShow"
        >多选题</el-button
      >
      <el-button
        style="margin-left: 20px;"
        size="small"
        icon="el-icon-plus"
        type="primary"
        @click="justifyDialogShow"
        >判断题</el-button
      >
    </div>
    <div class="manage-operate-wrapper">
      <el-button
        type="warning"
        :disabled="disableEditBtn"
        @click="updateQuestion"
        >编辑</el-button
      >
      <el-button type="danger" :disabled="disableDelBtn" @click="deleteQuestion"
        >删除</el-button
      >
    </div>
    <div class="manage-table-wrapper">
      <el-table :data="subjectTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="题干" prop="title" />
        <el-table-column label="类型" prop="type" />
        <!--<el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" @click="updateQuestion(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="deleteQuestion(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-dialog title="单选题" :visible.sync="singleEditDialogShow" width="70%">
      <el-form
        ref="singleAddForm"
        :model="singleFormInfo"
        label-width="120px"
        :rules="singleRules"
        v-if="singleEditDialogShow"
      >
        <el-form-item label="题干" prop="question">
          <el-input v-model="singleFormInfo.question"></el-input>
        </el-form-item>
        <el-form-item label="困难程度" prop="difficulty">
          <el-select v-model="singleFormInfo.difficulty">
            <el-option
              v-for="item in difficulities"
              :key="item.label"
              :label="item.lable"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项A" prop="optiona">
          <el-input v-model="singleFormInfo.optiona"></el-input>
          <div>
            <div>
              正确选项:&nbsp;&nbsp;&nbsp;<el-radio
                v-model="singleFormInfo.answer"
                label="A"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="选项B" prop="optionb">
          <el-input v-model="singleFormInfo.optionb"></el-input>
          <div>
            <div>
              正确选项:&nbsp;&nbsp;&nbsp;<el-radio
                v-model="singleFormInfo.answer"
                label="B"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="选项C" prop="optionc">
          <el-input v-model="singleFormInfo.optionc"></el-input>
          <div>
            <div>
              正确选项:&nbsp;&nbsp;&nbsp;<el-radio
                v-model="singleFormInfo.answer"
                label="C"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="选项D" prop="optiond">
          <el-input v-model="singleFormInfo.optiond"></el-input>
          <div>
            <div>
              正确选项:&nbsp;&nbsp;&nbsp;<el-radio
                v-model="singleFormInfo.answer"
                label="D"
              />
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="singleEditDialogShow = false"
          >取消</el-button
        >
        <el-button type="primary" @click="submitSingleForm">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="多选题" :visible.sync="multiEditDialogShow" width="70%">
      <el-form
        ref="multiAddForm"
        :model="multiFormInfo"
        label-width="120px"
        :rules="multiRules"
        v-if="multiEditDialogShow"
      >
        <el-form-item label="题干" prop="question">
          <el-input v-model="multiFormInfo.question"></el-input>
        </el-form-item>
        <el-form-item label="困难程度" prop="difficulty">
          <el-select v-model="multiFormInfo.difficulty">
            <el-option
              v-for="item in difficulities"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项A" prop="optiona">
          <el-input v-model="multiFormInfo.optiona"></el-input>
          <div class="other-wrapper">
            <div class="">
              正确选项:&nbsp;&nbsp;&nbsp;<el-checkbox v-model="multiAnswer.A" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="选项B" prop="optionb">
          <el-input v-model="multiFormInfo.optionb"></el-input>
          <div class="other-wrapper">
            <div class="">
              正确选项:&nbsp;&nbsp;&nbsp;<el-checkbox v-model="multiAnswer.B" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="选项C" prop="optionc">
          <el-input v-model="multiFormInfo.optionc"></el-input>
          <div class="other-wrapper">
            <div class="">
              正确选项:&nbsp;&nbsp;&nbsp;<el-checkbox v-model="multiAnswer.C" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="选项D" prop="optionD">
          <el-input v-model="multiFormInfo.optiond"></el-input>
          <div class="other-wrapper">
            <div class="">
              正确选项:&nbsp;&nbsp;&nbsp;<el-checkbox v-model="multiAnswer.D" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="解析" prop="analysis">
          <el-input v-model="multiFormInfo.analysis"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="multiEditDialogShow = false"
          >取消</el-button
        >
        <el-button type="primary" @click="submitMultiForm">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="判断题" :visible.sync="justifyEditDialogShow" width="70%">
      <el-form
        ref="justifyAddForm"
        :model="justifyFormInfo"
        label-width="120px"
        :rules="justifyRules"
        v-if="justifyEditDialogShow"
      >
        <el-form-item label="题干" prop="question">
          <el-input v-model="justifyFormInfo.question"></el-input>
        </el-form-item>
        <el-form-item label="困难程度" prop="difficulty">
          <el-select v-model="justifyFormInfo.difficulty">
            <el-option
              v-for="item in difficulities"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="答案" prop="answer">
          <el-radio v-model="justifyFormInfo.answer" label="对" />
          <el-radio v-model="justifyFormInfo.answer" label="错" />
        </el-form-item>
        <el-form-item label="解析" prop="analysis">
          <el-input v-model="justifyFormInfo.analysis"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="justifyEditDialogShow = false"
          >取消</el-button
        >
        <el-button type="primary" @click="submitJustifyForm">提交</el-button>
      </div>
    </el-dialog>
    <!-- <el-tabs v-model="activeName">
      <el-tab-pane label="题目管理" name="题目管理">
        <div class="manage-search-wrapper">
          <el-select
            v-model="inputType"
            placeholder="--按题型--"
          >
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-input
            v-model="inputKeyword"
            style="margin-left: 20px;width: 280px;"
            placeholder="关键字"
          />
          <el-button style="margin-left: 20px;" type="success" size="medium">搜索</el-button>
        </div>
        <div class="manage-tools-wrapper">
          <el-button size="small" icon="el-icon-plus" type="primary" @click="singleDialogShow">单选题</el-button>
          <el-button style="margin-left: 20px;" size="small" icon="el-icon-plus" type="primary" @click="multiDialogShow">多选题</el-button>
          <el-button style="margin-left: 20px;" size="small" icon="el-icon-plus" type="primary" @click="justifyDialogShow">判断题</el-button>
        </div>
        <div class="manage-table-wrapper">
          <el-table
            :data="subjectTable"
          >
            <el-table-column
              label="题干"
              prop="title"
            />
            <el-table-column
              label="类型"
              prop="type"
            />
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="试卷管理" name="试卷管理">
        <div class="search-tester-tools-wrapper">
          <div class="">
            <el-input v-model="searchTesterName" placeholder="请输入关键字" />
            <el-button type="primary" size="medium">搜索</el-button>
          </div>
          <div>
            <el-button type="primary" @click="makeTester">手动组卷</el-button>
          </div>
        </div>
        <div class="el-table-wrapper">
          <el-table
            :data="testerTableData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
            />
            <el-table-column
              prop="name"
              label="名称"
              width="380"
            />
            <el-table-column
              prop="state"
              label="状态"
              width="180"
            />
            <el-table-column
              label="题目统计"
              width="160"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.subjectSum }}题 {{ '/' + scope.row.scoreSum + '分' }}</div>
              </template>
            </el-table-column>
          </el-table>
          <div class="delete-tester-wrapper">
            <el-button type="primary">删除</el-button>
          </div>
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs> -->
  </div>
</template>

<script>
import {
  getOnlineExamSubject,
  putOnlineExamSubject,
  deleteOnlineExamSubject
} from "@/api/test.js";
export default {
  data() {
    return {
      disableEditBtn: true,
      disableDelBtn: true,
      singleFormInfo: {
        question: "",
        difficulty: "",
        answer: "",
        id: "",
        libraryId: "",
        optiona: "",
        optionb: "",
        optionc: "",
        optiond: "",
        analysis: ""
      },
      singleRules: {
        question: [
          {
            required: true,
            message: "请输入题干",
            trigger: "blur"
          }
        ],
        difficulty: [
          {
            required: true,
            message: "请选择困难程度",
            trigger: "change"
          }
        ],
        optiona: [
          {
            required: true,
            message: "请输入选项",
            trigger: "blur"
          }
        ],
        optionb: [
          {
            required: true,
            message: "请输入选项",
            trigger: "blur"
          }
        ],
        optionc: [
          {
            required: true,
            message: "请输入选项",
            trigger: "blur"
          }
        ],
        optiond: [
          {
            required: true,
            message: "请输入选项",
            trigger: "blur"
          }
        ],
        analysis: [
          {
            required: true,
            message: "请输入解析",
            trigger: "blur"
          }
        ]
      },
      multiFormInfo: {
        question: "",
        difficulty: "",
        answer: "",
        id: "",
        libraryId: "",
        optiona: "",
        optionb: "",
        optionc: "",
        optiond: "",
        analysis: ""
      },
      multiRules: {
        question: [
          {
            required: true,
            message: "请输入题干",
            trigger: "blur"
          }
        ],
        difficulty: [
          {
            required: true,
            message: "请选择困难程度",
            trigger: "change"
          }
        ],
        optiona: [
          {
            required: true,
            message: "请输入选项",
            trigger: "blur"
          }
        ],
        optionb: [
          {
            required: true,
            message: "请输入选项",
            trigger: "blur"
          }
        ],
        optionc: [
          {
            required: true,
            message: "请输入选项",
            trigger: "blur"
          }
        ],
        optiond: [
          {
            required: true,
            message: "请输入选项",
            trigger: "blur"
          }
        ],
        analysis: [
          {
            required: true,
            message: "请输入解析",
            trigger: "blur"
          }
        ]
      },
      justifyFormInfo: {
        question: "",
        answer: "",
        id: "",
        difficulty: "",
        libraryId: "",
        analysis: ""
      },
      justifyRules: {
        question: [
          {
            required: true,
            message: "请输入问题",
            trigger: "blur"
          }
        ],
        difficulty: [
          {
            required: true,
            message: "请选择困难度",
            trigger: "change"
          }
        ],
        analysis: [
          {
            required: true,
            message: "请选择解析",
            trigger: "blur"
          }
        ]
      },
      multiAnswer: {
        A: false,
        B: false,
        C: false,
        D: false
      },
      singleEditDialogShow: false,
      multiEditDialogShow: false,
      justifyEditDialogShow: false,
      difficulities: [
        {
          label: "简单",
          value: "简单"
        },
        {
          label: "一般",
          value: "一般"
        },
        {
          label: "困难",
          value: "困难"
        }
      ],
      activeName: "题目管理",
      typeOptions: [
        {
          label: "单选题",
          value: "单选题"
        },
        {
          label: "多选题",
          value: "多选题"
        },
        {
          label: "判断题",
          value: "判断题"
        }
      ],
      inputType: "",
      inputKeyword: "",
      subjectTable: [
        {
          title: "乡镇人民政府不具备安全生产监督管理的职责。（）",
          type: "判断题"
        },
        {
          title: "工会对生产经营单位的安全生产工作无监督的权力和义务。（）",
          type: "判断题"
        },
        {
          title: "道路交通安全适用于《中华人民共和国安全生产法》。（）",
          type: "判断题"
        }
      ],
      singleSelectionShow: false,
      searchTesterName: "",
      testerTableData: [
        {
          name: "大学习、大培训、大考试试卷21",
          state: "已发布",
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: "大学习、大培训、大考试试卷20",
          state: "已发布",
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: "大学习、大培训、大考试试卷19",
          state: "已发布",
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: "大学习、大培训、大考试试卷18",
          state: "已发布",
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: "大学习、大培训、大考试试卷17",
          state: "已发布",
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: "大学习、大培训、大考试试卷16",
          state: "已发布",
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: "大学习、大培训、大考试试卷15",
          state: "已发布",
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: "大学习、大培训、大考试试卷14",
          state: "已发布",
          subjectSum: 90,
          scoreSum: 100.0
        },
        {
          name: "大学习、大培训、大考试试卷13",
          state: "已发布",
          subjectSum: 90,
          scoreSum: 100.0
        }
      ],
      multipleSelection: [],
      totalElements: 40,
      curPageSize: 10,
      currentPage: 1
    };
  },
  mounted() {
    this.$route.params.name;
    console.log(
      this.$route.params.name,
      "this.$route.params.name this.$route.params.name this.$route.params.name"
    );
    this.initAllQuestion();
  },
  methods: {
    async initAllQuestion() {
      const params = {
        page: this.currentPage - 1,
        size: this.curPageSize
      };
      if (this.inputType) {
        params.type = this.inputType;
      }
      if (this.inputKeyword) {
        params.question = this.inputKeyword;
      }
      getOnlineExamSubject(params).then(res => {
        this.subjectTable = [
          ...res.content.map(item => {
            return {
              ...item,
              title: item.question,
              type: item.type
            };
          })
        ];
        this.totalElements = res.totalElements;
      });
    },
    singleDialogShow() {
      // 显示单选题
      this.$router.push({
        path: "/train/exam/single/" + this.$route.params.name
      });
    },
    multiDialogShow() {
      // 显示多选题
      this.$router.push({
        path: "/train/exam/multi/" + this.$route.params.name
      });
    },
    justifyDialogShow() {
      // 显示判断题
      this.$router.push({
        path: "/train/exam/justify/" + this.$route.params.name
      });
    },
    handleSelectionChange(val) {
      this.disableEditBtn = true;
      this.disableDelBtn = true;
      this.multipleSelection = val;
      if (this.multipleSelection.length === 1) {
        this.disableEditBtn = false;
      }
      if (this.multipleSelection.length > 0) {
        this.disableDelBtn = false;
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initAllQuestion();
    },
    handleSizeChange(val) {
      this.curPageSize = val;
      this.initAllQuestion();
    },
    makeTester() {
      // 手动组卷
      this.$router.push({
        path: "/train/exam/maketester/123442211"
      });
    },
    updateQuestion() {
      const row = this.multipleSelection[0];
      console.log(row, "updateQuestion updateQuestion updateQuestion");
      if (row.type === "单选题") {
        this.singleFormInfo = { ...row };
        this.singleEditDialogShow = true;
      }
      if (row.type === "多选题") {
        this.multiFormInfo = { ...row };
        this.multiAnswer = {
          A: false,
          B: false,
          C: false,
          D: false
        };
        if (row.answer.indexOf("、") > -1) {
          row.answer.split("、").forEach(item => {
            this.multiAnswer[item] = true;
          });
        } else {
          this.multiAnswer[row.answer] = true;
        }
        this.multiEditDialogShow = true;
      }
      if (row.type === "判断题") {
        this.justifyFormInfo = { ...row };
        this.justifyEditDialogShow = true;
      }
    },
    deleteQuestion(row) {
      console.log(row, "deleteQuestion deleteQuestion");
      this.$confirm("此操作将永久删除题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log("没进来么");
          deleteOnlineExamSubject(this.multipleSelection.map(item => item.id))
            .then(res => {
              this.$message({
                type: "success",
                message: "删除成功"
              });
              this.initAllQuestion();
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    submitSingleForm() {
      this.$refs.singleAddForm.validate(valid => {
        if (valid) {
          putOnlineExamSubject(this.singleFormInfo)
            .then(res => {
              this.$message({
                type: "success",
                message: "修改成功"
              });
              this.singleEditDialogShow = false;
              this.initAllQuestion();
            })
            .catch(() => {
              this.$message.error("修改失败");
            });
        }
      });
    },
    submitMultiForm() {
      this.$refs.multiAddForm.validate(valid => {
        if (valid) {
          if (
            !(
              this.multiAnswer.A ||
              this.multiAnswer.B ||
              this.multiAnswer.C ||
              this.multiAnswer.D
            )
          ) {
            this.$message.error("添加失败");
            return;
          }
          const result = [];
          for (const key in this.multiAnswer) {
            result.push(key);
          }
          this.multiFormInfo.answer = result.join("、");
          putOnlineExamSubject(this.multiFormInfo)
            .then(res => {
              this.$message({
                type: "success",
                message: "添加成功"
              });
              this.multiEditDialogShow = false;
              this.initAllQuestion();
            })
            .catch(() => {
              this.$message.error("修改失败");
            });
        }
      });
    },
    submitJustifyForm() {
      this.$refs.justifyAddForm.validate(valid => {
        if (valid) {
          putOnlineExamSubject(this.justifyFormInfo)
            .then(res => {
              this.$message({
                type: "success",
                message: "修改成功"
              });
              this.initAllQuestion();
              this.justifyEditDialogShow = false;
            })
            .catch(() => {
              this.$message.error("修改失败");
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.manage-search-wrapper {
  display: flex;
}
.manage-total-wrapper {
  padding: 10px;
  margin: 10px auto;
  border-radius: 5px;
  .manage-search-wrapper {
    padding: 10px;
    margin: 10px auto;
    border-radius: 5px;
    background-color: #fff;
  }
  .manage-tools-wrapper {
    padding: 10px;
    margin: 10px auto;
    border-radius: 5px;
    background-color: #fff;
  }
  .manage-operate-wrapper {
    padding: 10px;
    margin: 10px auto;
    border-radius: 5px;
    background-color: #fff;
  }
  .manage-table-wrapper {
    padding: 10px;
    margin: 10px auto;
    border-radius: 5px;
    background-color: #fff;
  }
}
</style>
