GCLS_Page_Book_Component_NPC/src/views/adultInput.vue

<!--  -->
<template>
  <div v-loading="loading" class="Big-Book-container adult-book-input-sty">
    <Header />
    <div class="Big-Book-content">
      <div class="content-tree">
        <Catelog
          :book-id="bookId"
          :book-level="bookLevel"
          :book-node-index="bookIndex"
          :change-id="changeId"
          :change-tree-data="changeTreeData"
          :current-tree-i-d="currentTreeID"
          :emptyQustion="emptyQustion"
        />
      </div>
      <div v-if="currentTreeID" class="Book-content">
        <div class="Big-Book-save Big-Book-input-save">
          <el-button type="primary" @click="onSave">保 存</el-button>
          <el-button type="danger" plain @click="onPreview">预 览</el-button>
        </div>
        <!-- <el-tabs
          v-model="editableTabsValue"
          type="card"
          editable
          @edit="handleTabsEdit"
          @tab-click="tabClick"
        >
          <el-tab-pane
            v-for="(item, index) in question_list"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          > -->
        <div
          v-for="(fc, fcIndex) in question_list.detailList"
          :key="'fc' + fcIndex"
          style="
            position: relative;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px dotted #ccc;
          "
        >
          <SentenceSegwordChs :cur-que="fc.detail" type="adultinput" />
          <img
            style="position: absolute; right: 20px; top: 2px"
            class="close"
            src="../assets/adult/del-close.png"
            alt=""
            @click="deleteDetail(fcIndex)"
          />
          <div class="Big-Book-top" style="margin: 10px 0">
            <span>英文</span>
            <el-input
              v-model="fc.en"
              style="width: 80%"
              type="textarea"
              autosize
              placeholder="请输入英文"
              maxlength="200"
              show-word-limit
              @blur="onBlur(fc, 'en')"
            />
          </div>
        </div>
        <div class="addoption" @click="addDetail">添加分句</div>
        <div
          v-for="(kt, ktIndex) in question_list.classTopic"
          :key="'kt' + ktIndex"
          style="
            position: relative;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px dotted #ccc;
          "
        >
          <div class="Big-Book-top" style="margin: 10px 0">
            <span>课题</span>
            <el-input
              v-model="kt.con"
              style="width: 80%"
              type="textarea"
              autosize
              placeholder="请输入课题"
              maxlength="200"
              show-word-limit
              @blur="onBlur(kt, 'con')"
            />
            <img
              style="position: absolute; right: 20px; top: 2px"
              class="close"
              src="../assets/adult/del-close.png"
              alt=""
              @click="deleteClassTopic(ktIndex)"
            />
          </div>
          <div class="Big-Book-top" style="margin: 10px 0">
            <span>字体</span>
            <el-radio-group v-model="kt.font">
              <el-radio label="cn">中文字体</el-radio>
              <el-radio label="en">英文字体</el-radio>
              <el-radio label="pinyin">拼音字体</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="addoption" @click="addClassTopic">添加课题</div>
        <div class="createTable">
          <el-input
            v-model="row"
            maxlength="2"
            style="width: 50px"
            type="text"
            @input="rowLine('row')"
          />*<el-input
            v-model="line"
            style="width: 50px"
            type="text"
            maxlength="2"
            @input="rowLine('line')"
          />
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="createTable"
            >增加题</el-button
          >
        </div>
        <div
          v-for="(topic, toindex) in question_list.cur_fn_data"
          :key="'topic' + toindex"
        >
          <div class="topTitle">
            <div style="display: flex; align-items: center">
              <p>第{{ toindex + 1 }}题</p>
              <el-checkbox
                v-model="groupIndexList"
                :label="toindex"
                style="margin: 0 10px"
                ><br /></el-checkbox
              ><span>{{ topic.group_name }}</span>
              <el-button size="small" @click="deleteElement(toindex)"
                >删除</el-button
            >

            <el-button
                type="primary"
                size="small"
                icon="el-icon-top"
                @click="moveElement(topic, toindex, 'up')"
                >上移</el-button
            >
            <el-button
                type="primary"
                size="small"
                icon="el-icon-bottom"
                @click="moveElement(topic, toindex, 'down')"
                >下移</el-button
            >
            </div>
            <span @click="handleChangeTab(topic)">
              {{ topic.contentShow ? "收起" : "展开" }}
              <img
                v-if="topic.contentShow"
                src="../assets/NPC/down-black.png"
                alt=""
              />
              <img v-else src="../assets/NPC/up-black.png" alt="" />
            </span>
          </div>
          <el-collapse-transition>
            <div v-show="topic.contentShow" class="collapse-box">
              <div class="adult-book-input-item">
                <span class="adult-book-lable">序号：</span>
                <el-input
                  v-model="topic.number"
                  type="textarea"
                  :autosize="{ minRows: 2 }"
                  placeholder="请输入序号"
                  maxlength="200"
                  show-word-limit
                  @blur="onBlur(topic, 'number')"
                />
              </div>
              <div class="adult-book-input-item">
                <span class="adult-book-lable">正标题：</span>
                <el-input
                  v-model="topic.z_title"
                  type="textarea"
                  :autosize="{ minRows: 2 }"
                  placeholder="请输入正标题"
                  maxlength="500"
                  show-word-limit
                  @blur="onBlur(topic, 'z_title')"
                />
              </div>
              <div class="adult-book-input-item">
                <span class="adult-book-lable">副标题：</span>
                <el-input
                  v-model="topic.f_title"
                  :autosize="{ minRows: 2 }"
                  type="textarea"
                  placeholder="请输入副标题"
                  maxlength="500"
                  show-word-limit
                  @blur="onBlur(topic, 'f_title')"
                />
              </div>
              <div class="adult-book-input-item">
                <span class="adult-book-lable">标题：</span>
                <div style="width: 100%">
                  <div
                    style="
                      display: flex;
                      align-items: flex-start;
                      margin-bottom: 10px;
                    "
                  >
                    <el-input
                      v-model="topic.little_title_number"
                      style="width: 20%"
                      type="textarea"
                      placeholder="请输入标题题号"
                      maxlength="200"
                      show-word-limit
                      @input="forupdata"
                      @blur="onBlur(topic, 'little_title_number')"
                    />
                    <el-input
                      v-model="topic.little_title"
                      style="width: 70%; margin-left: 10px"
                      type="textarea"
                      placeholder="请输入标题内容"
                      maxlength="500"
                      show-word-limit
                      @input="forupdata"
                      @blur="onBlur(topic, 'little_title')"
                    />
                  </div>
                </div>
              </div>
              <div class="Big-Book-top">
                <span>正副标题缩进</span>
                <el-radio v-model="topic.is_textIndex" :label="true"
                  >是</el-radio
                >
                <el-radio v-model="topic.is_textIndex" :label="false"
                  >否</el-radio
                >
              </div>
              <div class="Big-Book-top">
                <span>是否有背景色</span>
                <el-radio v-model="topic.is_bg" :label="true">有</el-radio>
                <el-radio v-model="topic.is_bg" :label="false">无</el-radio>
              </div>
              <div class="Big-Book-top">
                <span>是否有背景图</span>
                <el-radio v-model="topic.is_layout" :label="true">有</el-radio>
                <el-radio v-model="topic.is_layout" :label="false">无</el-radio>
              </div>
              <div
                v-for="(rowItem, rowIndex) in topic.table_list"
                :key="'row' + rowIndex"
              >
                <div
                  v-for="(topicIitem, lineIndex) in rowItem"
                  :key="lineIndex"
                  :style="{ 'border-bottom': '2px #999 dotted' }"
                >
                  <div>
                    <span>{{ '第'+(rowIndex+1)+'行，第'+(lineIndex+1)+'列' }}</span>
                    <div class="addoption" style="margin-left: 10px" @click="handleRemoveCol(rowIndex,lineIndex,toindex)">
                        删除当前列
                    </div>
                    <div class="addoption" style="margin-left: 10px" @click="handleAddCol('front',rowIndex,lineIndex,toindex)">
                        在当前列前增加列
                    </div>
                    <div class="addoption" style="margin-left: 10px" @click="handleAddCol('behind',rowIndex,lineIndex,toindex)">
                        在当前列后增加列
                    </div>
                  </div>
                  <div>
                    <template
                      v-if="
                        topicIitem.type == 'article_chs' ||
                        (topicIitem.data &&
                          topicIitem.data.type == 'article_chs')
                      "
                    >
                      <template v-if="topicIitem.is_edit">
                        <ArticleTemChs
                          :cur-que="topicIitem.data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else>
                        <!-- <ArticleView :cur-que="topicIitem.data" /> -->
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'sentence_segword_chs'">
                      <template v-if="topicIitem.is_edit">
                        <SentenceSegwordChs
                          :cur-que="topicIitem.data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else>
                        <!-- <ArticleView :cur-que="topicIitem.data" /> -->
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'dialogue_article_chs'">
                      <template v-if="topicIitem.is_edit">
                        <DialogueArticleChs
                          :cur-que="topicIitem.data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else>
                        <!-- <ArticleView :curQue="topicIitem.que" /> -->
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'dialogue_answer_chs'">
                      <template v-if="topicIitem.is_edit">
                        <DialogueAnswerChs
                          :cur-que="topicIitem.data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else>
                        <!-- <ArticleView :curQue="topicIitem.que" /> -->
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'NewWord_chs'">
                      <template v-if="topicIitem.is_edit">
                        <Neword
                          :cur-que="topicIitem.data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else>
                        <NewordPhraseview :cur-que="topicIitem.data" />
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'notes_chs'">
                      <template v-if="topicIitem.is_edit">
                        <Notes
                          :cur-que="topicIitem.data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else>
                        <NewordPhraseview :cur-que="topicIitem.data" />
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'input_record_chs'">
                      <template v-if="topicIitem.is_edit">
                        <InputRecord
                          :cur-que="topicIitem.data"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template
                      v-if="
                        topicIitem.type == 'recordHZ_inputPY_chs' ||
                        topicIitem.type == 'inputItem_chs' ||
                        topicIitem.type == 'sentence_input_chs' ||
                        topicIitem.type == 'sentence_judge_chs' ||
                        topicIitem.type == 'sentence_record_chs' ||
                        topicIitem.type == 'sentence_input_record_chs' ||
                        topicIitem.type == 'sentence_listen_read_chs'
                      "
                    >
                      <template v-if="topicIitem.is_edit">
                        <Sentence
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template v-if="topicIitem.type == 'sudoku_chs'">
                      <template v-if="topicIitem.is_edit">
                        <Sudoku
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template v-if="topicIitem.type == 'NumberCombination_chs'">
                      <template v-if="topicIitem.is_edit">
                        <NumberCombination
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template v-if="topicIitem.type == 'toneSelect_chs'">
                      <template v-if="topicIitem.is_edit">
                        <ToneSelect
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template v-if="topicIitem.type === 'voice_matrix'">
                      <template v-if="topicIitem.is_edit">
                        <voice-matrix
                          :cur-que="topicIitem.data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                    </template>
                    <template v-if="topicIitem.type === 'select_drag'">
                      <select-drag
                        :cur-que="topicIitem.data"
                        :change-cur-que="changeCurQue"
                        v-if="refresh"
                      />
                    </template>
                    <template v-if="topicIitem.type === 'config_table'">
                      <configurable-table
                        :cur-que="topicIitem.data"
                        :change-cur-que="changeCurQue"
                      />
                    </template>
                    <template v-if="topicIitem.type === 'header_separate'">
                      <header-separate
                        :cur-que="topicIitem.data"
                        :change-cur-que="changeCurQue"
                        v-if="refresh"
                      />
                    </template>
                    <template v-if="topicIitem.type === 'fill_drag'">
                      <fill-drag
                        :cur-que="topicIitem.data"
                        :change-cur-que="changeCurQue"
                        v-if="refresh"
                      />
                    </template>
                    <template v-if="topicIitem.type == 'ligature_chs'">
                      <template v-if="topicIitem.is_edit">
                        <Ligature
                          :cur-que="topicIitem.data"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          :type="topicIitem.type"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else>
                        
                      </template>
                    </template>
                    <template
                      v-if="topicIitem.type == 'image_question_input_record'"
                    >
                      <template v-if="topicIitem.is_edit">
                        <ImageQuestion
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template
                      v-if="
                        topicIitem.type == 'single_chs' ||
                        topicIitem.type == 'checkbox_chs' ||
                        topicIitem.type == 'listen_record_single_chs'
                      "
                    >
                      <template v-if="topicIitem.is_edit">
                        <Single
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>

                    <template
                      v-if="
                        topicIitem.type == 'text_problem_chs' ||
                        topicIitem.type == 'newWord_preview_chs' ||
                        topicIitem.type == 'listen_record_single_syllable_chs'
                      "
                    >
                      <template v-if="topicIitem.is_edit">
                        <PurePreview
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template
                      v-if="topicIitem.type == 'zi_transverse_line_chs'"
                    >
                      <template v-if="topicIitem.is_edit">
                        <ZiLine
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template v-if="topicIitem.type == 'select_input_chs'">
                      <template v-if="topicIitem.is_edit">
                        <SelectInpue
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template v-if="topicIitem.type == 'play_input_record_chs'">
                      <template v-if="topicIitem.is_edit">
                        <PlayInputReacord
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template
                      v-if="
                        topicIitem.type == 'imgage_image' ||
                        topicIitem.type == 'image_checkBox' ||
                        topicIitem.type == 'image_judge' ||
                        topicIitem.type == 'image_single' ||
                        topicIitem.type == 'image_dobleinput' ||
                        topicIitem.type == 'image_gdcy' ||
                        topicIitem.type == 'image_input'
                      "
                    >
                      <template v-if="topicIitem.is_edit">
                        <Picture
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <!-- <template v-if="topicIitem.type == 'drag_chs'">
                        <template v-if="topicIitem.is_edit">
                            <Drag
                            :curQue="topicIitem.data"
                            :type="topicIitem.type"
                            :fn_data="fn_data"
                            :changeCurQue="changeCurQue"
                            />
                        </template>
                        <template v-else> </template>
                        </template> -->
                    <template
                      v-if="topicIitem.type == 'checkbox_self_assessment_chs'"
                    >
                      <template v-if="topicIitem.is_edit">
                        <SelfAssessment
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template v-if="topicIitem.type == 'sort_chs'">
                      <template v-if="topicIitem.is_edit">
                        <Sort
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else>
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'CourseStart_chs'">
                      <template v-if="topicIitem.is_edit">
                        <CourseStart
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template
                      v-if="
                        topicIitem.type == 'record_control_mini' ||
                        topicIitem.type == 'record_control_normal' ||
                        topicIitem.type == 'record_control_pro' ||
                        topicIitem.type == 'record_control_promax'
                      "
                    >
                      <template v-if="topicIitem.is_edit">
                        <RecordControl
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template
                      v-if="
                        topicIitem.type == 'upload_control_chs' ||
                        topicIitem.type == 'upload_control_preview_chs'
                      "
                    >
                      <template v-if="topicIitem.is_edit">
                        <UploadControl
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else>
                        
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'tinydemo_chs'">
                      <template v-if="topicIitem.is_edit">
                        <Tinydemo
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          :number="
                            currentTreeID + toindex + rowIndex + lineIndex
                          "
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template v-if="topicIitem.type == 'switch_control_chs'">
                      <template v-if="topicIitem.is_edit">
                        <SuitchControl
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template v-if="topicIitem.type == 'video_chs'">
                      <template v-if="topicIitem.is_edit">
                        <VideoControl
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else>
                        <!-- <VideoControlView
                            :curQue="topicIitem.data"
                            :type="topicIitem.type"
                            :fn_data="fn_data"
                            /> -->
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'table_chs'">
                      <template v-if="topicIitem.is_edit">
                        <Table
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else>
                        
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'play_record_chs'">
                      <template v-if="topicIitem.is_edit">
                        <PlayRecord
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else>
                        <PlayRecordView
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                        />
                      </template>
                    </template>
                    <template v-if="topicIitem.type == 'upload_pdf_chs'">
                      <template v-if="topicIitem.is_edit">
                        <UploadPdf
                          :cur-que="topicIitem.data"
                          :type="topicIitem.type"
                          :fn_data="fn_data"
                          :change-cur-que="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else />
                    </template>
                    <template v-if="topicIitem.type == 'sentence_segtemp_chs'">
                      <template v-if="topicIitem.is_edit">
                        <SentenceModule
                          :curQue="topicIitem.data"
                          :type="topicIitem.type"
                          :changeCurQue="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else> </template>
                    </template>
                    <template v-if="topicIitem.type == 'options_list_chs'">
                      <template v-if="topicIitem.is_edit">
                        <OptionsList
                          :curQue="topicIitem.data"
                          :type="topicIitem.type"
                          :changeCurQue="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else> </template>
                    </template>
                    <template v-if="topicIitem.type == 'sentence_single_chs'">
                      <template v-if="topicIitem.is_edit">
                        <SentenceMulModule
                          :curQue="topicIitem.data"
                          :type="topicIitem.type"
                          :changeCurQue="changeCurQue"
                          v-if="refresh"
                        />
                      </template>
                      <template v-else> </template>
                    </template>
                  </div>
                  <div
                    v-if="topicIitem.data && topicIitem.is_edit"
                    class="addoption"
                    @click="
                      remoeModule(toindex, rowIndex, lineIndex, topicIitem)
                    "
                  >
                    删除模板 <br />{{ topicIitem.data.name }}
                       <!-- + {{topicIitem.type}} -->
                  </div>
                  <div
                    v-else-if="
                      TopicIndex == toindex &&
                      RowIndex == rowIndex &&
                      lineIndex == LineIndex
                    "
                    class="addoption"
                  >
                    选择模板
                  </div>
                  <div
                    v-if="!topicIitem.data && topicIitem.is_add_module"
                    class="addoption"
                    @click="addModule(toindex, rowIndex, lineIndex, topicIitem)"
                  >
                    添加模板
                  </div>
                  <template v-if="topicIitem.data">
                    <div v-if="topicIitem.is_edit" class="Big-Book-save">
                      <el-button
                        type="success"
                        size="small"
                        @click="onSure(topicIitem)"
                        >确定</el-button
                      >
                    </div>
                    <div v-else class="Big-Book-save">
                      <el-button
                        type="primary"
                        size="small"
                        @click.stop="editCurQue(topicIitem)"
                        >编辑</el-button
                      >
                    </div>
                  </template>
                </div>
                <div style="display: flex">
                  <div class="addoption" @click="removeRow(rowIndex, toindex)">
                    删除当前行
                  </div>
                  <div
                    style="margin-left: 10px"
                    class="addoption"
                    @click="addRow('front', rowIndex, toindex)"
                  >
                    在当前行前增加行
                  </div>
                  <div
                    style="margin-left: 10px"
                    class="addoption"
                    @click="addRow('behind', rowIndex, toindex)"
                  >
                    在当前行后增加行
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-transition>
        </div>
        <!-- </el-tab-pane> -->
        <!-- </el-tabs> -->
      </div>
      <div v-if="currentTreeID" class="Book-function">
        <el-button type="success" @click="handleSetGroup" size="medium"
          >设置分组</el-button
        >
        <ul class="function-list">
          <li
            v-for="(item, index) in fn_data"
            :key="'fn' + index"
            @click="selectedFnType(item, index)"
          >
            <el-dropdown v-if="item.list">
              <span class="fn-name">
                {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown" trigger="click">
                <el-dropdown-item
                  v-for="(child, i) in item.list"
                  :key="i"
                  style="color: #000000"
                  @click.native="selectSmallModule(item, child, index, i)"
                  >{{ child.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <span v-else class="fn-name">{{ item.name }}</span>
          </li>
        </ul>
        <div class="yunmu">
          <span>点击可复制</span>
          <table border="1" class="yunmu-table">
            <tr v-for="(item, index) in tableData" :key="'tableData' + index">
              <td
                v-for="(tdItem, tdIndex) in item"
                :key="'td' + index + tdIndex"
                :id="'td' + index + tdIndex"
                @click="CopyToClipboard('td' + index + tdIndex)"
              >
                {{ tdItem }}
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="previewVisible"
      title="预览"
      top="0"
      width="100%"
      @close="handleClosePre"
    >
      <div class="chooseCon">
        <Preview
          ref="preview"
          :context="context"
          :que-index="queIndex"
          :father-name="fatherName"
          :current-tree-i-d="currentTreeID"
          :father-tree-data="FatherTreeData"
          :change-id="changeId"
          :theme-color="themeColor"
          :is-show-title="true"
          :task-model="TaskModel"
          :isAnswerItemShow="true"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="saveAnswer">保 存</el-button> -->
        <el-button @click="handleClosePre">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Catelog from "@/components/Adult/inputModules/Catelog";
import ArticleTemChs from "@/components/Adult/inputModules/ArticleTemChs/index.vue";
import SentenceSegwordChs from "@/components/Adult/inputModules/SentenceSegwordChs/index.vue";
import DialogueArticleChs from "@/components/Adult/inputModules/DialogueArticleChs/index.vue";
import Single from "@/components/Adult/inputModules/Single.vue";
import Judge from "@/components/Adult/inputModules/Judge.vue";
import Dialogue from "@/components/Adult/inputModules/Dialogue.vue";
import MatrixSingle from "@/components/Adult/inputModules/MatrixSingle.vue";
import MultiRowInput from "@/components/Adult/inputModules/MultiRowInput.vue";
import Ligature from "@/components/Adult/inputModules/Ligature.vue";
import Neword from "@/components/Adult/inputModules/Neword.vue";
import Notes from "@/components/Adult/inputModules/Notes.vue";
import InputRecord from "@/components/Adult/inputModules/InputRecord.vue";
import AudioControl from "@/components/Adult/inputModules/AudioControl.vue";
import SuitchControl from "@/components/Adult/inputModules/SuitchControl.vue";
import BgControl from "@/components/Adult/inputModules/BgControl.vue";
import UploadControl from "@/components/Adult/inputModules/UploadControl.vue";
import TextItem from "@/components/Adult/inputModules/TextItem.vue";
import Sentence from "@/components/Adult/inputModules/Sentence.vue";
import Sudoku from "@/components/Adult/inputModules/Sudoku.vue";
import ToneSelect from "@/components/Adult/inputModules/ToneSelect.vue";
import NumberCombination from "@/components/Adult/inputModules/NumberCombination.vue";
import DialogueAnswerChs from "@/components/Adult/inputModules/DialogueAnswerChs";
import VoiceMatrix from "@/components/Adult/inputModules/VoiceMatrix.vue";
import SelectDrag from "@/components/Adult/inputModules/SelectDrag.vue";
import ConfigurableTable from "@/components/Adult/inputModules/ConfigurableTable/index.vue";
import HeaderSeparate from "@/components/Adult/inputModules/HeaderSeparate/index.vue";
import FillDrag from "@/components/Adult/inputModules/FillDrag.vue";
import ImageQuestion from "@/components/Adult/inputModules/ImageQuestion.vue";
import PurePreview from "@/components/Adult/inputModules/PurePreview.vue";
import ZiLine from "@/components/Adult/inputModules/ZiLine.vue";
import SelectInpue from "@/components/Adult/inputModules/SelectInpue.vue";
import PlayInputReacord from "@/components/Adult/inputModules/PlayInputReacord.vue";
import Drag from "@/components/Adult/inputModules/Drag.vue";
import SelfAssessment from "@/components/Adult/inputModules/SelfAssessment.vue";
import Sort from "@/components/Adult/inputModules/Sort.vue";
import CourseStart from "@/components/Adult/inputModules/CourseStart.vue";
import RecordControl from "@/components/Adult/inputModules/RecordControl.vue";
import Tinydemo from "@/components/Adult/inputModules/Tinydemo.vue";
import VideoControl from "@/components/Adult/inputModules/VideoControl.vue";
import Table from "@/components/Adult/inputModules/Table.vue";
import PlayRecord from "@/components/Adult/inputModules/PlayRecord.vue";
import UploadPdf from "@/components/Adult/inputModules/UploadPdf.vue";
import OptionsList from "@/components/Adult/inputModules/OptionsList.vue";

import Textdes from "@/components/Adult/inputModules/Textdes.vue";
import Record from "@/components/Adult/inputModules/Record.vue";
import Hanzi from "@/components/Adult/inputModules/Hanzi.vue";
import Picture from "@/components/Adult/inputModules/Picture.vue";
import SentenceModule from "@/components/Adult/inputModules/SentenceModule.vue";
import SentenceMulModule from "@/components/Adult/inputModules/SentenceMulModule.vue"
import Singleview from "@/components/Adult/preview/Single.vue";
import Judgeview from "@/components/Adult/preview/Judge.vue";
import Textdesview from "@/components/Adult/preview/Textdes.vue";
import Hanziview from "@/components/Adult/preview/Hanzi.vue";
import Pictureview from "@/components/Adult/preview/Picture.vue";
import Dialogueview from "@/components/Adult/preview/Dialogue.vue";
import MatrixSingleview from "@/components/Adult/preview/MatrixSingle.vue";
import MultiRowInputview from "@/components/Adult/preview/MultiRowInput.vue";
import Ligatureview from "@/components/Adult/preview/Ligature.vue";
import InputRecordview from "@/components/Adult/preview/InputRecord.vue";
import BgControlview from "@/components/Adult/preview/BgControl.vue";
import NewordPhraseview from "@/components/Adult/preview/WordPhrase.vue";
import UploadControlView from "@/components/Adult/preview/UploadControlView.vue";
import VideoControlView from "@/components/Adult/preview/VideoControl.vue";
import SentenceSortQP from "@/components/Adult/preview/SentenceSortQP.vue";
import TableView from "@/components/Adult/preview/TableView.vue";
import PlayRecordView from "@/components/Adult/preview/PlayRecordView.vue";

import Preview from "@/components/Adult/Preview.vue";
import fn from "@/components/Adult/common/data.js";
import { getContent, getStaticContent } from "@/api/ajax";

export default {
  components: {
    Header,
    Catelog,
    Single,
    Textdes,
    Record,
    Singleview,
    Textdesview,
    Hanziview,
    Pictureview,
    Preview,
    Hanzi,
    Picture,
    Judge,
    Judgeview,
    Dialogue,
    Dialogueview,
    MatrixSingle,
    MatrixSingleview,
    MultiRowInput,
    MultiRowInputview,
    Ligature,
    Ligatureview,
    Neword,
    Notes,
    InputRecord,
    ArticleTemChs,
    SentenceSegwordChs,
    DialogueArticleChs,
    AudioControl,
    SuitchControl,
    BgControl,
    InputRecordview,
    BgControlview,
    NewordPhraseview,
    UploadControl,
    TextItem,
    Sentence,
    UploadControlView,
    Sudoku,
    NumberCombination,
    ToneSelect,
    DialogueAnswerChs,
    VoiceMatrix,
    FillDrag,
    SelectDrag,
    ConfigurableTable,
    HeaderSeparate,
    ImageQuestion,
    PurePreview,
    ZiLine,
    SelectInpue,
    PlayInputReacord,
    Drag,
    SelfAssessment,
    Sort,
    CourseStart,
    RecordControl,
    Tinydemo,
    VideoControl,
    VideoControlView,
    SentenceSortQP,
    Table,
    TableView,
    PlayRecord,
    PlayRecordView,
    UploadPdf,
    SentenceModule,
    OptionsList,
    SentenceMulModule,
  },
  data() {
    return {
      bookId: 1,
      bookLevel: "",
      bookIndex: "",
      fn_data: [],
      fn_type: "",
      cur_fn_data: null, // 当前模块的数据结构
      cur_page_queIsEdit: [], // 当前页数的某个题
      org_question_list: {
        detailList: [
          {
            detail: {
              type: "detail",
              pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
              sentence: "", // 句子
              segList: [], // 分词结果
              seg_words: "",
              wordsList: [],
            },
            en: "",
          },
        ], // 目录分词
        classTopic: [
          {
            con: "",
            font: "",
          },
        ], // 课题
        cur_fn_data: [],
      },
      // 总的数据列表
      question_list: {
        detailList: [
          {
            detail: {
              type: "detail",
              pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
              sentence: "", // 句子
              segList: [], // 分词结果
              seg_words: "",
              wordsList: [],
            },
            en: "",
          },
        ], // 目录分词
        classTopic: [
          {
            con: "",
            font: "",
          },
        ], // 课题
        cur_fn_data: [],
      }, // 总的数据列表
      cur_page_que_index: 0,
      editableTabsValue: "tab1",
      tabIndex: 0,
      previewVisible: false,
      context: [],
      queIndex: 0,
      currentTreeID: null,
      row: null, // 行
      line: null, // 列
      TopicIndex: null, // 第几题的索引
      RowIndex: null, // 第几行
      LineIndex: null, // 第几列
      bgControlX: null, // 背景图插入模板的 x
      bgControlY: null, // 背景图插入模板的 y
      bgControlIndex: null, // 插入第几个
      DeletebgControlIndex: null, // 删除第几个
      fatherName: "",
      module_type: "",
      tmInde: "",
      FatherTreeData: null,
      themeColor: "", // 主题颜色
      loading: false,
      NumberList: [
        "①",
        "②",
        "③",
        "④",
        "⑤",
        "⑥",
        "⑦",
        "⑧",
        "⑨",
        "⑩",
        "⑪",
        "⑫",
        "⑬",
        "⑭",
        "⑮",
        "⑯",
        "⑰",
        "⑱",
        "⑲",
        "⑳",
      ],
      TaskModel: "",
      groupIndexList: [],
      tableData: [
        ["ā", "á", "ǎ", "à"],
        ["ō", "ó", "ǒ", "ò"],
        ["ē", "é", "ě", "è"],
        ["ī", "í", "ǐ", "ì"],
        ["ū", "ú", "ǔ", "ù"],
        ["ǖ", "ǘ", "ǚ", "ǜ"],
        ["Ā", "Á", "Â", "À"],
        ["Ō", "Ó", "Ô", "Ò"],
        ["Ē", "É", "Ê", "È"],
        ["Ī", "Í", "Î", "Ì"],
        ["Ū", "Ú", "Û", "Ù"],
      ],
      refresh: true,
    };
  },
  computed: {
    getCurrentQuestionView() {
      const function_type = this.fn_type;
      switch (function_type) {
        case "single":
          return Single;
        case "text":
          return Textdes;
        case "record":
          return Record;
      }
    },
  },
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log("2022.07.04");
    this.fn_data = fn.fnData;
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (localStorage.getItem("Bookanswer")) {
      this.TaskModel = "ANSWER";
    }
    document.getElementsByClassName("content-tree")[0].style.height =
      window.innerHeight - 120 + "px";
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handleChangeTab(item) {
      item.contentShow = !item.contentShow;
    },
    saveAnswer() {
      let answer = this.$refs.preview.saveAnswer();
      console.log("保存答案：");
      console.log(answer);
      let answerStr = JSON.stringify(answer);
      localStorage.setItem("Bookanswer", answerStr);
    },
    forupdata() {
      this.$forceUpdate();
    },
    // 增加列
    addCol(tyoe, rowindex, colindex, toindex) {},
    // 添加行
    addRow(type, rowindex, toindex) {
      let arr = [
        {
          text: ``,
          is_add_module: true,
          is_edit: true,
        },
      ];
      if (type == "front") {
        //  加到当前行前面
        if (rowindex == 0) {
          this.question_list.cur_fn_data[toindex].table_list.splice(0, 0, arr);
        } else {
          this.question_list.cur_fn_data[toindex].table_list.splice(
            rowindex - 1,
            0,
            arr
          );
        }
      } else {
        //  加到当前行后面
        this.question_list.cur_fn_data[toindex].table_list.splice(
          rowindex + 1,
          0,
          arr
        );
      }
      this.question_list.cur_fn_data[toindex].table_list.forEach(
        (item, rowIndex) => {
          item.forEach((it, colIndex) => {
            it.text = `第${rowIndex + 1}行,第${colIndex + 1}列`;
          });
        }
      );
      this.TopicIndex = null;
      this.RowIndex = null;
      this.LineIndex = null;
      this.$forceUpdate();
    },
    // 增加列
    handleAddCol(type, index, rowindex, toindex){
        let arr = {
            text: ``,
            is_add_module: true,
            is_edit: true,
        };
        if (type == "front") {
            //  加到当前列前面
            if (rowindex == 0) {
                this.question_list.cur_fn_data[toindex].table_list[index].splice(0, 0, arr);
            } else {
                this.question_list.cur_fn_data[toindex].table_list[index].splice(
                    rowindex - 1,
                    0,
                    arr
                );
            }
        } else {
            //  加到当前列后面
            this.question_list.cur_fn_data[toindex].table_list[index].splice(
            rowindex + 1,
            0,
            arr
            );
        }
        this.question_list.cur_fn_data[toindex].table_list.forEach(
            (item, rowIndex) => {
            item.forEach((it, colIndex) => {
                it.text = `第${rowIndex + 1}行,第${colIndex + 1}列`;
            });
            }
        );
        this.TopicIndex = null;
        this.RowIndex = null;
        this.LineIndex = null;
        this.$forceUpdate();
    },
    // 删除行
    removeRow(index, toindex) {
      this.$confirm("确定要删除当前行吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 里面是不是剩下最后一行了
        if (this.question_list.cur_fn_data[toindex].table_list.length == 1) {
          this.question_list.cur_fn_data[toindex].table_list.splice(index, 1);
          this.question_list.cur_fn_data.splice(toindex, 1);
        } else {
          this.question_list.cur_fn_data[toindex].table_list.splice(index, 1);
        }
        this.question_list.cur_fn_data[toindex].table_list.forEach(
          (item, rowIndex) => {
            item.forEach((it, colIndex) => {
              it.text = `第${rowIndex + 1}行,第${colIndex + 1}列`;
            });
          }
        );
        this.TopicIndex = null;
        this.RowIndex = null;
        this.LineIndex = null;
        this.$forceUpdate();
      });
    },
    // 删除列
    handleRemoveCol(index, rowindex, toindex){
        this.$confirm("确定要删除当前列吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            // 里面是不是剩下最后一列了
            if (this.question_list.cur_fn_data[toindex].table_list[index].length == 1) {
                this.question_list.cur_fn_data[toindex].table_list[index].splice(rowindex, 1);
                this.question_list.cur_fn_data[toindex].table_list.splice(index, 1);
            } else {
                this.question_list.cur_fn_data[toindex].table_list[index].splice(rowindex, 1);
            }
            this.question_list.cur_fn_data[toindex].table_list.forEach(
                (item, rowIndex) => {
                    item.forEach((it, colIndex) => {
                        it.text = `第${rowIndex + 1}行,第${colIndex + 1}列`;
                    });
                }
            );
            this.TopicIndex = null;
            this.RowIndex = null;
            this.LineIndex = null;
            this.$forceUpdate();
        });
    },
    changeCurrentTreeID(val) {
      this.currentTreeID = val;
    },
    changeTreeData(val) {
      this.FatherTreeData = JSON.parse(JSON.stringify(val));
    },
    // 增加当前页的分词
    addDetail() {
      let obj = {
        detail: {
          type: "detail",
          pyPosition: "top", // top 拼音在上面；bottom 拼音在下面
          sentence: "", // 句子
          segList: [], // 分词结果
          seg_words: "",
          wordsList: [],
        },
        en: "",
      };
      this.question_list.detailList.push(obj);
    },
    // 删除当前页的分词
    deleteDetail(fcindex) {
      this.$confirm("确定要删除此模块吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.question_list.detailList.length <= 1) {
          this.$message.warning("至少要保留一一个");
          return;
        }
        this.question_list.detailList.splice(fcindex, 1);
      });
    },
    // 增加课题
    addClassTopic() {
      let obj = {
        con: "",
        font: "",
      };
      this.question_list.classTopic.push(obj);
    },
    // 删除课题
    deleteClassTopic(ktindex) {
      this.$confirm("确定要删除此课题内容吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.question_list.classTopic.length <= 1) {
          this.$message.warning("至少要保留一一个");
          return;
        }
        this.question_list.classTopic.splice(ktindex, 1);
      });
    },
    // 随意插入模板获取位置
    changeSite(x, y) {
      this.bgControlX = x;
      this.bgControlY = y;
    },
    // 插入索引
    changebgControlIndex(index) {
      this.bgControlIndex = index;
    },
    // 删除索引
    changeDeletebgControlIndex(index) {
      this.DeletebgControlIndex = index;
    },
    rowLine(value) {
      this[value] = this[value].match(/^\d*(\.?\d{0,2})/g)[0] || "";
    },
    createTable() {
      if (this.row && this.line) {
        let groupid = (
          new Date().toLocaleString().replace(/\s|:|\/*/g, "") +
          new Date().getMilliseconds() +
          Math.random().toString(36).substr(2) +
          new Date().getMilliseconds() +
          Math.random().toString(36).substr(2)
        ).substring(0, 32);
        let arr = {
          z_title: "",
          f_title: "",
          little_title_number: "",
          little_title: "",
          is_bg: false, // 是否有背景色
          is_layout: false, // 是不是按背景图布局
          is_textIndex: false,
          table_list: [],
          group_name: "", // 设置分组name
          group_id: [groupid], // 分组id
          contentShow: true, // 是否显示这一题
        };
        for (let i = 0; i < this.row; i++) {
          let rowArr = [];
          for (let j = 0; j < this.line; j++) {
            let obj = {
            //   text: `第${i + 1}行,第${j + 1}列`,
              is_add_module: true,
              is_edit: true,
            };
            rowArr.push(obj);
          }
          arr.table_list.push(rowArr);
        }
        this.question_list.cur_fn_data.push(arr);
        this.row = null;
        this.line = null;
      } else {
        this.$message.warning("请输入行和列");
      }
    },
    // 添加模板
    addModule(topicIndex, rowindex, lineIndex, item) {
      this.TopicIndex = topicIndex;
      this.RowIndex = rowindex;
      this.LineIndex = lineIndex;
      this.question_list.cur_fn_data.forEach((pic) => {
        pic.table_list.forEach((row) => {
          row.forEach((col) => {
            col.is_add_module = true;
          });
        });
      });
      item.is_add_module = false;
    },
    // 删除模板
    remoeModule(topicIndex, rowindex, lineIndex, item) {
      this.$confirm("确定要删除此模板吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        item.type = "";
        item.data = null;
        this.TopicIndex = null;
        this.RowIndex = null;
        this.LineIndex = null;
        item.is_add_module = true;
      });
    },
    handleClosePre() {
      if (window.stopAudioVoice) window.stopAudioVoice();
      if (window.stopAudioAudio) window.stopAudioAudio();
      if (window.stopAudioSound) window.stopAudioSound();
      this.previewVisible = false;
    },
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : "";
    },
    // 当前目录id  name    父级name/当前 name
    changeId(id, name, fatherName) {
      this.loading = true;

      this.TopicIndex = null;
      this.RowIndex = null;
      this.LineIndex = null;
      this.fatherName = fatherName;
      this.currentTreeID = id;
      this.refresh = false;
      // 根据当前目录切换题
      let MethodName = "book-courseware_manager-GetCoursewareContent";
      let data = {
        id,
      };
      getContent(MethodName, data)
        .then((res) => {
          this.themeColor = res.book_theme_color ? res.book_theme_color : "";
          this.question_list = res.content
            ? JSON.parse(res.content)
            : JSON.parse(JSON.stringify(this.org_question_list));
          let data = JSON.parse(JSON.stringify(this.question_list));
          data.cur_fn_data.forEach((item) => {
            if (!item.group_id) {
              let groupid = (
                new Date().toLocaleString().replace(/\s|:|\/*/g, "") +
                new Date().getMilliseconds() +
                Math.random().toString(36).substr(2) +
                new Date().getMilliseconds() +
                Math.random().toString(36).substr(2)
              ).substring(0, 32);
              item.group_name = ""; // 设置分组name
              item.group_id = [groupid]; // 分组id
            }
            if (!item.hasOwnProperty("contentShow")) {
              item.contentShow = true;
            }
          });
          data.detailList.forEach((item) => {
            if (!item.detail) {
              let obj = JSON.parse(JSON.stringify(item));
              item.detail = obj;
            }
            if (!item.en) {
              item.en = "";
            }
          });
          this.question_list = JSON.parse(JSON.stringify(data));
          if (this.previewVisible) {
            this.onPreview();
          }
          this.loading = false;
          document.getElementsByClassName(
            "Big-Book-input-save"
          )[0].style.width =
            document.getElementsByClassName("Book-content")[0].clientWidth -
            20 +
            "px";
          document.getElementsByClassName("Book-function")[0].style.height =
            window.innerHeight - 120 + "px";
          // this.cur_page_que_index =
          //   this.question_list[this.tabIndex].cur_fn_data.length - 1;
          this.$nextTick(() => {
            // 重新渲染组件
            this.refresh = true;
          });
        })
        .catch((error) => {
          this.loading = false;
          this.$nextTick(() => {
            // 重新渲染组件
            this.refresh = true;
          });
        });
    },
    handleTabsEdit(targetName, action) {
      if (action === "add") {
        let leg = this.question_list.cur_fn_data.length;
        let obj = {
          name: `tab${leg + 1}`,
          title: `第${leg + 1}页`,
          cur_fn_data: [],
        };
        this.question_list.push(obj);
      }
      if (action === "remove") {
        let tabs = JSON.parse(JSON.stringify(this.question_list));
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        let question_list = tabs.filter((tab) => tab.name !== targetName);
        question_list.map((item, index) => {
          item.name = `tab${index + 1}`;
          item.title = `第${index + 1}页`;
          return item;
        });
        this.question_list = question_list;
        this.TopicIndex = null;
        this.RowIndex = null;
        this.LineIndex = null;
      }
    },
    tabClick(tab) {
      this.tabIndex = tab.index;
    },
    // 大模板
    selectedFnType(item, index) {
      if (item.list) {
        return;
      }
      if (
        Object.prototype.toString.call(this.TopicIndex).indexOf("Number") ==
          -1 &&
        Object.prototype.toString.call(this.LineIndex).indexOf("Number") == -1
      ) {
        this.$message.warning("请先选择添加模板的位置");
        return;
      }
      if (
        this.question_list.cur_fn_data[this.TopicIndex].table_list[
          this.RowIndex
        ][this.LineIndex].data
      ) {
        this.$message.warning("每列只能添加一个模板");
      } else {
        this.$set(
          this.question_list.cur_fn_data[this.TopicIndex].table_list[
            this.RowIndex
          ][this.LineIndex],
          "type",
          item.type
        );
        this.$set(
          this.question_list.cur_fn_data[this.TopicIndex].table_list[
            this.RowIndex
          ][this.LineIndex],
          "data",
          undefined
        );
      }
    },
    changeCurQue(data_stru) {
      this.$set(
        this.question_list.cur_fn_data[this.TopicIndex].table_list[
          this.RowIndex
        ][this.LineIndex],
        "data",
        JSON.parse(JSON.stringify(data_stru))
      );
    },
    // 小模板
    selectSmallModule(item, child, itemIndex, childIndex) {
      if (
        Object.prototype.toString.call(this.TopicIndex).indexOf("Number") ==
          -1 &&
        Object.prototype.toString.call(this.LineIndex).indexOf("Number") == -1
      ) {
        this.$message.warning("请先选择添加模板的位置");
        return;
      }

      if (
        this.question_list.cur_fn_data[this.TopicIndex].table_list[
          this.RowIndex
        ][this.LineIndex].data
      ) {
        this.$message.warning("每列只能添加一个模板");
      } else {
        this.$set(
          this.question_list.cur_fn_data[this.TopicIndex].table_list[
            this.RowIndex
          ][this.LineIndex],
          "type",
          child.type
        );
        this.$set(
          this.question_list.cur_fn_data[this.TopicIndex].table_list[
            this.RowIndex
          ][this.LineIndex],
          "data",
          null
        );
      }
    },
    // 删除某页中一个部分
    deleteCurQue(item, queIndex) {
      item.queList.splice(queIndex, 1);
    },
    saveNewwordAndSentences() {
      let question_list = JSON.parse(JSON.stringify(this.question_list));
      let sentence_list = [];
      let sentence_list_mp = [];
      let new_word_list = [];
      question_list.cur_fn_data.forEach((curItem) => {
        curItem.table_list.forEach((tabItem) => {
          tabItem.forEach((topicIitem) => {
            if (
              topicIitem.type == "article_chs" ||
              topicIitem.type == "dialogue_article_chs"
            ) {
              topicIitem.data.detail.forEach((item) => {
                let obj = this.handleSentences(item.sentences, item.segList);
                sentence_list = sentence_list.concat(obj.sentenceArr); // 句子数组
                sentence_list_mp = sentence_list_mp.concat(obj.res); // 句子+分词数组
              });
            } else if (topicIitem.type == "NewWord_chs") {
              let audio_file_id = "";
              audio_file_id =
                topicIitem.data.mp3_list && topicIitem.data.mp3_list.length > 0
                  ? topicIitem.data.mp3_list[0].id
                      .replace("[FID##", "")
                      .replace("##FID]", "")
                  : "";

              topicIitem.data.option.forEach((item) => {
                item.map((sItem) => {
                  sItem.audio_file_id = audio_file_id;
                  sItem.audio_begin_time =
                    topicIitem.data.wordTime &&
                    topicIitem.data.wordTime[sItem.sIndex]
                      ? Number(topicIitem.data.wordTime[sItem.sIndex].bg)
                      : 0;
                  sItem.audio_end_time =
                    topicIitem.data.wordTime &&
                    topicIitem.data.wordTime[sItem.sIndex]
                      ? Number(topicIitem.data.wordTime[sItem.sIndex].ed)
                      : 0;
                  return sItem;
                });

                new_word_list = new_word_list.concat(item);
              });
            }
          });
        });
      });
      return {
        new_word_list,
        sentence_list,
        sentence_list_mp,
      };
    },
    handleSentences(list, segList) {
      let res = [];
      let sentenceArr = [];
      list.forEach((Litem, index) => {
        Litem = Litem.replace(/#/g, "");
        this.NumberList.forEach((nitem) => {
          if (Litem.indexOf(nitem) > -1) {
            let reg = new RegExp(nitem, "g");
            Litem = Litem.replace(reg, "");
          }
        });
        let segItem = this.handleSegItem(segList[index]);
        let obj = {
          sentence: Litem,
          word_list: segItem,
        };
        res.push(obj);
        sentenceArr.push(Litem);
      });
      return { res, sentenceArr };
    },
    handleSegItem(list) {
      let resArr = [];
      list.forEach((item) => {
        if (item != "#" && this.NumberList.indexOf(item) < 0) {
          let obj = {
            word: item,
            word_bt: "",
          };
          resArr.push(obj);
        }
      });
      return resArr;
    },
    onSave() {
      let isProof = true;
      for (let j = 0; j < this.question_list.cur_fn_data.length; j++) {
        for (
          let l = 0;
          l < this.question_list.cur_fn_data[j].table_list.length;
          l++
        ) {
          for (
            let m = 0;
            m < this.question_list.cur_fn_data[j].table_list[l].length;
            m++
          ) {
            if (
              this.question_list.cur_fn_data[j].table_list[l][m].type ==
                "tinydemo_chs" ||
              this.question_list.cur_fn_data[j].table_list[l][m].type ==
                "toneSelect_chs"
            ) {
              for (let i = 0; i < tinymce.editors.length; i++) {
                let content = tinymce.editors[i].getContent();
                let arr = content.split(/[\n]/);
                let newstr = "";
                arr.forEach((item) => {
                  newstr += item;
                });
                if (newstr.length > 5000) {
                  this.$message.warning("富文本已超出字数限制");
                  this.loading = false;
                  return false;
                }
              }
            }
          }
        }
      }

      let question_list_str = JSON.stringify(this.question_list);
      localStorage.setItem("question_list", question_list_str);
      let result = this.saveNewwordAndSentences();
      const MethodName = "book-courseware_manager-SaveCoursewareContent";
      let data = {
        id: this.currentTreeID,
        content: JSON.stringify(this.question_list),
        is_use_manual_proofreading_word_sentence: isProof,
        new_word_list: result.new_word_list,
        sentence_list: result.sentence_list,
        sentence_list_mp: result.sentence_list_mp,
        ui_type: "NPC",
        category: "NPC",
      };
      getContent(MethodName, data)
        .then((res) => {
          this.$message.success("保存成功！");
        })
        .catch((error) => {});
    },
    async onPreview() {
      let _this = this;
      let question_data = null;
      if (_this.question_list) {
        const question2 = JSON.parse(JSON.stringify(_this.question_list));
        question_data = await _this.getFileUrl_preview(question2);
        _this.previewVisible = true;
        _this.context = question_data;
        console.log("预览数据");
        console.log(this.question_list);
      } else {
        _this.$message.warning("还没有录入数据");
      }
    },
    getFileUrl_preview(question) {
      let questionStr = JSON.stringify(question);

      const reg = /\[FID##(.*?)##FID\]/g;
      let regConArr = [];
      if (reg.test(questionStr)) {
        regConArr = questionStr.match(reg);
      }
      if (regConArr.length > 0) {
        regConArr = regConArr.map((item) => {
          item = item.replace("[FID##", "").replace("##FID]", "");
          return item;
        });
      }
      return new Promise((resolve, reject) => {
        const MethodName = "file_store_manager-GetFileURLMap";
        const data = {
          file_id_list: regConArr,
        };
        getStaticContent(MethodName, data).then((res) => {
          const backData = res.url_map;
          for (const key in backData) {
            const url = backData[key];
            if (questionStr.indexOf(key) > -1) {
              const d = `\\[FID##${key}##FID\\]`;
              const regD = new RegExp(d, "g");
              questionStr = questionStr.replace(regD, url);
            }
          }
          const question3 = JSON.parse(questionStr);

          resolve(question3);
        });
      });
    },
    onSure(curItem) {
      this.TopicIndex = null;
      this.RowIndex = null;
      this.LineIndex = null;
      curItem.is_edit = false;
    },
    onDel(item, curIndex) {
      item.cur_fn_data.splice(curIndex, 1);
      if (this.question_list.cur_fn_data.length > 0) {
        this.cur_page_que_index = this.question_list.cur_fn_data.length - 1;
      } else {
        this.cur_page_que_index = 0;
      }
      // let question_list_str = JSON.stringify(this.question_list);
      // localStorage.setItem("question_list", question_list_str);
    },
    // 编辑当前题型
    editCurQue(curItem) {
      curItem.is_edit = true;
      // if (!curItem.isEdit) {
      //   let count = 0;
      //   let tabIndex = this.tabIndex;
      //   let leg = this.question_list[tabIndex].cur_fn_data.length;
      //   this.question_list[tabIndex].cur_fn_data.forEach((item) => {
      //     if (item.isEdit) {
      //       count++;
      //     }
      //   });
      //   if (count == 0) {
      //     if (!curItem.isEdit) {
      //       curItem.isEdit = true;
      //     }
      //   } else {
      //     this.$message.warning("有题目未保存");
      //   }
      // }
    },
    emptyQustion() {
      this.currentTreeID = "";
    },
    // 设置分组
    handleSetGroup() {
      let groupname = "";
      let groupid = (
        new Date().toLocaleString().replace(/\s|:|\/*/g, "") +
        new Date().getMilliseconds() +
        Math.random().toString(36).substr(2) +
        new Date().getMilliseconds() +
        Math.random().toString(36).substr(2)
      ).substring(0, 32);
      this.groupIndexList.forEach((item) => {
        groupname += item + 1 + "-";
      });
      groupname = groupname.substring(0, groupname.length - 1);
      this.question_list.cur_fn_data.forEach((curItem, indexItem) => {
        if (this.groupIndexList.indexOf(indexItem) > -1) {
          curItem.group_name = "打包组" + groupname;
          curItem.group_id = [groupid];
        }
      });
      this.groupIndexList = [];
      this.$forceUpdate();
    },
    CopyToClipboard(element) {
      var doc = document,
        text = doc.getElementById(element),
        range,
        selection;
      if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      } else if (window.getSelection) {
        selection = window.getSelection();
        range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
      }
      document.execCommand("copy");
      this.$message({
        message: "复制成功",
        type: "success",
      });
      window.getSelection().removeAllRanges();
    },
    deleteElement(index) {
        this.$confirm(`确定要删除吗?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            if(this.question_list.cur_fn_data.length>1){
                this.question_list.cur_fn_data.splice(index, 1);
            }else{
                this.question_list.cur_fn_data = [];
            }
        });
    },
    moveElement(dItem, index, type) {
      let obj = JSON.parse(JSON.stringify(dItem));
      if (type == "up" && index > 0) {
        this.question_list.cur_fn_data.splice(index - 1, 0, obj);
        this.question_list.cur_fn_data.splice(index + 1, 1);
      }
      if (type == "down" && index < this.question_list.cur_fn_data.length - 1) {
        this.question_list.cur_fn_data[index] = this.question_list.cur_fn_data.splice(index + 1, 1, this.question_list.cur_fn_data[index])[0]
      }
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.topTitle {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  align-items: center;
  background: #f5f5f5 !important;
  border: 1px rgba(0, 0, 0, 0.1) solid;
  border-radius: 4px 4px 0 0;
  margin-top: 10px;
  > :nth-child(1) {
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.85);
  }
  > :nth-child(2) {
    display: flex;
    align-items: center;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
  }
  img {
    width: 16px;
    height: 16px;
    margin-left: 4px;
  }
  .rotate {
    animation-name: firstrotate;
    animation-direction: 2s;
    animation-fill-mode: both;
    animation-timing-function: linear;
  }
}
.collapse-box {
  padding: 10px;
  border: 1px rgba(0, 0, 0, 0.1) solid;
  border-top: none;
}
.Big-Book-container {
  width: 100%;
  min-height: 100vh;
  .Big-Book-content {
    padding: 26px 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .content-tree {
    width: 280px;
    overflow: auto;
  }
  .Book-content {
    flex: 1;
    box-sizing: border-box;
    padding: 90px 30px 30px;
    height: 859px;
    overflow-y: auto;
    position: relative;
    box-sizing: border-box;
    &-inner {
      // width: 860px;
    }
    .addoption {
      padding: 0 20px;
      width: auto;
      display: inline-block;
      height: 40px;
      background: #f3f3f3;
      border: 1px dashed rgba(0, 0, 0, 0.15);
      box-sizing: border-box;
      border-radius: 4px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      font-size: 14px;
      color: #000000;
      margin-top: 20px;
    }
    .createTable {
    }
  }
  .Big-Book-save {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 0 20px 0;
    &.Big-Book-input-save {
      position: fixed;
      top: 74px;
      left: 280px;
      z-index: 1;
      background: #fff;
    }
  }
  .Big-Book {
    &-add {
      position: absolute;
      top: -40px;
      right: 0;
      z-index: 1;
      width: 73px;
      height: 40px;
      background: #f7f7f7;
      border: 1px solid #d9d9d9;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-size: 18px;
      text-align: center;
      color: #000000;
    }
    &-name {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 10px;
      > p {
        font-size: 14px;
      }
    }
    &-delete {
      width: 16px;
      height: 16px;
      margin-left: 15px;
      cursor: pointer;
    }
    &-curPage {
      margin-bottom: 20px;

      &.Big-Book-curPage-edit {
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        background-color: #fafafa;
      }
      &.Big-Book-curPage-preview {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        &:hover {
          background-color: #fafafa;
          border-top: 1px solid #e0e0e0;
          border-bottom: 1px solid #e0e0e0;
        }
      }
    }
    &-queBox {
      padding: 10px 0;
    }
  }

  .Book-function {
    width: 204px;
    background: #f7f7f7;
    box-sizing: border-box;
    padding: 30px 16px;
    height: 859px;
    overflow-y: auto;
    text-align: center;
    .function-list {
      width: 100%;
      margin-top: 5px;
      > li {
        width: 100%;
        width: 172px;
        height: 40px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-sizing: border-box;
        border-radius: 4px;
        cursor: pointer;
        margin-bottom: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        > span {
          font-weight: normal;
          font-size: 16px;
          line-height: 150%;
          color: #000000;
        }
        .el-dropdown {
          color: #000000;
        }
      }
    }
  }
  .Big-Book-top {
    margin-top: 20px;
    display: flex;
    align-items: center;
    span {
      margin-right: 10px;
    }
  }
}
.yunmu {
  &-table {
    width: 172px;
    > tr {
      td {
        cursor: pointer;
        text-align: center;
        font-size: 16px;
        height: 26px;
      }
    }
  }
}
</style>