<template>
  <div id="questionBank">
    <search-box :formList="formList" @search="search" @init="init" />
    <table-list
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      @addClick="addClick"
      :loading="loading"
    >
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="addClick(props.scope.row, 2)"
          >详情</el-button
        >
        <el-button type="text" @click="addClick(props.scope.row, 0)"
          >修改</el-button
        >
        <el-button type="text" @click="del(props.scope.row)">删除</el-button>
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize="pageSize"
      :currentPage="currentPage"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <el-dialog
      width="980px"
      :visible.sync="innerVisiblePaperTopic"
      append-to-body
      :show-close="false"
      :fullscreen="fullscreenChildPaperTopic"
      :before-close="closeBefore"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">
          {{ statusPop === 1 ? "添加" : statusPop === 0 ? "修改" : "详情" }}
        </div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Max@2x.png"
            alt=""
            @click="fullscreenChildPaperTopic = !fullscreenChildPaperTopic"
          />
          <img src="@/assets/images/Close@2x.png" alt="" @click="closeBefore" />
        </div>
      </div>
      <el-col :span="24" style="display: flex; justify-content: center">
        <el-col
          :span="3"
          style="
            display: flex;
            align-items: center;
            justify-content: flex-start;
            cursor: pointer;
          "
        >
          <el-button
            type="success"
            icon="el-icon-arrow-left"
            circle
            @click="back"
            v-if="statusPop === 2"
          ></el-button>
        </el-col>
        <el-col :span="18" class="contentMore">
          <div class="marg_play">
            <span class="spans">题目类型：</span>
            <el-radio-group v-model="dingForm.type">
              <el-radio
                :disabled="statusPop === 2 || statusPop === 0"
                v-for="(item, index) in radioArrays"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </div>
          <div class="marg_play">
            <span class="spans">题目：</span>
            <el-input
              :disabled="statusPop === 2"
              style="flex: 1"
              type="textarea"
              v-model="dingForm.content"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div class="marg_play">
            <span class="spans">图片：</span>
            <div>
              <div class="imgBoxTopic">
                <label class="imgLabel" for="inputstopic2">
                  <div class="msPhoto" v-if="dingForm.imgUrl">
                    <img :src="$methodsTools.splitImgHost(dingForm.imgUrl)" alt="图片加载失败" />
                  </div>
                  <div class="imgbbx" v-else>
                    <p>点击添加图片</p>
                    <i class="el-icon-plus"></i>
                  </div>
                  <input
                    :disabled="statusPop === 2"
                    id="inputstopic2"
                    type="file"
                    ref="filetopic"
                    style="display: none"
                    @change="getImgFiletopic"
                  />
                </label>
              </div>
              <p style="color: #999999; line-height: 22px">
                支持扩展名：.jpeg .bmp .png .jpg...<br />为保证显示效果，请上传分辨率为100x100且大小小于2M图片
              </p>
            </div>
          </div>
          <div
            class="marg_play"
            v-if="dingForm.type === 1 || dingForm.type === 2"
          >
            <span class="spans">选项：</span>
            <div style="flex: 1">
              <div
                style="display: flex; align-items: center; margin-bottom: 8px"
                v-for="(options, indexsop) in dingForm.jsonStr"
                :key="indexsop"
              >
                <span>选项{{ indexsop + 1 }}:</span>
                <el-input
                  style="flex: 1; margin: 0px 10px"
                  type="textarea"
                  :disabled="statusPop === 2"
                  v-model="options.content"
                  placeholder="请输入内容"
                  :autosize="{ minRows: 2, maxRows: 2 }"
                  maxlength="500"
                ></el-input>
                <span>{{ options.content.length }}/500</span>
                <el-button
                  v-if="statusPop !== 2"
                  @click="delList(indexsop)"
                  style="border-radius: 50%; margin: 0px 6px"
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  circle
                ></el-button>
                <label class="btnSty" v-if="statusPop !== 2"
                  ><input
                    type="file"
                    style="display: none"
                    @change="uploadListImg(indexsop, $event)"
                  />{{
                    options.imgUrl !== null && options.imgUrl
                      ? "更换图片"
                      : "上传图片"
                  }}</label
                >
                <img
                  v-if="options.imgUrl !== null && options.imgUrl"
                  style="
                    width: 50px;
                    height: 50px;
                    border-radius: 4px;
                    border: 1px dotted #a4a4a4;
                    padding: 4px;
                  "
                  :src="$methodsTools.splitImgHost(options.imgUrl)"
                  alt=""
                />
              </div>
              <div
                style="display: flex; align-items: center"
                v-if="statusPop !== 2"
              >
                <i
                  class="el-icon-circle-plus"
                  style="margin-right: 5px; font-size: 30px"
                ></i>
                <span
                  style="color: #409eff; cursor: pointer"
                  @click="addListcontent"
                  >添加选项</span
                >
              </div>
            </div>
          </div>
          <div style="margin-bottom: 15px" v-if="dingForm.type === 4">
            <div
              style="display: flex; align-items: center"
              v-if="statusPop !== 2"
            >
              <i
                class="el-icon-circle-plus"
                style="margin-right: 5px; font-size: 30px"
              ></i
              ><span
                style="color: #409eff; cursor: pointer"
                @click="addListItem"
                >添加问题</span
              >
            </div>
            <!-- 案例题 -->
            <div style="padding-left: 50px">
              <div v-for="(ans, ain) in dingForm.jsonStr" :key="ain">
                <div class="marg_play">
                  <el-button
                    v-if="statusPop !== 2"
                    @click="delAnliChi(ain)"
                    style="border-radius: 50%; margin: 0px 6px"
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    circle
                  ></el-button>
                  <span class="spans">题目类型：</span>
                  <el-radio-group v-model="ans.type">
                    <el-radio
                      v-for="(tng, nindex) in radioArray"
                      :key="nindex"
                      :label="tng.value"
                      :disabled="statusPop === 2"
                      >{{ tng.label }}</el-radio
                    >
                  </el-radio-group>
                </div>
                <div class="marg_play">
                  <span class="spans">题目：</span>
                  <el-input
                    :disabled="statusPop === 2"
                    style="flex: 1"
                    type="textarea"
                    v-model="ans.content"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
                <div class="marg_play">
                  <span class="spans">图片：</span>
                  <div>
                    <div class="imgBoxTopic">
                      <label class="imgLabel" :for="'inputstopi' + ain">
                        <div class="msPhoto" v-if="ans.imgUrl">
                          <img :src="$methodsTools.splitImgHost(ans.imgUrl)" alt="图片加载失败" />
                        </div>
                        <div class="imgbbx" v-else>
                          <p>点击添加图片</p>
                          <i class="el-icon-plus"></i>
                        </div>
                        <input
                          :id="'inputstopi' + ain"
                          type="file"
                          :disabled="statusPop === 2"
                          style="display: none"
                          @change="getImgFiletopics(ain, $event)"
                        />
                      </label>
                    </div>
                    <p style="color: #999999; line-height: 22px">
                      支持扩展名：.jpeg .bmp .png .jpg...<br />为保证显示效果，请上传分辨率为100x100且大小小于2M图片
                    </p>
                  </div>
                </div>
                <div class="marg_play" v-if="ans.type === 1 || ans.type === 2">
                  <span class="spans">选项：</span>
                  <div style="flex: 1">
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        margin-bottom: 8px;
                      "
                      v-for="(answerItem, indexsops) in ans.answer"
                      :key="indexsops"
                    >
                      <span>选项{{ indexsops + 1 }}:</span>
                      <el-input
                        style="flex: 1; margin: 0px 10px"
                        type="textarea"
                        :disabled="statusPop === 2"
                        v-model="answerItem.content"
                        placeholder="请输入内容"
                        :autosize="{ minRows: 2, maxRows: 2 }"
                        maxlength="500"
                      ></el-input>
                      <span>{{ answerItem.content.length }}/500</span>
                      <el-button
                        v-if="statusPop !== 2"
                        @click="delListchi(ain, indexsops)"
                        style="border-radius: 50%; margin: 0px 6px"
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        circle
                      ></el-button>
                      <label class="btnSty" v-if="statusPop !== 2"
                        ><input
                          type="file"
                          style="display: none"
                          @change="uploadListImgchi(ain, indexsops, $event)"
                        />{{
                          answerItem.imgUrl !== null && answerItem.imgUrl
                            ? "更换图片"
                            : "上传图片"
                        }}</label
                      >
                      <img
                        v-if="answerItem.imgUrl !== null && answerItem.imgUrl"
                        style="
                          width: 50px;
                          height: 50px;
                          border-radius: 4px;
                          border: 1px dotted #a4a4a4;
                          padding: 4px;
                        "
                        :src="$methodsTools.splitImgHost(answerItem.imgUrl)"
                        alt=""
                      />
                    </div>
                    <div
                      style="display: flex; align-items: center"
                      v-if="statusPop !== 2"
                    >
                      <i
                        class="el-icon-circle-plus"
                        style="margin-right: 5px; font-size: 30px"
                      ></i>
                      <span
                        style="color: #409eff; cursor: pointer"
                        @click="addListcontentchi(ain)"
                        >添加选项</span
                      >
                    </div>
                  </div>
                </div>
                <div class="marg_play" v-if="ans.type === 1">
                  <span class="spans">正确答案：</span>
                  <label
                    v-for="(oAsz, oindexsz) in ans.answer"
                    :key="oindexsz"
                    style="margin-right: 10px"
                  >
                    <input
                      :disabled="statusPop === 2"
                      type="radio"
                      :name="'flex' + ain"
                      @change="actionListRadiochi(ain, oindexsz)"
                      :checked="oAsz.optionAnswer === 1"
                    />选项{{ oindexsz + 1 }}
                  </label>
                </div>
                <div class="marg_play" v-else-if="ans.type === 2">
                  <span class="spans">正确答案：</span>
                  <label
                    v-for="(oAsz, oindexsz) in ans.answer"
                    :key="oindexsz"
                    style="margin-right: 10px"
                  >
                    <input
                      :disabled="statusPop === 2"
                      type="checkbox"
                      :name="'felxMore' + ain"
                      @change="actionListCheckchi(ain, oindexsz)"
                      :checked="oAsz.optionAnswer === 1"
                    />选项{{ oindexsz + 1 }}
                  </label>
                </div>
                <div class="marg_play" v-if="ans.type === 3">
                  <span class="spans">正确答案：</span>
                  <label style="margin-right: 10px">
                    <input
                      :disabled="statusPop === 2"
                      type="radio"
                      :name="'flexPd' + ain"
                      @change="actionListPDchi(ain, 1)"
                      :checked="ans.answerQuestion === 1"
                    />正确
                  </label>
                  <label style="margin-right: 10px">
                    <input
                      :disabled="statusPop === 2"
                      type="radio"
                      :name="'flexPd' + ain"
                      @change="actionListPDchi(ain, 0)"
                      :checked="ans.answerQuestion === 0"
                    />错误
                  </label>
                </div>
                <div class="marg_play">
                  <span class="spans">答案解析：</span>
                  <el-input
                    :disabled="statusPop === 2"
                    style="flex: 1"
                    type="textarea"
                    v-model="ans.analysisContent"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </div>
            </div>
            <!-- 案例题 -->
          </div>
          <div class="marg_play" v-if="dingForm.type === 1">
            <span class="spans">正确答案：</span>
            <label
              v-for="(oA, oindex) in dingForm.jsonStr"
              :key="oindex"
              style="margin-right: 10px"
            >
              <input
                :disabled="statusPop === 2"
                type="radio"
                name="flex"
                @change="actionListRadio(oindex)"
                :checked="oA.optionAnswer === 1"
              />选项{{ oindex + 1 }}
            </label>
          </div>
          <div class="marg_play" v-else-if="dingForm.type === 2">
            <span class="spans">正确答案：</span>
            <label
              v-for="(oA, oindex) in dingForm.jsonStr"
              :key="oindex"
              style="margin-right: 10px"
            >
              <input
                :disabled="statusPop === 2"
                type="checkbox"
                name="felxMore"
                @change="actionListCheck(oindex)"
                :checked="oA.optionAnswer === 1"
              />选项{{ oindex + 1 }}
            </label>
          </div>
          <div class="marg_play" v-if="dingForm.type === 3">
            <span class="spans">正确答案：</span>
            <label style="margin-right: 10px">
              <input
                type="radio"
                name="flexPd"
                @change="actionListPD(1)"
                :checked="dingForm.answerQuestion === 1"
              />正确
            </label>
            <label style="margin-right: 10px">
              <input
                :disabled="statusPop === 2"
                type="radio"
                name="flexPd"
                @change="actionListPD(0)"
                :checked="dingForm.answerQuestion === 0"
              />错误
            </label>
          </div>
          <div class="marg_play">
            <span class="spans">答案解析：</span>
            <el-input
              style="flex: 1"
              type="textarea"
              :disabled="statusPop === 2"
              v-model="dingForm.analysisContent"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div class="marg_play">
            <span class="spans">是否启用：</span>
            <el-radio-group v-model="dingForm.status">
              <el-radio :disabled="statusPop === 2" :label="1">启用</el-radio>
              <el-radio :disabled="statusPop === 2" :label="0">停用</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col
          :span="3"
          style="
            display: flex;
            align-items: center;
            justify-content: flex-end;
            cursor: pointer;
          "
        >
          <el-button
            type="success"
            icon="el-icon-arrow-right"
            circle
            @click="next"
            v-if="statusPop === 2"
          ></el-button>
        </el-col>
      </el-col>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delTopic" v-if="statusPop === 0 || statusPop === 2"
          >删 除</el-button
        >
        <el-button
          @click="innerVisiblePaperTopic = false"
          v-if="statusPop === 2"
          >关 闭</el-button
        >
        <el-button @click="submitForm" v-if="statusPop === 1 || statusPop === 0"
          >保存</el-button
        >
        <el-button type="primary" v-if="statusPop === 1" @click="submitAndNext"
          >添加下一题</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchBox from "@/components/searchBox";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
export default {
  components: { searchBox, tableList, pagination },
  data() {
    return {
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "题目列表",
        index: 0,
        ch: "条",
        num: true,
        choice: false,
        addHide: false,
        backFatherBtn: {
          status: false,
          title: "未定义",
        },
      },
      tableSet: [
        {
          label: "题目",
          prop: "content",
          hidden: true,
        },
        {
          label: "题目类型",
          prop: "type",
          hidden: true,
          width: "120px",
          scope: "topic",
        },
        {
          label: "状态",
          prop: "status",
          width: "80px",
          hidden: true,
          scope: "status",
        },
      ], //表头信息
      statusPop: -1, //状态
      tableData: [], //表单数据
      total: 0, //一共多少条
      pageSize: 10, //每页多少条数据
      currentPage: 1, //当前页码
      formList: [
        {
          label: "题目",
          prop: "telphone",
          placeholder: "请输入手机号",
        },
        {
          label: "题目类型",
          prop: "realname",
          placeholder: "请输入姓名",
        },
        {
          label: "状态",
          prop: "status",
          placeholder: "请选择状态",
          scope: "select",
          options: [
            {
              label: "启用",
              value: 1,
            },
            {
              label: "停用",
              value: 0,
            },
          ],
        },
      ], //搜索
      innerVisiblePaperTopic: false,
      fullscreenChildPaperTopic: false,
      dingForm: {
        type: 1,
        jsonStr: [],
      }, //当前打开窗数据
      radioArrays: [
        {
          label: "单选题",
          value: 1,
        },
        {
          label: "多选题",
          value: 2,
        },
        {
          label: "判断题",
          value: 3,
        },
        {
          label: "案例题",
          value: 4,
        },
      ],
      radioArray: [
        {
          label: "单选题",
          value: 1,
        },
        {
          label: "多选题",
          value: 2,
        },
        {
          label: "判断题",
          value: 3,
        },
      ],
      queryData: this.$route.query,
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    search(v) {
      if (v === undefined) {
        v = {
          status: "0,1",
          pageSize: this.pageSize,
          pageNum: this.currentPage,
        };
      }
      var data = {
        examId: Number(this.queryData.examId) || 0,
        bankSectionId: Number(this.queryData.bankSectionId) || 0,
        status: v.status === undefined ? "0,1" : v.status,
        pageSize: this.pageSize,
        pageNum: this.currentPage,
      };
      this.loading = true;
      this.$api
        .inquirebankquestionList(data)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    back() {
      this.tableData.forEach((item, index) => {
        if (item.questionId === this.dingForm.questionId) {
          if (index === 0) {
            this.$message.warning("这是当前页第一题了");
          } else {
            var datas = this.tableData[index - 1].questionId;
            this.$api.obtainbankquestion(datas).then((res) => {
              res.data.jsonStr = JSON.parse(res.data.jsonStr);
              this.dingForm = res.data;
            });
          }
        }
      });
    },
    next() {
      this.tableData.forEach((item, index) => {
        if (item.questionId === this.dingForm.questionId) {
          if (this.tableData.length - 1 === index) {
            this.$message.warning("这是当前页最后一题了");
          } else {
            var datas = this.tableData[index + 1].questionId;
            this.$api.obtainbankquestion(datas).then((res) => {
              res.data.jsonStr = JSON.parse(res.data.jsonStr);
              this.dingForm = res.data;
            });
          }
        }
      });
    },
    init() {
      this.search();
    },
    del(option) {
      this.$confirm("此操作将删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          option.status = -1;
          var data = option;
          data.parentType = Number(this.queryData.typeId);
          await this.$api.editbankquestion(data);
          this.$message.success("删除成功");
          this.search();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addClick(v, int) {
      if (v === undefined) {
        this.dingForm = {
          jsonStr: [],
        };
        this.statusPop = 1;
      } else {
        var datas = v.questionId;
        this.statusPop = int;
        this.$api.obtainbankquestion(datas).then((res) => {
          res.data.jsonStr = JSON.parse(res.data.jsonStr);
          this.dingForm = res.data;
        });
      }

      this.innerVisiblePaperTopic = true;
    },

    //删除题目
    delTopic() {
      this.$confirm("此操作将删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var data = JSON.parse(JSON.stringify(this.dingForm));
          data.parentType = Number(this.queryData.typeId);
          data.jsonStr = JSON.stringify(this.dingForm.jsonStr);
          data.status = -1;
          await this.$api.editbankquestion(data);
          this.$message.success("删除成功");
          this.search();
          this.innerVisiblePaperTopic = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async submitForm() {
      if (this.statusPop === 1) {
        var data = JSON.parse(JSON.stringify(this.dingForm));
        data.jsonStr = JSON.stringify(this.dingForm.jsonStr);
        data.parentType = Number(this.queryData.typeId);
        data.examId = Number(this.queryData.examId) || 0;
        data.bankSectionId = Number(this.queryData.bankSectionId) || 0;
        await this.$api.addbankquestion(data);
        this.$message.success("添加成功");
        this.search();
        this.innerVisiblePaperTopic = false;
      } else if (this.statusPop === 0) {
        var data = JSON.parse(JSON.stringify(this.dingForm));
        data.jsonStr = JSON.stringify(this.dingForm.jsonStr);
        await this.$api.editbankquestion(data);
        this.$message.success("修改成功");
        this.search();
        this.innerVisiblePaperTopic = false;
      }
    },
    //保存且添加下一题
    async submitAndNext() {
      var data = JSON.parse(JSON.stringify(this.dingForm));
      data.jsonStr = JSON.stringify(this.dingForm.jsonStr);
      data.parentType = Number(this.queryData.typeId);
      data.examId = Number(this.queryData.examId) || 0;
      data.bankSectionId = Number(this.queryData.bankSectionId) || 0;
      await this.$api.addbankquestion(data);
      this.$message.success("添加成功");
      this.search();
      this.dingForm = {
        jsonStr: [],
      };
    },
    //删除案例问题
    delAnliChi(int) {
      this.dingForm.jsonStr.splice(int, 1);
    },
    //删除选项 非案例
    delList(index) {
      this.dingForm.jsonStr.splice(index, 1);
    },
    delListchi(fatherIndex, childrenIndex) {
      console.log(fatherIndex, childrenIndex);
      this.dingForm.jsonStr[fatherIndex].answer.splice(childrenIndex, 1);
    },
    //新增选项 非案例
    addListcontent() {
      var data = { content: "", imgUrl: null, optionAnswer: 0 };
      this.dingForm.jsonStr.push(data);
    },
    //新增选项 案例
    addListcontentchi(int) {
      var data = { content: "", imgUrl: null, optionAnswer: 0 };
      this.dingForm.jsonStr[int].answer.push(data);
    },
    //新增问题 案例
    addListItem() {
      var data = { type: 1, answer: [] };
      this.dingForm.jsonStr.push(data);
    },
    //点击按钮时触发
    actionListRadio(indexs) {
      this.dingForm.jsonStr.forEach((item, index) => {
        if (index === indexs) {
          item.optionAnswer = 1;
        } else {
          item.optionAnswer = 0;
        }
      });
    },
    actionListRadiochi(fatherIndex, childrenIndex) {
      this.dingForm.jsonStr[fatherIndex].answer.forEach((item, index) => {
        if (index === childrenIndex) {
          item.optionAnswer = 1;
        } else {
          item.optionAnswer = 0;
        }
      });
    },
    //判断题 非案例
    actionListPD(v) {
      this.$set(this.dingForm, "answerQuestion", v);
    },
    actionListPDchi(int, v) {
      this.$set(this.dingForm.jsonStr[int], "answerQuestion", v);
    },
    actionListCheck(indexs) {
      this.dingForm.jsonStr.forEach((item, index) => {
        if (index === indexs) {
          if (item.optionAnswer === 1) {
            item.optionAnswer = 0;
          } else {
            item.optionAnswer = 1;
          }
        }
      });
      console.log(this.dingForm);
    },
    //关闭前操作
    closeBefore() {
      if (this.statusPop === 2) {
        this.innerVisiblePaperTopic = false;
      } else {
        this.$confirm("此操作将关闭窗口, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.innerVisiblePaperTopic = false;
          })
          .catch(() => {});
      }
    },
    actionListCheckchi(fatherIndex, childrenIndex) {
      this.dingForm.jsonStr[fatherIndex].answer.forEach((item, index) => {
        if (index === childrenIndex) {
          if (item.optionAnswer === 1) {
            item.optionAnswer = 0;
          } else {
            item.optionAnswer = 1;
          }
        }
      });
    },
    submit() {},
    close() {
      this.$confirm("是否关闭该窗口", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {});
    },
    // 上传图片
    async getImgFiletopic(e) {
      var file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("图片不得大于2MB");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "bmp"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/bmp");
        return;
      }
      const imgUrls = await this.imgUpload(file,2);
      this.$set(this.dingForm, "imgUrl", imgUrls);
    },
    // 上传内容list图片
    async uploadListImg(k, e) {
      var file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("图片不得大于2MB");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "bmp"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/bmp");
        return;
      }
      const imgUrls = await this.imgUpload(file,2);
      this.$set(this.dingForm.jsonStr[k], "imgUrl", imgUrls);
    },
    // 案例上传内容list图片
    async uploadListImgchi(fatherIndex, k, e) {
      var file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("图片不得大于2MB");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "bmp"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/bmp");
        return;
      }
      const imgUrls = await this.imgUpload(file,2);
      this.$set(
        this.dingForm.jsonStr[fatherIndex].answer[k],
        "imgUrl",
        imgUrls
      );
    },
    //案例 子题目图片
    async getImgFiletopics(int, e) {
      var file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("图片不得大于2MB");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "bmp"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/bmp");
        return;
      }
      const imgUrls = await this.imgUpload(file,2);
      this.$set(this.dingForm.jsonStr[int], "imgUrl", imgUrls);
    },
    imgUpload(file,int) {
      var self = this;
      return new Promise((resolve, reject) => {
        this.$upload
          .upload(file,int)
          .then((res) => {
            resolve(res);
          })
          .catch((err) => {
            self.$message.error("图片上传错误");
          });
      });
    },
    handleSizeChange(v) {
      this.pageSize = v;
      this.currentPage = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.currentPage = v;
      this.search();
    },
  },
};
</script>

<style lang="less" scoped>
.marg_play {
  display: flex;
  margin-bottom: 15px;
  .spans {
    text-align: right;
    width: 80px;
  }
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}

.imgBoxTopic {
  width: 150px;
  height: 150px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    background-color: #f9f9f9;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      max-width: 100%;
      max-height: 150px;
      img {
        max-width: 100%;
        max-height: 150px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 8px 0;
        font-size: 20px;
      }
    }
  }
}
.btnSty {
  cursor: pointer;
  padding: 4px 10px;
  background-color: #409eff;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  margin-right: 6px;
}
.contentMore {
  height: 768px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }
}
</style>
