<template>
  <div id="kszx">
    <div class="table_lb" v-if="show_s">
      <div class="top-div">
        <el-input placeholder="请输入题目内容" v-model="input" clearable>
        </el-input>
        <el-select v-model="value" clearable placeholder="请选择科目代码类型" filterable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value_lx" clearable placeholder="请选择题目类型">
          <el-option v-for="item in options_lx" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <div class="button-discuss" @click="handleCurrentChange_qw(1)">
          搜索
        </div>
        <div class="xjzt-div" @click="delete_tm()">
          <i class="el-icon-document-remove"></i>&nbsp;&nbsp;批量删除
        </div>
        <div class="xjzt-div" @click="add_tms()">
          <i class="el-icon-document-add"></i>&nbsp;&nbsp;批量新增
        </div>
        <div class="xjzt-div" @click="add_tm()">
          <i class="el-icon-document-add"></i>&nbsp;&nbsp;单个新增
        </div>
      </div>
      <div class="bottom-div">
        <div class="table-div">
          <el-table :data="tableData" height="100%" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="80" label="序号"></el-table-column>
            <el-table-column prop="title" label="题目名称" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="题目选项" min-width="200">
              <template slot-scope="scope">
                <el-radio disabled v-for="(item, index) in scope.row.content"
                  v-if="scope.row.type == 0 || scope.row.type == 2" :key="index"
                  v-bind:class="{ xz_class: item.corrects }">{{ item.content }}</el-radio>
                <el-checkbox disabled v-for="(item, index) in scope.row.content" v-if="scope.row.type == 1" :key="index"
                  v-bind:class="{ xz_class: item.corrects }">{{ item.content }}</el-checkbox>
                <!-- <el-radio disabled v-if="scope.row.type == 2">正确</el-radio>
                <el-radio disabled v-if="scope.row.type == 2">错误</el-radio> -->
              </template>
            </el-table-column>
            <!-- <el-table-column label="题目答案">
              <template slot-scope="scope">
                <span v-text="scope.row.correct"></span>
              </template>
            </el-table-column> -->
            <el-table-column prop="questionsName" label="科目代码类型">
            </el-table-column>
            <el-table-column prop="type" label="题目类型" width="150">
              <template slot-scope="scope">
                <span v-text="scope.row.type == '0'
                    ? '单选题'
                    : scope.row.type == '1'
                      ? '多选题'
                      : '判断题'
                  "></span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                <i class="el-icon-edit" @click="handleEdit(scope.row)" title="编辑"></i>
                &nbsp;
                <i class="el-icon-delete" @click="handleDelete(scope.row.id)" title="删除"></i>
              </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"></div>
    <el-dialog title="新增题目" :visible.sync="centerDialogVisible_add" width="30%" center>
      <el-form ref="form" :model="form_add" label-width="120px" style="margin-bottom: 0px">
        <el-form-item label="题目题干">
          <el-input type="textarea" v-model="form_add.name" maxlength="200" show-word-limit placeholder="请输入题干内容"
            :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="科目代码类型">
          <el-select v-model="form_add.region_tklx" style="width: 100%" filterable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-select v-model="form_add.region_tmlx" @change="tmlx_change" style="width: 100%">
            <el-option v-for="item in options_lx" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目选项">
          <div style="position: relative; text-align: center">
            <span style="color: red; font-size: 15px">选中即为此题正确答案</span>
            <i class="el-icon-circle-plus-outline pubc" title="添加新选项" @click="add_xx()"
              v-if="form_add.region_tmlx != 2"></i>
            <table>
              <thead>
                <tr>
                  <td>选项内容</td>
                  <td style="width: 65px">是否选中</td>
                  <td style="width: 60px">操作</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in form_add.data_tmxx">
                  <td>
                    <el-input v-model.trim="item.xx_names" show-word-limit placeholder="请输入选项内容"
                      :disabled="form_add.region_tmlx == 2"></el-input>
                  </td>
                  <td style="width: 50px">
                    <el-radio v-model="form_add.index_xz" :label="index" v-if="form_add.region_tmlx == 0 || form_add.region_tmlx == 2
                      "></el-radio>
                    <el-checkbox v-model="form_add.index_dx" :label="index"
                      v-if="form_add.region_tmlx == 1"></el-checkbox>
                  </td>
                  <td style="width: 40px">
                    <i class="el-icon-delete" title="删除" style="color: #ff4040; font-size: 20px"
                      @click="delet_tmxx(item, index)" v-if="form_add.region_tmlx != 2"></i>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible_add = false">取 消</el-button>
        <el-button type="primary" @click="submit_add()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑题目" :visible.sync="centerDialogVisible_edit" width="30%" center>
      <el-form ref="form" :model="form_edit" label-width="120px" style="margin-bottom: 0px">
        <el-form-item label="题目题干">
          <el-input type="textarea" v-model="form_edit.name" maxlength="200" show-word-limit placeholder="请输入题干内容"
            :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="科目代码类型">
          <el-select v-model="form_edit.region_tklx" style="width: 100%" filterable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-select v-model="form_edit.region_tmlx" disabled style="width: 100%">
            <el-option v-for="item in options_lxs" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目选项">
          <div style="position: relative; text-align: center">
            <span style="color: red; font-size: 15px">选中即为此题正确答案</span>
            <i class="el-icon-circle-plus-outline pubc" title="添加新选项" @click="add_edit_xx()"
              v-if="form_edit.region_tmlx != 2"></i>
            <table>
              <thead>
                <tr>
                  <td>选项内容</td>
                  <td style="width: 65px">是否选中</td>
                  <td style="width: 60px">操作</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in form_edit.data_tmxx">
                  <td>
                    <el-input v-model.trim="item.xx_names" show-word-limit placeholder="请输入选项内容"
                      :disabled="form_edit.region_tmlx == 2"></el-input>
                  </td>
                  <td style="width: 50px">
                    <el-radio v-model="form_edit.index_xz" :label="index" v-if="form_edit.region_tmlx == 0 || form_edit.region_tmlx == 2
                      "></el-radio>
                    <el-checkbox v-model="form_edit.index_dx" :label="index"
                      v-if="form_edit.region_tmlx == 1"></el-checkbox>
                  </td>
                  <td style="width: 40px">
                    <i class="el-icon-delete" title="删除" style="color: #ff4040; font-size: 20px"
                      @click="delet_edit_tmxx(item, index)" v-if="form_edit.region_tmlx != 2"></i>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible_edit = false">取 消</el-button>
        <el-button type="primary" @click="submit_edit()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="批量新增题目" :visible.sync="centerDialogVisible_add_pl" width="30%" center>
      <el-form ref="form" :model="form_pl_add" label-width="100px" style="margin-bottom: 0px">
        <!-- <el-form-item label="科目代码类型">
          <el-select
            v-model="form_pl_add.region_tklx"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> 
        </el-form-item> -->
        <el-form-item label="模板下载">
          <el-button @click="dowload()">下 载</el-button>
        </el-form-item>
        <el-form-item label="选择文件" style="margin-bottom: 0px">
          <el-upload class="upload-demo" ref="upload" action="uploadUrl" :file-list="form_pl_add.fileList"
            :on-change="handleChange" :show-file-list="true" :auto-upload="false" :multiple="false"
            :on-remove="handleRemove" :accept="format_files">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <!-- <div slot="tip" class="el-upload__tip">允许上传doc、PPT、等等</div> -->
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible_add_pl = false">取 消</el-button>
        <el-button type="primary" @click="submit_add_pl()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  post,
  get,
  startLoading,
  endLoading,
  download,
} from "../../util/http_util";
import {addTExameContent,updateTExameContent,deleteTExameContent,listTExameContent,listQuestionBank} from '../../api/xxxl/llkh';
export default {
  data() {
    return {
      centerDialogVisible_edit: false,
      centerDialogVisible_add: false,
      centerDialogVisible_add_pl: false,
      options: [],
      options_lx: [
        {
          value: '0',
          label: "单选题",
        },
        {
          value: '1',
          label: "多选题",
        },
        {
          value: '2',
          label: "判断题",
        },
      ],
      options_lxs: [
        {
          value: 0,
          label: "单选题",
        },
        {
          value: 1,
          label: "多选题",
        },
        {
          value: 2,
          label: "判断题",
        },
      ],
      value: "",
      value_lx: "",
      input: "",
      tableData: [],
      show_s: true,
      form_add: {
        name: "",
        region_tklx: "",
        region_tmlx: "",
        index_xz: 0,
        index_dx: [],
        data_tmxx: [{ xx_names: "" }, { xx_names: "" }],
      },
      form_edit: {
        name: "",
        region_tklx: "",
        region_tmlx: "",
        index_xz: 0,
        index_dx: [],
        data_tmxx: [{ xx_names: "" }, { xx_names: "" }],
      },
      form_pl_add: {
        // region_tklx: "",
        createBy: "admin",
        userId: "admin",
        fileList: [],
      },
      totals: 0,
      current_page_qw: 1,
      pageRow: 10,
      id_edit: "",
      format_files: "xlsx", //上传文件类型限制
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(item) {
      this.multipleSelection = [];
      item.forEach((item) => {
        this.multipleSelection.push(item.id);
      })
      // this.multipleSelection = item;
      // let paramDatas = {
      //   ids: val,
      // };
      // this.delete(paramDatas);
    },
    delete_tm() {
      let paramDatas = {
        ids: this.multipleSelection,
      };
      this.delete(paramDatas);
    },
    handleSizeChange(val) {
      this.pageRow = val;
      this.current_page_qw = 1;
      this.handleCurrentChange_qw(1);
    },
    //新增弹出框题目类型切换事件
    tmlx_change(item) {
      let _this = this;
      _this.form_add.index_xz = 0;
      _this.form_add.index_dx = [];
      if (item == 2) {
        _this.form_add.data_tmxx = [{ xx_names: "正确" }, { xx_names: "错误" }];
      } else if (item == 1) {
        _this.form_add.index_dx = [0, 1];
        _this.form_add.data_tmxx = [
          { xx_names: "" },
          { xx_names: "" },
          { xx_names: "" },
          { xx_names: "" },
        ];
      } else {
        _this.form_add.data_tmxx = [
          { xx_names: "" },
          { xx_names: "" },
          { xx_names: "" },
          { xx_names: "" },
        ];
      }
    },
    //新增题目弹出框
    add_tm() {
      let _this = this;
      _this.centerDialogVisible_add = true;
      _this.form_add = {
        name: "", //题目名称
        region_tklx: this.options[0].value, //题库类型
        region_tmlx: this.options_lx[0].value, //题目类型
        index_xz: 0, //单选的index
        index_dx: [], //多选的数组
        data_tmxx: [
          { xx_names: "" },
          { xx_names: "" },
          { xx_names: "" },
          { xx_names: "" },
        ], //题目选项数组
      };
    },
    //新增弹出框中添加新的选项
    add_xx() {
      let _this = this;
      _this.form_add.data_tmxx.push({ xx_names: "" });
    },
    //新增弹出框中删除选项
    delet_tmxx(item, index) {
      let _this = this;
      //选项最少为两个
      if (_this.form_add.data_tmxx.length <= 3) {
        this.$message({
          type: "warning",
          message: "最少三个选项",
        });
        return;
      }
      if (index == _this.form_add.index_xz) {
        _this.form_add.index_xz = 0;
      }
      _this.form_add.data_tmxx.splice(index, 1);
    },
    //新增弹出框确定
    submit_add() {
      let _this = this;
      let nr = false;
      let arr_s = [];
      _this.form_add.data_tmxx.forEach((item) => {
        if (item.xx_names == "") {
          nr = true;
        }
        arr_s.push(item.xx_names);
      });
      if (_this.form_add.name == "") {
        this.$message({
          type: "warning",
          message: "题目题干不可为空",
        });
        return;
      }
      if (nr) {
        this.$message({
          type: "warning",
          message: "题目选项内容不可为空",
        });
        return;
      }
      if (_this.form_add.region_tmlx == 1) {
        if (_this.form_add.index_dx.length < 2) {
          this.$message({
            type: "warning",
            message: "多选题选项最少选中两项为答案",
          });
          return;
        }
      }
      if (_this.repeat_arrs(arr_s) != 0) {
        this.$message({
          type: "warning",
          message: "选项内容有重复",
        });
        return;
      }
      let tmxx_content = ""; //题目选项
      _this.form_add.data_tmxx.forEach((item) => {
        tmxx_content = tmxx_content + item.xx_names + "&|&";
      });
      tmxx_content = tmxx_content.substring(0, tmxx_content.length - 3);
      let tm_correct = ""; //题目答案
      if (_this.form_add.region_tmlx == 1) {
        _this.form_add.index_dx.forEach((item) => {
          tm_correct =
            tm_correct + _this.form_add.data_tmxx[item].xx_names + "&|&";
        });
        tm_correct = tm_correct.substring(0, tm_correct.length - 3);
      } else {
        tm_correct = _this.form_add.data_tmxx[_this.form_add.index_xz].xx_names;
      }
      let paramDatas = {
        content: tmxx_content, //选项
        title: _this.form_add.name, //标题
        correct: tm_correct, //答案
        createBy: "admin", //创建人
        type: _this.form_add.region_tmlx, //题类型
        qbId: _this.form_add.region_tklx, //题库id
      };
      addTExameContent(paramDatas)
        .then((data) => {
          _this.centerDialogVisible_add = false;
          this.$message({
            type: "success",
            message: "新增成功",
          });
          _this.handleCurrentChange_qw(1);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //编辑题目
    handleEdit(item) {
      let _this = this;
      let index_xz;
      let arrs = [];
      let arrs_da = [];
      _this.id_edit = item.id;
      if (item.type == 1) {
        item.content.forEach((items, index) => {
          arrs.push({ xx_names: items.content });
          if (items.corrects) {
            arrs_da.push(index);
          }
        });
      } else {
        item.content.forEach((items, index) => {
          arrs.push({ xx_names: items.content });
          if (items.corrects) {
            index_xz = index;
          }
        });
      }
      (_this.form_edit = {
        name: item.title,
        region_tklx: item.qbId,
        region_tmlx: item.type,
        index_xz: index_xz,
        index_dx: arrs_da,
        data_tmxx: arrs,
      }),
        (_this.centerDialogVisible_edit = true);
    },
    //编辑弹出框中添加新的选项
    add_edit_xx() {
      let _this = this;
      _this.form_edit.data_tmxx.push({ xx_names: "" });
    },
    //编辑弹出框中删除选项
    delet_edit_tmxx(item, index) {
      let _this = this;
      //选项最少为两个
      if (_this.form_edit.data_tmxx.length <= 3) {
        this.$message({
          type: "warning",
          message: "最少三个选项",
        });
        return;
      }
      if (index == _this.form_edit.index_xz) {
        _this.form_edit.index_xz = 0;
      }
      _this.form_edit.data_tmxx.splice(index, 1);
    },
    //编辑弹出框确定
    submit_edit() {
      let _this = this;
      let nr = false;
      let arr_s = [];
      _this.form_edit.data_tmxx.forEach((item) => {
        if (item.xx_names == "") {
          nr = true;
        }
        arr_s.push(item.xx_names);
      });
      if (_this.form_edit.name == "") {
        this.$message({
          type: "warning",
          message: "题目题干不可为空",
        });
        return;
      }
      if (nr) {
        this.$message({
          type: "warning",
          message: "题目选项内容不可为空",
        });
        return;
      }
      if (_this.form_edit.region_tmlx == 1) {
        if (_this.form_edit.index_dx.length < 2) {
          this.$message({
            type: "warning",
            message: "多选题选项最少选中两项为答案",
          });
          return;
        }
      }
      if (_this.repeat_arrs(arr_s) != 0) {
        this.$message({
          type: "warning",
          message: "选项内容有重复",
        });
        return;
      }
      let tmxx_content = ""; //题目选项
      _this.form_edit.data_tmxx.forEach((item) => {
        tmxx_content = tmxx_content + item.xx_names + "&|&";
      });
      tmxx_content = tmxx_content.substring(0, tmxx_content.length - 3);
      let tm_correct = ""; //题目答案
      if (_this.form_edit.region_tmlx == 1) {
        _this.form_edit.index_dx.forEach((item) => {
          tm_correct =
            tm_correct + _this.form_edit.data_tmxx[item].xx_names + "&|&";
        });
        tm_correct = tm_correct.substring(0, tm_correct.length - 3);
      } else {
        tm_correct =
          _this.form_edit.data_tmxx[_this.form_edit.index_xz].xx_names;
      }
      let paramDatas = {
        id: _this.id_edit,
        content: tmxx_content, //选项
        title: _this.form_edit.name, //标题
        correct: tm_correct, //答案
        updateBy: "admin", //创建人
        // type: _this.form_edit.region_tmlx, //题类型
        qbId: _this.form_edit.region_tklx, //题库id
      };
      console.log(1);
      updateTExameContent(paramDatas)
        .then((data) => {
          _this.centerDialogVisible_edit = false;
          this.$message({
            type: "success",
            message: "修改成功",
          });
          _this.handleCurrentChange_qw(1);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //删除题目
    handleDelete(item) {
      let paramDatas = {
        ids: [item],
      };
      this.delete(paramDatas);
    },
    delete(paramDatas) {
      let _this = this;
      if (paramDatas.ids.length == 0) {
        this.$message({
          message: "无删除项,请选择！！！",
          type: "warning",
        });
      } else {
        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteTExameContent(paramDatas)
              .then((data) => {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                _this.handleCurrentChange_qw(1);
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    //查询题目
    handleCurrentChange_qw(pageNum) {
      let _this = this;
      let paramDatas = {
        title: _this.input == "" ? null : _this.input,
        qbId: _this.value == "" ? null : _this.value,
        type: _this.value_lx === "" ? null : _this.value_lx,
        pageNum: pageNum,
        pageRow: _this.pageRow,
      };
      // startLoading();
      _this.tableData = [];
      listTExameContent(paramDatas)
        .then((data) => {
          if (data.list.length > 0) {
            data.list.forEach((item) => {
              //所有选项
              let arr = item.content.split("&|&");
              //答案
              let arrs = item.correct.split("&|&");
              let arr_content = [];
              arr.forEach((item, index) => {
                let arr_t = { content: item, corrects: false };
                arrs.forEach((items) => {
                  if (item == items) {
                    arr_t.corrects = true;
                  }
                });
                arr_content.push(arr_t);
              });
              item.content = arr_content;
              //   item.correct = item.correct.replace("&|&", "##");
            });
            _this.tableData = data.list;
            _this.totals = data.total;
            _this.current_page_qw = pageNum;
          }
          // endLoading();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //判断题目选项内容是否有重复
    repeat_arrs(arr) {
      var temp = [];
      arr.sort().sort(function (a, b) {
        if (a === b && temp.indexOf(a) === -1) {
          temp.push(a);
        }
      });
      return temp;
    },
    //查询题库类型
    query_tk() {
      let _this = this;
      // pageNum = pageNum - 1;
      let paramDatas = {
        questionsName: null,
        pageNum: 1,
        pageRow: 10000,
      };
      _this.options = [];
      // _this.totals = 0;
      listQuestionBank(paramDatas)
        .then((data) => {
          if (data.list.length > 0) {
            data.list.forEach((item) => {
              _this.options.push({ value: item.id, label: item.questionsName });
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //批量新增
    add_tms() {
      let _this = this;
      _this.form_pl_add = {
        // region_tklx: this.options[0].value,
        fileList: [],
      };
      this.centerDialogVisible_add_pl = true;
    },
    submit_add_pl() {
      let _this = this;
      if (_this.form_pl_add.fileList.length == 0) {
        this.$message({
          type: "warning",
          message: "未选择文件!",
        });
        return;
      }
      let fd = new FormData();
      let xhr = new XMLHttpRequest();
      fd.append("filename", _this.form_pl_add.fileList[0].raw);
      fd.append("CreateBy", this.$store.state.userInfo.account);
      // fd.append("qbId", _this.form_pl_add.region_tklx);
      xhr.open(
        "POST",
        "api_exame/admin/TExameContent/uploadTExameContent"
      );
      xhr.send(fd);
      //文件上传成功
      xhr.addEventListener(
        "readystatechange",
        function (evt) {
          if (xhr.readyState == 4 && xhr.status == 200) {
            _this.$message({
              type: "success",
              message: "批量上传成功",
            });
            _this.centerDialogVisible_add_pl = false;
            _this.handleCurrentChange_qw(1);
            _this.query_tk();
          }
        },
        false
      );
      //文件上传失败
      xhr.addEventListener(
        "error",
        function (evt) {
          _this.$message({
            type: "error",
            message: "文件上传失败!",
          });
          return;
        },
        false
      );
      //文件上传中止
      xhr.addEventListener(
        "abort",
        function (evt) {
          _this.$message({
            type: "error",
            message: "文件上传中止!",
          });
          return;
        },
        false
      );
    },
    //上传文件中的删除
    handleRemove(index, row) {
      this.form_pl_add.fileList = [];
    },
    //选择文件
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.form_pl_add.fileList = [fileList[fileList.length - 1]]; // 这一步，是展示最后一次选择的文件
      }
    },
    //下载模板
    dowload() {
      let url = "api_exame/templates/ExameUploadTemplate_new.xlsx";
      // let url1 = "api_exame/admin/TExameContent/DownloadExameExcel";
      let name = "批量上传题目模板";
      download(url, name);
    },
  },
  mounted() {
    let _this = this;
    _this.query_tk();
    _this.handleCurrentChange_qw(1);
  },
  watch: {},
  activated() {
    let _this = this;
    // _this.query_tk();
  }
};
</script>
<style lang="scss">
#kszx {
  // width: calc(100% - 55px);
  // height: calc(100% - 75px);
  // margin: 20px;
  width: calc(100% - 0px);
  height: calc(100% - 10px);
  box-sizing: border-box;
  overflow: hidden;
  background-image: url("../../assets/img/xxxl/01.png");
  background-size: 100% 100%;
  color: white;
  .el-tooltip__popper {
    max-width: 20%;
  }

  .el-tooltip__popper,
  .el-tooltip__popper.is-dark {
    color: #fff !important;
    line-height: 30px;
  }

  .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: 30px;

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

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

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

    .bottom-div {
      width: calc(100% - 40px);
      height: calc(100% - 115px);
      box-shadow: 0 0 10px #1b6097;
      margin-left: 20px;
      margin-right: 20px;

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

        .xz_class {
          .is-disabled {
            .el-radio__inner {
              background-color: #00a023;
              border-color: #03e200;
            }

            .el-checkbox__inner {
              background-color: #00a023;
              border-color: #03e200;
            }
          }
        }

        .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 td {
          border-bottom: 1px solid #252631 !important;
          border-right: none !important;
        }

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

        .el-table th {
          background-color: transparent;
          border-bottom: 1px solid #252631 !important;
          border-right: none !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-delete {
          color: red;
          font-size: 20px;
          cursor: pointer;
        }

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

  .sjtms {
    width: 100%;
    height: 100%;
  }

  .el-dialog {
    width: 600px;
    background-color: #1d2d47;

    .el-dialog__title {
      color: #ffff;
    }

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

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

    .el-textarea__inner {
      color: white !important;
      background: none !important;
      border: 1px solid #146a80 !important;
      box-shadow: 0 0 10px #1b6097;
    }

    .el-input__count {
      color: #229dbd;
      background: #1d2d4600;
    }

    .el-radio-group {
      margin-top: 12px;
    }

    .el-radio {
      color: #ffff;
    }

    .pubc {
      font-size: 29px;
      color: #0695ff;
      cursor: pointer;
      position: absolute;
      right: 0px;
      top: 5px;
    }

    table {
      width: 100%;
      color: white;
      text-align: center;
      border-collapse: collapse;

      tbody {
        display: block;
      }

      thead,
      tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
      }

      /*滚动条默认宽度是16px 将thead的宽度减16px*/
      table thead {
        width: calc(100% - 1em);
      }

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

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

      tbody tr td {
        padding: 10px;

        .el-icon-edit {
          font-size: 24px;
          color: #409eff;
          cursor: pointer;
        }

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

        .el-icon-refresh-left {
          font-size: 24px;
          color: #12dc12;
          cursor: pointer;
        }

        .el-radio__label {
          display: none;
        }

        .el-checkbox__label {
          display: none;
        }
      }
    }
  }

  /deep/ .el-list-enter-active,
  /deep/ .el-list-leave-active {
    transition: none;
  }

  /deep/ .el-list-enter,
  /deep/ .el-list-leave-active {
    opacity: 0;
  }

  /deep/ .el-upload-list {
    height: 25px;
  }
}
</style>