<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="考试名称" prop="courseType">
        <el-input
          v-model="queryParams.courseName"
          placeholder="请输入课程名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="考试开始时间" prop="startTime">
        <el-date-picker
          v-model="queryParams.testStartTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
        />
      </el-form-item>
      <el-form-item label="考试结束时间" prop="endTime">
        <el-date-picker
          v-model="queryParams.testEndTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="search"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetClick"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:book:add']"
          >新增</el-button
        >
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="lessonsList">
      <el-table-column label="序号" align="center" prop="bankNum" width="55" />
      <el-table-column label="考试名称" align="center" prop="courseName" />
      <el-table-column
        label="开始时间"
        align="center"
        prop="testStartTime"
        :formatter="formatter"
      />
      <el-table-column
        label="结束时间"
        align="center"
        prop="testEndTime"
        :formatter="formatter"
      />
      <el-table-column
        label="考试题"
        align="center"
        prop="topicNum"
        width="180"
      >
        <template v-slot="{ row: { topicNum, courseId, status } }">
          <span class="timuNum" @click="checkQuestion(courseId, status)">
            <span v-if="topicNum > 0">
              {{ status == 0 ? `已录入${topicNum}题` : "查看" }}
            </span>
            <span v-else>未录入</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="合格分数"
        align="center"
        prop="qualifiedNum"
        :formatter="formatter"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template
          v-slot="{
            row: { courseName, topicNum, status, courseId,testStartTime,testEndTime },
          }"
        >
          <!-- <div>{{status}}</div> -->
          <!-- <el-button
            v-if="status == 0"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="checkQuestion(courseId)"
            >录入考题</el-button
          > -->
          <el-button
            v-if="status == 0"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="changeLesson(courseId)"
            >编辑</el-button
          >
          <el-button
            v-if="status == 1"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="checkLesson(courseId)"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="deletLesson(courseId)"
            >删除</el-button
          >
          <el-button
            v-if="status == 0"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="issueDilog(courseId, courseName, topicNum,testStartTime,testEndTime)"
            >发布</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <Dia
      ref="Dia"
      :componentsNum.sync="componentsNum"
      :courseId.sync="courseId"
      :checkLock.sync="checkLock"
      :visible.sync="dilogFlag"
    />
    <el-dialog
      class="lessons-program"
      title="试卷考试发布详情"
      :visible.sync="issueVisible"
      width="60%"
    >
      <div>
        <span class="dialogName"
          >考试名称: <span class="a">{{ dilogName }}</span>
        </span>
      </div>
      <div style="margin-top:20px">
         <span class="dialogName"
          >开始时间: <span class="a">{{ dilogStartTime }}</span>
        </span>
         <span class="dialogName"
          >结束时间: <span class="a">{{ dilogEndTime }}</span>
        </span>
      </div>

      <!-- <span class="dialogName"
        >培训计划: <span class="a">{{ dilogType }}</span></span
      > -->
      <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>

      <div class="detail">
        <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="detail">
        <div class="detail-item">
          合格分数为<span class="textC">{{ bottomFrom.qualifiedNum }}</span
          >分
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="issueVisible = false">取 消</el-button>
        <el-button type="primary" @click="issueLesson(issueCourseId)"
          >确认发布</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getQuestion,
  getLessons,
  getLessonById,
  issue,
  deleteLesson,
  testPublish,
} from "@/api/train/lessonsProgram.js";
// 获取培训计划
import { getPlanList } from "@/api/train/trainingProgram";
import { mapGetters, mapMutations } from "vuex";

import Dia from "./components/Dia";

export default {
  name: "Book",
  components: {
    Dia,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // courseOptions: [],
      lessonsList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dataKind: 1,
        courseName: null,
        testStartTime: "",
        testEndTime: "",
      },
      // 表单参数
      form: {},
      // 表单校验

      dilogFlag: false,
      // 发布
      issueVisible: false,
      dilogName: "",
      dilogTopicNum: 0,
      dilogStartTime:0,
      dilogEndTime:0,
      // dilogType: null,
      bottomFrom: {
        singleChoiceScore: 0,
        multipleChoiceScore: 0,
        judgmentScore: 0,
        qualifiedNum: 0,
      },
      issueCourseId: null,
      questionList: [],

      componentsNum: 1,
      // 点击的id，如果是新增为空
      courseId: null,
      issue: false,
      // false为编辑，true为查看，查看不允许编辑的时候
      checkLock: false,
    };
  },
  computed: {
    ...mapGetters(["courseOptions"]),
    danxs() {
      return this.questionList.filter((item) => item.topicType === 1).length;
    },
    duoxs() {
      return this.questionList.filter((item) => item.topicType === 2).length;
    },
    pds() {
      return this.questionList.filter((item) => item.topicType === 3).length;
    },
  },
  created() {
    // this.getPlanList();
    this.getList();
  },

  methods: {
    ...mapMutations({ setOptions: "SET_COURSE_OPTIONS" }),
    // 获取课程类别，也就是计划名称
    // getPlanList() {
    //   getPlanList().then((res) => {
    //     const courseOptions = res.data.map((item) => {
    //       return {
    //         planId: item.planId,
    //         planName: item.planName,
    //       };
    //     });
    //     // this.$store.commit("SET_COURSE_OPTIONS");
    //     this.setOptions(courseOptions);
    //   });
    // },

    /** 查询课程列表 */
    getList() {
      this.loading = true;
      getLessons(this.queryParams)
        .then((res) => {
          console.log(res);
          this.lessonsList = res.rows.map((item, index) => {
            return {
              bankNum:
                index +
                1 +
                (this.queryParams.pageNum - 1) * this.queryParams.pageSize,
              ...item,
            };
          });
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    search() {
      // console.log(this.queryParams);
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.checkLock = false;

      this.$refs.Dia.title = "新增考试试卷";
      this.componentsNum = 1;
      this.courseId = null;
      this.dilogFlag = true;
    },
    changeLesson(courseId) {
      this.checkLock = false;
      this.$refs.Dia.title = "修改考试试卷";
      this.componentsNum = 1;
      this.courseId = courseId;
      this.dilogFlag = true;
    },
    checkLesson(courseId) {
      this.checkLock = true;
      this.$refs.Dia.title = "修改考试试卷";
      this.componentsNum = 1;
      this.courseId = courseId;
      this.dilogFlag = true;
    },

    // 直接查看考题
    checkQuestion(courseId, status) {
      // 要查看考题的id
      if (status == 1) {
        this.checkLock = true;
      }

      this.courseId = courseId;
      console.log(this.courseId);
      // 2代表列表组件
      this.componentsNum = 2;
      this.dilogFlag = true;
    },
    // 重置
    resetClick() {
      this.reset();
      this.getList();
    },
    // 复位
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        dataKind: 1,
        courseName: null,
        testStartTime: "",
        testEndTime: "",
      };
    },
    deletLesson(courseId) {
      this.$confirm("请确定删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return deleteLesson(courseId);
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          this.getList();
        })
        .catch(() => {});
    },
    // 发布
    issueDilog(courseId, name, num,startTime,endTime) {
      if (num === 0) {
        this.$message({
          message: "请至少录入一道考题在发布",
          type: "warning",
        });
        return;
      }
      getQuestion({ courseId })
        .then((res) => {
          console.log(res);
          this.questionList = res.rows.map((item) => {
            return {
              topicType: item.topicType,
              topicId: item.topicId,
              topicTitle: item.topicTitle,
            };
          });
        })
        .then((res) => {
          return getLessonById(courseId);
        })
        .then((res) => {
          this.bottomFrom = {
            singleChoiceScore: res.data.singleChoiceScore || 0,
            multipleChoiceScore: res.data.multipleChoiceScore || 0,
            judgmentScore: res.data.judgmentScore || 0,
            qualifiedNum: res.data.qualifiedNum || 0,
          };
        })
        .then((res) => {
          // 名称
          this.dilogName = name;
          this.dilogStartTime=startTime;
          this.dilogEndTime=endTime;
          this.issueVisible = true;
          this.issueCourseId = courseId;
        });

      //
    },
    issueLesson(courseId) {
      // this.$confirm("确定要发布吗", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     // 判断是否录入答题合格数
      //     return getLessonById(courseId);
      //   })

      getLessonById(courseId)
        .then((res) => {
          // if (
          //   res.data.singleChoiceScore > 0 &&
          //   res.data.multipleChoiceScore > 0 &&
          //   res.data.judgmentScore > 0 &&
          //   res.data.qualifiedNum > 0
          // ) {
          return true;
          // }
        })
        .then((res) => {
          if (res) {
            // 成功就发布
            // return issue({ courseId });

            return testPublish({ courseId, personnelType: 1 });
          } else {
            this.$message({
              message: "请先在题目列表录入题目分数跟合格分数",
              type: "warning",
            });
          }
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "发布成功",
              type: "success",
            });
            this.getList();
            this.issueVisible = false;
          }
        })
        .catch(() => {});
    },
    formatter(row, column, cellValue, index) {
      // console.log(row, column, cellValue, index);
      if (!cellValue) return "-";
      else return cellValue;
    },
  },
};
</script>
<style lang="scss" scoped>
.down-load {
  color: #0bab0c;
}
.timuNum {
  color: #1d84ff;
  cursor: pointer;
}
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-dialog {
  margin-top: 10vh !important;
}
::v-deep .el-dialog .el-dialog__body {
  padding-top: 5px;
}
.dialogName {
  margin-right: 50px;
  // color: #ccc;
  font-size: 16px;
}
.detail {
  // position: absolute;
  // bottom: -20px;
  // left: 10px;
  margin-top: 20px;
  .textC {
    font-weight: 800;
    font-size: 18px;
  }
  .detail-item {
    margin-right: 20px;
    color: red;
  }
}
</style>
