GCLS_Page_Book_Component_NPC/src/components/Adult/Preview.vue

<!--  -->
<template>
  <div
    v-if="cur"
    class="NPC-Big-Book-preview adult-book-preview-sty"
    :class="[
      'NPC-Big-Book-preview-' + themeColor,
      isPhone ? 'NPC-Big-Book-preview-phone' : ''
    ]"
  >
    <template v-if="isPhone">
      <div class="NNPE-title NNPE-title-top">
        <!-- 页眉 -->
        <div
          class="NNPE-title-left"
          :style="{ fontSize: baseSizePhone + 4 + 'px' }"
        >
          <div
            v-for="(item, index) in cur.detailList"
            :key="index"
            class="NNPE-title-item"
          >
            <template
              v-if="
                item.detail &&
                  item.detail.wordsList &&
                  item.detail.wordsList.length == 0
              "
            >
              <p
                v-if="item.detail.sentence"
                :class="[
                  'content-con',
                  /^[\u4e00-\u9fa5]/.test(item.detail.sentence) ? 'hasCn' : ''
                ]"
                v-html="item.detail.sentence"
              />
            </template>
            <template v-else>
              <div v-if="item.detail && item.detail.resArr" class="con-box">
                <div
                  v-for="(itemCon, indexCon) in item.detail.resArr"
                  v-show="itemCon.isShow"
                  :key="indexCon"
                  :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
                >
                  <template
                    v-if="
                      item.detail &&
                        item.detail.wordsList &&
                        item.detail.wordsList[indexCon + 1] &&
                        item.detail.wordsList[indexCon + 1].chs &&
                        chsFhList.indexOf(
                          item.detail.wordsList[indexCon + 1].chs
                        ) > -1
                    "
                  >
                    <div class="synthesis-box">
                      <div>
                        <span
                          v-if="itemCon.pinyin"
                          class="pinyin"
                          :class="[
                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                          ]"
                          >{{ itemCon.pinyin }}</span
                        >
                        <span
                          class="content-con"
                          :class="
                            [/^[0-9]*$/.test(itemCon.chs)]
                              ? /^[\u4e00-\u9fa5]/.test(itemCon.chs)
                                ? 'hanzi'
                                : 'en'
                              : ''
                          "
                          >{{ itemCon.chs }}</span
                        >
                      </div>
                      <div
                        v-if="item.detail.wordsList[indexCon + 1]"
                        style="text-align: left"
                      >
                        <span
                          v-if="item.detail.wordsList[indexCon + 1].pinyin"
                          class="pinyin"
                          :class="[
                            noFont.indexOf(
                              item.detail.wordsList[indexCon + 1].pinyin
                            ) > -1
                              ? 'noFont'
                              : ''
                          ]"
                          >{{
                            item.detail.wordsList[indexCon + 1].pinyin
                          }}</span
                        >
                        <span
                          class="content-con"
                          :class="
                            [
                              /^[0-9]*$/.test(
                                item.detail.wordsList[indexCon + 1].chs
                              )
                            ]
                              ? /^[\u4e00-\u9fa5]/.test(
                                  item.detail.wordsList[indexCon + 1].chs
                                )
                                ? 'hanzi'
                                : 'en'
                              : ''
                          "
                          >{{ item.detail.wordsList[indexCon + 1].chs }}</span
                        >
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <span
                      v-if="
                        item.detail &&
                          !(
                            item.detail.wordsList &&
                            item.detail.wordsList[indexCon - 1] &&
                            item.detail.wordsList[indexCon - 1].chs &&
                            chsFhList.indexOf(
                              item.detail.wordsList[indexCon - 1].chs
                            ) == -1 &&
                            chsFhList.indexOf(itemCon.chs) > -1
                          ) &&
                          itemCon.pinyin
                      "
                      class="pinyin"
                      :class="[
                        noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                      ]"
                      >{{ itemCon.pinyin }}</span
                    >
                    <span
                      v-if="
                        item.detail &&
                          !(
                            item.detail.wordsList &&
                            item.detail.wordsList[indexCon - 1] &&
                            item.detail.wordsList[indexCon - 1].chs &&
                            chsFhList.indexOf(
                              item.detail.wordsList[indexCon - 1].chs
                            ) == -1 &&
                            chsFhList.indexOf(itemCon.chs) > -1
                          )
                      "
                      class="content-con"
                      :class="
                        [/^[0-9]*$/.test(itemCon.chs)]
                          ? /^[\u4e00-\u9fa5]/.test(itemCon.chs)
                            ? 'hanzi'
                            : 'en'
                          : ''
                      "
                      >{{ itemCon.chs }}</span
                    >
                  </template>
                </div>
              </div>
            </template>
            <p
              class="NNPE-title-item-en"
              v-html="item.en"
              :style="{ fontSize: baseSizePhone - 2 + 'px' }"
            />
          </div>
        </div>
      </div>
      <div class="operater-classTopic">
        <div
          v-if="isShowTitle && isPhone"
          class="NNPE-operate NNPE-operate-phone"
        >
          <a
            class="btn-prev"
            :class="[preClick ? '' : 'btn-prev-disabled']"
            @click="handleNNPEprev"
            :style="{ top: 84 + (baseSizePhone - 14) + 'px' }"
          />
          <a
            class="btn-next"
            :class="[nextClick ? '' : 'btn-next-disabled']"
            @click="handleNNPEnext"
            :style="{ top: 84 + (baseSizePhone - 14) + 'px' }"
          />
        </div>
        <div
          v-if="
            cur.classTopic && cur.classTopic.length > 0 && cur.classTopic[0].con
          "
          class="classTopic-box"
        >
          <span
            v-for="(item, index) in cur.classTopic"
            :key="index"
            :class="item.font"
            :style="{ fontSize: baseSizePhone + 2 + 'px' }"
          >
            {{ item.con }}
          </span>
        </div>
      </div>

      <el-checkbox
        v-if="previewType && previewType == 'previewCheck'"
        v-model="checkAllNPC"
        class="NNPE-Book-content-item-checkbox"
        :indeterminate="isIndeterminate"
        style="margin:20px 0 0 10px"
        @change="handleCheckAllChangeNPC"
        >全选</el-checkbox
      >
      <div v-if="cur" class="NNPE-Book-content-inner">
        <div
          v-for="(item, index) in cur.cur_fn_data"
          :key="index"
          class="title-box-preview"
          :class="[
            !previewType ||
            previewType == 'previewCheck' ||
            (previewType == 'previewCheckShow' && item.previewShow) ||
            JSON.parse(previewGroupId).length == 0
              ? 'NNPE-Book-content-item'
              : ''
          ]"
          :style="{
            marginTop:
              item.table_list[0][0] &&
              (item.table_list[0][0].type === 'dialogue_article_chs' ||
                item.table_list[0][0].type === 'article_chs') &&
              item.table_list[0][0].data.articleHidden === false &&
              item.table_list.length === 1
                ? '-96px'
                : '0'
          }"
        >
          <div v-for="(itemJ, indexJ) in judgeAnswersList" :key="indexJ">
            <el-checkbox
              v-if="
                previewType && previewType == 'previewCheck' && item.group_id
              "
              v-model="groupCheckList[index]"
              class="NNPE-Book-content-item-checkbox"
              :label="item.group_id"
              @change="forupdata(index)"
              ><br
            /></el-checkbox>
            <template
              v-if="
                !previewType ||
                  previewType == 'previewCheck' ||
                  (previewType == 'previewCheckShow' && item.previewShow) ||
                  JSON.parse(previewGroupId).length == 0
              "
            >
              <template v-if="itemJ != 'standardAnswer'">
                <div
                  v-if="
                    item.number ||
                      item.z_title ||
                      item.f_title ||
                      (item.z_title_detail && item.z_title_detail.sentence) ||
                      (item.f_title_detail && item.f_title_detail.sentence)
                  "
                  class="title-big"
                >
                  <b
                    v-if="item.number"
                    :style="{ fontSize: baseSizePhone + 'px' }"
                    >{{ item.number }}</b
                  >
                  <div
                    class="title-box-right"
                    :class="[item.is_textIndex ? 'title-box-right-index' : '']"
                  >
                    <template
                      v-if="item.z_title_detail && item.z_title_detail.sentence"
                    >
                      <div class="item-intro">
                        <OneSentenceTempPhone
                          :detail="item.z_title_detail"
                          :task-model="TaskModel"
                          :bookanswer="[]"
                          :correct-answer="[]"
                          :is-input="false"
                          :fn_check_list="[]"
                          :py-number="0"
                          :record_check="[]"
                          :max-fontsize="baseSizePhone"
                        />
                      </div>
                    </template>
                    <h2
                      v-else-if="item.z_title"
                      v-html="item.z_title"
                      :style="{ fontSize: baseSizePhone + 'px' }"
                    />
                    <template v-if="item.hasOwnProperty('f_title_detail')">
                      <div
                        v-if="item.f_title_detail.sentence"
                        class="item-intro"
                      >
                        <OneSentenceTempPhone
                          :detail="item.f_title_detail"
                          :task-model="TaskModel"
                          :bookanswer="[]"
                          :correct-answer="[]"
                          :is-input="false"
                          :fn_check_list="[]"
                          :py-number="0"
                          :record_check="[]"
                          :max-fontsize="baseSizePhone"
                          :style="{
                            marginTop:
                              item.z_title ||
                              (item.z_title_detail &&
                                item.z_title_detail.sentence)
                                ? '8px'
                                : '0'
                          }"
                        />
                      </div>
                    </template>
                    <h3
                      v-else-if="item.f_title"
                      :style="{
                        marginTop:
                          item.z_title ||
                          (item.z_title_detail && item.z_title_detail.sentence)
                            ? '8px'
                            : '0',
                        fontSize: baseSizePhone + 'px'
                      }"
                      v-html="item.f_title"
                    />
                  </div>
                </div>
                <div
                  class="title-little"
                  :class="[
                    (item.little_title_number ||
                      item.little_title ||
                      (item.l_title_detail && item.l_title_detail.sentence)) &&
                    (item.f_title ||
                      (item.f_title_detail && item.f_title_detail.sentence))
                      ? 'marginTop'
                      : 'marginTop-8'
                  ]"
                  :style="{
                    marginTop:
                      item.little_title_number ||
                      item.little_title ||
                      (item.l_title_detail && item.l_title_detail.sentence)
                        ? ''
                        : '0px'
                  }"
                >
                  <b
                    v-html="item.little_title_number"
                    :style="{ fontSize: baseSizePhone + 2 + 'px' }"
                  />
                  <template
                    v-if="item.l_title_detail && item.l_title_detail.sentence"
                  >
                    <div class="item-intro">
                      <OneSentenceTempPhone
                        :detail="item.l_title_detail"
                        :task-model="TaskModel"
                        :bookanswer="[]"
                        :correct-answer="[]"
                        :is-input="false"
                        :fn_check_list="[]"
                        :py-number="0"
                        :record_check="[]"
                        :max-fontsize="baseSizePhone + 2"
                      />
                    </div>
                  </template>
                  <p
                    v-else-if="item.little_title"
                    v-html="item.little_title"
                    :style="{ fontSize: baseSizePhone + 2 + 'px' }"
                  />
                </div>
              </template>
              <div
                :class="[
                  'NNPE-tableList',
                  item.is_bg ? 'NNPE-tableList-hasBg' : ''
                ]"
              >
                <h6
                  v-if="itemJ == 'userAnswer' || itemJ == 'studentAnswer'"
                  class="standardTitle"
                >
                  {{
                    itemJ == "userAnswer" ? "Your answer" : "Student answers"
                  }}
                </h6>
                <h6
                  v-if="itemJ == 'standardAnswer' && item.ShowstandardAnswer"
                  class="standardTitle"
                >
                  Standard answer
                </h6>
                <div
                  v-for="(items, indexs) in item.table_list_phone"
                  :key="indexs"
                  class="NNPE-tableList-tr"
                  :class="[
                    indexs === item.table_list_phone.length - 1
                      ? 'NNPE-tableList-tr-last'
                      : ''
                  ]"
                >
                  <div
                    v-for="(itemss, indexss) in items"
                    :key="indexss"
                    :class="[
                      'NNPE-tableList-item',
                      items.length == 1
                        ? 'NNPE-tableList-item-noMargin'
                        : 'NNPE-tableList-item' + items.length,
                      item.table_list_phone[indexs - 1] &&
                      item.table_list_phone[indexs - 1].length === 2 &&
                      item.table_list_phone[indexs - 1][0].data &&
                      item.table_list_phone[indexs - 1][0].data.type ===
                        'image' &&
                      items.length === 1
                        ? 'NNPE-tableList-item-image'
                        : ''
                    ]"
                  >
                    <template v-if="itemss.data">
                      <template v-if="itemss.type == 'ligature_chs'">
                        <LigaturePhone
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :number="
                            index +
                              '_' +
                              indexs +
                              '_' +
                              indexss +
                              '_' +
                              currentTreeID
                          "
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.data.type == 'image'">
                        <PicturePhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :child-type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'phrase_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <WordPhrasePhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :index-str="
                            index +
                              '_' +
                              indexs +
                              '_' +
                              indexss +
                              '_' +
                              currentTreeID
                          "
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'NewWord_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <WordPhrasePhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :current-tree-i-d="currentTreeID"
                          :indexs="indexs"
                          :indexss="indexss"
                          :task-model="TaskModel"
                          :index-str="
                            index +
                              '_' +
                              indexs +
                              '_' +
                              indexss +
                              '_' +
                              currentTreeID
                          "
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'annotation_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <WordPhrasePhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :index-str="
                            index +
                              '_' +
                              indexs +
                              '_' +
                              indexss +
                              '_' +
                              currentTreeID
                          "
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'notes_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <NotesPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'article_chs' &&
                            itemJ != 'standardAnswer' &&
                            itemss.data &&
                            itemss.data.articleHidden !== false
                        "
                      >
                        <ArticleTemChsPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :n-n-p-e-new-word-list="NNPENewWordList"
                          :n-n-p-e-new-phrase-list="NNPENewPhraseList"
                          :n-n-p-e-annotation-list="NNPEAnnotationList"
                          :theme-color="themeColor"
                          :current-tree-i-d="currentTreeID"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :col-length="items.length"
                          :NpcNewWordMp3="NpcNewWordMp3"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <!-- <template v-if="itemss.type == 'sentence_segword_chs'">
                  <SentenceSegWordViewChs
                    :cur-que="itemss.data"
                    :theme-color="themeColor"
                    v-if="refresh"
                  />
                </template> -->
                      <template
                        v-if="
                          itemss.type == 'dialogue_article_chs' &&
                            itemJ != 'standardAnswer' &&
                            itemss.data &&
                            itemss.data.articleHidden !== false
                        "
                      >
                        <DialogueArticleViewChsPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :n-n-p-e-new-word-list="NNPENewWordList"
                          :n-n-p-e-new-phrase-list="NNPENewPhraseList"
                          :n-n-p-e-annotation-list="NNPEAnnotationList"
                          :color-box="colorBox"
                          :theme-color="themeColor"
                          :current-tree-i-d="currentTreeID"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :col-length="items.length"
                          :NpcNewWordMp3="NpcNewWordMp3"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'dialogue_answer_chs'">
                        <DialogueAnswerViewChsPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :color-box="colorBox"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                          :themeColorPhone="
                            themeColorPhone[themeColorPhoneIndex]
                          "
                        />
                      </template>
                      <template v-if="itemss.type == 'input_record_chs'">
                        <InputHasRecordPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'recordHZ_inputPY_chs'">
                        <TextInputRecordPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'inputItem_chs' ||
                            itemss.type == 'sentence_input_chs' ||
                            itemss.type == 'sentence_judge_chs' ||
                            itemss.type == 'sentence_record_chs' ||
                            itemss.type == 'sentence_input_record_chs'
                        "
                      >
                        <SentenceInputPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :type="itemss.type"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'NumberCombination_chs'">
                        <NumberSelectHasRecordPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type === 'voice_matrix' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <voice-matrix-phone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type === 'select_drag'">
                        <select-drag-phone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type === 'fill_drag'">
                        <fill-drag-phone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type === 'config_table'">
                        <configurable-table-phone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type === 'header_separate'">
                        <header-separate-phone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'toneSelect_chs'">
                        <SelectTonePhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'sudoku_chs'">
                        <SodukoPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'single_chs'">
                        <SinglePhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'text_problem_chs'">
                        <TextProblemPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'newWord_preview_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <NewWordShowPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :index-str="index + '_' + indexs + '_' + indexss"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                          :themeColorPhone="
                            themeColorPhone[themeColorPhoneIndex]
                          "
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'listen_record_single_syllable_chs'
                        "
                      >
                        <SelectYinjiePhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="itemss.type == 'sentence_listen_read_chs'"
                      >
                        <SentenceListenRead
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'sort_chs'">
                        <SentenceSortQPPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="itemss.type == 'checkbox_self_assessment_chs'"
                      >
                        <CheckboxPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          (itemss.type == 'record_control_mini' ||
                            itemss.type == 'record_control_normal' ||
                            itemss.type == 'record_control_pro' ||
                            itemss.type == 'record_control_promax') &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <RecordModulePhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          (itemss.type == 'upload_control_chs' ||
                            itemss.type == 'upload_control_preview_chs') &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <UploadControlViewPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'CourseStart_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <CourseStartPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :handle-n-n-p-enext="handleNNPEnext"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'tinydemo_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <TinydemoPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'video_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <VideoControlPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :index-str="
                            index +
                              '_' +
                              indexs +
                              '_' +
                              indexss +
                              '_' +
                              currentTreeID
                          "
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'table_chs'">
                        <TableViewPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'play_record_chs'">
                        <PlayRecordViewPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'upload_pdf_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <PdfViewPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>

                      <template v-if="itemss.type == 'sentence_segtemp_chs'">
                        <SentenceModulePhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'options_list_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <OptionsListPhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :index-str="index + '_' + indexs + '_' + indexss"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'sentence_single_chs'">
                        <SentenceMulModulePhone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :baseSizePhone="baseSizePhone"
                        />
                      </template>
                      <!-- {{ itemss.type }} -->
                    </template>
                  </div>
                </div>
                <div
                  v-if="isAnswerItemShow && item.showSubmit"
                  style="text-align: right; padding: 10px 0px"
                >
                  <a
                    class="submitLookAnswer"
                    @click="submitLookAnswer(index)"
                    :style="{ fontSize: baseSizePhone + 'px' }"
                    >{{ submitCn ? submitCn : "查看答案" }}</a
                  >
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div v-if="isShowSave" class="NNPE-title NNPE-title-gray">
        <!-- 页眉 v-if="isShowSave"-->
        <a v-if="isShowSave" class="submitAnswer" @click="submitUserAnswerNPC"
          >提交</a
        >
      </div>
      <div class="size-setting">
        <div class="size-show" v-if="sizeSettingFlag">
          <i class="el-icon-arrow-right" @click="sizeSettingFlag = false"></i>
          <span
            :class="[
              'font-jian-black',
              baseSizePhone === 12 ? 'font-jian-white-disabled' : ''
            ]"
            @click="setFontSize('-')"
          ></span>
          <span :class="['font-img-black']"></span
          ><span
            :class="[
              'font-jia-black',
              baseSizePhone === 22 ? 'font-jia-white-disabled' : ''
            ]"
            @click="setFontSize('+')"
          ></span>
          <span
            class="theme-color-phone"
            :style="{ background: themeColorPhone[themeColorPhoneIndex] }"
            @click="themeColorPhoneFlag = true"
          ></span>
          <div class="theme-color-phone-list" v-if="themeColorPhoneFlag">
            <span
              :style="{ background: itemColor }"
              v-for="(itemColor, indexColor) in themeColorPhone"
              :key="indexColor"
              :class="[indexColor === themeColorPhoneIndex ? 'active' : '']"
              @click="changeThemeColorPhone(itemColor, indexColor)"
            ></span>
          </div>
        </div>
        <div v-else>
          <i class="el-icon-arrow-left" @click="sizeSettingFlag = true"></i>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="NNPE-title NNPE-title-top">
        <!-- 页眉 -->
        <div class="NNPE-title-left">
          <div
            v-for="(item, index) in cur.detailList"
            :key="index"
            class="NNPE-title-item"
          >
            <template
              v-if="
                item.detail &&
                  item.detail.wordsList &&
                  item.detail.wordsList.length == 0
              "
            >
              <p
                v-if="item.detail.sentence"
                :class="[
                  'content-con',
                  /^[\u4e00-\u9fa5]/.test(item.detail.sentence) ? 'hasCn' : ''
                ]"
                v-html="item.detail.sentence"
              />
            </template>
            <template v-else>
              <div v-if="item.detail && item.detail.resArr" class="con-box">
                <div
                  v-for="(itemCon, indexCon) in item.detail.resArr"
                  v-show="itemCon.isShow"
                  :key="indexCon"
                  :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
                >
                  <template
                    v-if="
                      item.detail &&
                        item.detail.wordsList &&
                        item.detail.wordsList[indexCon + 1] &&
                        item.detail.wordsList[indexCon + 1].chs &&
                        chsFhList.indexOf(
                          item.detail.wordsList[indexCon + 1].chs
                        ) > -1
                    "
                  >
                    <div class="synthesis-box">
                      <div>
                        <span
                          v-if="itemCon.pinyin"
                          class="pinyin"
                          :class="[
                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                          ]"
                          >{{ itemCon.pinyin }}</span
                        >
                        <span
                          class="content-con"
                          :class="
                            [/^[0-9]*$/.test(itemCon.chs)]
                              ? /^[\u4e00-\u9fa5]/.test(itemCon.chs)
                                ? 'hanzi'
                                : 'en'
                              : ''
                          "
                          >{{ itemCon.chs }}</span
                        >
                      </div>
                      <div
                        v-if="item.detail.wordsList[indexCon + 1]"
                        style="text-align: left"
                      >
                        <span
                          v-if="item.detail.wordsList[indexCon + 1].pinyin"
                          class="pinyin"
                          :class="[
                            noFont.indexOf(
                              item.detail.wordsList[indexCon + 1].pinyin
                            ) > -1
                              ? 'noFont'
                              : ''
                          ]"
                          >{{
                            item.detail.wordsList[indexCon + 1].pinyin
                          }}</span
                        >
                        <span
                          class="content-con"
                          :class="
                            [
                              /^[0-9]*$/.test(
                                item.detail.wordsList[indexCon + 1].chs
                              )
                            ]
                              ? /^[\u4e00-\u9fa5]/.test(
                                  item.detail.wordsList[indexCon + 1].chs
                                )
                                ? 'hanzi'
                                : 'en'
                              : ''
                          "
                          >{{ item.detail.wordsList[indexCon + 1].chs }}</span
                        >
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <span
                      v-if="
                        item.detail &&
                          !(
                            item.detail.wordsList &&
                            item.detail.wordsList[indexCon - 1] &&
                            item.detail.wordsList[indexCon - 1].chs &&
                            chsFhList.indexOf(
                              item.detail.wordsList[indexCon - 1].chs
                            ) == -1 &&
                            chsFhList.indexOf(itemCon.chs) > -1
                          ) &&
                          itemCon.pinyin
                      "
                      class="pinyin"
                      :class="[
                        noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                      ]"
                      >{{ itemCon.pinyin }}</span
                    >
                    <span
                      v-if="
                        item.detail &&
                          !(
                            item.detail.wordsList &&
                            item.detail.wordsList[indexCon - 1] &&
                            item.detail.wordsList[indexCon - 1].chs &&
                            chsFhList.indexOf(
                              item.detail.wordsList[indexCon - 1].chs
                            ) == -1 &&
                            chsFhList.indexOf(itemCon.chs) > -1
                          )
                      "
                      class="content-con"
                      :class="
                        [/^[0-9]*$/.test(itemCon.chs)]
                          ? /^[\u4e00-\u9fa5]/.test(itemCon.chs)
                            ? 'hanzi'
                            : 'en'
                          : ''
                      "
                      >{{ itemCon.chs }}</span
                    >
                  </template>
                </div>
              </div>
            </template>
            <p class="NNPE-title-item-en" v-html="item.en" />
          </div>
        </div>
        <div v-if="isShowTitle && !isPhone" class="NNPE-operate">
          <a
            class="btn-prev"
            :class="[preClick ? '' : 'btn-prev-disabled']"
            @click="handleNNPEprev"
          />
          <a
            class="btn-next"
            :class="[nextClick ? '' : 'btn-next-disabled']"
            @click="handleNNPEnext"
          />
        </div>
      </div>
      <div class="operater-classTopic" v-if="isPhone">
        <div
          v-if="isShowTitle && isPhone"
          class="NNPE-operate NNPE-operate-phone"
        >
          <a
            class="btn-prev"
            :class="[preClick ? '' : 'btn-prev-disabled']"
            @click="handleNNPEprev"
          />
          <a
            class="btn-next"
            :class="[nextClick ? '' : 'btn-next-disabled']"
            @click="handleNNPEnext"
          />
        </div>
        <div
          v-if="
            cur.classTopic && cur.classTopic.length > 0 && cur.classTopic[0].con
          "
          class="classTopic-box"
        >
          <span
            v-for="(item, index) in cur.classTopic"
            :key="index"
            :class="item.font"
          >
            {{ item.con }}
          </span>
        </div>
      </div>
      <template v-else>
        <div
          v-if="
            cur.classTopic && cur.classTopic.length > 0 && cur.classTopic[0].con
          "
          class="classTopic-box"
        >
          <span
            v-for="(item, index) in cur.classTopic"
            :key="index"
            :class="item.font"
          >
            {{ item.con }}
          </span>
        </div>
      </template>

      <el-checkbox
        v-if="previewType && previewType == 'previewCheck'"
        v-model="checkAllNPC"
        class="NNPE-Book-content-item-checkbox"
        :indeterminate="isIndeterminate"
        style="margin:20px 0 0 10px"
        @change="handleCheckAllChangeNPC"
        >全选</el-checkbox
      >
      <div v-if="cur" class="NNPE-Book-content-inner">
        <div
          v-for="(item, index) in cur.cur_fn_data"
          :key="index"
          class="title-box-preview"
          :class="[
            !previewType ||
            previewType == 'previewCheck' ||
            (previewType == 'previewCheckShow' && item.previewShow) ||
            JSON.parse(previewGroupId).length == 0
              ? 'NNPE-Book-content-item'
              : ''
          ]"
          :style="{
            marginTop:
              item.table_list[0][0] &&
              (item.table_list[0][0].type === 'dialogue_article_chs' ||
                item.table_list[0][0].type === 'article_chs') &&
              item.table_list[0][0].data.articleHidden === false &&
              item.table_list.length === 1
                ? '-96px'
                : '0'
          }"
        >
          <div v-for="(itemJ, indexJ) in judgeAnswersList" :key="indexJ">
            <el-checkbox
              v-if="
                previewType && previewType == 'previewCheck' && item.group_id
              "
              v-model="groupCheckList[index]"
              class="NNPE-Book-content-item-checkbox"
              :label="item.group_id"
              @change="forupdata(index)"
              ><br
            /></el-checkbox>
            <template
              v-if="
                !previewType ||
                  previewType == 'previewCheck' ||
                  (previewType == 'previewCheckShow' && item.previewShow) ||
                  JSON.parse(previewGroupId).length == 0
              "
            >
              <template v-if="itemJ != 'standardAnswer'">
                <div
                  v-if="
                    item.number ||
                      item.z_title ||
                      item.f_title ||
                      (item.z_title_detail && item.z_title_detail.sentence) ||
                      (item.f_title_detail && item.f_title_detail.sentence)
                  "
                  class="title-big"
                >
                  <b v-if="item.number">{{ item.number }}</b>
                  <div
                    class="title-box-right"
                    :class="[item.is_textIndex ? 'title-box-right-index' : '']"
                  >
                    <template
                      v-if="item.z_title_detail && item.z_title_detail.sentence"
                    >
                      <div class="item-intro">
                        <OneSentenceTemp
                          :detail="item.z_title_detail"
                          :task-model="TaskModel"
                          :bookanswer="[]"
                          :correct-answer="[]"
                          :is-input="false"
                          :fn_check_list="[]"
                          :py-number="0"
                          :record_check="[]"
                          :max-fontsize="'16'"
                        />
                      </div>
                    </template>
                    <h2 v-else-if="item.z_title" v-html="item.z_title" />
                    <template v-if="item.hasOwnProperty('f_title_detail')">
                      <div
                        v-if="item.f_title_detail.sentence"
                        class="item-intro"
                      >
                        <OneSentenceTemp
                          :detail="item.f_title_detail"
                          :task-model="TaskModel"
                          :bookanswer="[]"
                          :correct-answer="[]"
                          :is-input="false"
                          :fn_check_list="[]"
                          :py-number="0"
                          :record_check="[]"
                          :max-fontsize="'16'"
                          :style="{
                            marginTop:
                              item.z_title ||
                              (item.z_title_detail &&
                                item.z_title_detail.sentence)
                                ? '8px'
                                : '0'
                          }"
                        />
                      </div>
                    </template>
                    <h3
                      v-else-if="item.f_title"
                      :style="{
                        marginTop:
                          item.z_title ||
                          (item.z_title_detail && item.z_title_detail.sentence)
                            ? '8px'
                            : '0'
                      }"
                      v-html="item.f_title"
                    />
                  </div>
                </div>
                <div
                  class="title-little"
                  :class="[
                    (item.little_title_number ||
                      item.little_title ||
                      (item.l_title_detail && item.l_title_detail.sentence)) &&
                    (item.f_title ||
                      (item.f_title_detail && item.f_title_detail.sentence))
                      ? 'marginTop'
                      : 'marginTop-8'
                  ]"
                >
                  <b v-html="item.little_title_number" />
                  <template
                    v-if="item.l_title_detail && item.l_title_detail.sentence"
                  >
                    <div class="item-intro">
                      <OneSentenceTemp
                        :detail="item.l_title_detail"
                        :task-model="TaskModel"
                        :bookanswer="[]"
                        :correct-answer="[]"
                        :is-input="false"
                        :fn_check_list="[]"
                        :py-number="0"
                        :record_check="[]"
                        :max-fontsize="'16'"
                      />
                    </div>
                  </template>
                  <p v-else-if="item.little_title" v-html="item.little_title" />
                </div>
              </template>
              <div
                :class="[
                  'NNPE-tableList',
                  item.is_bg ? 'NNPE-tableList-hasBg' : ''
                ]"
              >
                <h6
                  v-if="itemJ == 'userAnswer' || itemJ == 'studentAnswer'"
                  class="standardTitle"
                >
                  {{
                    itemJ == "userAnswer" ? "Your answer" : "Student answers"
                  }}
                </h6>
                <h6
                  v-if="itemJ == 'standardAnswer' && item.ShowstandardAnswer"
                  class="standardTitle"
                >
                  Standard answer
                </h6>
                <div
                  v-for="(items, indexs) in item.table_list"
                  :key="indexs"
                  class="NNPE-tableList-tr"
                  :class="[
                    indexs === item.table_list.length - 1
                      ? 'NNPE-tableList-tr-last'
                      : ''
                  ]"
                >
                  <div
                    v-for="(itemss, indexss) in items"
                    :key="indexss"
                    :class="[
                      'NNPE-tableList-item',
                      items.length == 1
                        ? 'NNPE-tableList-item-noMargin'
                        : 'NNPE-tableList-item' + items.length
                    ]"
                  >
                    <template v-if="itemss.data">
                      <template v-if="itemss.type == 'ligature_chs'">
                        <Ligature
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :number="
                            index +
                              '_' +
                              indexs +
                              '_' +
                              indexss +
                              '_' +
                              currentTreeID
                          "
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.data.type == 'image'">
                        <Picture
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :child-type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'phrase_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <WordPhrase
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :index-str="
                            index +
                              '_' +
                              indexs +
                              '_' +
                              indexss +
                              '_' +
                              currentTreeID
                          "
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'NewWord_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <WordPhrase
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :current-tree-i-d="currentTreeID"
                          :indexs="indexs"
                          :indexss="indexss"
                          :task-model="TaskModel"
                          :index-str="
                            index +
                              '_' +
                              indexs +
                              '_' +
                              indexss +
                              '_' +
                              currentTreeID
                          "
                          :judge-answer="itemJ"
                          :isPhone="isPhone"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'annotation_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <WordPhrase
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :index-str="
                            index +
                              '_' +
                              indexs +
                              '_' +
                              indexss +
                              '_' +
                              currentTreeID
                          "
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'notes_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <Notes
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'article_chs' &&
                            itemJ != 'standardAnswer' &&
                            itemss.data &&
                            itemss.data.articleHidden !== false
                        "
                      >
                        <ArticleTemChs
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :n-n-p-e-new-word-list="NNPENewWordList"
                          :n-n-p-e-new-phrase-list="NNPENewPhraseList"
                          :n-n-p-e-annotation-list="NNPEAnnotationList"
                          :theme-color="themeColor"
                          :current-tree-i-d="currentTreeID"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :col-length="items.length"
                          :NpcNewWordMp3="NpcNewWordMp3"
                          :isPhone="isPhone"
                        />
                      </template>
                      <!-- <template v-if="itemss.type == 'sentence_segword_chs'">
                  <SentenceSegWordViewChs
                    :cur-que="itemss.data"
                    :theme-color="themeColor"
                    v-if="refresh"
                  />
                </template> -->
                      <template
                        v-if="
                          itemss.type == 'dialogue_article_chs' &&
                            itemJ != 'standardAnswer' &&
                            itemss.data &&
                            itemss.data.articleHidden !== false
                        "
                      >
                        <DialogueArticleViewChs
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :n-n-p-e-new-word-list="NNPENewWordList"
                          :n-n-p-e-new-phrase-list="NNPENewPhraseList"
                          :n-n-p-e-annotation-list="NNPEAnnotationList"
                          :color-box="colorBox"
                          :theme-color="themeColor"
                          :current-tree-i-d="currentTreeID"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :col-length="items.length"
                          :NpcNewWordMp3="NpcNewWordMp3"
                          :isPhone="isPhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'dialogue_answer_chs'">
                        <DialogueAnswerViewChs
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :color-box="colorBox"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :isPhone="isPhone"
                        />
                      </template>
                      <template v-if="itemss.type == 'input_record_chs'">
                        <InputHasRecord
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type == 'recordHZ_inputPY_chs'">
                        <TextInputRecord
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'inputItem_chs' ||
                            itemss.type == 'sentence_input_chs' ||
                            itemss.type == 'sentence_judge_chs' ||
                            itemss.type == 'sentence_record_chs' ||
                            itemss.type == 'sentence_input_record_chs'
                        "
                      >
                        <SentenceInput
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                          :type="itemss.type"
                        />
                      </template>
                      <template v-if="itemss.type == 'NumberCombination_chs'">
                        <NumberSelectHasRecord
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type === 'voice_matrix' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <voice-matrix
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type === 'select_drag'">
                        <select-drag
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type === 'fill_drag'">
                        <fill-drag
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type === 'config_table'">
                        <configurable-table
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type === 'header_separate'">
                        <header-separate
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type == 'toneSelect_chs'">
                        <SelectTone
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type == 'sudoku_chs'">
                        <Soduko
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type == 'single_chs'">
                        <Single
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type == 'text_problem_chs'">
                        <TextProblem
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'newWord_preview_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <NewWordShow
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :index-str="index + '_' + indexs + '_' + indexss"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'listen_record_single_syllable_chs'
                        "
                      >
                        <SelectYinjie
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="itemss.type == 'sentence_listen_read_chs'"
                      >
                        <SentenceListenRead
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type == 'sort_chs'">
                        <SentenceSortQP
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="itemss.type == 'checkbox_self_assessment_chs'"
                      >
                        <Checkbox
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          (itemss.type == 'record_control_mini' ||
                            itemss.type == 'record_control_normal' ||
                            itemss.type == 'record_control_pro' ||
                            itemss.type == 'record_control_promax') &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <RecordModule
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          (itemss.type == 'upload_control_chs' ||
                            itemss.type == 'upload_control_preview_chs') &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <UploadControlView
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'CourseStart_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <CourseStart
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :handle-n-n-p-enext="handleNNPEnext"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'tinydemo_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <Tinydemo
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'video_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <VideoControl
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :index-str="
                            index +
                              '_' +
                              indexs +
                              '_' +
                              indexss +
                              '_' +
                              currentTreeID
                          "
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type == 'table_chs'">
                        <TableView
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type == 'play_record_chs'">
                        <PlayRecordView
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'upload_pdf_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <PdfView
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>

                      <template v-if="itemss.type == 'sentence_segtemp_chs'">
                        <SentenceModule
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template
                        v-if="
                          itemss.type == 'options_list_chs' &&
                            itemJ != 'standardAnswer'
                        "
                      >
                        <OptionsList
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :theme-color="themeColor"
                          :index-str="index + '_' + indexs + '_' + indexss"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <template v-if="itemss.type == 'sentence_single_chs'">
                        <SentenceMulModule
                          v-if="refresh"
                          :cur-que="itemss.data"
                          :type="itemss.type"
                          :theme-color="themeColor"
                          :task-model="TaskModel"
                          :judge-answer="itemJ"
                        />
                      </template>
                      <!-- {{ itemss.type }} -->
                    </template>
                  </div>
                </div>
                <div
                  v-if="isAnswerItemShow && item.showSubmit"
                  style="text-align: right; padding: 10px 0px 40px 0"
                >
                  <a
                    class="submitLookAnswer"
                    @click="submitLookAnswer(index)"
                    >{{ submitCn ? submitCn : "查看答案" }}</a
                  >
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <!-- <iframe
      src="/wordGame/index.html"
      width="1000px"
      height="700px"
      border="none"
    ></iframe> -->
      <div v-if="isShowSave || isShowTitle" class="NNPE-title NNPE-title-gray">
        <!-- 页眉 v-if="isShowSave"-->
        <a v-if="isShowSave" class="submitAnswer" @click="submitUserAnswerNPC"
          >提交</a
        >
        <div v-if="isShowTitle" class="NNPE-operate">
          <a
            class="btn-prev"
            :class="[preClick ? '' : 'btn-prev-disabled']"
            @click="handleNNPEprev"
          />
          <a
            class="btn-next"
            :class="[nextClick ? '' : 'btn-next-disabled']"
            @click="handleNNPEnext"
          />
        </div>
      </div>
    </template>

    <el-dialog
      title=""
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :show-close="false"
      append-to-body
      :visible.sync="visiblePreviewDialog"
      width="890px"
      height="80%"
      class="previewDialog"
    >
      <div class="previewDialog-title">
        <h2>Reference answer</h2>
        <a @click="visiblePreviewDialog = false"
          ><img src="../../assets/NPC/icon-close.png"
        /></a>
      </div>
      <PreviewDialogueNPC
        v-if="visiblePreviewDialog"
        class="previewDialog-content"
        :context="contextData"
        :que-index="queIndex"
        :father-name="fatherName"
        :current-tree-i-d="currentTreeID"
        :father-tree-data="FatherTreeData"
        :change-id="changeId"
        :theme-color="themeColor"
        :task-model="'ANSWER'"
        :NpcNewWordMp3="NpcNewWordMp3"
      />
    </el-dialog>
  </div>
</template>

<script>
import Picture from "./preview/Picture.vue"; // 图片模板
import Record from "./preview/Record.vue"; // 音频播放
import Soundrecord from "./preview/Soundrecord.vue"; // 录音模板
import ArticleTemChs from "./preview/ArticleViewChs/index.vue"; // 文章模板
import DialogueArticleViewChs from "./preview/DialogueArticleViewChs/index.vue"; // 文章模板
import SentenceSegWordViewChs from "./preview/SentenceSegWordViewChs.vue"; // 句子分词
import WordPhrase from "./preview/WordPhrase.vue"; // 生词短语
import Notes from "./preview/Notes.vue"; // 注释
import Ligature from "./preview/Ligature.vue";
import InputHasRecord from "./preview/InputHasRecord.vue"; // 输入加录音
import TextInputRecord from "./preview/TextInputRecord.vue"; // 文本+输入+录音
import SentenceInput from "./preview/SentenceInput.vue"; // 输入选项
import NumberSelectHasRecord from "./preview/NumberSelectHasRecord.vue"; // 数字组合
import SelectTone from "./preview/SelectTone.vue"; // 选择声调
import Soduko from "./preview/Soduko.vue"; // 数独
import Single from "./preview/Single.vue"; // 单选
import TextProblem from "./preview/TextProblem.vue"; // 课文上方的问题
import NewWordShow from "./preview/NewWordShow.vue"; // 生字展示
import SelectYinjie from "./preview/SelectYinjie.vue"; // 选择音节
import SentenceListenRead from "./preview/SentenceListenRead.vue"; // 听并朗读
import SentenceSortQP from "./preview/SentenceSortQP.vue"; // 句子拖拽排序
import Checkbox from "./preview/CheckBoxModule.vue"; // 问卷调查-多选题
import VoiceMatrix from "./preview/VoiceMatrix.vue"; // 语音矩阵
import SelectDrag from "./preview/SelectDrag.vue"; // 选择 -> 拖拽
import FillDrag from "./preview/FillDrag.vue"; // 填空 -> 拖拽
import ConfigurableTable from "./preview/ConfigurableTable.vue"; // 可配置表格
import HeaderSeparate from "./preview/HeaderSparate/index.vue"; // 表头分离表格
import RecordModule from "./preview/RecordModule.vue"; // 录音组件
import UploadControlView from "./preview/UploadControlView.vue"; // 预览控件
import DialogueAnswerViewChs from "./preview/DialogueArticleViewChs/DialogueAnswerViewChs.vue"; // 文章模板
import CourseStart from "./preview/CourseStart.vue"; // 封面
import Tinydemo from "./preview/TinyModule.vue"; // 富文本
import VideoControl from "./preview/VideoControl.vue"; // 视频控件
import TableView from "./preview/TableView.vue"; // 视频控件
import PdfView from "./preview/PdfView.vue"; // 视频控件
import SentenceModule from "./preview/SentenceModule.vue"; // 图片模板
import PlayRecordView from "./preview/PlayRecordView.vue";
import OptionsList from "./preview/OptionsList.vue"; // 选项模板
import SentenceMulModule from "./preview/SentenceMulModule.vue"; // 多题干模板

import PreviewDialogueNPC from "./preview/PreviewDialogueNPC.vue"; // 选项模板
import OneSentenceTemp from "./preview/components/OneSentenceTemp.vue";

import PicturePhone from "./phonePreview/Picture.vue"; // 图片模板
import RecordPhone from "./phonePreview/Record.vue"; // 音频播放
import SoundrecordPhone from "./phonePreview/Soundrecord.vue"; // 录音模板
import ArticleTemChsPhone from "./phonePreview/ArticleViewChs/index.vue"; // 文章模板
import DialogueArticleViewChsPhone from "./phonePreview/DialogueArticleViewChs/index.vue"; // 文章模板
import SentenceSegWordViewChsPhone from "./phonePreview/SentenceSegWordViewChs.vue"; // 句子分词
import WordPhrasePhone from "./phonePreview/WordPhrase.vue"; // 生词短语
import NotesPhone from "./phonePreview/Notes.vue"; // 注释
import LigaturePhone from "./phonePreview/Ligature.vue";
import InputHasRecordPhone from "./phonePreview/InputHasRecord.vue"; // 输入加录音
import TextInputRecordPhone from "./phonePreview/TextInputRecord.vue"; // 文本+输入+录音
import SentenceInputPhone from "./phonePreview/SentenceInput.vue"; // 输入选项
import NumberSelectHasRecordPhone from "./phonePreview/NumberSelectHasRecord.vue"; // 数字组合
import SelectTonePhone from "./phonePreview/SelectTone.vue"; // 选择声调
import SodukoPhone from "./phonePreview/Soduko.vue"; // 数独
import SinglePhone from "./phonePreview/Single.vue"; // 单选
import TextProblemPhone from "./phonePreview/TextProblem.vue"; // 课文上方的问题
import NewWordShowPhone from "./phonePreview/NewWordShow.vue"; // 生字展示
import SelectYinjiePhone from "./phonePreview/SelectYinjie.vue"; // 选择音节
import SentenceListenReadPhone from "./phonePreview/SentenceListenRead.vue"; // 听并朗读
import SentenceSortQPPhone from "./phonePreview/SentenceSortQP.vue"; // 句子拖拽排序
import CheckboxPhone from "./phonePreview/CheckBoxModule.vue"; // 问卷调查-多选题
import VoiceMatrixPhone from "./phonePreview/VoiceMatrix.vue"; // 语音矩阵
import SelectDragPhone from "./phonePreview/SelectDrag.vue"; // 选择 -> 拖拽
import FillDragPhone from "./phonePreview/FillDrag.vue"; // 填空 -> 拖拽
import ConfigurableTablePhone from "./phonePreview/ConfigurableTable.vue"; // 可配置表格
import HeaderSeparatePhone from "./phonePreview/HeaderSparate/index.vue"; // 表头分离表格
import RecordModulePhone from "./phonePreview/RecordModule.vue"; // 录音组件
import UploadControlViewPhone from "./phonePreview/UploadControlView.vue"; // 预览控件
import DialogueAnswerViewChsPhone from "./phonePreview/DialogueArticleViewChs/DialogueAnswerViewChs.vue"; // 文章模板
import CourseStartPhone from "./phonePreview/CourseStart.vue"; // 封面
import TinydemoPhone from "./phonePreview/TinyModule.vue"; // 富文本
import VideoControlPhone from "./phonePreview/VideoControl.vue"; // 视频控件
import TableViewPhone from "./phonePreview/TableView.vue"; // 视频控件
import PdfViewPhone from "./phonePreview/PdfView.vue"; // 视频控件
import SentenceModulePhone from "./phonePreview/SentenceModule.vue"; // 图片模板
import PlayRecordViewPhone from "./phonePreview/PlayRecordView.vue";
import OptionsListPhone from "./phonePreview/OptionsList.vue"; // 选项模板
import SentenceMulModulePhone from "./phonePreview/SentenceMulModule.vue"; // 多题干模板

import PreviewDialogueNPCPhone from "./phonePreview/PreviewDialogueNPC.vue"; // 选项模板
import OneSentenceTempPhone from "./phonePreview/components/OneSentenceTemp.vue";

import { getToken } from "../../utils/auth";

export default {
  name: "Booknpc",
  components: {
    Picture,
    Record,
    Soundrecord,
    ArticleTemChs,
    DialogueArticleViewChs,
    SentenceSegWordViewChs,
    WordPhrase,
    Notes,
    Ligature,
    InputHasRecord,
    TextInputRecord,
    SentenceInput,
    NumberSelectHasRecord,
    SelectTone,
    Soduko,
    Single,
    TextProblem,
    NewWordShow,
    SelectYinjie,
    SentenceListenRead,
    SentenceSortQP,
    Checkbox,
    VoiceMatrix,
    FillDrag,
    SelectDrag,
    ConfigurableTable,
    HeaderSeparate,
    RecordModule,
    UploadControlView,
    DialogueAnswerViewChs,
    CourseStart,
    Tinydemo,
    VideoControl,
    TableView,
    PdfView,
    PlayRecordView,
    SentenceModule,
    OptionsList,
    PreviewDialogueNPC,
    SentenceMulModule,
    OneSentenceTemp,
    PicturePhone,
    RecordPhone,
    SoundrecordPhone,
    ArticleTemChsPhone,
    DialogueArticleViewChsPhone,
    SentenceSegWordViewChsPhone,
    WordPhrasePhone,
    NotesPhone,
    LigaturePhone,
    InputHasRecordPhone,
    TextInputRecordPhone,
    SentenceInputPhone,
    NumberSelectHasRecordPhone,
    SelectTonePhone,
    SodukoPhone,
    SinglePhone,
    TextProblemPhone,
    NewWordShowPhone,
    SelectYinjiePhone,
    SentenceListenReadPhone,
    SentenceSortQPPhone,
    CheckboxPhone,
    VoiceMatrixPhone,
    FillDragPhone,
    SelectDragPhone,
    ConfigurableTablePhone,
    HeaderSeparatePhone,
    RecordModulePhone,
    UploadControlViewPhone,
    DialogueAnswerViewChsPhone,
    CourseStartPhone,
    TinydemoPhone,
    VideoControlPhone,
    TableViewPhone,
    PdfViewPhone,
    PlayRecordViewPhone,
    SentenceModulePhone,
    OptionsListPhone,
    PreviewDialogueNPCPhone,
    SentenceMulModulePhone,
    OneSentenceTempPhone
  },
  props: [
    "context",
    "fatherName",
    "currentTreeID",
    "FatherTreeData",
    "changeId",
    "themeColor",
    "isShowTitle",
    "bookAnswerContent",
    "TaskModel",
    "isShowSave",
    "previewType",
    "previewGroupId",
    "isAnswerItemShow",
    "submitCn"
  ],
  data() {
    return {
      contextData: null,
      answerData: [], // 获取的答案数据
      queIndex: -1, // 题目的索引
      cur: null, // 当前的题目
      watchIndex: -1, // 监听的值
      queList: [],
      queTotal: 0, // 题目总数
      NNPENewWordList: [], // 存放文章的生词
      NNPENewPhraseList: [], // 存放文章的短语
      NNPEAnnotationList: [], // 存放文章注释
      height: "", // 总体的高度
      colorBox: [
        {
          touxiang: "#72B51D",
          bg: "#E9F0DF"
        },
        {
          touxiang: "#DE4444",
          bg: "rgba(222, 68, 68, 0.1)"
        },
        {
          touxiang: "#A7A7A7",
          bg: "#ffffff"
        },
        {
          touxiang: "#4D91F6",
          bg: "#F1F7FF"
        },
        {
          touxiang: "#FF8A00",
          bg: "rgba(255, 138, 0, 0.1)"
        },

        {
          touxiang: "#25C8B4",
          bg: "#D3F4F0"
        },
        {
          touxiang: "#AD44DE",
          bg: "#EFDAF8"
        },
        {
          touxiang: "#CD003E",
          bg: "#F5CCD8"
        },
        {
          touxiang: "#FF4980",
          bg: "#FFDBE6"
        },
        {
          touxiang: "#FAFF00",
          bg: "#FEFFCC"
        },

        {
          touxiang: "#94C748",
          bg: "rgba(148, 199, 72, 0.1)"
        },
        {
          touxiang: "#E2B203",
          bg: "rgba(226, 178, 3, 0.1)"
        },
        {
          touxiang: "rgba(108, 195, 224, 1)",
          bg: "rgba(108, 195, 224, 0.1)"
        },
        {
          touxiang: "rgba(159, 143, 239, 1)",
          bg: "rgba(159, 143, 239, 0.1)"
        },
        {
          touxiang: "rgba(231, 116, 187, 1)",
          bg: "rgba(231, 116, 187, 0.1)"
        }
      ],
      chsFhList: ["，", "。", "“", "：", "》", "？", "！", "；"],
      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
      idArr: [], // 当前的pid
      oldCurrentTreeID: "",
      refresh: true,
      preClick: false, // 上一页是否可点
      nextClick: false, // 下一页是否可点
      answerTime: 0,
      answerTimeInterval: null, // 计时器
      groupIndexList: [], // 勾选groupid数组
      groupCheckList: [], // checkbox 是否选中
      judgeAnswersList: [],
      visiblePreviewDialog: false,
      titleChsFhList: ["，", "”", "。", "：", "》", "？", "！", "；"],
      checkAllNPC: false,
      isIndeterminate: false,
      NpcNewWordMp3: "",
      isPhone: false, // 是否是移动端打开
      baseSizePhone: localStorage.getItem("baseSizePhone")
        ? localStorage.getItem("baseSizePhone") * 1
        : 14, // 移动端基础字号大小
      sizeSettingFlag: false, // 设置字号大小显示
      themeColorPhone: [
        "#D8E4F0",
        "#FDE6E0",
        "#FFFFFF",
        "#E4F0D8",
        "#E8E3CF",
        "rgb(234, 234, 239)"
      ], // 移动端主题色
      themeColorPhoneIndex: localStorage.getItem("themeColorPhoneIndex")
        ? localStorage.getItem("themeColorPhoneIndex") * 1
        : 2, // 移动端主题色索引
      themeColorPhoneFlag: false
    };
  },
  computed: {
    transScale() {
      return function() {
        let width = window.innerWidth;
        let styleConfig = {
          transform: "scale(" + width / 860 + ")"
        };
        return styleConfig;
      };
    }
  },
  watch: {
    context: {
      handler(val, oldVal) {
        const _this = this;
        _this.refresh = false;
        if (val) {
          _this.initContextData();
          if (_this.FatherTreeData) {
            _this.idArr = [];
            _this.FatherTreeData.forEach((item, itemIndex) => {
              this.seekCurrentTree(item);
            });
          }
          _this.handleTitleData();
          if (_this.queIndex == _this.queTotal - 1) {
            this.idArr.forEach((item, i) => {
              if (item == _this.currentTreeID) {
                if (i == 0) {
                  _this.preClick = false;
                  _this.nextClick = true;
                } else if (i == this.idArr.length - 1) {
                  _this.nextClick = false;
                  _this.preClick = true;
                } else {
                  _this.nextClick = true;
                  _this.preClick = true;
                }
              }
            });
          }
          _this.$nextTick(() => {
            // 重新渲染组件
            _this.refresh = true;
          });
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
    this.isPhone = regExp.test(navigator.userAgent);
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    const _this = this;
    if (_this.context) {
      _this.initContextData();
      _this.handleTitleData();
    }
    if (_this.FatherTreeData) {
      _this.idArr = [];
      _this.FatherTreeData.forEach((item, itemIndex) => {
        this.seekCurrentTree(item);
      });
      if (_this.queIndex == _this.queTotal - 1) {
        this.idArr.forEach((item, i) => {
          if (item == _this.currentTreeID) {
            if (i == 0) {
              _this.preClick = false;
              _this.nextClick = true;
            } else if (i == this.idArr.length - 1) {
              _this.nextClick = false;
              _this.preClick = true;
            } else {
              _this.nextClick = true;
              _this.preClick = true;
            }
          }
        });
      }
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    // 处理数据
    handleTitleData() {
      let _this = this;
      let curQue = JSON.parse(JSON.stringify(this.cur));
      if (curQue.detailList) {
        curQue.detailList.forEach((dItem, dIndex) => {
          let paraArr = [];
          if (dItem.detail) {
            dItem.detail.wordsList.forEach((sItem, sIndex) => {
              let obj = {
                pinyin: sItem.pinyin,
                chs: sItem.chs,
                isShow: true
              };
              paraArr.push(obj);
            });
            this.$set(_this.cur.detailList[dIndex].detail, "resArr", paraArr);
          }
        });
      }
    },
    initContextData() {
      const _this = this;
      // _this.$root.isRecording = false;
      _this.checkAllNPC = false;
      _this.contextData = JSON.parse(JSON.stringify(_this.context));
      _this.queIndex = 0;
      _this.NNPENewWordList = [];
      _this.NNPENewPhraseList = [];
      _this.NNPEAnnotationList = [];
      _this.watchIndex = _this.queIndex + new Date().getTime();
      this.groupCheckList = [];
      let selectGropuIdList = this.previewGroupId
        ? JSON.parse(this.previewGroupId)
        : [];
      this.groupCheckList = [];
      if (_this.contextData) {
        // const list = _this.contextData;
        // if (list && list.length > 0) {
        //   _this.queList = list;
        //   _this.cur = list[_this.queIndex];
        _this.queTotal = 1;
        //   _this.cur.cur_fn_data.forEach((item) => {
        //     item.table_list.forEach((items) => {
        //       items.forEach((itemss) => {
        //         if (itemss.data && itemss.data.type == "NewWord_chs") {
        //           _this.NNPENewWordList = _this.NNPENewWordList.concat(
        //             itemss.data.option
        //           );
        //         } else if (itemss.data && itemss.data.type == "notes_chs") {
        //           _this.NNPEAnnotationList = _this.NNPEAnnotationList.concat(
        //             itemss.data.option
        //           );
        //         }
        //       });
        //     });
        //   });
        // }
        _this.cur = _this.contextData;
        _this.cur.cur_fn_data.forEach((item, index) => {
          if (item.hasOwnProperty("z_title_detail")) {
            if (item.z_title_detail.wordsList.length > 0) {
              item.z_title_detail.wordsList.forEach((sItem, sIndex) => {
                this.mergeWordSymbol(sItem);
                sItem.fontColor =
                  this.themeColor === "green"
                    ? "#24b99e"
                    : this.themeColor === "brown"
                    ? "#bd8865"
                    : "#e35454";
                sItem.fontSize = "16px";
                sItem.fontWeight = "bold";
              });
            }
            this.$set(item.z_title_detail, "config", {
              fontColor:
                this.themeColor === "green"
                  ? "#24b99e"
                  : this.themeColor === "brown"
                  ? "#bd8865"
                  : "#e35454",
              fontFamily:
                "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif, alabo",
              fontSize: "16px",
              fontWeight: "bold"
            });
          }
          if (item.hasOwnProperty("f_title_detail")) {
            if (item.f_title_detail.wordsList.length > 0) {
              item.f_title_detail.wordsList.forEach((sItem, sIndex) => {
                this.mergeWordSymbol(sItem);
                sItem.fontColor = "#000000";
                sItem.fontSize = "16px";
              });
            }
            this.$set(item.f_title_detail, "config", {
              fontColor: "#000000",
              fontFamily:
                "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif",
              fontSize: "16px"
            });
          }
          if (item.hasOwnProperty("l_title_detail")) {
            if (item.l_title_detail.wordsList.length > 0) {
              item.l_title_detail.wordsList.forEach((sItem, sIndex) => {
                this.mergeWordSymbol(sItem);
                sItem.fontColor = "#000000";
                sItem.fontSize = "16px";
              });
            }
            this.$set(item.l_title_detail, "config", {
              fontColor: "#000000",
              fontFamily:
                "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif, alabo",
              fontSize: "16px"
            });
          }
          this.groupCheckList.push(false);
          selectGropuIdList.forEach(itemId => {
            itemId.forEach(itemIds => {
              if (item.group_id && itemIds.indexOf(item.group_id[0]) > -1) {
                item.previewShow = true;
              }
            });
          });

          item.showSubmit = false;
          item.table_list.forEach((items, indexs) => {
            items.forEach((itemss, indexss) => {
              if (itemss.data && itemss.type) {
                if (
                  (this.previewType &&
                    this.previewType == "previewCheckShow" &&
                    (JSON.parse(this.previewGroupId).length == 0 ||
                      this.previewGroupId.indexOf(item.group_id[0]) > -1)) ||
                  !this.previewType
                ) {
                  if (
                    itemss.type != "article_chs" &&
                    itemss.type != "NewWord_chs" &&
                    itemss.type != "dialogue_article_chs" &&
                    itemss.type != "notes_chs" &&
                    itemss.type != "voice_matrix" &&
                    itemss.type != "upload_control_chs" &&
                    itemss.type != "upload_control_preview_chs" &&
                    itemss.type != "record_control_mini" &&
                    itemss.type != "record_control_normal" &&
                    itemss.type != "record_control_pro" &&
                    itemss.type != "record_control_promax" &&
                    itemss.type != "text_problem_chs" &&
                    itemss.type != "newWord_preview_chs" &&
                    itemss.type != "CourseStart_chs" &&
                    itemss.type != "tinydemo_chs" &&
                    itemss.type != "video_chs" &&
                    itemss.type != "play_record_chs" &&
                    itemss.type != "upload_pdf_chs" &&
                    itemss.type != "options_list_chs" &&
                    itemss.type != "sentence_listen_read_chs" &&
                    itemss.type != "imgage_image" &&
                    itemss.type != "checkbox_self_assessment_chs"
                  ) {
                    setTimeout(() => {
                      let BookanswerStr = JSON.stringify(
                        itemss.data.Bookanswer
                      );
                      let errReg = /\[JUDGE##F##JUDGE\]/g;
                      if (errReg.test(BookanswerStr)) {
                        item.showSubmit = true;
                      }
                      this.$forceUpdate();
                    }, 100);
                  }
                }
                // else if (
                //   !this.previewType ||
                //   this.previewType != "previewCheckShow"
                // ) {
                //   item.showSubmit = true;
                // }
              }
              if (itemss.data && itemss.data.type == "NewWord_chs") {
                _this.NpcNewWordMp3 =
                  itemss.data && itemss.data.mp3_list && itemss.data.mp3_list[0]
                    ? itemss.data.mp3_list[0].id
                    : "";
                itemss.data.option.forEach(itemso => {
                  itemso.forEach(itemsos => {
                    itemsos.newWordMp3 = _this.NpcNewWordMp3;
                  });
                });
                _this.NNPENewWordList = _this.NNPENewWordList.concat(
                  itemss.data.option
                );
              } else if (itemss.data && itemss.data.type == "notes_chs") {
                _this.NNPEAnnotationList = _this.NNPEAnnotationList.concat(
                  itemss.data.option
                );
              }

              let Bookanswer = this.bookAnswerContent;
              if (Bookanswer) {
                if (this.TaskModel == "ANSWER") {
                  let token = getToken();
                  let roleAnswer = "studentAnswer";
                  if (token) {
                    let userInfor = JSON.parse(token);
                    let user_type = userInfor.user_type;
                    if (user_type == "TEACHER") {
                      roleAnswer = "studentAnswer";
                    } else {
                      roleAnswer = "userAnswer";
                    }
                  }
                  _this.judgeAnswersList = [roleAnswer, "standardAnswer"];
                } else {
                  _this.judgeAnswersList = [""];
                }

                let answerData = JSON.parse(Bookanswer);
                if (answerData && itemss.data) {
                  let BookanswerRes =
                    answerData.length > 0 &&
                    answerData[index].table_list &&
                    answerData[index].table_list.length > 0 &&
                    answerData[index].table_list[indexs].length > 0 &&
                    answerData[index].table_list[indexs][indexss].data
                      ? answerData[index].table_list[indexs][indexss].data
                          .Bookanswer
                      : [];
                  _this.$set(itemss.data, "Bookanswer", BookanswerRes);
                }
              } else {
                _this.judgeAnswersList = [""];
              }
              itemss.mark = Math.random()
                .toString(36)
                .substring(2, 10);
            });
          });
          if (_this.isPhone) {
            let table_list_phone = [];
            item.table_list.forEach((items, indexs) => {
              items.forEach((itemss, indexss) => {
                if (itemss.data && itemss.type) {
                  if (itemss.data.type === "image") {
                    if (
                      table_list_phone[table_list_phone.length - 1] &&
                      table_list_phone[table_list_phone.length - 1].length ===
                        1 &&
                      table_list_phone[table_list_phone.length - 1][0].data
                        .type === "image"
                    ) {
                      table_list_phone[table_list_phone.length - 1].push(
                        itemss
                      );
                    } else {
                      table_list_phone.push([]);
                      table_list_phone[table_list_phone.length - 1].push(
                        itemss
                      );
                    }
                  } else {
                    table_list_phone.push([itemss]);
                  }
                }
              });
            });
            _this.$set(item, "table_list_phone", table_list_phone);
          }
          item.ShowstandardAnswer = Boolean(
            JSON.stringify(item.table_list).match(/\[JUDGE##F##JUDGE\]/g)
          );
        });

        console.log(this.cur.cur_fn_data);
      }
      this.$forceUpdate();
    },
    // 词和标点合一起
    mergeWordSymbol(sItem) {
      if (this.titleChsFhList.indexOf(sItem.chs) > -1) {
        sItem.isShow = false;
      } else {
        sItem.isShow = true;
      }
    },
    // 上一页
    handleNNPEprev() {
      let _this = this;
      _this.puaseAudio();
      if (_this.queIndex == 0) {
        this.idArr.forEach((item, i) => {
          if (item == _this.currentTreeID) {
            if (i == 0) {
              _this.preClick = false;
              _this.nextClick = true;
            } else {
              _this.changeId(this.idArr[i - 1]);
              _this.preClick = true;
              _this.nextClick = true;
            }
          }
        });
      } else {
        _this.queIndex -= 1;
        _this.watchIndex = _this.queIndex + new Date().getTime();
        _this.cur = _this.queList[_this.queIndex];
      }
    },
    // 递归寻找相同的目录并保存目录的pid
    seekCurrentTree(item) {
      if (item.is_courseware == "true") {
        this.idArr.push(item.id);
      }
      if (item.children) {
        item.children.forEach((it, index) => {
          if (it.is_courseware == "true") {
            this.idArr.push(it.id);
          }
          if (it.children) {
            this.seekCurrentTree(it);
          }
        });
      }
    },
    puaseAudio() {
      let audio = document.getElementsByTagName("audio");
      if (
        audio &&
        audio.length > 0 &&
        window.location.href.indexOf("GCLS-Learn") == -1
      ) {
        audio.forEach(item => {
          item.pause();
        });
      }
      let video = document.getElementsByTagName("video");
      if (
        video &&
        video.length > 0 &&
        window.location.href.indexOf("GCLS-Learn") == -1
      ) {
        video.forEach(item => {
          item.pause();
        });
      }
    },
    // 下一页
    handleNNPEnext() {
      const _this = this;
      _this.puaseAudio();
      if (_this.queIndex == _this.queTotal - 1) {
        this.idArr.forEach((item, i) => {
          if (item == _this.currentTreeID) {
            if (i == this.idArr.length - 1) {
              _this.nextClick = false;
              _this.preClick = true;
            } else {
              _this.changeId(this.idArr[i + 1]);
              _this.nextClick = true;
              _this.preClick = true;
            }
          }
        });
      } else {
        _this.queIndex += 1;
        _this.watchIndex = _this.queIndex + new Date().getTime();
        _this.cur = _this.queList[_this.queIndex];
      }
    },
    submitUserAnswerNPC() {
      this.handleAnswerTimeEnd();
      let contextDataStr = JSON.stringify(this.contextData);
      if (!contextDataStr) {
        return;
      }
      let userErrorNumberTotal = 0;
      let userRightNumberTotal = 0;
      let errReg = /\[JUDGE##F##JUDGE\]/g;
      let rightReg = /\[JUDGE##T##JUDGE\]/g;
      if (errReg.test(contextDataStr)) {
        let errorArr = contextDataStr.match(/\[JUDGE##F##JUDGE\]/g);
        userErrorNumberTotal = errorArr.length;
      }

      if (rightReg.test(contextDataStr)) {
        let rightArr = contextDataStr.match(/\[JUDGE##T##JUDGE\]/g);
        userRightNumberTotal = rightArr.length;
      }

      let contextData = JSON.parse(contextDataStr);
      let result = [];
      contextData.cur_fn_data.forEach((item, index) => {
        result[index] = {
          table_list: []
        };
        item.table_list.forEach((items, indexs) => {
          result[index].table_list[indexs] = [];
          items.forEach((itemss, indexss) => {
            if (itemss.data) {
              let Bookanswer = itemss.data.Bookanswer;
              let obj = {
                data: {
                  Bookanswer
                }
              };
              result[index].table_list[indexs][indexss] = obj;
            } else {
              result[index].table_list[indexs][indexss] = {
                data: null
              };
            }
          });
        });
      });
      this.$emit(
        "finishTaskMaterial",
        JSON.stringify(result),
        this.answerTime,
        userRightNumberTotal,
        userErrorNumberTotal
      );
    },
    // 开始计算答题用时
    handleAnswerTimeStart() {
      this.answerTime = 0;
      window.clearInterval(this.answerTimeInterval);
      this.answerTimeInterval = window.setInterval(() => {
        this.answerTime++;
      }, 1000);
    },
    // 结束计算答题用时
    handleAnswerTimeEnd() {
      window.clearInterval(this.answerTimeInterval);
    },
    // 提交选中groupid
    submitPreviewGroupId() {
      return JSON.stringify(this.groupIndexList);
    },
    forupdata(indexI, type) {
      if (type === "all") {
        this.groupIndexList = [];
        this.cur.cur_fn_data.forEach((item, index) => {
          this.groupIndexList.push(this.cur.cur_fn_data[index].group_id);
        });
      } else if (
        this.groupIndexList
          .toString()
          .indexOf(this.cur.cur_fn_data[indexI].group_id.toString()) == -1
      ) {
        this.groupIndexList.push(this.cur.cur_fn_data[indexI].group_id);
      } else {
        this.groupIndexList.forEach((items, indexs) => {
          if (
            items.toString() == this.cur.cur_fn_data[indexI].group_id.toString()
          ) {
            this.groupIndexList.splice(indexs, 1);
            return false;
          }
        });
      }

      this.groupCheckList.forEach((item, index) => {
        this.groupCheckList[index] = false;
      });
      if (type === "all") {
      } else {
        this.isIndeterminate = false;
      }
      this.checkAllNPC =
        this.groupIndexList.length === this.cur.cur_fn_data.length;
      this.cur.cur_fn_data.forEach((item, index) => {
        if (
          this.groupIndexList.toString().indexOf(item.group_id.toString()) > -1
        ) {
          this.groupCheckList[index] = true;
          if (type === "all") {
          } else {
            this.isIndeterminate = true;
          }
        }
      });
      this.$forceUpdate();
    },
    submitLookAnswer(ItemIndex) {
      let contextData = this.contextData;
      contextData.cur_fn_data.forEach((item, index) => {
        if (index == ItemIndex) {
          item.showPreview = true;
        } else {
          item.showPreview = false;
        }
      });
      this.visiblePreviewDialog = true;
      //   this.submitUserAnswerNPC();
    },
    handleCheckAllChangeNPC(val) {
      if (val) {
        this.forupdata("", "all");
      } else {
        this.groupCheckList.forEach((item, index) => {
          this.groupCheckList[index] = false;
        });
        this.groupIndexList = [];
        this.isIndeterminate = false;
      }
    },
    setFontSize(type) {
      let _this = this;
      if (type == "-") {
        if (_this.baseSizePhone >= 14) {
          this.baseSizePhone = this.baseSizePhone - 2;
        }
      } else if (type == "+") {
        if (_this.baseSizePhone <= 20) {
          this.baseSizePhone = this.baseSizePhone + 2;
        }
      }

      localStorage.setItem("baseSizePhone", this.baseSizePhone);
    },
    changeThemeColorPhone(color, index) {
      this.themeColorPhoneIndex = index;
      this.themeColorPhoneFlag = false;
      localStorage.setItem("themeColorPhoneIndex", index);
      localStorage.setItem("themeColorPhone", color);
      this.$emit("changeThemeColorPhone", color);
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.NPC-Big-Book-preview {
  width: 860px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 120px;
  .NNPE-title {
    background: #e35454;
    border-radius: 0px 0px 16px 16px;
    padding: 7px 24px 7px 30px;
    position: relative;
    height: 64px;
    display: flex;
    align-items: center;
    &.NNPE-title-gray {
      background: #eeeeee;
      border-radius: 0;
      margin-top: 24px;
      .NNPE-operate {
        position: absolute;
        top: 10px;
        right: 20px;
        a {
          background: #fff url("../../assets/newImage/common/btn-pre-black.png")
            center no-repeat;
          background-size: 24px;
          &.btn-next {
            background: #fff
              url("../../assets/newImage/common/btn-next-black.png") center
              no-repeat;
            background-size: 24px;
          }
          &:hover {
            background-color: #fff;
          }
          &:active {
            background-color: #fff;
          }
          &.btn-prev-disabled,
          &.btn-next-disabled {
            background-color: rgba(0, 0, 0, 0.25);
          }
        }
      }
    }
    h1 {
      color: #ffffff;
      font-weight: bold;
      font-size: 16px;
      line-height: 150%;
      margin: 0;
    }
    .NNPE-title-left {
      display: flex;
      color: #ffffff;
      font-size: 18px;
      line-height: 18px;
      align-items: center;
      .NNPE-title-item {
        margin-right: 12px;
        width: max-content;
      }
      .content-con {
        margin: 4px 0;
        font-family: "robot";
        &.hasCn,
        &.hanzi {
          font-family: "FZJCGFKTK";
        }
        &.en {
          font-family: "robot";
        }
      }
      .content-en {
        font-weight: normal;
        line-height: 18px;
        font-family: "robot";
      }
      .NNPE-title-item-en {
        font-weight: normal;
        line-height: 12px;
        font-family: "robot";
        font-size: 12px;
        margin: 0;
      }
      .con-box {
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        align-items: flex-end;
        .con-item {
          text-align: center;
          padding: 0 1px;
        }
        span {
          display: block;
        }
        .pinyin {
          font-family: "GB-PINYINOK-B";
          font-size: 12px;
          line-height: 12px;
          height: 12px;
          &.noFont {
            font-family: initial;
          }
        }
        .synthesis-box {
          display: flex;
        }
      }
    }
  }
  .NNPE-operate {
    position: absolute;
    top: 10px;
    right: 20px;
    a {
      background: #e35454 url("../../assets/newImage/common/btn-pre.png") center
        no-repeat;
      background-size: 24px;
      border-radius: 4px;
      width: 44px;
      height: 44px;
      display: inline-block;
      margin: 0 4px;
      &.btn-next {
        background: #e35454 url("../../assets/newImage/common/btn-next.png")
          center no-repeat;
        background-size: 24px;
      }
      &:hover {
        background-color: #f76565;
      }
      &:active {
        background-color: #d24444;
      }
      &.btn-prev-disabled,
      &.btn-next-disabled {
        background-color: rgba(0, 0, 0, 0.25);
        cursor: not-allowed;
      }
    }
  }
  .classTopic-box {
    background: #e35454;
    border-radius: 8px;
    width: 780px;
    margin: 24px auto 0 auto;
    text-align: center;
    padding: 8px 24px;
    span {
      font-size: 16px;
      line-height: 150%;
      color: #ffffff;
      padding: 0 1px;
      &.cn {
        font-family: "FZJCGFKTK";
      }
      &.en {
        font-family: "robot";
      }
      &.pinyin {
        font-family: "GB-PINYINOK-B";
      }
    }
  }
  .NNPE-Book-content-inner {
    padding: 0 40px;
    .NNPE-Book-content-item {
      position: relative;
    }
    .NNPE-Book-content-item-checkbox {
      position: absolute;
      left: -30px;
      top: 36px;
    }
    > div.title-box-preview {
      padding-top: 32px;
      .title-big {
        display: flex;
        b {
          min-width: 39px;
          height: fit-content;
          background: #e35454;
          border-radius: 8px;
          color: #ffffff;
          font-family: "robot";
          display: inline-block;
          text-align: center;
          font-size: 16px;
          line-height: 150%;
          margin-right: 12px;
          padding: 0 4px;
        }
        h2 {
          color: #e35454;
          font-size: 16px;
          line-height: 150%;
          font-weight: bold;
          white-space: pre-wrap;
          word-break: break-word;
          margin: 0;
        }
        h3 {
          color: #000000;
          font-size: 16px;
          line-height: 150%;
          font-weight: normal;
          margin: 0;
          white-space: pre-wrap;
          word-break: break-word;
        }
        .title-box-right-index {
          padding-left: 51px;
        }
      }
      .title-little {
        display: flex;
        margin-bottom: 24px;
        &.marginTop {
          margin-top: 24px;
        }
        &.marginTop-8 {
          margin-top: 8px;
        }
        b,
        p {
          color: #000000;
          font-size: 16px;
          line-height: 150%;
          font-weight: normal;
          margin: 0;
          white-space: pre-wrap;
          word-break: break-word;
          padding-right: 3px;
        }
      }
    }
    .NNPE-tableList {
      // background: #fff;
      border-radius: 8px;
      //   padding: 12px 8px;
      &.NNPE-tableList-hasBg {
        background: #f7f7f7;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        border-radius: 8px;
      }
      .NNPE-tableList-tr {
        display: flex;
        justify-content: space-between;
        // flex-flow: wrap;
        .NNPE-tableList-item {
          width: 100%;
          //   margin: 12px 16px;
          // padding: 16px;
          // background: #FFFFFF;
          // border-radius: 4px;
          display: flex;
          flex-flow: wrap;
          justify-content: center;
          &.NNPE-tableList-item-noMargin {
            margin: 0;
          }
          &.NNPE-tableList-item2 {
            width: 378px;
          }
          &.NNPE-tableList-item3 {
            width: 244px;
          }
          &.NNPE-tableList-item4 {
            width: 195px;
          }
        }
      }
    }
  }
  .submitAnswer {
    width: 160px;
    height: 44px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    font-family: robot;
    background: #e35454;
    color: #fff;
    margin-left: 16px;
    &:hover {
      background-color: #f76565;
    }
    &:active {
      background-color: #d24444;
    }
  }
  &-phone {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 10px;
    // transform-origin: 0 0; /* 设置变换的原点为元素的左上角 */
    // transform: scale(0.6);
    .classTopic-box {
      width: 100%;
      border-radius: 0 0 20px 20px;
      margin-top: 15px;

      position: fixed;
      left: 0;
      top: 64px;
      z-index: 2;
    }
    .NNPE-title-top {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1;
    }
    .NNPE-Book-content-inner {
      padding: 0 15px;
    }
    .operater-classTopic {
      width: 100%;
      position: relative;
      padding-top: 120px;
    }
    .NNPE-operate-phone {
      width: 100%;
      left: 0;
      top: 0;
      .btn-prev,
      .btn-next {
        position: fixed;
        top: 84px;
        left: 0;
        z-index: 3;
        width: 30px;
        height: 30px;
        // background-color: transparent;
        background-size: 20px !important;
      }
      .btn-next {
        left: auto;
        right: 0;
      }
    }
    .NNPE-title-gray {
      width: 100%;
      background: none !important;
      padding: 0 15px;
      margin-top: 0 !important;
      justify-content: end;
      .submitAnswer {
        width: auto;
        padding: 6px 12px;
        height: auto;
        line-height: 1.2;
        font-size: 14px;
      }
    }
    .NNPE-tableList-tr {
      margin-bottom: 10px;
      gap: 10px;
      .NNPE-tableList-item-image {
        width: 50% !important;
        padding-right: 5px;
      }
    }
    .title-little {
      margin-bottom: 16px !important;
    }
    .title-box-preview {
      padding-top: 20px !important;
    }
    .submitLookAnswer {
      height: fit-content;
      width: auto;
      padding: 6px 12px;
      line-height: 1.2;
    }
    .size-setting {
      position: fixed;
      right: 0;
      top: 40%;
      z-index: 1;
      width: auto;
      padding: 6px 0 6px 2px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
      border-radius: 50px 0 0 50px;
      background: #fff;
      opacity: 0.9;
      .el-icon-arrow-right,
      .el-icon-arrow-left {
        font-size: 20px;
        color: #666666;
        padding: 2px 0;
      }
      .size-show {
        display: flex;
        column-gap: 4px;
        padding: 0 11px 0 6px;
        span {
          width: 24px;
          height: 24px;
          display: block;
        }
      }
      .font-jian-black {
        background: url("../../assets/NPC/jian-black.png") no-repeat left top;
        background-size: 100% 100%;
        &.font-jian-white-disabled {
          background: url("../../assets/NPC/jian-white-disabled.png") no-repeat
            left top;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
      .font-img-black {
        background: url("../../assets/NPC/fontSize-black.png") no-repeat left
          top;
        background-size: 100% 100%;
      }
      .font-jia-black {
        background: url("../../assets/NPC/jia-black.png") no-repeat left top;
        background-size: 100% 100%;
        &.font-jia-white-disabled {
          background: url("../../assets/NPC/jia-white-disabled.png") no-repeat
            left top;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
      .theme-color-phone {
        border-radius: 50%;
        border: 1px solid #666666;
        width: 20px !important;
        height: 20px !important;
        margin-top: 2px;
      }
      .theme-color-phone-list {
        position: absolute;
        top: 50%;
        right: 7px;
        margin-top: -66px;
        background: rgba(229, 229, 229, 0.5);
        padding: 4px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 28px;
        span {
          width: 20px;
          height: 20px;
          border: 1px solid #fff;
          border-radius: 50%;
          margin: 4px 0;
          &.active {
            border-color: rgba(102, 102, 102, 1);
          }
        }
      }
    }
  }
}
.submitLookAnswer {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  width: 106px;
  height: 40px;
  background: #e35454;
  border-radius: 8px;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  font-family: "sourceR";
}
.NPC-Big-Book-preview-green {
  .submitLookAnswer {
    background: #24b99e;
  }
  .NNPE-title {
    background: #24b99e;
  }
  .NNPE-operate {
    a {
      background: #24b99e url("../../assets/newImage/common/btn-pre.png") center
        no-repeat;
      background-size: 24px;
      &.btn-next {
        background: #24b99e url("../../assets/newImage/common/btn-next.png")
          center no-repeat;
        background-size: 24px;
      }
      &:hover {
        background-color: #3dd4b8;
      }
      &:active {
        background-color: #1fa189;
      }
    }
  }
  .submitAnswer {
    background: #24b99e;
    &:hover {
      background-color: #3dd4b8;
    }
    &:active {
      background-color: #1fa189;
    }
  }
  .classTopic-box {
    background: #24b99e;
  }
  .NNPE-Book-content-inner {
    > div.title-box-preview {
      .title-big {
        b {
          background: #24b99e;
        }
        h2 {
          color: #24b99e;
        }
      }
    }
  }
}
.NPC-Big-Book-preview-brown {
  .submitLookAnswer {
    background: #bd8865;
  }
  .NNPE-title {
    background: #bd8865;
  }
  .NNPE-operate {
    a {
      background: #bd8865 url("../../assets/newImage/common/btn-pre.png") center
        no-repeat;
      background-size: 24px;
      &.btn-next {
        background: #bd8865 url("../../assets/newImage/common/btn-next.png")
          center no-repeat;
        background-size: 24px;
      }
      &:hover {
        background-color: #d6a687;
      }
      &:active {
        background-color: #a37557;
      }
    }
  }
  .submitAnswer {
    background: #bd8865;
    &:hover {
      background-color: #d6a687;
    }
    &:active {
      background-color: #a37557;
    }
  }
  .classTopic-box {
    background: #bd8865;
  }
  .NNPE-Book-content-inner {
    > div.title-box-preview {
      .title-big {
        b {
          background: #bd8865;
        }
        h2 {
          color: #bd8865;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.NNPE-Book-content-item-checkbox {
  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
    top: 9px;
  }
  .el-checkbox__inner {
    border: 2px solid #4a99ea;
    width: 24px;
    height: 24px;
  }
  .el-checkbox__inner::after {
    border-width: 2px;
    height: 11px;
    left: 8px;
    top: 2px;
  }
}
.previewDialog {
  .el-dialog {
    border-radius: 20px;
  }
  .el-dialog__body,
  .el-dialog__header {
    padding: 0;
  }
  .previewDialog-title {
    padding: 26px 40px;
    border-bottom: 1px solid rgba(51, 51, 51, 0.1);
    position: relative;
    h2 {
      font-weight: 700;
      font-size: 20px;
      line-height: 28px;
      margin: 0;
      font-family: "D-DIN";
      white-space: pre-wrap;
      word-break: break-word;
    }
    a {
      position: absolute;
      width: 32px;
      height: 32px;
      right: 40px;
      top: 26px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .previewDialog-content {
    max-height: 70vh;
    overflow-y: auto;
  }
}
</style>