<template>
  <div id="llkh">
    <div class="table_lb" v-if="show_s">
      <div class="top-div">
        <el-input placeholder="请输入试卷名称" v-model="input" clearable>
        </el-input>
        <div class="button-discuss" @click="handleCurrentChange_qw(1)">
          搜索
        </div>
        <!-- <div class="button-discuss" @click="mnxl_cli()">模拟训练</div> -->
        <!-- <div class="button-discuss" @click="kszx_click()">学习中心</div> -->
      </div>
      <div class="bottom-div">
        <div class="table-div">
          <el-table :data="tableData" height="100%" border style="width: 100%">
            <el-table-column type="index" width="100" label="序号"></el-table-column>
            <el-table-column prop="name" label="试卷名称"> </el-table-column>
            <el-table-column prop="limitStartTime" label="试卷开启时间">
            </el-table-column>
            <el-table-column prop="limitEndTime" label="试卷关闭时间">
            </el-table-column>
            <!-- <el-table-column prop="suggestTime" label="时长（分）"> -->
            <el-table-column label="操作" width="230">
              <template slot-scope="scope">
                <div class="lsjl pub-xdzy" title="历史记录" @click="ckxq(scope.row)"></div>
                <el-button style="margin-top: 4px; margin-left: 20px" :type="scope.row.type == 1
                  ? 'success'
                  : scope.row.type == 2
                    ? 'info'
                    : scope.row.type == 3
                      ? 'danger'
                      : scope.row.type == 4
                        ? 'warning'
                        : ''
                  " icon="el-icon-edit-outline" :disabled="scope.row.type != 1" size="mini"
                  @click="mnxl_cli(scope.row)">{{
                    scope.row.type == 1
                    ? "开始考试"
                    : scope.row.type == 2
                      ? "已考完"
                      : scope.row.type == 3
                        ? "时间未到"
                        : scope.row.type == 4
                          ? "时间已过"
                          : ""
                  }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-div">
          <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" :total="totals" :page-size="pageRow" :current-page="current_page_qw"
            @current-change="handleCurrentChange_qw" :page-sizes="[10, 20, 50, 100]">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="sjtms" v-if="!show_s" element-loading-text="训练题正在生成中,请稍后！！！" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)" v-loading="loading">
      <div class="fh">
        <el-button type="info" @click="kszxs(true)">返回</el-button>
      </div>
      <div class="pub-class-div" id="pub_id">
        <div class="tm_dt" v-if="tab_st == 1">
          <!-- <div>
            <span>您好，以下是为您随机生成的模拟训练题</span>
          </div> -->
          <div class="title-class">
            <div class="title-div">
              <span v-text="counts"></span>
            </div>
            <div>
              <span>总分100分</span>
            </div>
          </div>
          <div class="pub-div">
            <div class="tit-div">
              <span>（一）单选题</span><span class="pub-span">{{
                "(共" +
                arr_single.length +
                "题，每题" +
                single_score +
                "分，选错不得分)"
              }}</span>
            </div>
            <div class="tm-xx">
              <div v-for="(item, index) in arr_single" class="tm-div">
                <div>
                  <span>{{ index + 1 + ": " + item.title }}</span>
                </div>
                <div class="xx-div">
                  <div v-for="(items, indexs) in item.content" class="xx-dic">
                    <el-radio v-model="item._correct" :label="items" :key="indexs">{{ items }}</el-radio>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pub-div">
            <div class="tit-div">
              <span>（二）多选题</span><span class="pub-span">{{
                "(共" +
                arr_multiple.length +
                "题，每题" +
                multiple_score +
                "分，选错不得分)"
              }}</span>
            </div>
            <div class="tm-xx">
              <div v-for="(item, index) in arr_multiple" class="tm-div">
                <div>
                  <span>{{ index + 1 + ": " + item.title }}</span>
                </div>
                <div class="xx-div">
                  <div v-for="(items, indexs) in item.content" class="xx-dic">
                    <el-checkbox v-model="item._correct" :label="items" :key="indexs">{{ items }}</el-checkbox>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pub-div">
            <div class="tit-div">
              <span>（三）判断题</span><span class="pub-span">{{
                "(共" +
                arr_judge.length +
                "题，每题" +
                judge_score +
                "分，选错不得分)"
              }}</span>
            </div>
            <div class="tm-xx">
              <div v-for="(item, index) in arr_judge" class="tm-div">
                <div>
                  <span>{{ index + 1 + ": " + item.title }}</span>
                </div>
                <div class="xx-div">
                  <div v-for="(items, indexs) in item.content" class="xx-dic">
                    <el-radio v-model="item._correct" :label="items" :key="indexs">{{ items }}</el-radio>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="text-align: center">
            <el-button type="primary" @click="submit_tj()">提交</el-button>
          </div>
        </div>
        <div class="tm_dt" v-if="tab_st == 2">
          <div style="margin-top: 50px">
            <div style="
                text-align: center;
                color: black;
                font-size: 20px;
                font-weight: 700;
              ">
              <span>您好！您此次试题学习训练结果为</span>
              <span v-text="fraction" style="color: red; font-size: 20px"></span>
              <span>分</span>
            </div>
            <div style="
                margin-left: calc(50% - 100px);
                margin-top: 20px;
                color: black;
              ">
              <div style="margin-top: 10px">
                <div class="pub_dt_div"><span>单选题：</span></div>
                <div>
                  <span v-if="dx_fractions == arr_single.length">全部答对</span>
                  <span v-if="dx_fractions != arr_single.length">答对{{ dx_fractions }}道题</span>
                  <span v-if="dx_fractions != arr_single.length">答错{{ arr_single.length - dx_fractions }}道题</span>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="pub_dt_div"><span>多选题：</span></div>
                <div>
                  <span v-if="dxs_fractions == arr_multiple.length">全部答对</span>
                  <span v-if="dxs_fractions != arr_multiple.length">答对{{ dxs_fractions }}道题</span>
                  <span v-if="dxs_fractions != arr_multiple.length">答错{{ arr_multiple.length - dxs_fractions }}道题</span>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="pub_dt_div"><span>判断题：</span></div>
                <div>
                  <span v-if="pd_fractions == arr_judge.length">全部答对</span>
                  <span v-if="pd_fractions != arr_judge.length">答对{{ pd_fractions }}道题</span>
                  <span v-if="pd_fractions != arr_judge.length">答错{{ arr_judge.length - pd_fractions }}道题</span>
                </div>
              </div>
            </div>
            <div style="margin-top: 30px; margin-left: calc(50% - 100px)">
              <el-button type="primary" @click="ckda()">查看答案</el-button>
            </div>
          </div>
        </div>
        <div class="tm_dt ckda" v-if="tab_st == 3">
          <div class="pub-div">
            <div class="tit-div">
              <span>（一）单选题</span><span class="pub-span">{{
                "(共" +
                arr_single.length +
                "题，每题" +
                single_score +
                "分，选错不得分)"
              }}</span>
            </div>
            <div class="tm-xx">
              <div v-for="(item, index) in arr_single" class="tm-div">
                <div>
                  <i class="el-icon-check pub_i1" v-if="item.type == 'true'"></i>
                  <i class="el-icon-close pub_i2" v-if="item.type == 'false'"></i>
                  <span>{{ index + 1 + ": " + item.title }}</span>
                </div>
                <div class="xx-div">
                  <div v-for="(items, indexs) in item.content" class="xx-dic">
                    <el-radio disabled v-model="item._correct" :label="items" :key="indexs">{{ items }}</el-radio>
                  </div>
                  <div v-if="item.type == 'false'" class="zqxx">
                    <span style="color: #00e209">正确选项：</span>
                    <el-radio disabled v-model="item.correct" :key="index">{{
                      item.correct
                    }}</el-radio>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pub-div">
            <div class="tit-div">
              <span>（二）多选题</span><span class="pub-span">{{
                "(共" +
                arr_multiple.length +
                "题，每题" +
                multiple_score +
                "分，选错不得分)"
              }}</span>
            </div>
            <div class="tm-xx">
              <div v-for="(item, index) in arr_multiple" class="tm-div">
                <div>
                  <i class="el-icon-check pub_i1" v-if="item.type == 'true'"></i>
                  <i class="el-icon-close pub_i2" v-if="item.type == 'false'"></i>
                  <span>{{ index + 1 + ": " + item.title }}</span>
                </div>
                <div class="xx-div">
                  <div v-for="(items, indexs) in item.content" class="xx-dic">
                    <el-checkbox disabled v-model="item._correct" :label="items" :key="indexs">{{ items }}</el-checkbox>
                  </div>
                </div>
                <div v-if="item.type == 'false'" class="zqxx">
                  <span style="color: #00e209">正确选项：</span>
                  <el-checkbox disabled v-for="(it, index_it) in item.correct" :key="index_it">{{ it }}</el-checkbox>
                </div>
              </div>
            </div>
          </div>
          <div class="pub-div">
            <div class="tit-div">
              <span>（三）判断题</span><span class="pub-span">{{
                "(共" +
                arr_judge.length +
                "题，每题" +
                judge_score +
                "分，选错不得分)"
              }}</span>
            </div>
            <div class="tm-xx">
              <div v-for="(item, index) in arr_judge" class="tm-div">
                <div>
                  <i class="el-icon-check pub_i1" v-if="item.type == 'true'"></i>
                  <i class="el-icon-close pub_i2" v-if="item.type == 'false'"></i>
                  <span>{{ index + 1 + ": " + item.title }}</span>
                </div>
                <div class="xx-div">
                  <div v-for="(items, indexs) in item.content" class="xx-dic">
                    <el-radio disabled v-model="item._correct" :label="items" :key="indexs">{{ items }}</el-radio>
                  </div>
                </div>
                <div v-if="item.type == 'false'" class="zqxx">
                  <span style="color: #00e209">正确选项：</span>
                  <el-radio disabled v-model="item.correct" :key="index">{{
                    item.correct
                  }}</el-radio>
                </div>
                <span style="color: #0a8dea" v-if="item.type == 'false'">错题正确描述：</span>
                <span style="color: #0a8dea" v-if="item.type == 'false'">{{
                  item.remark
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="历史答题记录" :visible.sync="dialogVisible_lsjl" width="50%" id="_plscs">
      <el-button :type="tableData_history.length == 0 ? 'info' : 'primary'" icon="el-icon-download"
        @click="dowload_lsjl()" :disabled="tableData_history.length == 0">下载记录</el-button>
      <el-table style="width: 100%" class="table-div" :data="tableData_history">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="userId" label="答题人"></el-table-column>
        <el-table-column prop="score" label="得分" width="80"></el-table-column>
        <el-table-column prop="createTime" label="答题开始时间"></el-table-column>ckjl
        <el-table-column prop="endTime" label="答题结束时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-s-order" size="mini" @click="ckjl(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-div">
        <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange_lsjl" :total="totals_lsjl" :page-size="pageRow_lsjl"
          :current-page="current_page_qw_lsjl" @current-change="query_lsjl" :page-sizes="[10, 20, 50, 100]">
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible_lsjl = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  get,
  post,
  startLoading,
  endLoading,
  download,
  isDuringDate,
} from "../../util/http_util";
import { } from "../../util/data_util";
import { queryExame, createRecord, queryRecord, queryDetails } from '../../api/xxxl/llkh';
export default {
  data() {
    return {
      input: "", //考试名称
      tableData: [], //考试次数列表
      show_s: true, //列表和题目切换
      arr_single: [], //单选题
      arr_multiple: [], //多选题
      arr_judge: [], //判断题
      loading: false, //题目生成等待框
      counts: "", //记录此次考试是第几次考试
      tab_st: 1, //切换
      fraction: 0, //得分
      dx_fractions: 0, //单选题
      dxs_fractions: 0, //多选题
      pd_fractions: 0, //判断题
      createTime: "", //试卷生成试卷
      endTime: "", //试卷结束试卷
      totals: 0, //总数
      current_page_qw: 1, //当前页
      pageRow: 10, //每页多少条
      eaxmeIds: "", //考试的id
      dialogVisible_lsjl: false,
      tableData_history: [],
      lsjl_id: "",
      totals_lsjl: 0, //总数
      current_page_qw_lsjl: 1, //当前页
      pageRow_lsjl: 10, //每页多少条
      single_score: "",
      multiple_score: "",
      judge_score: "",
      switch_type: false,
    };
  },
  methods: {
    kszx_click() {
      // this.$router.push("xxxl_independentPage");
    },
    //切换列表和题目
    kszxs(item) {
      let _this = this;
      _this.show_s = item;
      if (item) {
        _this.tab_st = 1;
        _this.arr_single = [];
        _this.arr_multiple = [];
        _this.arr_judge = [];
        // _this.handleCurrentChange_qw(1);
        if (_this.switch_type) {
          _this.dialogVisible_lsjl = true;
          _this.switch_type = false;
        }
      }
    },
    ckjl(item) {
      let _this = this;
      queryDetails({
        erId: item.id,
      })
        .then((data) => {
          _this.arr_single = [];
          _this.arr_multiple = [];
          _this.arr_judge = [];
          data.list.forEach((item) => {
            if (item.topicType == "0") {
              //单选
              _this.arr_single.push({
                title: item.content,
                type: item.type,
                _correct: item.contentCorrect,
                correct: item.rightKeys,
                content: item.correct.split("&|&"),
              });
            } else if (item.topicType == "1") {
              //多选
              _this.arr_multiple.push({
                title: item.content,
                type: item.type,
                _correct: item.contentCorrect.split("&|&"),
                correct: item.rightKeys.split("&|&"),
                content: item.correct.split("&|&"),
              });
            } else {
              //判断
              _this.arr_judge.push({
                title: item.content,
                type: item.type,
                _correct: item.contentCorrect,
                correct: item.rightKeys,
                content: item.correct.split("&|&"),
                remark: item.remark,
              });
            }
          });
          _this.show_s = false;
          _this.tab_st = 3;
          _this.dialogVisible_lsjl = false;
          _this.switch_type = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //点击模拟训练事件
    mnxl_cli(item) {
      let _this = this;
      _this.kszxs(false);
      _this.loading = true;
      _this.query_mncs(item);
    },
    //查询生成的考题
    query_mncs(items) {
      let _this = this;
      let data = items;
      _this.counts = data.name;
      _this.eaxmeIds = data.id;
      _this.arr_single = []; //生成的单选题集合
      _this.single_score = items.singlePointValue;
      _this.multiple_score = items.multiPointValue;
      _this.judge_score = items.judgePointValue;
      JSON.parse(data.content).single.forEach((item, index) => {
        //所有选项
        let arr = item.content.split("&|&");
        //答案
        let arrs = item.correct;
        _this.arr_single.push({
          id: item.id,
          title: item.title,
          content: arr,
          correct: arrs,
          _correct: "",
        });
      });
      _this.arr_multiple = []; //生成的多选题集合
      JSON.parse(data.content).multiple.forEach((item, index) => {
        //所有选项
        let arr = item.content.split("&|&");
        //答案
        let arrs = item.correct.split("&|&");
        _this.arr_multiple.push({
          id: item.id,
          title: item.title,
          content: arr,
          correct: arrs,
          _correct: [],
        });
      });
      _this.arr_judge = []; //生成的判断题集合
      JSON.parse(data.content).judge.forEach((item, index) => {
        //所有选项
        let arr = item.content.split("&|&");
        //答案
        let arrs = item.correct;
        _this.arr_judge.push({
          id: item.id,
          title: item.title,
          content: arr,
          correct: arrs,
          _correct: "",
          remark: item.remark,
        });
      });
      _this.loading = false;
      _this.createTime = new Date().Format("yyyy-MM-dd hh:mm:ss");
    },
    //提交考题再前台进行校验
    submit_tj() {
      let _this = this;
      let arr = [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
      ];
      let a_tit_single = "";
      let counts_single = 0;
      _this.arr_single.forEach((item, index) => {
        if (item._correct == "") {
          counts_single++;
          a_tit_single = a_tit_single + arr[index] + "、";
        }
      });
      let a_tit_multiple = "";
      let counts_multiple = 0;
      _this.arr_multiple.forEach((item, index) => {
        if (item._correct.length == 0) {
          counts_multiple++;
          a_tit_multiple = a_tit_multiple + arr[index] + "、";
        }
      });
      let a_tit_judge = "";
      let counts_judge = 0;
      _this.arr_judge.forEach((item, index) => {
        if (item._correct == "") {
          counts_judge++;
          a_tit_judge = a_tit_judge + arr[index] + "、";
        }
      });
      if (counts_single == 0 && counts_multiple == 0 && counts_judge == 0) {
        this.$confirm("确定提交吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            _this.endTime = new Date().Format("yyyy-MM-dd hh:mm:ss");
            //判断对错（单选题）
            let count_zs_single = 0;
            let sort = 0;
            _this.arr_single.forEach((item) => {
              item.sort = sort++;
              item.type = "false";
              item.topicType = 0;
              if (item._correct == item.correct) {
                count_zs_single++;
                item.type = "true";
              }
            });
            //判断对错（多选题）
            let count_zs_multiple = 0;
            _this.arr_multiple.forEach((item) => {
              item.sort = sort++;
              item.type = "false";
              item.topicType = 1;
              if (item._correct.length == item.correct.length) {
                if (_this.judgeResultFun(item._correct, item.correct)) {
                  count_zs_multiple++;
                  item.type = "true";
                }
              }
            });
            //判断对错（判断题）
            let count_zs_judge = 0;
            _this.arr_judge.forEach((item) => {
              item.sort = sort++;
              item.type = "false";
              item.topicType = 2;
              if (item._correct == item.correct) {
                count_zs_judge++;
                item.type = "true";
              }
            });
            _this.tab_st = 2;
            _this.fraction =
              count_zs_single * this.single_score +
              count_zs_multiple * this.multiple_score +
              count_zs_judge * this.judge_score;
            _this.dx_fractions = count_zs_single;
            _this.dxs_fractions = count_zs_multiple;
            _this.pd_fractions = count_zs_judge;
            this.$nextTick(() => {
              document.getElementById("pub_id").scrollTop = 0;
            });
            //提交入库操作
            //单选题

            let arr_tRecordDetails = [];
            _this.arr_single.forEach((item) => {
              let contents = "";
              item.content.forEach((items) => {
                contents = contents + items + "&|&";
              });
              contents = contents.substring(0, contents.length - 3);
              arr_tRecordDetails.push({
                contentId: item.id, //题id
                content: item.title, //考试题
                type: item.type, //类型判断对错
                correct: contents, //考试题选项
                contentCorrect: item._correct, //选择的答案
                rightKeys: item.correct, //正确答案
                topicType: item.topicType, //题目类型
                sort: item.sort,
              });
            });
            //多选
            _this.arr_multiple.forEach((item) => {
              let contents = "";
              item.content.forEach((items) => {
                contents = contents + items + "&|&";
              });
              contents = contents.substring(0, contents.length - 3);
              let _corrects = "";
              item._correct.forEach((items) => {
                _corrects = _corrects + items + "&|&";
              });
              _corrects = _corrects.substring(0, _corrects.length - 3);
              let corrects = "";
              item.correct.forEach((items) => {
                corrects = corrects + items + "&|&";
              });
              corrects = corrects.substring(0, corrects.length - 3);
              arr_tRecordDetails.push({
                contentId: item.id, //题id
                content: item.title, //考试题
                type: item.type, //类型判断对错
                correct: contents, //考试题选项
                contentCorrect: _corrects, //选择的答案
                rightKeys: corrects, //正确答案
                topicType: item.topicType, //题目类型
                sort: item.sort,
              });
            });
            //判断
            _this.arr_judge.forEach((item) => {
              let contents = "";
              item.content.forEach((items) => {
                contents = contents + items + "&|&";
              });
              contents = contents.substring(0, contents.length - 3);
              arr_tRecordDetails.push({
                contentId: item.id, //题id
                content: item.title, //考试题
                type: item.type, //类型判断对错
                correct: contents, //考试题选项
                contentCorrect: item._correct, //选择的答案
                rightKeys: item.correct, //正确答案
                topicType: item.topicType, //题目类型
                sort: item.sort,
                remark: item.remark,
              });
            });
            let paramDatas = {
              createTime: _this.createTime,
              createBy: "",
              score: _this.fraction,
              userId: this.$store.state.userInfo.account,
              completeTime: _this.endTime,
              exameName: "",
              exameId: _this.eaxmeIds,
              tRecordDetails: arr_tRecordDetails,
            };
            // return
            createRecord(paramDatas)
              .then((data) => {
                _this.handleCurrentChange_qw(1);
                if (data != 1) {
                  console.log("考试记录未成功添加入库");
                }
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消提交",
            });
          });
      } else {
        let counts = counts_single + counts_multiple + counts_judge;
        let a_str = "";
        if (a_tit_single != "") {
          a_str = a_str + "单选题：" + a_tit_single + "<br/><br/>";
        }
        if (a_tit_multiple != "") {
          a_str = a_str + "多选题：" + a_tit_multiple + "<br/><br/>";
        }
        if (a_tit_judge != "") {
          a_str = a_str + "判断题：" + a_tit_judge;
        }
        this.$message({
          dangerouslyUseHTMLString: true,
          type: "warning",
          message:
            "还有" +
            counts +
            "道题没有选择！！！<br/><br/>以下未答题：<br/><br/>" +
            a_str,
          duration: 3000,
        });
      }
    },
    //提交完考题后查看答案
    ckda() {
      let _this = this;
      _this.tab_st = 3;
      this.$nextTick(() => {
        document.getElementById("pub_id").scrollTop = 0;
      });
    },
    //查询两个顺序不同的数组内容是否相同
    judgeResultFun(arr1, arr2) {
      let flag = true;
      if (arr1.length !== arr2.length) {
        flag = false;
      } else {
        arr1.forEach((item) => {
          if (arr2.indexOf(item) === -1) {
            flag = false;
          }
        });
      }
      return flag;
    },
    //查询考试记录    列表分页
    handleCurrentChange_qw(pageNum) {
      let _this = this;
      startLoading();
      _this.tableData = [];
      queryExame(pageNum, _this.pageRow, _this.$store.state.userInfo.account, _this.input).then(data => {
        if (data.list.length > 0) {
          data.list.forEach((item) => {
            let types = isDuringDate(item.limitStartTime, item.limitEndTime); // 1时间没到，2时间已过，3可以考试

            //1为可以考试，2为已考完试,3为当前时间没到,4时间已过
            if (item.userId == undefined) {
              item.type = types == "3" ? "1" : types == "2" ? "4" : "3";
            } else {
              item.type = "2";
            }
          });
          _this.tableData = data.list;
          _this.totals = data.total;
          _this.current_page_qw = pageNum;
        }
        endLoading();
      })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      this.pageRow = val;
      this.current_page_qw = 1;
      this.handleCurrentChange_qw(1);
    },
    handleSizeChange_lsjl(val) {
      this.pageRow_lsjl = val;
      this.current_page_qw_lsjl = 1;
      this.query_lsjl(1);
    },
    //查看详细
    ckxq(item) {
      this.lsjl_id = item.id;
      this.tableData_history = [];
      this.totals_lsjl = 0;
      this.current_page_qw_lsjl = 1;
      this.query_lsjl(1);
      this.query_mncs(item);
    },
    query_lsjl(pagenum) {
      let paramDatas = {
        exameId: this.lsjl_id,
        pageNum: pagenum,
        pageRow: this.pageRow_lsjl,
      };
      queryRecord(paramDatas).then((data) => {
        if (data.list.length > 0) {
          this.dialogVisible_lsjl = true;
          this.tableData_history = data.list;
          this.totals_lsjl = data.total;
          this.current_page_qw_lsjl = pagenum;
        } else {
          this.$message({
            type: "warning",
            message: "暂无答题记录！！！",
          });
        }
      })
        .catch((err) => {
          console.log(err);
        });
    },
    dowload_lsjl() {
      window.open(
        "api_exame/admin/TExameRecord/exportGrade?exameId=" + this.lsjl_id
      );
    },
  },
  mounted() {
    this.handleCurrentChange_qw(1);
  },
};
</script>
<style lang="scss">
#llkh {
  width: calc(100% - 55px);
  height: calc(100% - 75px);
  margin: 20px;
  box-sizing: border-box;
  overflow: hidden;
  // background-image: url("../../assets/img/xxxl/01.png");
  // background-size: 100% 100%;
  color: white;

  .table_lb {
    width: 100%;
    height: 100%;

    .top-div {
      width: calc(100% - 40px);
      height: 80px;
      margin-left: 20px;
      margin-right: 20px;

      .el-select {
        float: left;
        margin-left: 20px;
        width: 150px !important;

        .el-input {
          width: unset !important;
        }
      }

      .el-input {
        float: left;
        width: 225px;
        margin-left: 0px;
        margin-top: 20px;

        .el-input__inner {
          background: none;
          color: #ffff;
          border: 1px solid #3a5f94c9 !important;
          box-shadow: 0 0 10px #3a5f94c9;
        }
      }

      .button-discuss {
        margin-top: 25px;
        width: 100px;
        height: 30px;
        line-height: 30px;
        float: left;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        background-image: url(../../assets/img/yqjc/40.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 20px;
      }

      .xjzt-div {
        margin-top: 30px;
        float: right;
        width: 130px;
        height: 50px;
        line-height: 50px;
        background: none;
        text-align: center;
        font-size: 14px;
        color: #ffffffc7;
        cursor: pointer;
        background-image: url("../../assets/img/xxxl/02.png");
        background-size: 100% 100%;
      }
    }

    .bottom-div {
      width: calc(100% - 40px);
      height: calc(100% - 115px);
      margin-left: 20px;
      margin-right: 20px;

      .table-div {
        width: 100%;
        height: calc(100% - 50px);
        margin-top: 20px;
        margin-left: 0px;

        .pub-xdzy {
          width: 35px;
          height: 35px;
          float: left;
          cursor: pointer;
        }

        .dt {
          background-image: url(../../assets/img/xxxl/new/dt.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        .lsjl {
          background-image: url(../../assets/img/xxxl/new/lsjl.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        .dt:hover {
          background-image: url(../../assets/img/xxxl/new/dt1.png);
        }

        .lsjl:hover {
          background-image: url(../../assets/img/xxxl/new/lsjl1.png);
        }

        .el-table tr {
          background-color: transparent !important;
          color: #ffffffc7;
        }

        .el-table thead tr {
          height: 40px;
          background: url(../../assets/img/setting/tr1.png) no-repeat;
          background-size: 100% 100%;
        }

        .el-table th {
          background-color: transparent;
        }

        tbody tr {
          border-bottom: 1px solid #252631;
        }

        .el-table td {
          border-bottom: 1px solid #252631;
          border-right: unset;
        }

        .el-table--enable-row-hover .el-table__body tr:hover>td {
          background-color: #82848a78;
        }

        .el-table th {
          border: unset;
          // background-color: #263b5d !important;
        }

        .el-table--fit {
          background: none !important;
          border: unset;
        }

        .el-icon-delete-solid {
          color: red;
          cursor: pointer;
          font-size: 18px;
        }

        .el-icon-edit {
          color: #1172d8;
          cursor: pointer;
          font-size: 20px;
        }

        .el-icon-view {
          color: #00ffff;
          font-size: 20px;
          cursor: pointer;
        }

        .el-table--group::after,
        .el-table--border::after,
        .el-table::before {
          background-color: unset;
        }
      }
    }
  }

  .sjtms {
    width: calc(100% - 60px) !important;
    height: calc(100% - 50px) !important;
    margin: 30px;
    background-color: white;
    position: relative;
    border-radius: 7px;

    .fh {
      position: absolute;
      right: 50px;
      top: 20px;
    }

    .pub-class-div {
      width: 80%;
      margin-left: 10%;
      margin-top: 22px;
      float: left;
      color: #484848;
      height: calc(100% - 70px);
      overflow-y: auto;
      word-break: break-all;
      white-space: normal;
      line-height: 23px;

      .tm_dt {
        width: 100%;
        height: 100%;

        .title-class {
          text-align: center;
          color: black;

          .title-div {
            font-size: 22px;
            font-weight: 800;
          }
        }

        .pub_dt_div {
          width: 70px;
          float: left;
        }

        .pub-div {
          .tit-div {
            font-size: 19px;

            .pub-span {
              font-size: 13px;
            }
          }

          .tm-xx {
            margin-top: 20px;

            .tm-div {
              margin-left: 40px;
              margin-right: 30px;

              .xx-div {
                margin-left: 30px;
                margin-top: 13px;
                margin-right: 30px;

                .xx-dic {
                  width: 100%;
                  margin-bottom: 20px;

                  .el-radio__label {
                    word-break: break-all;
                    white-space: normal;
                    line-height: 23px;
                  }

                  .el-checkbox__label {
                    word-break: break-all;
                    white-space: normal;
                    line-height: 23px;
                  }
                }
              }
            }
          }
        }
      }

      .ckda {
        .pub_i1 {
          color: #22ea00;
          font-size: 25px;
        }

        .pub_i2 {
          color: red;
          font-size: 25px;
        }

        .xx-dic {
          .is-checked {
            .el-radio__label {
              color: #424242;
            }

            .el-checkbox__label {
              color: #424242;
            }
          }
        }

        .zqxx {
          .is-disabled {
            .el-radio__label {
              color: #22ea00;
            }

            .el-checkbox__label {
              color: #22ea00;
            }
          }
        }
      }
    }

    .pub-class-div::-webkit-scrollbar-thumb {
      background: #cccccc;
    }

    .pub-class-div::-webkit-scrollbar-track {
      background: #e4e4e4;
    }
  }

  .el-dialog {
    .el-dialog__body {
      padding: 0px 10px;
    }

    .el-dialog__header {
      text-align: center;
    }

    background-color: #1d2d4700 !important;
    background-image: url(../../assets/img/xxxl/new/tk.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .el-dialog__header {
      padding: 35px 0px 0px;

      .el-dialog__headerbtn {
        top: 40px;
      }
    }

    .el-dialog__title {
      color: #ffffff;
    }

    .el-form-item__label {
      color: #dadada;
    }

    .el-dialog__body {
      padding: 25px 25px 0px;
    }

    .el-dialog__footer {
      padding: 4px 0px 84px;

      .el-button {
        border-radius: 20px;
        background: linear-gradient(to right, #c36a00, #e99e28);
        border: none;
        color: white;
      }
    }

    .el-table__body tr:hover>td {
      background-color: unset;
    }

    .table-div {
      width: 100%;
      height: 500px;
      margin-top: 20px;
      margin-left: 0px;
      background: #e6e6e600;

      tr {
        background-color: unset;
        color: #ffffff;
      }

      .el-table__header-wrapper tr {
        background-image: url(../../assets/img/flfg/new/4.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        box-shadow: 0px 0px 10px #292929;
        color: #ffffff;
        font-size: 14px;
      }

      th {
        border: unset;
        color: #ffffff;
        font-size: 14px;
        background-color: unset;
      }

      td {
        border-bottom: 1px solid #252631 !important;
        border-right: unset;
      }

      .el-table__body-wrapper {
        height: 452px;
        overflow-y: auto;
      }

      .cell {
        text-align: center;
      }
    }
  }
}
</style>