GCLS_Page_Book_Component_NPC/src/views/adultInput.vue

<!--  -->
<template>
  <div class="Big-Book-container adult-book-input-sty" v-loading="loading">
    <Header />
    <div class="Big-Book-content">
      <div class="content-tree">
        <Catelog
          :book-id="bookId"
          :book-level="bookLevel"
          :book-node-index="bookIndex"
          :change-id="changeId"
          :changeTreeData="changeTreeData"
          :currentTreeID="currentTreeID"
        />
      </div>
      <div v-if="currentTreeID" class="Book-content">
        <div class="Big-Book-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
          style="position: relative"
          v-for="(fc, fcIndex) in question_list.detailList"
          :key="'fc' + fcIndex"
        >
          <SentenceSegwordChs :curQue="fc.detail" type="adultinput" />
          <img
            style="position: absolute; right: 683px; top: 2px"
            @click="deleteDetail(fcIndex)"
            class="close"
            src="../assets/adult/del-close.png"
            alt=""
          />
          <div class="Big-Book-top" style="margin: 10px 0">
            <span>英文</span>
            <el-input
              v-model="fc.en"
              style="width: 80%"
              type="textarea"
              autosize
              placeholder="请输入英文"
              @blur="onBlur(fc, 'en')"
            />
          </div>
        </div>
        <div class="addoption" @click="addDetail">添加分句</div>
        <div
          v-for="(kt, ktIndex) in question_list.classTopic"
          :key="'kt' + ktIndex"
        >
          <div class="Big-Book-top" style="margin: 10px 0">
            <span>课题</span>
            <el-input
              v-model="kt.con"
              style="width: 80%"
              type="textarea"
              autosize
              placeholder="请输入课题"
              @blur="onBlur(kt, 'con')"
            />
            <img
              @click="deleteClassTopic(ktIndex)"
              class="close"
              src="../assets/adult/del-close.png"
              alt=""
            />
          </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="1"
            style="width: 50px"
            type="text"
            @input="rowLine('row')"
          />*<el-input
            v-model="line"
            style="width: 50px"
            type="text"
            maxlength="1"
            @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"
        >
          <p>第{{ toindex + 1 }}题</p>
          <div class="adult-book-input-item">
            <span class="adult-book-lable">序号：</span>
            <el-input
              v-model="topic.number"
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="请输入序号"
              @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="请输入正标题"
              @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="请输入副标题"
              @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
                  style="width: 20%"
                  v-model="topic.little_title_number"
                  type="textarea"
                  @input="forupdata"
                  placeholder="请输入标题题号"
                  @blur="onBlur(topic, 'little_title_number')"
                />
                <el-input
                  style="width: 70%; margin-left: 10px"
                  v-model="topic.little_title"
                  type="textarea"
                  @input="forupdata"
                  placeholder="请输入标题内容"
                  @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">
              <p>{{ topicIitem.text }}</p>
              <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"
                    />
                  </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"
                    />
                  </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"
                    />
                  </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"
                    />
                  </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"
                    />
                  </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"
                    />
                  </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"
                    />
                  </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"
                    />
                  </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"
                    />
                  </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"
                    />
                  </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"
                    />
                  </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"
                    />
                  </template>
                </template>
                <template v-if="topicIitem.type == 'ligature_chs'">
                  <template v-if="topicIitem.is_edit">
                    <Ligature
                      :curQue="topicIitem.data"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else>
                    <Ligatureview :curQue="topicIitem.data" />
                  </template>
                </template>
                <template
                  v-if="topicIitem.type == 'image_question_input_record'"
                >
                  <template v-if="topicIitem.is_edit">
                    <ImageQuestion
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else> </template>
                </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
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else> </template>
                </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
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else> </template>
                </template>
                <template v-if="topicIitem.type == 'zi_transverse_line_chs'">
                  <template v-if="topicIitem.is_edit">
                    <ZiLine
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else> </template>
                </template>
                <template v-if="topicIitem.type == 'select_input_chs'">
                  <template v-if="topicIitem.is_edit">
                    <SelectInpue
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else> </template>
                </template>
                <template v-if="topicIitem.type == 'play_input_record_chs'">
                  <template v-if="topicIitem.is_edit">
                    <PlayInputReacord
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else> </template>
                </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
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else> </template>
                </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
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else> </template>
                </template>
                <template v-if="topicIitem.type == 'sort_chs'">
                  <template v-if="topicIitem.is_edit">
                    <Sort
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else>
                    <SentenceSortQP
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                    />
                  </template>
                </template>
                <template v-if="topicIitem.type == 'CourseStart_chs'">
                  <template v-if="topicIitem.is_edit">
                    <CourseStart
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else> </template>
                </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
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else> </template>
                </template>
                <template
                  v-if="
                    topicIitem.type == 'upload_control_chs' ||
                    topicIitem.type == 'upload_control_preview_chs'
                  "
                >
                  <template v-if="topicIitem.is_edit">
                    <UploadControl
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else>
                    <UploadControlView
                      :type="topicIitem.type"
                      :curQue="topicIitem.data"
                      :fn_data="fn_data"
                    />
                  </template>
                </template>
                <template v-if="topicIitem.type == 'tinydemo_chs'">
                  <template v-if="topicIitem.is_edit">
                    <Tinydemo
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                      :number="currentTreeID + toindex + rowIndex + lineIndex"
                    />
                  </template>
                  <template v-else> </template>
                </template>
                <template v-if="topicIitem.type == 'switch_control_chs'">
                  <template v-if="topicIitem.is_edit">
                    <SuitchControl
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else> </template>
                </template>
                <template v-if="topicIitem.type == 'video_chs'">
                  <template v-if="topicIitem.is_edit">
                    <VideoControl
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </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
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else>
                    <TableView
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                    />
                  </template>
                </template>
                <template v-if="topicIitem.type == 'play_record_chs'">
                  <template v-if="topicIitem.is_edit">
                    <PlayRecord
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else>
                    <PlayRecordView
                      :curQue="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
                      :curQue="topicIitem.data"
                      :type="topicIitem.type"
                      :fn_data="fn_data"
                      :changeCurQue="changeCurQue"
                    />
                  </template>
                  <template v-else> </template>
                </template>
              </div>
              <div
                v-if="topicIitem.data && topicIitem.is_edit"
                class="addoption"
                @click="remoeModule(toindex, rowIndex, lineIndex, topicIitem)"
              >
                删除模板 {{ 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"
                @click="addRow('front', rowIndex, toindex)"
                class="addoption"
              >
                在当前行前增加行
              </div>
              <div
                style="margin-left: 10px"
                @click="addRow('behind', rowIndex, toindex)"
                class="addoption"
              >
                在当前行后增加行
              </div>
            </div>
          </div>
        </div>
        <!-- </el-tab-pane> -->
        <!-- </el-tabs> -->
      </div>
      <div v-if="currentTreeID" class="Book-function">
        <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"
                  @click.native="selectSmallModule(item, child, index, i)"
                  style="color: #000000"
                  >{{ child.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <span v-else class="fn-name">{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog
      :visible.sync="previewVisible"
      title="预览"
      top="0"
      width="100%"
      @close="handleClosePre"
    >
      <div class="chooseCon">
        <Preview
          :context="context"
          :que-index="queIndex"
          :father-name="fatherName"
          :currentTreeID="currentTreeID"
          :FatherTreeData="FatherTreeData"
          :change-id="changeId"
          :themeColor="themeColor"
          :isShowTitle="true"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <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 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 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 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 DialogueAnswerViewChs from "@/components/Adult/preview/DialogueArticleViewChs/DialogueAnswerViewChs.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,
    ImageQuestion,
    PurePreview,
    ZiLine,
    SelectInpue,
    PlayInputReacord,
    Drag,
    SelfAssessment,
    Sort,
    CourseStart,
    RecordControl,
    Tinydemo,
    VideoControl,
    VideoControlView,
    SentenceSortQP,
    Table,
    TableView,
    PlayRecord,
    PlayRecordView,
    UploadPdf,
  },
  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: [
        "①",
        "②",
        "③",
        "④",
        "⑤",
        "⑥",
        "⑦",
        "⑧",
        "⑨",
        "⑩",
        "⑪",
        "⑫",
        "⑬",
        "⑭",
        "⑮",
        "⑯",
        "⑰",
        "⑱",
        "⑲",
        "⑳",
      ],
    };
  },
  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() {
    this.fn_data = fn.fnData;
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.question_list);
    // let question_list_str = localStorage.getItem("question_list");
    // if (question_list_str) {
    //   this.question_list = JSON.parse(question_list_str);
    //   this.cur_page_que_index =
    //     this.question_list[this.tabIndex].cur_fn_data.length - 1;
    // }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    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();
    },
    // 删除行
    removeRow(index, toindex) {
      // 里面是不是剩下最后一行了
      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();
    },
    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) {
      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) {
      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 arr = {
          z_title: "",
          f_title: "",
          little_title_number:"",
          little_title:"",
          is_bg: false, // 是否有背景色
          is_layout: false, // 是不是按背景图布局
          is_textIndex: false,
          table_list: [],
        };
        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) {
      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;
      // 根据当前目录切换题
      let MethodName = "book-courseware_manager-GetCoursewareContent";
      let data = {
        id,
      };
      console.log(this.question_list);
      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.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;

          // this.cur_page_que_index =
          //   this.question_list[this.tabIndex].cur_fn_data.length - 1;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    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 {
        console.log("不存在");
        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",
          null
        );
        console.log(this.question_list);
      }
    },
    changeCurQue(data_stru) {
      console.log(this.RowIndex, this.LineIndex);
      this.$set(
        this.question_list.cur_fn_data[this.TopicIndex].table_list[
          this.RowIndex
        ][this.LineIndex],
        "data",
        JSON.parse(JSON.stringify(data_stru))
      );
      console.log(this.question_list);
    },
    // 小模板
    selectSmallModule(item, child, itemIndex, childIndex) {
      console.log("选择了小模版");
      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") {
              topicIitem.data.option.forEach((item) => {
                item.map((sItem) => {
                  sItem.audio_file_id = "";
                  if (sItem.mp3_list && sItem.mp3_list.length > 0) {
                    sItem.audio_file_id = sItem.mp3_list[0].id
                      .replace("[FID##", "")
                      .replace("##FID]", "");
                  }
                  sItem.audio_begin_time = 0;
                  sItem.audio_end_time = 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 = [],
        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: res, sentenceArr: 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;
      let question_list_str = JSON.stringify(this.question_list);
      console.log(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("有题目未保存");
      //   }
      // }
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.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;
  }
  .Book-content {
    flex: 1;
    box-sizing: border-box;
    padding: 30px;
    height: 859px;
    overflow-y: auto;
    &-inner {
      // width: 860px;
    }
    .addoption {
      width: 148px;
      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: 860px;
    display: flex;
    justify-content: flex-end;
    padding: 0 0 20px 0;
  }
  .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;
    .function-list {
      width: 100%;
      > 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;
    }
  }
}
</style>