<template>
  <div class="app-container">
    <!--操作区-->
    <el-button
      type="primary"
      icon="el-icon-plus"
      @click="create('add')"
      class="margin-bottom"
      >添加试卷</el-button
    >
    <!--搜索区-->
    <div class="float">
      <el-input
        v-model="page.data.title"
        placeholder="请输入试卷名"
        class="margin-left input m-b-10"
      ></el-input>
      <el-select
        v-model="page.data.stTopicBankId"
        placeholder="请选择题库"
        class="margin-left input m-b-10"
      >
        <el-option
          v-for="item in questionBank_list"
          :key="item.stTopicBankId"
          :label="item.name"
          :value="item.stTopicBankId"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="page.data.paperType"
        placeholder="请选择试卷类型"
        class="margin-left input m-b-10"
      >
        <el-option
          v-for="item in paperType_list"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-date-picker
        v-model="page.data.startTime"
        type="datetime"
        placeholder="选择起始时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        class="margin-left m-b-10"
      >
      </el-date-picker>
      <el-date-picker
        v-model="page.data.endTime"
        type="datetime"
        placeholder="选择结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        class="margin-left m-b-10"
      >
      </el-date-picker>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="fetchData"
        class="margin-left m-b-10"
        >搜索</el-button
      >
    </div>

    <!--主表格-->
    <el-table
      class="table"
      ref="table_form"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column label="试卷类型" align="center">
        <template slot-scope="scope">
          <el-tag effect="plain" v-if="scope.row.paperType === 1"
            >随机型</el-tag
          >
          <el-tag type="success" effect="plain" v-if="scope.row.paperType === 2"
            >自定义型</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="试卷名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="使用题库" align="center">
        <template slot-scope="scope">
          {{ scope.row.stTopicBankName }}
        </template>
      </el-table-column>
      <el-table-column label="总题数" align="center">
        <template slot-scope="scope">
          {{ scope.row.topicNum }}
        </template>
      </el-table-column>
      <el-table-column label="单选题数" align="center">
        <template slot-scope="scope">
          {{ scope.row.singleTopicNum }}
        </template>
      </el-table-column>
      <el-table-column label="多选题数" align="center">
        <template slot-scope="scope">
          {{ scope.row.multipleTopicNum }}
        </template>
      </el-table-column>
      <el-table-column label="判断题数" align="center">
        <template slot-scope="scope">
          {{ scope.row.judgeTopicNum }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="操作区" width="200">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="small"
            @click="deleteFun(scope.row.stPaperId)"
            >删除</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="create('update', scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!--对话框-->
    <el-dialog
      :title="dialogTitle[dialogType]"
      :visible.sync="dialogVisible"
      width="900px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        label-position="left"
      >
        <div class="flex">
          <el-form-item label="试卷名" prop="title" class="form-item-style">
            <el-input
              placeholder="请填写试卷名"
              v-model.trim="form.title"
              clearable
              maxlength="50"
              show-word-limit
            />
          </el-form-item>
          <el-form-item
            label="使用题库"
            prop="stTopicBankId"
            class="form-item-style"
          >
            <el-select
              v-model="form.stTopicBankId"
              placeholder="请选择题库"
              style="width: 100%"
              @change="getTopicList"
            >
              <el-option
                v-for="item in questionBank_list"
                :key="item.stTopicBankId"
                :label="item.name"
                :value="item.stTopicBankId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <div class="flex">
          <el-form-item
            label="试卷类型"
            prop="paperType"
            class="form-item-style"
          >
            <el-radio v-model="form.paperType" :label="1">随机型</el-radio>
            <el-radio v-model="form.paperType" :label="2">自定义型</el-radio>
            <strong> 试卷总题数：{{ form.paperType==1?topicNum : form.customTopicVoList.length}} </strong>
          </el-form-item>
          <el-form-item label="及格分" prop="passScore" class="form-item-style">
            <el-input-number
              v-model="form.passScore"
              :min="0"
              size="mini"
            ></el-input-number>
            单位：百分比
          </el-form-item>
        </div>
        <template v-if="form.paperType == 1">
          <div class="flex">
            <el-form-item
              label="单选题数"
              prop="singleTopicNum"
              class="form-item-style"
            >
              <el-input-number
                v-model="form.singleTopicNum"
                :min="0"
                size="mini"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="单选分值"
              prop="singleTopicScore"
              class="form-item-style"
            >
              <el-input-number
                v-model="form.singleTopicScore"
                :min="0"
                size="mini"
              ></el-input-number>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item
              label="多选题数"
              prop="multipleTopicNum"
              class="form-item-style"
            >
              <el-input-number
                v-model="form.multipleTopicNum"
                :min="0"
                size="mini"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="多选分值"
              prop="multipleTopicScore"
              class="form-item-style"
            >
              <el-input-number
                v-model="form.multipleTopicScore"
                :min="0"
                size="mini"
              ></el-input-number>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item
              label="判断题数"
              prop="judgeTopicNum"
              class="form-item-style"
            >
              <el-input-number
                v-model="form.judgeTopicNum"
                :min="0"
                size="mini"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="判断分值"
              prop="judgeTopicScore"
              class="form-item-style"
            >
              <el-input-number
                v-model="form.judgeTopicScore"
                :min="0"
                size="mini"
              ></el-input-number>
            </el-form-item>
          </div>
        </template>
        <template v-if="form.paperType == 2">
          <div
            v-for="(item, index) in form.customTopicVoList"
            :key="index"
            class="bgc"
          >
            <el-form-item
              label="题目类型"
              prop="questionType"
              class="form-item-style"
            >
              <el-radio v-model="item.questionType" :label="1">单选</el-radio>
              <el-radio v-model="item.questionType" :label="2">多选</el-radio>
              <el-radio v-model="item.questionType" :label="3">判断</el-radio>
            </el-form-item>
            <div class="flex">
              <el-form-item
                label="选择题目"
                class="form-item-style"
                :prop="`customTopicVoList.${index}.stTopicId`"
                :rules="rules.stTopicId"
              >
                <el-select
                  v-if="item.questionType == 1"
                  v-model="item.stTopicId"
                  placeholder="请选择题目"
                  style="width: 100%"
                  @change="(val) => changeStTopicId(val, index, 1)"
                >
                  <el-option
                    v-for="item in singleTopic_list"
                    :key="item.stTopicId"
                    :label="item.description"
                    :value="item.stTopicId"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-if="item.questionType == 2"
                  v-model="item.stTopicId"
                  placeholder="请选择题目"
                  style="width: 100%"
                  @change="(val) => changeStTopicId(val, index, 2)"
                >
                  <el-option
                    v-for="item in multipleTopic_list"
                    :key="item.stTopicId"
                    :label="item.description"
                    :value="item.stTopicId"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-if="item.questionType == 3"
                  v-model="item.stTopicId"
                  placeholder="请选择题目"
                  style="width: 100%"
                  @change="(val) => changeStTopicId(val, index, 3)"
                >
                  <el-option
                    v-for="item in judgeTopic_list"
                    :key="item.stTopicId"
                    :label="item.description"
                    :value="item.stTopicId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="题目分值"
                class="form-item-style"
                :prop="`customTopicVoList.${index}.score`"
                :rules="rules.score"
              >
                <el-input-number
                  v-model="item.score"
                  :min="0"
                  size="mini"
                ></el-input-number>
              </el-form-item>
            </div>
            <div class="flex" v-if="item.stTopicId">
              <el-form-item class="form-item-style" label="答案选项">
                <el-tag
                  class="m-r-10"
                  :key="tag"
                  v-for="tag in item.judgmentList"
                >
                  {{ tag }}
                </el-tag>
              </el-form-item>
              <el-form-item label="正确答案" class="form-item-style">
                <el-tag
                  class="m-r-10"
                  :key="tag"
                  v-for="tag in item.answerList"
                >
                  {{ tag }}
                </el-tag>
              </el-form-item>
            </div>
            <div class="icon">
              <i
                class="el-icon-close"
                v-if="form.customTopicVoList.length > 1"
                @click="delField(index)"
              ></i>
              <i class="el-icon-circle-plus" @click="addField(index)"></i>
            </div>
          </div>
        </template>
        <template>
          <div class="title">
            <div class="line"></div>
            <span>属性设置</span>
          </div>
          <div class="flex">
            <el-form-item label="考试时长" prop="duration" style="flex: 1">
              <el-input-number
                v-model="form.duration"
                :min="1"
                size="mini"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="时长单位" prop="timeUnit" style="flex: 1">
              <el-radio v-model="form.timeUnit" :label="1">分钟</el-radio>
              <el-radio v-model="form.timeUnit" :label="2">小时</el-radio>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="补考次数" prop="examsNum" style="flex: 1">
              <el-input-number
                v-model="form.examsNum"
                :min="1"
                size="mini"
              ></el-input-number>
            </el-form-item>
          </div>
          <!-- <el-form-item label="人脸次数" prop="totalScore" style="flex: 1">
              <el-input-number
                :disabled="true"
                v-model="form.totalScore"
                :min="1"
                size="mini"
              ></el-input-number>
            </el-form-item>
          </div>
          <el-form-item label="弹窗次数" prop="totalScore" style="flex: 1">
            <el-input-number
              :disabled="true"
              v-model="form.totalScore"
              :min="1"
              size="mini"
            ></el-input-number>
          </el-form-item> -->
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="addOrUpdate"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  paperTopicBankList,
  paperTopicList,
  paperGetPageList,
  paperEdit,
  paperDelete,
} from "@/api/examination";
export default {
  components: { Pagination },
  filters: {},
  computed: {},
  data() {
    return {
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      // 分页参数
      page: {
        data: {
          endTime: null,
          startTime: null,
          paperType: null,
          title: null,
          stTopicBankId: null,
        },
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      // 是否显示对话框
      dialogVisible: false,
      // 对话框标题
      dialogTitle: {
        add: "添加试卷",
        update: "编辑试卷",
      },
      dialogType: "add",
      form_copy: null,
      // 添加角色参数
      form: {
        passScore: null,
        duration: null,
        timeUnit: 1,
        examsNum: null,
        title: null,
        stTopicBankId: null,
        paperType: 1,
        singleTopicNum: 0,
        singleTopicScore: null,
        multipleTopicNum: 0,
        multipleTopicScore: null,
        judgeTopicNum: 0,
        judgeTopicScore: null,
        duration: 0,
        customTopicVoList: [
          {
            stTopicId: null,
            score: 0,
            questionType: 1,
          },
        ],
      },
      // 验证规则
      rules: {
        title: [{ required: true, message: "请输入", trigger: "change" }],
        timeUnit: [{ required: true, message: "请选择", trigger: "change" }],
        paperType: [{ required: true, message: "请选择", trigger: "change" }],
        stTopicBankId: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        stTopicId: [{ required: true, message: "请选择", trigger: "change" }],
        singleTopicScore: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        singleTopicNum: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        passScore: [{ required: true, message: "请输入", trigger: "change" }],
        multipleTopicScore: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        multipleTopicNum: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        judgeTopicScore: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        judgeTopicNum: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        examsNum: [{ required: true, message: "请输入", trigger: "change" }],
        duration: [{ required: true, message: "请输入", trigger: "change" }],
        score: [{ required: true, message: "请输入", trigger: "change" }],
      },
      paperType_list: [
        {
          id: 1,
          name: "随机型",
        },
        {
          id: 2,
          name: "自定义型",
        },
      ],
      poolName_list: [],
      listName: {},
      questionBank_list: [], //题库
      stTopic_list: [], //题目
      topicNum: 0, //	题目总数
      singleTopic_list: [], //单选
      multipleTopic_list: [], //多选
      judgeTopic_list: [], //判断
    };
  },
  created() {
    this.fetchData();
    this.paperTopicBankList();
    this.form_copy = JSON.parse(JSON.stringify(this.form));
  },
  watch: {
    "form.singleTopicNum"() {
      this.getTotalScore();
    },
    "form.multipleTopicNum"() {
      this.getTotalScore();
    },
    "form.judgeTopicNum"() {
      this.getTotalScore();
    },
  },
  methods: {
    // 查询权限
    // checkTypeList,
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      paperGetPageList(this.page).then((res) => {
        this.list = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 打开添加角色对话框
    async create(type, row) {
      if (type === "add") {
        this.form = JSON.parse(JSON.stringify(this.form_copy));
      } else {
        this.form = Object.assign(this.form, row);
        if (this.form.paperType == 2) {
          await this.getTopicList(this.form.stTopicBankId);
          this.updateStTopic();
        }
      }
      this.dialogType = type;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    // 添加自定义题目获取题目答案
    changeStTopicId(id, index, type) {
      let item;
      switch (type) {
        case 1:
          item = this.singleTopic_list.find((item) => {
            return item.stTopicId == id;
          });
          if (item) {
            this.form.customTopicVoList[index].answerList = item.answerList;
            this.form.customTopicVoList[index].judgmentList = item.judgmentList;
          }
          break;
        case 2:
          item = this.multipleTopic_list.find((item) => {
            return item.stTopicId == id;
          });
          if (item) {
            this.form.customTopicVoList[index].answerList = item.answerList;
            this.form.customTopicVoList[index].judgmentList = item.judgmentList;
          }
          break;
        case 3:
          item = this.judgeTopic_list.find((item) => {
            return item.stTopicId == id;
          });
          if (item) {
            this.form.customTopicVoList[index].answerList = item.answerList;
            this.form.customTopicVoList[index].judgmentList = item.judgmentList;
          }
          break;
        default:
          break;
      }
    },
    // 编辑自定义题目
    updateStTopic() {
      this.form.customTopicVoList.forEach((item) => {
        this.stTopic_list.forEach((item1) => {
          if (item1.stTopicId == item.stTopicId) {
            item.answerList = item1.answerList;
            item.judgmentList = item1.judgmentList;
            item.questionType = item1.type;
          }
        });
      });
      console.log(this.form.customTopicVoList);
    },

    // 确定添加/编辑
    addOrUpdate() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          paperEdit(this.form).then((res) => {
            this.dialogVisible = false;
            this.fetchData();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          });
        }
      });
    },
    // 删除
    deleteFun(id) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        paperDelete(id).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    // 计算总分
    getTotalScore() {
      let { judgeTopicNum, multipleTopicNum, singleTopicNum } = this.form;
      this.topicNum = judgeTopicNum + multipleTopicNum + singleTopicNum;
    },
    // 题库列表
    paperTopicBankList() {
      paperTopicBankList().then((res) => {
        this.questionBank_list = res.data;
      });
    },
    // 自定义题目列表
    async getTopicList(id) {
      this.singleTopic_list=[]
      this.multipleTopic_list=[]
      this.judgeTopic_list=[]
      await paperTopicList(id).then((res) => {
        this.stTopic_list = res.data;
        this.stTopic_list.forEach((item) => {
          switch (item.type) {
            case 1:
              this.singleTopic_list.push(item);
              break;
            case 2:
              this.multipleTopic_list.push(item);
              break;
            case 3:
              this.judgeTopic_list.push(item);
              break;
            default:
              break;
          }
        });
      });
    },
    // 添加字段
    addField(index, type) {
      this.form.customTopicVoList.splice(index + 1, 0, {
        stTopicId: null,
        score: 0,
        questionType: 1,
      });
    },
    // 删除字段
    delField(index, type) {
      this.form.customTopicVoList.splice(index, 1);
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>
<style scoped lang="scss">
.bgc {
  background: rgba(245, 246, 248, 0.7);
  border-radius: 12px;
  padding: 17px;
  padding-bottom: 5px;
  margin-bottom: 25px;
  position: relative;
}

.icon {
  position: absolute;
  top: 40%;
  right: 20px;
}
.el-tag {
  margin-right: 10px;
}

.button-new-tag {
  margin-right: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-right: 10px;
  vertical-align: bottom;
}
// .margin-left {
//   margin-left: 10px;
// }
// .margin-bottom {
//   margin-bottom: 20px;
// }
</style>
