<template>
  <div v-loading="loading">
    <!-- <div class="part-box-header">
      <h1 class="part-box-title">试题详情</h1>
      <div>
        <el-button type="primary" icon="icon icon-save-white" @click="retain"
          >保留</el-button
        >
        <el-button
          type="danger"
          plain
          icon="icon icon-delete"
          @click="deleteQues"
          >删除</el-button
        >
        <el-button type="danger" plain icon="icon icon-pass" @click="ignore"
          >跳过</el-button
        >
        <el-button type="danger" plain icon="icon icon-back" @click="back"
          >返回</el-button
        >
      </div>
    </div> -->
    <!-- <div class="part-page margin-tb-20">
      <el-button
        v-for="(city, index) in duplicateQuestions"
        :key="index"
        type="danger"
        :plain="duplicateQuestionIndex !== index"
        size="mini"
        @click="selChange(index)"
        >{{ index + 1 }}</el-button
      >
    </div> -->
    <el-row :gutter="20">
      <el-col :span="12">
        <QuestionInfo
          :question="curQuestion"
          style="height: 100%"
          @delete="deleteQues"
          @ignore="ignore"
          @retain="retain"
        ></QuestionInfo>
      </el-col>
      <el-col :span="12">
        <QuestionInfo
          :question="duplicateQuestion"
          info-type="existed"
          style="height: 100%"
        >
          <el-button
            v-for="(city, index) in duplicateQuestions"
            :key="index"
            type="primary"
            :plain="duplicateQuestionIndex !== index"
            size="mini"
            @click="selChange(index)"
            >{{ index + 1 }}</el-button
          >
        </QuestionInfo>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { QUESTION_API } from "@/constants/constants";
import { mapState } from "vuex";
import QuestionInfo from "./QuestionInfo.vue";
export default {
  components: {
    QuestionInfo,
  },
  data() {
    return {
      basePaperId: "",
      loading: false,
      ignoreIds: [],
      from: "",
      curQuestionId: "",
      curQuestion: {},
      duplicateQuestion: {},
      duplicateQuestions: [],
      duplicateQuestionIndex: 0,
    };
  },
  computed: {
    ...mapState({ user: (state) => state.user }),
  },
  //钩子函数
  created() {
    this.from = this.$route.query.from;
    if ("question" == this.from) {
      this.curQuestionId = this.$route.query.quesId;
      this.queryData();
    } else if ("list" == this.from) {
      this.$http
        .post(
          QUESTION_API + "/question/duplicate/next",
          new URLSearchParams({ ignoreIds: this.ignoreIds })
        )
        .then((response) => {
          if (response.data) {
            this.curQuestionId = response.data;
            this.queryData();
          } else {
            this.$notify({
              message: "没有需要处理的数据",
              type: "success",
            });
          }
        });
    } else if ("paper" == this.from) {
      this.basePaperId = this.$route.query.basePaperId;
      if (this.$route.query.quesId) {
        this.curQuestionId = this.$route.query.quesId;
        this.queryData();
      } else {
        this.$http
          .post(
            QUESTION_API + "/question/duplicate/next",
            new URLSearchParams({
              ignoreIds: this.ignoreIds,
              basePaperId: this.basePaperId,
            })
          )
          .then((response) => {
            if (response.data) {
              this.curQuestionId = response.data;
              this.queryData();
            } else {
              this.$notify({
                message: "没有需要处理的数据",
                type: "success",
              });
            }
          });
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.$store.commit("UPDATE_CURRENT_PATHS", ["题库查重", "试题详情"]);
    }, 200);
  },
  methods: {
    next() {
      this.$http
        .post(
          QUESTION_API + "/question/duplicate/next",
          new URLSearchParams({
            ignoreIds: this.ignoreIds,
            basePaperId: this.basePaperId,
          })
        )
        .then((response) => {
          if (response.data) {
            this.curQuestionId = response.data;
            this.queryData();
          } else {
            this.$notify({
              message: "当前已是最后一个",
              type: "success",
            });
            this.back();
          }
        });
    },
    ignore() {
      if (this.from == "question") {
        this.$router.push({
          path: "/questions/check_duplicate_list/0",
        });
        return;
      }
      this.ignoreIds.push(this.curQuestionId);
      this.next();
    },
    back() {
      this.$router.push({
        path: "/questions/check_duplicate_list/0",
      });
    },
    deleteQues() {
      this.$confirm("确认删除吗?", "提示", {
        type: "warning",
      }).then(() => {
        let quesIds = [];
        quesIds.push(this.curQuestionId);
        this.$http
          .post(
            QUESTION_API + "/question/duplicate/delete",
            new URLSearchParams({ questionIds: quesIds })
          )
          .then(() => {
            this.$notify({
              message: "删除成功",
              type: "success",
            });
            if (this.from == "question") {
              this.$router.push({
                path: "/questions/check_duplicate_list/0",
              });
            } else if (this.from == "list" || this.from == "paper") {
              this.next();
            }
          });
      });
    },
    retain() {
      let quesIds = [];
      quesIds.push(this.curQuestionId);
      this.$http
        .post(
          QUESTION_API + "/question/duplicate/retain",
          new URLSearchParams({ questionIds: quesIds })
        )
        .then(() => {
          this.$notify({
            message: "操作成功",
            type: "success",
          });
          this.$bus.emit("updateBadge");
          if (this.from == "question") {
            this.$router.push({
              path: "/questions/check_duplicate_list/0",
            });
          } else if (this.from == "list" || this.from == "paper") {
            this.next();
          }
        });
    },
    selChange(val) {
      this.duplicateQuestion = this.duplicateQuestions[val];
      this.duplicateQuestionIndex = val;
    },
    async queryData() {
      this.$http
        .get(
          QUESTION_API + "/question/duplicate?questionId=" + this.curQuestionId
        )
        .then((response) => {
          this.curQuestion = response.data.curQuestion;
          this.duplicateQuestions = response.data.duplicateQuestions;
          if (this.duplicateQuestions && this.duplicateQuestions.length > 0) {
            this.duplicateQuestion = this.duplicateQuestions[0];
          }
        });
    },
  },
};
</script>
