<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-22 17:56:05
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-01-31 14:06:08
 * @FilePath: /danger-manage-web/src/views/lessonsProgram/components/QuestionList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="myBody" class="add-question flex">
    <div style="color: #1890ff">题目管理</div>
    <div class="text flex">
      <div class="left">
        <el-button type="primary" plain @click="enterContractTrainTopic"
          >录入考题</el-button
        >
        <el-button type="primary" plain @click="changeQuestionClick"
          >题库选题</el-button
        >
        目前有<span>{{ questionNum }}</span
        >道题
        <span class="warn">温馨提示：发布课程前需要进行考试设置</span>
      </div>
      <!-- <div class="right">{{courseName}}</div> -->
    </div>
    <div class="detail flex">
      <div class="detail-item">
        单选题<span>{{ bottomFrom.singleChoiceScore }}</span
        >分/题,共<span>{{ danxs }}</span
        >题，计<span class="textC">{{
          danxs * bottomFrom.singleChoiceScore
        }}</span
        >分
      </div>
      <div class="detail-item">
        多选题<span>{{ bottomFrom.multipleChoiceScore }}</span
        >分/题,共<span>{{ duoxs }}</span> 题，计<span class="textC">{{
          duoxs * bottomFrom.multipleChoiceScore
        }}</span
        >分
      </div>
      <div class="detail-item">
        判断题<span>{{ bottomFrom.judgmentScore }}</span
        >/题,共<span>{{ pds }}</span> 题，计<span class="textC">{{
          pds * bottomFrom.judgmentScore
        }}</span
        >分
      </div>
      <div class="detail-item">
        一共<span>{{ danxs + duoxs + pds }}</span
        >道题，总共计<span class="textC">{{
          danxs * bottomFrom.singleChoiceScore +
          duoxs * bottomFrom.multipleChoiceScore +
          pds * bottomFrom.judgmentScore
        }}</span
        >分
      </div>
    </div>

    <!-- 试题列表 -->
    <div class="table flex">
      <div class="th flex">
        <div class="left">序号</div>
        <div class="type">题目类型</div>
        <div class="middle">题目名称</div>
        <div class="right">操作</div>
      </div>
      <div class="td-wrapper">
        <div
          v-for="(item, index) in questionList"
          :key="item.topicId"
          class="td flex"
        >
          <div class="left">{{ index + 1 }}</div>
          <div class="type">{{ topicTypeArr[item.topicType] }}</div>

          <div class="middle zzz">
            {{ item.topicTitle }}
          </div>
          <div class="right">
            <div>
              <el-button
                @click="editContractTrainTopic(item.topicId, index + 1)"
                icon="el-icon-edit"
                type="text"
                >修改</el-button
              >
              <el-button
                @click="deleteContractTrainTopic(item.topicId)"
                icon="el-icon-delete"
                type="text"
                >删除</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="d3">
      <!-- <div class="rightNum flex">
        <div class="left">考试设置</div>
        <div class="middle flex">
          <div class="left-text">答对题目大于</div>
          <div>
            <el-input
              v-model="rightNum"
              style="width: 60px"
              size="mini"
            ></el-input>
          </div>
          <div>为合格</div>
        </div>
        <div class="right">
          <el-button
            @click="saveRightNum"
            icon="el-icon-check"
            size="mini"
            type="success"
            >保存</el-button
          >
        </div>
      </div> -->
      <div class="rightNum flex">
        <div class="left">考试设置</div>

        <div class="middle flex">
          <div class="left-text">单选一题</div>
          <div>
            <el-input
              v-model="bottomFrom.singleChoiceScore"
              style="width: 50px"
              size="mini"
            ></el-input>
          </div>
          <div>分</div>
        </div>
        <div class="middle flex">
          <div class="left-text">多选一题</div>
          <div>
            <el-input
              v-model="bottomFrom.multipleChoiceScore"
              style="width: 50px"
              size="mini"
            ></el-input>
          </div>
          <div>分</div>
        </div>

        <div class="middle flex">
          <div class="left-text">判断一题</div>
          <div>
            <el-input
              v-model="bottomFrom.judgmentScore"
              style="width: 50px"
              size="mini"
            ></el-input>
          </div>
          <div>分</div>
        </div>

        <div class="middle flex">
          <div class="left-text">总分大于</div>
          <div>
            <el-input
              v-model="bottomFrom.qualifiedNum"
              style="width: 60px"
              size="mini"
            ></el-input>
          </div>
          <div>为合格</div>
        </div>

        <div class="right">
          <el-button
            @click="saveRightNum"
            icon="el-icon-check"
            size="mini"
            type="success"
            >保存</el-button
          >
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveContractTrian">{{
          "确认"
        }}</el-button>
        <el-button>取消</el-button>
      </div>
    </div>

    <el-dialog title="录入题目" :visible.sync="dialogVisible">
      <visitorAdd ref="visitorAdd" :key="next" />
      <span slot="footer" class="dialog-footer">
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="primary" @click="saveAndNext"
            >保存并录入下一题</el-button
          >
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </span>
    </el-dialog>
    <!-- 从题库选择 -->
    <el-dialog :visible.sync="dialogVisible2">
      <ChangeQuestion ref="current" :courseId="courseId" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="currentSave">保存</el-button>
        <el-button type="primary" @click="dialogVisible2 = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

  <script>
import visitorAdd from "@/views/educationPlanExam/visitorProgram/visitorAdd";
import ChangeQuestion from "@/views/educationPlanExam/visitorProgram/ChangeQuestion";
import { updateCourse } from "@/api/contractTrain/contractTrain";
import {
  addTopic,
  listTopic,
  getTopic,
  delTopic,
  updateTopic,
} from "@/api/contractTrain/contractTrainTopic";
export default {
  name: "AnswerLesson",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    visitorAdd,
    ChangeQuestion,
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,
      rightNum: 0,
      next: 0,
      questionList: [],
      questionNum: null,
      courseId: "",
      topicTypeArr: {
        1: "单选题",
        2: "多选题",
        3: "判断题",
      },
      bottomFrom: {
        singleChoiceScore: 0,
        multipleChoiceScore: 0,
        judgmentScore: 0,
        qualifiedNum: 0,
      },
    };
  },
  computed: {
    danxs() {
      // return 1;
      return this.questionList.filter((item) => item.topicType === 1).length;
    },
    duoxs() {
      // return 1;
      return this.questionList.filter((item) => item.topicType === 2).length;
    },
    pds() {
      // return 1;
      return this.questionList.filter((item) => item.topicType === 3).length;
    },
  },
  methods: {
    //获取考题列表
    getContractTopicList(contractorCourseId) {
      this.courseId = contractorCourseId;
      listTopic({ contractorCourseId: contractorCourseId }).then((res) => {
        console.log(res.rows);
        this.questionList = res.rows.map((item) => {
          return {
            topicType: item.topicType,
            topicId: item.topicId,
            topicTitle: item.topicTitle,
          };
        });
        this.questionNum = res.total;
      });
    },

    //录入考题
    enterContractTrainTopic() {
      this.dialogVisible = true;
      this.next++;
      this.$nextTick(() => {
        this.$refs.visitorAdd.questionNextNum = this.questionNum + 1;
      });
    },
    changeQuestionClick() {
      this.dialogVisible2 = true;
    },
    currentSave() {
      this.$refs.current.saveAndNext();
    },
    //保存试题
    save(next) {
      new Promise((resove) => {
        if (
          !this.$refs.visitorAdd.answerNum &&
          this.$refs.visitorAdd.answerNum !== 0
        ) {
          this.$message({
            message: "警告，请设置一个正确答案",
            type: "warning",
          });
          return resove(false);
        }

        this.$refs.visitorAdd.$refs.form.validate((valid) => {
          if (valid) {
            const data = {};
            data.contractorCourseId = this.courseId;
            data.topicTitle = this.$refs.visitorAdd.form.topicTitle;
            data.topicOption = JSON.stringify(
              this.$refs.visitorAdd.form.questions
            );
            // data.answer = this.$refs.visitorAdd.answerNum;
            data.answer = JSON.stringify(this.$refs.visitorAdd.answerNum);
            data.topicType = this.$refs.visitorAdd.form.topicType;

            // console.log()
            console.log(data);
            this.addContractTrainTopic(data).then((res) => {
              if (res.code == 200) {
                // 把修改的这个归位，变成正常添加
                this.$emit("update:topicId", null);
                this.$message({
                  message: "添加题目成功",
                  type: "success",
                });
                if (next != 1) {
                  this.dialogVisible = false;
                  this.getContractTopicList(this.courseId);
                } else {
                  this.next++;
                }
                resove(true);
              }
            });
          }
        });
      });
    },
    //保存并录入下一题
    saveAndNext() {
      this.save(1);
    },
    //新增试题
    addContractTrainTopic(data) {
      if (this.$refs.visitorAdd.form.topicId) {
        return updateTopic({
          topicId: this.$refs.visitorAdd.form.topicId,
          ...data,
        });
      } else {
        return addTopic({ contractorCourseId: this.courseId, ...data });
      }
    },
    //试题修改
    editContractTrainTopic(topicId, index) {
      this.dialogVisible = true;
      getTopic(topicId).then((res) => {
        const data = res.data;
        this.$refs.visitorAdd.form = {
          topicId: data.topicId,
          topicTitle: data.topicTitle,
          topicType: data.topicType,
          questions: JSON.parse(data.topicOption),
        };
        console.log(data);
        this.$refs.visitorAdd.answerNum = data.answer;
      });
      this.$nextTick(() => {
        this.$refs.visitorAdd.questionNextNum = index;
      });
    },
    //试题删除
    deleteContractTrainTopic(topicId) {
      this.$confirm("请确定删除该题", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return delTopic(topicId);
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          return this.getContractTopicList(this.courseId);
        });
    },
    saveRightNum() {
      // if (this.rightNum > this.questionList.length) {
      //   this.$message({
      //     message: "答对题目数应小于等于考试题目总数",
      //     type: "warning",
      //   });
      //   return;
      // }
      if (
        !(
          this.bottomFrom.singleChoiceScore >= 0 &&
          this.bottomFrom.multipleChoiceScore >= 0 &&
          this.bottomFrom.judgmentScore >= 0 &&
          this.bottomFrom.qualifiedNum >= 0
        )
      ) {
        this.$message({
          message: "请将分数填写完整",
          type: "warning",
        });
        return;
      }
      console.log(this.bottomFrom);
      // const bottomFrom = this.bottomFrom.map(item=>{
      //   return {
      //     singleChoiceScore:+item.singleChoiceScore,
      //     multipleChoiceScore:+item.multipleChoiceScore,
      //     judgmentScore:+item.judgmentScore,
      //     qualifiedNum:+item.qualifiedNum,
      //   }
      // })
      updateCourse({
        contractorCourseId: this.courseId,
        ...this.bottomFrom,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "答题合格数修改成功",
            type: "success",
          });
        }
      });
    },

    //保存承包商信息
    saveContractTrian() {
      updateCourse(this.$parent.contractTrainForm).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "培训信息修改成功",
            type: "success",
          });
          this.$parent.getContractTrainList();
        }
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.add-question {
  width: 100%;
  height: 550px;
  // overflow: hidden;
  flex-direction: column;
  padding-bottom: 7px;
  margin-bottom: 20px;
  border-bottom: 1px solid #bbbbbb00;

  .text {
    margin-top: 13px;
    margin-bottom: 32px;
    justify-content: space-between;
    height: 28px;
    .left {
      line-height: 28px;
      color: #101010;
      font-size: 14px;
      .warn {
        display: inline-flex;
        font-size: 12px;
        color: red;
        margin-left: 10px;
      }
    }

    .right {
      width: 411px;
      line-height: 28px;
      background: #1d84ff;
      padding-right: 5px;
      color: #fff;
      text-align: right;
    }
  }

  .detail {
    position: absolute;
    bottom: 10px;
    left: 50px;
    .textC {
      font-weight: 800;
      font-size: 18px;
    }
    .detail-item {
      margin-right: 20px;
      color: red;
    }
  }
  .table {
    flex: 1;
    height: 0;

    flex-direction: column;
    .th {
      width: 100%;
      height: 70px;
      line-height: 70px;
      background: #f5f5f5;
      color: #606266;

      > div {
        height: 100%;
      }
      .left {
        width: 15%;
        text-align: center;
      }
      .type {
        width: 10%;
        text-align: center;
      }
      .middle {
        width: 50%;
        padding-left: 50px;
      }
      .right {
        width: 25%;
        text-align: center;
      }
    }
    .td-wrapper {
      flex: 1;
      overflow-y: auto;
      // 这样子元素才能有滚动条
      .td {
        height: 68px;
        line-height: 68px;
        box-sizing: border-box;
        border-bottom: 1px solid #bbbbbb;
        &:last-child {
          border-bottom: none;
        }
        > div {
          height: 100%;
        }
        .left {
          width: 15%;
          text-align: center;
        }
        .type {
          width: 10%;
          text-align: center;
        }
        .middle {
          width: 50%;
          padding-left: 50px;
        }
        .right {
          width: 25%;
          text-align: center;
        }
      }
    }
  }
  .d3 {
    display: flex;
    justify-content: right;
  }
  .dialog-footer {
    margin-top: 15px;
  }
  .rightNum {
    margin-top: 5px;
    // width: 50%;
    height: 55px;
    box-sizing: border-box;
    border: 1px solid #bbbbbb;
    line-height: 55px;
    margin-right: 20px;
    padding-right: 10px;
    > .left {
      width: 100px;
      background: #0bab0c;
      font-size: 14px;
      color: #fff;
      text-align: center;
    }
    > .middle {
      > div {
        margin-right: 5px;
      }
      .left-text {
        margin-left: 10px;
      }
      .middle {
        margin-right: 20px;
      }
    }
    .right {
      margin-left: 20px;
    }
    // background: black;
  }
}
</style>
