GCLS_Page_Book_Component_NPC/src/components/Adult/inputModules/SentenceMulModule.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.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.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>
    <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="(itemop, rowop) in item"
          :key="'op' + rowop"
          class="Big-Book-main"
        >
          <div class="adult-book-input-item">
            <span class="adult-book-lable" style="width: 120px;text-align:left"
                >第{{ col + 1 }}{{ curQue.sortType == "col" ? "行" : "列" }} 第 {{rowop+1}} 题：</span
            >
            <img
                @click="deleteWOptionOne(col, rowop)"
                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[itemop.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[itemop.index].bg"
              ></el-input>
              ~
              <el-input
                class="adult-book-input"
                style="width: 200px"
                v-model.trim="curQue.wordTime[itemop.index].ed"
              ></el-input>
            </div>
          </div>
          <div class="adult-book-input-item">
            <span class="adult-book-lable">题干序号：</span>
            <el-input
                class="adult-book-input"
                style="width: 200px"
                v-model.trim="itemop.numbertotal"
              ></el-input>
              <el-radio-group
                    v-model="itemop.numberfontSize"
                >
                    <el-radio label="12px">12px</el-radio>
                    <el-radio label="16px">16px</el-radio>
                    <el-radio label="20px">20px</el-radio>
                    <el-radio label="24px">24px</el-radio>
                    <el-radio label="28px">28px</el-radio>
                </el-radio-group>
          </div>
          <div class="adult-book-input-item">
            <span class="adult-book-lable">总题干：</span>
            <el-button type="primary" @click="setOptionDetail(col, rowop)"
              >添加句子</el-button
            >
          </div>
          <div
            v-if="itemop.detail.length > 0"
            style="padding: 10px 0px 10px 86px"
          >
            <ul
              class="option-detail-detail"
              v-for="(dItem, dIndex) in itemop.detail"
              :key="'ddItem' + col + rowop + dIndex"
            >
              <li
                v-for="(ddItem, ddIndex) in dItem.detail"
                :key="'ddItem' + col + rowop + 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, rowop, '', 'edit', dItem, dIndex)
                "
                style="margin-left: 14px"
              ></i>
              <i
                class="el-icon-delete"
                @click.prevent="deleteOptionDetail(itemop.detail, dIndex)"
                style="margin-left: 14px"
              ></i>
            </ul>
          </div>
          
          <div class="options-item" v-for="(items, row) in itemop.options"
          :key="'ops' + row">
            <div class="adult-book-input-item">
                <span class="adult-book-lable" style="width: 200px;text-align:left"
                    >第{{ col + 1 }}{{ curQue.sortType == "col" ? "行" : "列" }} 第 {{rowop+1}} 题  第 {{row+1}} 小题：</span
                >
                <img
                    @click="deleteWOptionsOne(col, rowop, row)"
                    class="close"
                    src="../../../assets/adult/del-close.png"
                    alt=""
                />
            </div>
            <div class="adult-book-input-item">
                <span class="adult-book-lable">功能：</span>
                <el-button
                type="primary"
                size="small"
                @click="setConfig(items, col, rowop, 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>
                <el-input
                    class="adult-book-input"
                    style="width: 200px"
                    v-model.trim="items.numbertotal"
                ></el-input>
            </div> -->
            <div class="adult-book-input-item">
                <span class="adult-book-lable">小题干：</span>
                <el-button type="primary" @click="setOptionDetail(col, rowop, 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, rowop, 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 + rowop + 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, rowop, 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 + rowop + row + bIndex"
                        :label="bIndex"
                        >
                        {{ bItem.number }} {{ bItem.detail.sentence }}
                        <i
                            class="el-icon-edit"
                            @click.prevent="
                            setSelectOption(
                                'checkbox',
                                col,
                                rowop,
                                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, rowop, 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 + rowop + row + bIndex"
                        :label="bIndex"
                        >
                        {{ bItem.number }} {{ bItem.detail.sentence }}
                        <i
                            class="el-icon-edit"
                            @click.prevent="
                            setSelectOption(
                                'radio',
                                col,
                                rowop,
                                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>
          </div>
          <div class="addoption" @click="addWOptions(col,rowop)">添加小题</div>
        </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,
      rows: '',
      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_single_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: [],
              numbertotal: '', // 总题干序号
              numberfontSize: '16px', // 序号大小
              options:[
                {
                    mp3_list: [],
                    img_list: [],
                    Isexample: false,
                    font: "",
                    numbertotal: '', // 小题干序号
                    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, rows) {
      this.configVisible = true;
      this.row = row;
      this.col = col;
      this.rows = rows
      this.items = JSON.parse(JSON.stringify(items));
    },
    saveConfig() {
      this.configVisible = false;
      this.curQue.option[this.col][this.row].options[this.rows].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]));
      this.curQue.option[col].push(obj);
      this.curQue.option = this.changeoptionIndex(this.curQue.option);
      console.log(this.curQue.option)
    },
    // 新增小题
    addWOptions(col,cols) {
      let obj = JSON.parse(JSON.stringify(this.data_structure.option[0][0].options[0]));
      let opleg = this.curQue.option[col][cols].options.length - 1;
      let list = this.curQue.option[col][cols].options[opleg].fn_check_list;
      obj.fn_check_list = list;
      this.curQue.option[col][cols].options.push(obj);
      this.curQue.option = this.changeoptionIndex(this.curQue.option);
      console.log(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);
        })
    },
    // 删除小题
    deleteWOptionsOne(col, row, rows) {
        this.$confirm("确定要删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            if (this.curQue.option[col][row].options.length <= 1) {
                this.$message.warning("至少要保留1题");
                return;
            }
            this.curQue.option[col][row].options.splice(rows, 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, rowop, 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.rows = row;
      this.col = col;
      this.row = rowop
      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].options[_this.rows].checkbox_option.push(
          selectItem
        );
      } else {
        _this.curQue.option[_this.col][_this.row].options[_this.rows].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].options[_this.rows].radio_option.push(selectItem);
      } else {
        _this.curQue.option[_this.col][_this.row].options[_this.rows].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, rowop, 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,
          textindent: false, // 缩进
          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 = rowop;
      this.col = col;
      this.rows = row
      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.rows||_this.rows===0){
        if (_this.detailSelectType == "edit") {
            let optionItem = JSON.parse(JSON.stringify(_this.optionItemDetail));
            _this.curQue.option[_this.col][_this.row].options[_this.rows].detail[_this.datailIndex] =
            optionItem;
        } else {
            let optionItem = JSON.parse(JSON.stringify(_this.optionItemDetail));
            _this.curQue.option[_this.col][_this.row].options[_this.rows].detail.push(optionItem);
        }
      }else{
        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 {
    }
  },
  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;
      }
      &.dright{
        padding-right: 4px;
      }
    }
  }
  > i {
    float: left;
  }
}
.placeholder {
  width: 8px;
  height: 18px;
}
</style>