<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-22 17:56:05
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-28 17:54:16
 * @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 class="text flex">
      <div class="left">
        目前有<span>{{ questionNum }}</span
        >道题
        <span class="warn">温馨提示：发布课程前需要进行考试设置</span>
      </div>
      <div class="right">{{courseName}}</div>
    </div>
    <div class="table flex" v-loading="loading">
      <div class="th flex">
        <div class="left">序号</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="middle zzz">
            {{ item.topicTitle }}
          </div>
          <div class="right">
            <div>
              <el-button
                @click="edit(item.topicId)"
                icon="el-icon-edit"
                type="text"
                >修改</el-button
              >
              <el-button
                @click="deleteLesson(item.topicId)"
                icon="el-icon-delete"
                type="text"
                >删除</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <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>
</template>

<script>
import {
  getQuestion,
  deleteQuestion,
  changeLesson,
  getLessonById,
} from "@/api/educationPlanExam/lessonsProgram";
export default {
  name: "AnswerLesson",
  props: {
    courseId: {
      type: Number,
    },
  },
  components: {},
  data() {
    return {
      // 当前课程的第几题，调一遍接口
      questionNum: null,
      // 答对几道题
      rightNum: 0,
      questionList: [],
      loading: false,
      courseName:'',
    };
  },
  // watch: {
  //   visible(newValue) {
  //     if (newValue) {
  //       this.$nextTick(() => {
  //         this.saveBody();
  //       });
  //     }
  //   },
  // },

  created() {
    console.log("this.courseId", this.courseId);
    if (this.courseId) {
      this.getQuestion({ courseId: this.courseId });
      // 获取只题目正确几题算过关
      this.getLessonById(this.courseId);
    }
  },
  methods: {
    save() {
      console.log("QuestionList");
    },
    saveAndNext() {
      this.$parent.$parent.componentsNumChange(3);
    },
    getQuestion(courseId) {
      return getQuestion(courseId).then((res) => {
        console.log(res);

        this.questionList = res.rows.map((item) => {
          return {
            topicId: item.topicId,
            topicTitle: item.topicTitle,
          };
        });
        this.questionNum = res.total;
        return true;
      });
    },
    getLessonById(courseId) {
      getLessonById(courseId).then((res) => {
        console.log(res);
        this.rightNum = res.data.qualifiedNum;
        this.courseName = res.data.courseName;
      });
    },
    edit(topicId) {
      this.$emit("update:topicId", topicId);
      this.$parent.$parent.componentsNumChange(3);
    },
    deleteLesson(topicId) {
      this.$confirm("请确定删除该题", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          return deleteQuestion(topicId);
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          return this.getQuestion({ courseId: this.courseId });
        })
        .finally(() => {
          this.loading = false;
          // 课程列表重置一下
          this.$parent.$parent.$parent.getList();
        });
    },
    saveRightNum() {
      if (this.rightNum > this.questionList.length) {
        this.$message({
          message: "答对题目数应小于等于考试题目总数",
          type: "warning",
        });
        return;
      }
      changeLesson({ courseId: this.courseId, qualifiedNum: this.rightNum }).then(
        (res) => {
          if (res.code == 200) {
            this.$message({
              message: "答题合格数修改成功",
              type: "success",
            });
          }
        }
      );
    },
  },
};
</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;
    }
  }
  .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;
      }
      .middle {
        width: 60%;
        padding-left: 100px;
      }
      .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;
        }
        .middle {
          width: 60%;
          padding-left: 10px;
        }
        .right {
          width: 25%;
          text-align: center;
        }
      }
    }
  }
  .rightNum {
    margin-top: 5px;
    height: 55px;
    box-sizing: border-box;
    border: 1px solid #bbbbbb;
    line-height: 55px;
    > .left {
      width: 140px;
      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>
