GCLS_Page_Book_Component_NPC/src/components/Adult/inputModules/SentenceModule.vue

<!--  -->
<template>
  <div class="sentenceControl" v-if="curQue">
    <div class="adult-book-input-item">
      <span class="adult-book-lable">序号：</span>
      <el-checkbox v-model="curQue.isShowNumber" style="margin-top: 6px"
        >显示序号</el-checkbox
      >
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">序号类型：</span>
      <el-radio-group v-model="curQue.numberStyle">
        <el-radio label="number">数字</el-radio>
        <el-radio label="en">小写英文字母</el-radio>
        <el-radio label="En">大写英文字母</el-radio>
      </el-radio-group>
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">序号背景：</span>
      <el-checkbox v-model="curQue.numberBg" style="margin-top: 6px"
        >要背景色</el-checkbox
      >
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">拼音位置：</span>
      <el-radio-group v-model="curQue.pyPosition">
        <el-radio :label="'top'">字的上面</el-radio>
        <el-radio :label="'bottom'">字的下面</el-radio>
      </el-radio-group>
    </div>
    <!-- <div class="adult-book-input-item">
      <span class="adult-book-lable">拼音颜色：</span>
      <el-radio-group v-model="curQue.pyColor">
        <el-radio label="black">黑色</el-radio>
        <el-radio label="grey">灰色</el-radio>
        <el-radio label="sub">书的辅助色</el-radio>
      </el-radio-group>
    </div> -->
    <div class="adult-book-input-item">
      <span class="adult-book-lable">分词模式：</span>
      <el-radio-group v-model="curQue.segModel">
        <el-radio :label="'word'">按字分割</el-radio>
        <el-radio :label="'words'">按词分割</el-radio>
      </el-radio-group>
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">排序方式：</span>
      <el-radio-group v-model="curQue.sortType">
        <el-radio label="col">横向</el-radio>
        <el-radio label="row">纵向</el-radio>
      </el-radio-group>
    </div>
    <!-- <div class="adult-book-input-item">
      <span class="adult-book-lable">背景颜色：</span>
      <el-radio-group v-model="curQue.bgColor">
        <el-radio label="grey">灰色</el-radio>
        <el-radio label="white">白色</el-radio>
        <el-radio label="theme">主题色</el-radio>
      </el-radio-group>
    </div> -->
    <div class="adult-book-input-item">
      <span class="adult-book-lable">图片：</span>
      <Upload
        :changeFillId="timuchangeImage"
        :datafileList="curQue.img_list"
        :filleNumber="imgNumber"
        :uploadType="'image'"
      />
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">图片位置：</span>
      <el-radio-group v-model="curQue.img_site">
        <el-radio label="top">上边</el-radio>
        <el-radio label="rightCenter">右边</el-radio>
        <el-radio label="bottom">下边</el-radio>
      </el-radio-group>
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">图片大小：</span>
      <el-radio-group v-model="curQue.img_size">
        <el-radio :label="732">732px</el-radio>
        <el-radio :label="320">320px</el-radio>
        <el-radio :label="240">240px</el-radio>
        <el-radio :label="200">200px</el-radio>
      </el-radio-group>
    </div>
    <Lrc :curQue="curQue" @setCurQue="setCurQue" />

    <div class="option">
      <div
        class="option-item"
        v-for="(item, col) in curQue.option"
        :key="'control' + col"
      >
        <div class="adult-book-input-item">
          <span class="adult-book-lable"
            >第{{ col + 1 }}{{ curQue.sortType == "col" ? "行" : "列" }}：</span
          >
          <img
            @click="deleteColRow(col)"
            class="close"
            src="../../../assets/adult/del-close.png"
            alt=""
          />
        </div>

        <div
          v-for="(items, row) in item"
          :key="'op' + row"
          class="Big-Book-main"
        >
          <div class="adult-book-input-item">
            <span class="adult-book-lable">功能：</span>
            <el-button
              type="primary"
              size="small"
              @click="setConfig(items, col, row)"
              style="margin"
              >功能设置</el-button
            >
            <ul class="check-fn-list">
              <li v-if="items && items.fn_check_list.sent_check">
                {{ items.fn_check_list.sent_check | getFnName(fn_list) }}
              </li>
              <li v-if="items && items.fn_check_list.short_check">
                {{ items.fn_check_list.short_check | getFnName(fn_list) }}
              </li>
              <li v-if="items && items.fn_check_list.long_check">
                {{ items.fn_check_list.long_check | getFnName(fn_list) }}
              </li>
              <li v-if="items && items.fn_check_list.judge_check">
                {{ items.fn_check_list.judge_check | getFnName(fn_list) }}
              </li>
              <li v-if="items && items.fn_check_list.checkbox_check">
                {{ items.fn_check_list.checkbox_check | getFnName(fn_list) }}
              </li>
              <li v-if="items && items.fn_check_list.radio_check">
                {{ items.fn_check_list.radio_check | getFnName(fn_list) }}
              </li>
            </ul>
          </div>
          <div class="adult-book-input-item">
            <span class="adult-book-lable">音频：</span>
            <Upload
              :changeFillId="changeMp3"
              :datafileList="items.mp3_list"
              :filleNumber="mp3Number"
              :uploadType="'mp3'"
              :index="col"
              :index2="row"
            />
            <img
              @click="deleteWOptionOne(col, row)"
              class="close"
              src="../../../assets/adult/del-close.png"
              alt=""
            />
          </div>
          <div
            class="adult-book-input-item"
            v-if="
              curQue.wordTime &&
              curQue.wordTime.length > 0 &&
              curQue.wordTime[items.index]
            "
          >
            <span class="adult-book-lable">字幕时间：</span>
            <div style="display: flex; align-items: center">
              <el-input
                class="adult-book-input"
                style="width: 200px"
                v-model.trim="curQue.wordTime[items.index].bg"
              ></el-input>
              ~
              <el-input
                class="adult-book-input"
                style="width: 200px"
                v-model.trim="curQue.wordTime[items.index].ed"
              ></el-input>
            </div>
          </div>
          <div class="adult-book-input-item">
            <span class="adult-book-lable">图片：</span>
            <Upload
              :changeFillId="changeImg"
              :datafileList="items.img_list"
              :filleNumber="mp3Number"
              :uploadType="'image'"
              :index="col"
              :index2="row"
            />
          </div>
          <div class="adult-book-input-item">
            <span class="adult-book-lable">题干部分：</span>
            <el-button type="primary" @click="setOptionDetail(col, row)"
              >添加句子</el-button
            >
          </div>
          <div
            v-if="items.detail.length > 0"
            style="padding: 10px 0px 10px 86px"
          >
            <ul
              class="option-detail-detail"
              v-for="(dItem, dIndex) in items.detail"
              :key="'ddItem' + col + row + dIndex"
            >
              <li
                v-for="(ddItem, ddIndex) in dItem.detail"
                :key="'ddItem' + col + row + dIndex + ddIndex"
              >
                <span
                  :class="[
                    ddItem.config.wordPadding.indexOf('left') > -1
                      ? 'dleft'
                      : '',
                    ddItem.config.wordPadding.indexOf('right') > -1
                      ? 'dright'
                      : '',
                    !ddItem.sentence ? 'placeholder' : '',
                  ]"
                  >{{ ddItem.sentence }}</span
                >
              </li>
              <i
                class="el-icon-edit"
                @click.prevent="
                  setOptionDetail(col, row, 'edit', dItem, dIndex)
                "
                style="margin-left: 14px"
              ></i>
              <i
                class="el-icon-delete"
                @click.prevent="deleteOptionDetail(items.detail, dIndex)"
                style="margin-left: 14px"
              ></i>
            </ul>
          </div>

          <div class="adult-book-input-item">
            <span class="adult-book-lable">例子：</span>
            <el-radio-group v-model="items.Isexample">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </div>

          <div class="correct-box">
            <div
              style="width: 600px"
              v-if="
                items.fn_check_list.sent_check &&
                (items.fn_check_list.sent_check ==
                  'sentence_complete_input_chs' ||
                  items.fn_check_list.sent_check == 'sentence_long_input_chs')
              "
            >
              <div style="padding-top: 10px">
                <span style="display: block; margin-bottom: 10px"
                  >句子填空答案：<b style="font-size: 12px"
                    >请输入本题答案，答案用换行符隔开；如果有的输入框没有答案，答案请输入??</b
                  ></span
                >
                <el-input
                  class="adult-book-input"
                  type="textarea"
                  :autosize="{ minRows: 2 }"
                  v-model="items.correct.completeInput"
                  placeholder="请输入句子填空答案"
                  @blur="onBlur"
                  maxlength="200"
                ></el-input>
              </div>
            </div>
            <div
              class="adult-book-input-item"
              v-if="
                items.fn_check_list.short_check &&
                items.fn_check_list.short_check != 'sentence_double_input_chs'
              "
            >
              <span class="adult-book-lable">短输入答案：</span>
              <el-input
                v-model="items.correct.shortInput"
                @blur="onBlur(items.correct, 'shortInput')"
                placeholder="请输入短输入答案"
              ></el-input>
            </div>
            <div
              class="adult-book-input-item"
              v-if="items.fn_check_list.long_check"
            >
              <span class="adult-book-lable">长输入答案：</span>
              <el-input
                type="textarea"
                @blur="onBlur(items.correct, 'longInput')"
                :autosize="{ minRows: 2 }"
                v-model="items.correct.longInput"
                placeholder="请输入答案"
              ></el-input>
            </div>
            <div
              class="adult-book-input-item"
              v-if="
                items.fn_check_list.short_check &&
                items.fn_check_list.short_check == 'sentence_double_input_chs'
              "
            >
              <span class="adult-book-lable">多输入答案：</span>
              <div>
                <div
                  class="adult-book-input-item"
                  v-for="(cdItem, cdIndex) in items.correct.doubleInput"
                  :key="'cd+' + col + row + cdIndex"
                >
                  <el-input
                    v-model="cdItem.notice"
                    @blur="onBlur(cdItem, 'notice')"
                    placeholder="提示语"
                    style="margin-right: 10px; width: 120px"
                  ></el-input>
                  <el-input
                    v-model="cdItem.correct"
                    @blur="onBlur(cdItem, 'correct')"
                    placeholder="请输入答案"
                  ></el-input>
                  <i
                    class="el-icon-delete"
                    @click="deleteCD(items.correct.doubleInput, cdIndex)"
                    style="margin: 14px 0 0 10px; cursor: pointer"
                  ></i>
                </div>
                <i
                  class="el-icon-circle-plus"
                  @click="plusCD(items.correct.doubleInput)"
                  style="cursor: pointer"
                ></i>
              </div>
            </div>
            <div
              class="adult-book-input-item"
              v-if="items.fn_check_list.judge_check"
            >
              <span class="adult-book-lable">判断答案：</span>
              <el-radio-group v-model="items.correct.judge">
                <el-radio label="true">正确</el-radio>
                <el-radio label="false">错误</el-radio>
                <el-radio label="unso" v-if="items.judge_isNo">无解</el-radio>
              </el-radio-group>
              <el-checkbox-group
                v-model="items.judge_isNo"
                style="margin-left: 20px; margin-top: 5px"
              >
                <el-checkbox :label="true">预览显示无解按钮</el-checkbox>
              </el-checkbox-group>
            </div>
            <div
              class="adult-book-input-item"
              v-if="items.fn_check_list.checkbox_check"
            >
              <span class="adult-book-lable">多选选项：</span>
              <div class="select-option-list">
                <div class="adult-book-input-item">
                  <el-button
                    type="primary"
                    size="mini"
                    plain
                    @click="setSelectOption('checkbox', col, row, 'add')"
                    style="margin-right: 10px"
                    >添加选项</el-button
                  >
                  <el-select
                    v-model="items.checkboxNumber"
                    size="mini"
                    placeholder="请选择每行选项最大数量"
                  >
                    <el-option
                      v-for="(item, i) in numberList.arr"
                      :key="i"
                      :label="item.value"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
                <template v-if="items.checkbox_option.length > 0">
                  <el-checkbox-group v-model="items.correct.checkbox">
                    <el-checkbox
                      v-for="(bItem, bIndex) in items.checkbox_option"
                      :key="'box' + col + row + bIndex"
                      :label="bIndex"
                    >
                      {{ bItem.number }} {{ bItem.detail.sentence }}
                      <i
                        class="el-icon-edit"
                        @click.prevent="
                          setSelectOption(
                            'checkbox',
                            col,
                            row,
                            'edit',
                            bItem,
                            bIndex
                          )
                        "
                        style="margin-left: 14px"
                      ></i>
                      <i
                        class="el-icon-delete"
                        @click.prevent="
                          deleteSelectOption(items.checkbox_option, bIndex)
                        "
                        style="margin-left: 14px"
                      ></i
                    ></el-checkbox>
                  </el-checkbox-group>
                </template>
              </div>
            </div>
            <div
              class="adult-book-input-item"
              v-if="items.fn_check_list.radio_check"
            >
              <span class="adult-book-lable">单选选项：</span>
              <div class="select-option-list">
                <div class="adult-book-input-item">
                  <el-button
                    type="primary"
                    size="mini"
                    plain
                    @click="setSelectOption('radio', col, row, 'add')"
                    style="margin-right: 10px"
                    >添加选项</el-button
                  >

                  <el-select
                    v-model="items.radioNumber"
                    size="mini"
                    placeholder="请选择每行选项最大数量"
                  >
                    <el-option
                      v-for="(item, i) in numberList.arr"
                      :key="i"
                      :label="item.value"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
                <template v-if="items.radio_option.length > 0">
                  <el-radio-group v-model="items.correct.radio">
                    <el-radio
                      v-for="(bItem, bIndex) in items.radio_option"
                      :key="'box' + col + row + bIndex"
                      :label="bIndex"
                    >
                      {{ bItem.number }} {{ bItem.detail.sentence }}
                      <i
                        class="el-icon-edit"
                        @click.prevent="
                          setSelectOption(
                            'radio',
                            col,
                            row,
                            'edit',
                            bItem,
                            bIndex
                          )
                        "
                        style="margin-left: 14px"
                      ></i>
                      <i
                        class="el-icon-delete"
                        @click.prevent="
                          deleteSelectOption(items.radio_option, bIndex)
                        "
                        style="margin-left: 14px"
                      ></i
                    ></el-radio>
                  </el-radio-group>
                </template>
              </div>
            </div>
            <div
              class="adult-book-input-item"
              v-if="items.fn_check_list.radio_check.indexOf('sentence_radio_row_chs')>-1||items.fn_check_list.checkbox_check.indexOf('sentence_checkbox_row_chs')>-1"
            >
              <span class="adult-book-lable">选项对齐：</span>
              <el-radio-group v-model="items.optionAlign">
                <el-radio label="left">左对齐</el-radio>
                <el-radio label="right">右对齐</el-radio>
              </el-radio-group>
            </div>
          </div>
          <el-button @click="addWordcard(items.wordcard)"
            >添加词汇卡片</el-button
          >
        </div>
        <div class="addoption" @click="addWOption(col)">添加一题</div>
      </div>
      <div class="addoption" @click="addColRow">
        添加{{ curQue.sortType == "col" ? "行" : "列" }}
      </div>
    </div>
    <el-dialog title="功能设置" :visible.sync="configVisible" width="60%">
      <FnConfig :items="items" :config="queConfig" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="configVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveConfig">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="设置选项"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      append-to-body
      :visible.sync="checkboxVisible"
      width="40%"
    >
      <selectOption
        :item="selectItem"
        :segModel="curQue.segModel"
        v-if="checkboxVisible"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkboxVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSelectOption">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加句子"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      append-to-body
      :visible.sync="addStemVisible"
      width="50%"
    >
      <SentenceSegTemp :detail="optionItemDetail" :segModel="curQue.segModel" :type="type" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="addStemVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOptionDetail">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加词汇卡片"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      append-to-body
      :visible.sync="wordCardVisible"
      width="40%"
      top="10px"
    >
      <template v-if="curWordcard">
        <Wordcard :curQue="curWordcard" />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="wordCardVisible = false">取 消</el-button>
        <el-button type="primary" @click="wordCardVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Upload from "../common/Upload";
import Lrc from "../common/Lrc";
import FnConfig from "../common/FnConfig";
import selectOption from "../common/selectOption";
import SentenceSegwordChs from "../common/SentenceSegwordChs";
import SentenceSegTemp from "../common/SentenceSegTemp";
import Wordcard from "../inputModules/DialogueAnswerChs/Wordcard.vue";

export default {
  components: {
    Upload,
    Lrc,
    FnConfig,
    selectOption,
    SentenceSegwordChs,
    SentenceSegTemp,
    Wordcard,
  },
  props: ["curQue", "changeCurQue", "tmIndex", "type"],
  filters: {
    getFnName(type, fn_list) {
      let name = "";
      let arr = fn_list.filter((item) => item.type == type);
      if (arr.length > 0) {
        name = arr[0].name;
      }
      return name;
    },
  },
  data() {
    return {
      numberList: {
        type: "number",
        name: "每行几个",
        arr: [
          {
            id: 1,
            value: 1,
          },
          {
            id: 2,
            value: 2,
          },
          {
            id: 3,
            value: 3,
          },
          {
            id: 4,
            value: 4,
          },
        ],
      },
      wordCardVisible: false,
      curWordcard: null,
      optionItemDetail: null,
      addStemVisible: false,
      datailIndex: 0,
      detailSelectType: "",
      checkList: [],
      mp3Number: 1,
      imgNumber: 1,
      configVisible: false,
      items: null,
      row: 0,
      col: 0,
      checkboxVisible: false,
      selectItem: null,
      optionEditIndex: 0,
      optionType: "",
      fn_list: [
        {
          type: "sentence_view_chs",
          name: "句子预览（______不会转成输入框）",
          isFn: false,
        },
        {
          type: "sentence_complete_input_chs",
          name: "补全句子",
          isFn: false,
        },
        {
          type: "sentence_long_input_chs",
          name: "句子填空（长输入）",
          isFn: true,
        },
        {
          type: "sentence_double_input_chs",
          name: "短输入或多输入",
          isFn: false,
        },
        {
          type: "sentence_judge_col_chs",
          name: "判断（题干和选项横排）",
          isFn: false,
        },
        {
          type: "sentence_judge_row_chs",
          name: "判断（题干和选项竖排）",
          isFn: false,
        },
        {
          type: "sentence_checkbox_col_chs",
          name: "多选（题干和选项横排）",
          isFn: false,
        },
        {
          type: "sentence_checkbox_row_chs",
          name: "多选（题干和选项竖排）",
          isFn: false,
        },
        {
          type: "sentence_radio_col_chs",
          name: "单选（题干和选项横排）",
          isFn: false,
        },
        {
          type: "sentence_radio_row_chs",
          name: "单选（题干和选项竖排）",
          isFn: false,
        },
        {
          type: "sentence_record_mini_chs",
          name: "录音控件-mini",
          isFn: false,
        },
        {
          type: "sentence_record_normal_chs",
          name: "录音控件-normal",
          isFn: false,
        },
        {
          type: "sentence_record_pro_chs",
          name: "录音控件-pro",
          isFn: false,
        },
        {
          type: "sentence_record_promax_chs",
          name: "录音控件-promax",
          isFn: false,
        },
      ],

      data_structure: {
        type: "sentence_set_chs",
        name: "句子总配置",
        title: "",
        mp3_list: [],
        lrc_list: [],
        img_list: [],
        img_site: "rightCenter",
        img_size: 240, // 图片大小
        taskId: "",
        wordTime: [],
        detail: [],
        sentenceType: "chinese",
        isShowNumber: true, //是否显示序号
        numberStyle: "number",
        numberBg: false, //是否跟书籍主题色一致
        pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
        pyColor: "black",
        segModel: "words", //word 按字分割；words 按词分割
        sortType: "col", //col横；row:纵
        bgColor: "grey", //背景颜色
        option: [
          [
            {
              index: 0,
              mp3_list: [],
              img_list: [],
              Isexample: false,
              font: "",
              detail: [],
              radioNumber: 1,
              checkboxNumber: 1,
              checkbox_option: [],
              radio_option: [],
              judge_isNo: false,
              correct: {
                completeInput: "",
                shortInput: "",
                longInput: "",
                doubleInput: [
                  {
                    notice: "",
                    correct: "",
                  },
                ],
                judge: "",
                checkbox: [],
                radio: "",
              },
              fn_check_list: {
                sent_check: "sentence_complete_input_chs",
                style_check: "",
                short_check: "",
                is_short_auto: false, //短输入宽度是否自适应
                long_check: "",
                judge_check: "",
                checkbox_check: "",
                radio_check: "",
                record_check: "",
              },
              optionAlign: 'left',
              wordcard: {
                //词汇卡片配置
                pyPosition: "top",
                wordcardList: [
                  [
                    {
                      chs: "",
                      pinyin: "",
                    },
                  ],
                ],
              },
            },
          ],
        ],
      },
      queConfig: {
        fn_sent_list: [
          {
            type: "sentence_view_chs",
            name: "句子预览（______不会转成输入框）",
            isFn: true,
          },
          {
            type: "sentence_complete_input_chs",
            name: "句子填空 （补全句子）",
            isFn: true,
          },
          {
            type: "sentence_long_input_chs",
            name: "句子填空（长输入）",
            isFn: true,
          },
        ],
        fn_style_list: [
          {
            type: "sentence_input_chs",
            name: "单行文本",
            isFn: false,
          },
          {
            type: "sentence_textarea_chs",
            name: "多行文本",
            isFn: false,
          },
        ],
        fn_short_list: [
          {
            type: "sentence_double_input_chs",
            name: "短输入或多输入（题干和选项横排）",
            isFn: false,
          },
        ],
        fn_judge_list: [
          {
            type: "sentence_judge_col_chs",
            name: "判断（题干和选项横排）",
            isFn: false,
          },
          {
            type: "sentence_judge_row_chs",
            name: "判断（题干和选项竖排）",
            isFn: false,
          },
        ],
        fn_checkbox_list: [
          {
            type: "sentence_checkbox_col_chs",
            name: "多选（题干和选项横排）",
            isFn: false,
          },
          {
            type: "sentence_checkbox_row_chs",
            name: "多选（题干和选项竖排）",
            isFn: false,
          },
        ],
        fn_radio_list: [
          {
            type: "sentence_radio_col_chs",
            name: "单选（题干和选项横排）",
            isFn: false,
          },
          {
            type: "sentence_radio_row_chs",
            name: "单选（题干和选项竖排）",
            isFn: false,
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : "";
    },
    //功能设置
    setConfig(items, col, row) {
      this.configVisible = true;
      this.row = row;
      this.col = col;
      this.items = JSON.parse(JSON.stringify(items));
    },
    saveConfig() {
      this.configVisible = false;
      this.curQue.option[this.col][this.row].fn_check_list =
        this.items.fn_check_list;
    },
    //   添加行或者列
    addColRow() {
      let obj = JSON.parse(JSON.stringify(this.data_structure.option[0]));
      this.curQue.option.push(obj);
      this.curQue.option = this.changeoptionIndex(this.curQue.option);
    },
    // 删除行或者列
    deleteColRow(index) {
        this.$confirm("确定要删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            if (this.curQue.option.length <= 1) {
                this.$message.warning(
                `至少保留1${this.curQue.sortType == "col" ? "行" : "列"}`
                );
                return;
            }
            this.curQue.option.splice(index, 1);
            this.curQue.option = this.changeoptionIndex(this.curQue.option);
        })
    },
    // 新增题
    addWOption(col) {
      let obj = JSON.parse(JSON.stringify(this.data_structure.option[0][0]));
      let opleg = this.curQue.option[col].length - 1;
      let list = this.curQue.option[col][opleg].fn_check_list;
      obj.fn_check_list = list;
      this.curQue.option[col].push(obj);
      this.curQue.option = this.changeoptionIndex(this.curQue.option);
    },
    // 删除题
    deleteWOptionOne(col, row) {
        this.$confirm("确定要删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            if (this.curQue.option[col].length <= 1) {
                this.$message.warning("至少要保留1题");
                return;
            }
            this.curQue.option[col].splice(row, 1);
            this.curQue.option = this.changeoptionIndex(this.curQue.option);
        })
    },
    // 给二维的数组每个添加索引
    changeoptionIndex(data) {
      let index = 0;
      data.forEach((item) => {
        item.forEach((items) => {
          items.index = index;
          index++;
        });
      });
      return data;
    },
    changeMp3(fileList, file, index, index2) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
            media_duration: item.response.file_info_list[0].media_duration, //音频时长
          };
          articleImgRes.push(obj);
        }
      });
      this.curQue.option[index][index2].mp3_list = JSON.parse(
        JSON.stringify(articleImgRes)
      );
    },
    changeImg(fileList, file, index, index2) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
            media_duration: item.response.file_info_list[0].media_duration, //音频时长
          };
          articleImgRes.push(obj);
        }
      });
      this.curQue.option[index][index2].img_list = JSON.parse(
        JSON.stringify(articleImgRes)
      );
    },
    cancleSelected(key) {
      if (key) {
        key = "";
      }
    },

    // 更多配置选择
    handleCheckedFnChange(value) {
      let fn_list = JSON.parse(JSON.stringify(this.curQue.fn_list));
      this.curQue.fn_list = fn_list.map((item) => {
        if (value.indexOf(item.name) > -1) {
          item.isFn = true;
        } else {
          item.isFn = false;
          let option = JSON.parse(JSON.stringify(this.data_structure.option));
          let optionItem = option[0];
          this.curQue.option.forEach((it) => {
            it.correct = optionItem.correct;
          });
        }
        return item;
      });
    },
    judgeFnList(type) {
      let bool = false;
      this.curQue.fn_list.forEach((item) => {
        if (type == item.type && item.isFn) {
          bool = true;
        }
      });
      return bool;
    },
    judgeIsAnswer() {
      let arr = [];
      arr = this.curQue.fn_list.filter((item) => item.isFn);
      return arr.length > 0;
    },
    setCurQue(key, data) {
      this.curQue[key] = JSON.parse(JSON.stringify(data));
      this.$forceUpdate();
    },
    setSelectOption(isSelectType, col, row, type, bItem, optionEditIndex) {
      this.checkboxVisible = true;
      if (type == "edit") {
        this.selectItem = JSON.parse(JSON.stringify(bItem));
        this.optionEditIndex = optionEditIndex;
      } else {
        let obj = {
          number: "",
          detail: {
            sentence: "", //句子
            sentenceArr: [],
            segList: [], //分词结果
            seg_words: "",
            wordsList: [],
            hengList: [],
          },
        };

        this.selectItem = JSON.parse(JSON.stringify(obj));
      }

      this.row = row;
      this.col = col;
      this.optionType = type;
      this.isSelectType = isSelectType;
    },
    saveSelectOption() {
      if (this.isSelectType == "checkbox") {
        this.saveCheckboxOption();
      } else if (this.isSelectType == "radio") {
        this.saveRadioOption();
      }
    },
    saveCheckboxOption() {
      let _this = this;
      _this.checkboxVisible = false;
      let selectItem = JSON.parse(JSON.stringify(_this.selectItem));
      if (this.optionType == "add") {
        _this.curQue.option[_this.col][_this.row].checkbox_option.push(
          selectItem
        );
      } else {
        _this.curQue.option[_this.col][_this.row].checkbox_option[
          this.optionEditIndex
        ] = selectItem;
      }
    },
    saveRadioOption() {
      let _this = this;
      _this.checkboxVisible = false;
      let selectItem = JSON.parse(JSON.stringify(_this.selectItem));
      if (this.optionType == "add") {
        _this.curQue.option[_this.col][_this.row].radio_option.push(selectItem);
      } else {
        _this.curQue.option[_this.col][_this.row].radio_option[
          this.optionEditIndex
        ] = selectItem;
      }
    },
    deleteSelectOption(arr, index) {
        this.$confirm("确定要删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            arr.splice(index, 1);
        })
    },
    //多输入的添加
    plusCD(arr) {
      let obj = {
        notice: "",
        correct: "",
      };
      arr.push(JSON.parse(JSON.stringify(obj)));
    },
    //多输入的删除
    deleteCD(arr, index) {
        this.$confirm("确定要删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            arr.splice(index, 1);
        })
    },
    //添加句子
    setOptionDetail(col, row, type, dItem, dIndex) {
      let _this = this;
      _this.addStemVisible = true;
      if (type == "edit") {
        this.optionItemDetail = JSON.parse(JSON.stringify(dItem));
      } else {
        let obj = {
          hengLeg: -1,
          detail: [
            {
              pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
              sentence: "", //句子
              segList: [], //分词结果
              seg_words: "",
              wordsList: [],
              hengList: [],
              config: {
                fontSize: "16px",
                fontColor: "#000",
                fontFamily: "FZJCGFKTK",
                wordPadding: [],
              },
            },
          ],
          fn_check_list: {
            record_check: "",
          },
        };
        this.optionItemDetail = JSON.parse(JSON.stringify(obj));
      }
      this.row = row;
      this.col = col;
      this.datailIndex = dIndex;
      this.detailSelectType = type;
    },
    //删除句子
    deleteOptionDetail(detail, dIndex) {
        this.$confirm("确定要删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            detail.splice(dIndex, 1);
        })
    },
    //保存句子
    saveOptionDetail() {
      let _this = this;
      _this.addStemVisible = false;
      if (_this.detailSelectType == "edit") {
        let optionItem = JSON.parse(JSON.stringify(_this.optionItemDetail));
        _this.curQue.option[_this.col][_this.row].detail[_this.datailIndex] =
          optionItem;
      } else {
        let optionItem = JSON.parse(JSON.stringify(_this.optionItemDetail));
        _this.curQue.option[_this.col][_this.row].detail.push(optionItem);
      }
    },
    timuchangeImage(fileList, items) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
          };
          articleImgRes.push(obj);
        }
      });
      this.curQue.img_list = JSON.parse(JSON.stringify(articleImgRes));
    },
    addWordcard(wordcard) {
      this.wordCardVisible = true;
      this.curWordcard = wordcard;
    },
    initCurQueData() {
      let res_data = JSON.parse(JSON.stringify(this.data_structure));
      this.changeCurQue(res_data);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    if (!_this.curQue) {
      _this.initCurQueData();
    } else {
      // 如果保存过需要将选中的功能设置选中
      // _this.curQue.fn_list.forEach((item) => {
      //   if (item.isFn) {
      //     _this.checkList.push(item.name);
      //   }
      // });
      _this.curQue.option.forEach(item=>{
        item.forEach(items=>{
            if(!items.hasOwnProperty("optionAlign")){
                _this.$set(items, "optionAlign", 'left');
            }
        })
      })
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.option-item {
  width: 100%;
  box-sizing: border-box;
  border: 1px rgb(173, 173, 173) dotted;
  background: rgb(241, 241, 241);
  padding: 16px;
  margin-bottom: 10px;
}
.correct-box {
  width: 500px;
  > div {
    margin-bottom: 10px;
  }
  .adult-book-input-item {
    .adult-book-lable {
      width: 105px;
    }
  }
}
.Big-Book-main {
  border-bottom: 1px rgb(173, 173, 173) dotted;
}
.check-fn-list {
  display: flex;
  > li {
    margin-left: 10px;
    line-height: 32px;
    color: #999;
  }
}
.select-option-list {
  .el-checkbox,
  .el-radio {
    display: block;
    margin-bottom: 10px;
  }
}
.adult-book-input-sty .el-radio-group {
  padding: 8px 0;
  display: block;
}
.option-detail-detail {
  clear: both;
  overflow: hidden;
  margin-bottom: 10px;
  > li {
    float: left;
    > span {
      float: left;
      &.dleft {
        padding-left: 4px;
        padding-right: 4px;
      }
    }
  }
  > i {
    float: left;
  }
}
.placeholder {
  width: 8px;
  height: 18px;
}
</style>