GCLS_Page_Book_Component_NPC/src/components/Adult/preview/ArticleViewChs/PhraseModelChs.vue

<!--  -->
<template>
  <div class="NNPE-ArticleView" v-if="curQue">
    <div
      class="aduioLine-box aduioLine-practice-npc"
      v-if="
        (curQue.mp3_list &&
          curQue.mp3_list.length > 0 &&
          curQue.mp3_list[0].id) ||
          config.isHasPY ||
          config.isHasEN
      "
    >
      <div class="aduioLine-content">
        <template
          v-if="
            curQue.mp3_list &&
              curQue.mp3_list.length > 0 &&
              curQue.mp3_list[0].id
          "
        >
          <AudioLine
            audioId="artPhraseAudio"
            :mp3="curQue.mp3_list[0].id"
            :getCurTime="getCurTime"
            :mp3Source="curQue.mp3_list[0].source"
            :width="colLength == 2 ? 200 : 590"
            ref="audioLine"
          />
        </template>
      </div>
      <div class="aduioLine-right">
        <span
          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
          @click="changePinyin"
          v-if="config.isHasPY"
        ></span>
        <span
          :class="['EN-16', config.isShowEN ? '' : 'disabled']"
          @click="changeEN"
          v-if="config.isHasEN"
        ></span>
      </div>
    </div>
    <template v-if="!config.isHasEN || (config.isHasEN && !config.isShowEN)">
      <template v-if="resArr.length > 0">
        <div class="NPC-sentences-list">
          <div
            :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
            v-for="(item, index) in resArr"
            :key="'detail' + index"
          >
            <div
              class="wordsList-box"
              :class="[
                curQue.detail[index].paragraphAttr
                  ? 'wordsList-box-' +
                    curQue.detail[index].paragraphAttr.paragraphAlign
                  : ''
              ]"
            >
              <img
                :src="articleImg[index]"
                v-if="articleImg[0] && index == 0"
              />
              <div>
                <div
                  class="NNPE-words"
                  v-for="(pItem, pIndex) in item.wordsList"
                  :key="'wordsList' + pIndex"
                  :class="[
                    pItem.chs != '“' && pItem.wordIndex == 0
                      ? 'textLeft'
                      : 'textCenter',
                    pItem.chs == '“' ? 'textRight' : ''
                  ]"
                  @click="showWordDetail($event, pItem.chs, pItem.words)"
                >
                  <template v-if="!pItem.width">
                    <template v-if="pItem.isShow">
                      <template
                        v-if="
                          item.wordsList[pIndex + 1] &&
                            item.wordsList[pIndex + 1].chs &&
                            (chsFhList.indexOf(item.wordsList[pIndex + 1].chs) >
                              -1 ||
                              NumberList.indexOf(
                                item.wordsList[pIndex + 1].chs
                              ) > -1)
                        "
                      >
                        <span class="NNPE-words-box">
                          <span
                            v-if="
                              curQue.pyPosition == 'top' &&
                                config.isShowPY &&
                                item.dhaspinyin
                            "
                            :class="[
                              'NNPE-pinyin',
                              pItem.className ? pItem.className : '',
                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                            ]"
                            @click.stop="viewNotes($event, pItem.pinyin)"
                            >{{ pItem.pinyin }}</span
                          >
                          <span
                            :class="[
                              'NNPE-chs',
                              newWordList.indexOf(pItem.chs) > -1
                                ? 'active'
                                : '',
                              pItem.words ? 'active' : ''
                            ]"
                            @click.stop="
                              viewNotes(
                                $event,
                                pItem.words ? pItem.words : pItem.chs
                              )
                            "
                            :style="{
                              fontFamily: pItem.config.fontFamily,
                              height: '28px',
                              display: 'inline-block'
                            }"
                            >{{
                              NumberList.indexOf(pItem.pinyin) == -1
                                ? pItem.chs
                                : ""
                            }}</span
                          >
                          <span
                            v-if="
                              curQue.pyPosition == 'bottom' &&
                                config.isShowPY &&
                                item.dhaspinyin
                            "
                            :class="[
                              'NNPE-pinyin',
                              pItem.className ? pItem.className : '',
                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                            ]"
                            @click.stop="viewNotes($event, pItem.pinyin)"
                            >{{ pItem.pinyin }}</span
                          >
                        </span>
                        <span class="NNPE-words-box">
                          <span
                            v-if="
                              curQue.pyPosition == 'top' &&
                                config.isShowPY &&
                                item.dhaspinyin
                            "
                            :class="[
                              'NNPE-pinyin',
                              noFont.indexOf(
                                item.wordsList[pIndex + 1].pinyin
                              ) > -1
                                ? 'noFont'
                                : ''
                            ]"
                            style="text-align: left"
                            @click.stop="
                              viewNotes(
                                $event,
                                item.wordsList[pIndex + 1].pinyin
                              )
                            "
                            >{{ item.wordsList[pIndex + 1].pinyin }}</span
                          >
                          <span
                            class="NNPE-chs"
                            style="text-align: left"
                            @click.stop="
                              viewNotes(
                                $event,
                                item.wordsList[pIndex + 1].words
                                  ? item.wordsList[pIndex + 1].words
                                  : item.wordsList[pIndex + 1].chs
                              )
                            "
                            :style="{
                              fontFamily:
                                item.wordsList[pIndex + 1].config.fontFamily,
                              height: '28px',
                              display: 'inline-block'
                            }"
                            >{{
                              NumberList.indexOf(
                                item.wordsList[pIndex + 1].pinyin
                              ) == -1
                                ? item.wordsList[pIndex + 1].chs
                                : ""
                            }}</span
                          >
                          <span
                            v-if="
                              curQue.pyPosition == 'bottom' &&
                                config.isShowPY &&
                                item.dhaspinyin
                            "
                            :class="[
                              'NNPE-pinyin',
                              noFont.indexOf(
                                item.wordsList[pIndex + 1].pinyin
                              ) > -1
                                ? 'noFont'
                                : ''
                            ]"
                            style="text-align: left"
                            @click.stop="
                              viewNotes(
                                $event,
                                item.wordsList[pIndex + 1].pinyin
                              )
                            "
                            >{{ item.wordsList[pIndex + 1].pinyin }}</span
                          >
                        </span>

                        <span
                          class="NNPE-words-box"
                          v-if="
                            item.wordsList[pIndex + 2] &&
                              item.wordsList[pIndex + 2].chs &&
                              (chsFhList.indexOf(
                                item.wordsList[pIndex + 2].chs
                              ) > -1 ||
                                NumberList.indexOf(
                                  item.wordsList[pIndex + 2].chs
                                ) > -1)
                          "
                        >
                          <span
                            v-if="
                              curQue.pyPosition == 'top' &&
                                config.isShowPY &&
                                item.dhaspinyin
                            "
                            :class="[
                              'NNPE-pinyin',
                              noFont.indexOf(
                                item.wordsList[pIndex + 1].pinyin
                              ) > -1
                                ? 'noFont'
                                : ''
                            ]"
                            style="text-align: left"
                            @click.stop="
                              viewNotes(
                                $event,
                                item.wordsList[pIndex + 2].pinyin
                              )
                            "
                            >{{ item.wordsList[pIndex + 2].pinyin }}</span
                          >
                          <span
                            class="NNPE-chs"
                            style="text-align: left"
                            @click.stop="
                              viewNotes(
                                $event,
                                item.wordsList[pIndex + 2].words
                                  ? item.wordsList[pIndex + 2].words
                                  : item.wordsList[pIndex + 2].chs
                              )
                            "
                            :style="{
                              fontFamily:
                                item.wordsList[pIndex + 2].config.fontFamily,
                              height: '28px',
                              display: 'inline-block'
                            }"
                            >{{
                              NumberList.indexOf(
                                item.wordsList[pIndex + 2].pinyin
                              ) == -1
                                ? item.wordsList[pIndex + 2].chs
                                : ""
                            }}</span
                          >
                          <span
                            v-if="
                              curQue.pyPosition == 'bottom' &&
                                config.isShowPY &&
                                item.dhaspinyin
                            "
                            :class="[
                              'NNPE-pinyin',
                              noFont.indexOf(
                                item.wordsList[pIndex + 2].pinyin
                              ) > -1
                                ? 'noFont'
                                : ''
                            ]"
                            style="text-align: left"
                            @click.stop="
                              viewNotes(
                                $event,
                                item.wordsList[pIndex + 2].pinyin
                              )
                            "
                            >{{ item.wordsList[pIndex + 2].pinyin }}</span
                          >
                        </span>
                      </template>
                      <template v-else>
                        <span
                          v-if="
                            curQue.pyPosition == 'top' &&
                              config.isShowPY &&
                              item.dhaspinyin
                          "
                          class="NNPE-pinyin"
                          :class="[
                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                            pItem.className ? pItem.className : '',
                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                          ]"
                          @click.stop="viewNotes($event, pItem.pinyin)"
                          >{{ pItem.pinyin }}</span
                        >
                        <span
                          class="NNPE-chs"
                          :class="[
                            pItem.chs != '“' && pItem.padding && config.isShowPY
                              ? 'padding'
                              : '',
                            newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
                            pItem.words ? 'active' : ''
                          ]"
                          @click.stop="
                            viewNotes(
                              $event,
                              pItem.words ? pItem.words : pItem.chs
                            )
                          "
                          :style="{
                            fontFamily: pItem.config.fontFamily,
                            height: '28px',
                            display: 'inline-block'
                          }"
                          >{{
                            NumberList.indexOf(pItem.pinyin) == -1
                              ? pItem.chs
                              : ""
                          }}</span
                        >
                        <span
                          v-if="
                            curQue.pyPosition == 'bottom' &&
                              config.isShowPY &&
                              item.dhaspinyin
                          "
                          class="NNPE-pinyin"
                          :class="[
                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                            pItem.className ? pItem.className : '',
                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                          ]"
                          @click.stop="viewNotes($event, pItem.pinyin)"
                          >{{ pItem.pinyin }}</span
                        >
                      </template>
                    </template>
                  </template>
                  <template v-else>
                    <span
                      :style="{
                        height: pItem.height + 'px',
                        width: pItem.width + 'px'
                      }"
                    ></span>
                  </template>
                </div>
              </div>
              <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
            </div>
          </div>
        </div>
      </template>
    </template>
    <template v-else>
      <template v-if="resObj">
        <!--  -->
        <div class="NPC-sentences-list">
          <div
            :class="['NNPE-detail-box']"
            v-for="(item, index) in resObj.sentList"
            :key="'detail' + index"
          >
            <div :class="['NNPE-details']">
              <div
                v-if="
                  item.enwords &&
                    config.isShowEN &&
                    curQue.enPosition &&
                    curQue.enPosition == 'top'
                "
                :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
              >
                {{ item.enwords }}
              </div>
              <div style="clear: both; overflow: hidden"></div>
              <div
                class="NNPE-words"
                v-for="(pItem, pIndex) in item.sentArr"
                :key="'wordsList' + pIndex"
                :class="[
                  pItem.chs != '“' && pItem.wordIndex == 0
                    ? 'textLeft'
                    : 'textCenter',
                  pItem.chs == '“' ? 'textRight' : ''
                ]"
                @click="showWordDetail($event, pItem.chs, pItem.words)"
              >
                <template v-if="!pItem.width">
                  <template v-if="pItem.isShow">
                    <template
                      v-if="
                        item.sentArr[pIndex + 1] &&
                          item.sentArr[pIndex + 1].chs &&
                          (chsFhList.indexOf(item.sentArr[pIndex + 1].chs) >
                            -1 ||
                            NumberList.indexOf(item.sentArr[pIndex + 1].chs) >
                              -1)
                      "
                    >
                      <span class="NNPE-words-box">
                        <template v-if="curQue.pyPosition == 'top'">
                          <span
                            v-if="config.isShowPY"
                            class="NNPE-pinyin"
                            :class="[
                              pItem.className ? pItem.className : '',
                              sentIndex == index ? 'wordBlank' : '',
                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                            ]"
                            @click.stop="viewNotes($event, pItem.pinyin)"
                            >{{ pItem.pinyin }}</span
                          >
                        </template>
                        <span
                          class="NNPE-chs"
                          :class="[
                            pItem.padding && config.isShowPY ? 'padding' : '',
                            sentIndex == index ? 'wordBlank' : '',
                            newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
                            pItem.words ? 'active' : ''
                          ]"
                        >
                          <template>
                            <span
                              v-for="(wItem, wIndex) in pItem.leg"
                              :key="'ci' + wIndex + pIndex + index"
                              :class="[]"
                              @click.stop="
                                viewNotes(
                                  $event,
                                  pItem.words ? pItem.words : pItem.chs
                                )
                              "
                              :style="{
                                fontFamily: pItem.config.fontFamily,
                                height: '28px',
                                display: 'inline-block'
                              }"
                              >{{
                                NumberList.indexOf(pItem.pinyin) == -1
                                  ? pItem.chs[wIndex]
                                  : ""
                              }}</span
                            >
                          </template>
                        </span>
                        <template v-if="curQue.pyPosition == 'bottom'">
                          <span
                            v-if="config.isShowPY"
                            class="NNPE-pinyin"
                            :class="[
                              pItem.className ? pItem.className : '',
                              sentIndex == index ? 'wordBlank' : '',
                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                            ]"
                            @click.stop="viewNotes($event, pItem.pinyin)"
                            >{{ pItem.pinyin }}</span
                          >
                        </template>
                      </span>
                      <span class="NNPE-words-box">
                        <template v-if="curQue.pyPosition == 'top'">
                          <span
                            v-if="config.isShowPY"
                            :class="[
                              'NNPE-pinyin',
                              sentIndex == index ? 'wordBlank' : '',
                              noFont.indexOf(item.sentArr[pIndex + 1].pinyin) >
                              -1
                                ? 'noFont'
                                : ''
                            ]"
                            style="text-align: left"
                            @click.stop="
                              viewNotes($event, item.sentArr[pIndex + 1].pinyin)
                            "
                            >{{ item.sentArr[pIndex + 1].pinyin }}</span
                          >
                        </template>
                        <span class="NNPE-chs" style="text-align: left">
                          <span
                            :class="[]"
                            @click.stop="
                              viewNotes(
                                $event,
                                item.sentArr[pIndex + 1].words
                                  ? item.sentArr[pIndex + 1].words
                                  : item.sentArr[pIndex + 1].chs
                              )
                            "
                            :style="{
                              fontFamily:
                                item.sentArr[pIndex + 1].config.fontFamily,
                              height: '28px',
                              display: 'inline-block'
                            }"
                          >
                            {{
                              NumberList.indexOf(
                                item.sentArr[pIndex + 1].pinyin
                              ) == -1
                                ? item.sentArr[pIndex + 1].chs
                                : ""
                            }}</span
                          >
                        </span>
                        <template v-if="curQue.pyPosition == 'bottom'">
                          <span
                            v-if="config.isShowPY"
                            :class="[
                              'NNPE-pinyin',
                              sentIndex == index ? 'wordBlank' : '',
                              noFont.indexOf(item.sentArr[pIndex + 1].pinyin) >
                              -1
                                ? 'noFont'
                                : ''
                            ]"
                            style="text-align: left"
                            @click.stop="
                              viewNotes($event, item.sentArr[pIndex + 1].pinyin)
                            "
                            >{{ item.sentArr[pIndex + 1].pinyin }}</span
                          >
                        </template>
                      </span>
                      <span
                        class="NNPE-words-box"
                        v-if="
                          item.sentArr[pIndex + 2] &&
                            item.sentArr[pIndex + 2].chs &&
                            chsFhList.indexOf(item.sentArr[pIndex + 2].chs) > -1
                        "
                      >
                        <template v-if="curQue.pyPosition == 'top'">
                          <span
                            v-if="config.isShowPY"
                            :class="[
                              'NNPE-pinyin',
                              sentIndex == index ? 'wordBlank' : '',
                              noFont.indexOf(item.sentArr[pIndex + 2].pinyin) >
                              -1
                                ? 'noFont'
                                : ''
                            ]"
                            style="text-align: left"
                            @click.stop="
                              viewNotes($event, item.sentArr[pIndex + 2].pinyin)
                            "
                            >{{ item.sentArr[pIndex + 2].pinyin }}</span
                          >
                        </template>
                        <span class="NNPE-chs" style="text-align: left">
                          <span
                            :class="[]"
                            @click.stop="
                              viewNotes(
                                $event,
                                item.sentArr[pIndex + 2].words
                                  ? item.sentArr[pIndex + 2].words
                                  : item.sentArr[pIndex + 2].chs
                              )
                            "
                            :style="{
                              fontFamily:
                                item.sentArr[pIndex + 2].config.fontFamily,
                              height: '28px',
                              display: 'inline-block'
                            }"
                          >
                            {{
                              NumberList.indexOf(
                                item.sentArr[pIndex + 2].pinyin
                              ) == -1
                                ? item.sentArr[pIndex + 2].chs
                                : ""
                            }}</span
                          >
                        </span>
                        <template v-if="curQue.pyPosition == 'bottom'">
                          <span
                            v-if="config.isShowPY"
                            :class="[
                              'NNPE-pinyin',
                              sentIndex == index ? 'wordBlank' : '',
                              noFont.indexOf(item.sentArr[pIndex + 2].pinyin) >
                              -1
                                ? 'noFont'
                                : ''
                            ]"
                            style="text-align: left"
                            @click.stop="
                              viewNotes($event, item.sentArr[pIndex + 1].pinyin)
                            "
                            >{{ item.sentArr[pIndex + 2].pinyin }}</span
                          >
                        </template>
                      </span>
                    </template>
                    <template v-else>
                      <template v-if="curQue.pyPosition == 'top'">
                        <span
                          v-if="config.isShowPY"
                          class="NNPE-pinyin"
                          :class="[
                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                            pItem.className ? pItem.className : '',
                            sentIndex == index ? 'wordBlank' : '',
                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                          ]"
                          @click.stop="viewNotes($event, pItem.pinyin)"
                          >{{ pItem.pinyin }}</span
                        >
                      </template>
                      <span
                        class="NNPE-chs"
                        :class="[
                          pItem.chs != '“' && pItem.padding && config.isShowPY
                            ? 'padding'
                            : '',
                          sentIndex == index ? 'wordBlank' : '',
                          newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
                          pItem.words ? 'active' : ''
                        ]"
                      >
                        <template>
                          <span
                            v-for="(wItem, wIndex) in pItem.leg"
                            :key="'ci' + wIndex + pIndex + index"
                            :class="[]"
                            @click.stop="
                              viewNotes(
                                $event,
                                pItem.words ? pItem.words : pItem.chs
                              )
                            "
                            :style="{
                              fontFamily: pItem.config.fontFamily,
                              height: '28px',
                              display: 'inline-block'
                            }"
                            >{{
                              NumberList.indexOf(pItem.pinyin) == -1
                                ? pItem.chs[wIndex]
                                : ""
                            }}</span
                          >
                        </template>
                      </span>
                      <template v-if="curQue.pyPosition == 'bottom'">
                        <span
                          v-if="config.isShowPY"
                          class="NNPE-pinyin"
                          :class="[
                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                            pItem.className ? pItem.className : '',
                            sentIndex == index ? 'wordBlank' : '',
                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : ''
                          ]"
                          @click.stop="viewNotes($event, pItem.pinyin)"
                          >{{ pItem.pinyin }}</span
                        >
                      </template>
                    </template>
                  </template>
                </template>
                <template v-else>
                  <span
                    :style="{
                      height: pItem.height + 'px',
                      width: pItem.width + 'px'
                    }"
                  ></span>
                </template>
              </div>
              <div style="clear: both; overflow: hidden"></div>
              <div
                v-if="
                  item.enwords &&
                    config.isShowEN &&
                    (!curQue.enPosition ||
                      (curQue.enPosition && curQue.enPosition == 'bottom'))
                "
                :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
              >
                {{ item.enwords }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </template>
    <template v-if="isShow">
      <div
        ref="wordcard"
        class="NNPE-wordDetail"
        :style="{
          marginLeft:
            word.detail.new_word.length === 1
              ? '-152px'
              : windowWidth > word.detail.new_word.length * 126 + 48
              ? '-' + (word.detail.new_word.length * 63 + 24) + 'px'
              : '0px',
          left:
            windowWidth > word.detail.new_word.length * 126 + 48 ? '' : '0px'
        }"
      >
        <Wordcard
          :word="word"
          :changeWordCard="changeWordCard"
          :themeColor="themeColor"
          :currentTreeID="currentTreeID"
          :TaskModel="TaskModel"
          :writeList="curQue.Bookanswer.writeModel"
          @changeCurQue="changeCurQue"
          :mp3Url="activeWord ? activeWord.newWordMp3 : ''"
          :bg="activeWord ? activeWord.bg : null"
          :ed="activeWord ? activeWord.ed : null"
        />
      </div>
    </template>
    <template v-if="isNoteShow">
      <div
        ref="notecard"
        class="NNPE-wordDetail"
        :style="{
          marginLeft: windowWidth > 642 ? '-321px' : '0px',
          left: windowWidth > 642 ? '' : '0px'
        }"
      >
        <Notecard :item="curNoteCon" :changeCard="changeCard" />
      </div>
    </template>
  </div>
</template>

<script>
import { timeStrToSen } from "../../../../utils/index";
import AudioLine from "../AudioLine.vue";
import Wordcard from "../components/Wordcard.vue"; // 卡片
import Notecard from "../components/Notecard.vue"; // 注释
export default {
  name: "PhraseModelChs",
  props: [
    "curQue",
    "bodyLeft",
    "NNPENewWordList",
    "themeColor",
    "noFont",
    "currentTreeID",
    "config",
    "TaskModel",
    "NNPEAnnotationList",
    "colLength"
  ],
  components: {
    AudioLine,
    Wordcard,
    Notecard
  },
  data() {
    return {
      resArr: [],
      resObj: null,
      curTime: 0, //单位s
      chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；", "#", "、"],
      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
      NumberList: [
        "①",
        "②",
        "③",
        "④",
        "⑤",
        "⑥",
        "⑦",
        "⑧",
        "⑨",
        "⑩",
        "⑪",
        "⑫",
        "⑬",
        "⑭",
        "⑮",
        "⑯",
        "⑰",
        "⑱",
        "⑲",
        "⑳"
      ],
      newWords: ["鱼", "辩礼义"],
      oldHz: "",
      hz: "",
      clientY: 0,
      top: 0,
      left: 0,
      articleImg: {}, // 文章图片
      newWordList: [],
      word: null,
      isShow: false,
      screenHeight: 0,
      cardHeight: 0,
      contentWidth: 732,
      noteNum: "",
      curNoteCon: null,
      isNoteShow: false,
      oldNoteNum: "",
      clientY: 0,
      clickType: "",
      sentIndex: -1,
      highWords: null,
      highWordsArr: [],
      highIndex: 0,
      activeWord: null,
      windowWidth: window.innerWidth
    };
  },
  computed: {},
  watch: {
    hz: {
      handler: function(val, oldVal) {
        let _this = this;
        if (val) {
          _this.handleNewWords(val);
        }
      },
      // 深度观察监听
      deep: true
    },
    isShow: {
      handler: function(val, oldVal) {
        let _this = this;
        if (val) {
          setTimeout(() => {
            _this.cardHeight = _this.$refs.wordcard.offsetHeight;
            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
              _this.top = _this.clientY + 20;
            } else {
              _this.top = _this.clientY - _this.cardHeight - 30;
            }
          }, 0);
        }
      },
      // 深度观察监听
      deep: true
    },
    noteNum: {
      handler: function(val, oldVal) {
        let _this = this;
        if (val) {
          _this.handleNote(val);
        }
      },
      // 深度观察监听
      deep: true
    },
    isNoteShow: {
      handler: function(val, oldVal) {
        let _this = this;
        if (val) {
          setTimeout(() => {
            _this.cardHeight = _this.$refs.notecard.offsetHeight;
            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
              _this.top = _this.clientY + 20;
            } else {
              _this.top = _this.clientY - _this.cardHeight - 30;
            }
          }, 50);
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  //方法集合
  methods: {
    //拼音的显示和隐藏
    changePinyin() {
      if (this.config.isHasPY) {
        this.$emit("changeConfig", "isShowPY");
      }
    },
    // 英文的显示和隐藏
    changeEN() {
      if (this.config.isHasEN) {
        this.$emit("changeConfig", "isShowEN");
      }
    },
    getCurTime(curTime) {
      this.curTime = curTime;
    },
    handleData() {
      let resArr = [];
      let leg = this.curQue.detail.length;
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      let dhaspinyin = false; // 每段是否有拼音
      curQue.detail.forEach((dItem, dIndex) => {
        dhaspinyin = false;
        let paraArr = [];
        if (!dItem.isTitle) {
          paraArr = [
            {
              pinyin: "",
              chs: "",
              width: 20,
              height: 20
            },
            {
              width: 20,
              height: 20,
              pinyin: "",
              chs: ""
            }
          ];
        }
        dItem.wordsList.forEach((sItem, sIndex) => {
          sItem.forEach((wItem, wIndex) => {
            let sentence = dItem.sentences[sIndex];
            //this.judgePad(sItem, wItem, wIndex);
            this.mergeWordSymbol(sItem, wItem, wIndex);
            let words = "";
            if (this.newWordList.length > 0) {
              if (!this.highWords) {
                this.findLightWord(wItem, wIndex, sentence, sItem);
                words = this.highWords ? this.highWords.words : "";
              } else {
                if (wIndex > this.highWords.endIndex - 1) {
                  this.highWords = null;
                  this.findLightWord(wItem, wIndex, sentence, sItem);
                  words = this.highWords ? this.highWords.words : "";
                } else {
                  words = this.highWords ? this.highWords.words : "";
                }
              }
            }
            let obj = {
              paraIndex: dIndex, //段落索引
              sentIndex: sIndex, //在段落中句子索引
              wordIndex: wIndex, //单词的索引
              pinyin: wItem.pinyin,
              chs: wItem.chs,
              padding: true, //wItem.padding,
              className: wItem.className,
              isShow: wItem.isShow,
              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
              words: words,
              config: {
                fontFamily: wItem.fontFamily
              }
            };
            paraArr.push(obj);
            if (wItem.pinyin) dhaspinyin = true;
          });
        });

        let paraObj = {
          wordsList: paraArr,
          dhaspinyin: dhaspinyin,
          isTitle: dItem.isTitle
        };
        resArr.push(paraObj);
      });
      this.resArr = resArr;

      // 循环文章图片
      if (curQue.img_list) {
        curQue.img_list.forEach(item => {
          this.articleImg[item.imgNumber] = item.id;
        });
      }
      let resArrs = [],
        sentArrTotal = [],
        timeArr = [];
      let wordTimeList = curQue.wordTime;
      curQue.detail.forEach((dItem, dIndex) => {
        dItem.wordsList.forEach((sItem, sIndex) => {
          let sentArr = [];

          sItem.forEach((wItem, wIndex) => {
            let startIndex =
              wIndex == 0
                ? 0
                : sentArr[wIndex - 1].startIndex +
                  sentArr[wIndex - 1].chs.length;
            let endIndex =
              wIndex == 0
                ? wItem.chs.length
                : sentArr[wIndex - 1].endIndex + wItem.chs.length;
            // this.judgePad(sItem, wItem, wIndex);
            this.mergeWordSymbols(wItem);
            let obj = {
              paraIndex: dIndex, //段落索引
              sentIndex: sIndex, //在段落中句子索引
              wordIndex: wIndex, //单词的索引
              pinyin: wItem.pinyin,
              chs: wItem.chs,
              padding: true,
              className: wItem.className,
              isShow: wItem.isShow,
              startIndex: startIndex,
              endIndex: endIndex,
              leg: wItem.chs.length,
              timeList: [],
              config: {
                fontFamily: wItem.fontFamily
              }
            };
            sentArr.push(obj);
          });
          let objs = {
            sentArr: sentArr,
            enwords:
              dItem.sentencesEn &&
              dItem.sentencesEn[sIndex] &&
              dItem.sentencesEn[sIndex].replace(/\'/g, "’")
          };
          sentArrTotal.push(sentArr);
          resArrs.push(objs);
        });
        timeArr.push(dItem.timeList);
      });
      if (wordTimeList && wordTimeList.length > 0) {
        this.mergeWordTime(sentArrTotal, wordTimeList);
      }
      let timeList = [];
      timeArr.forEach(item => {
        item.forEach(aItem => {
          if (timeList.indexOf(aItem) < 0) {
            timeList.push(aItem);
          }
        });
      });
      this.resObj = { sentList: resArrs, timeList: timeList };
    },
    findLightWord(wItem, startIndex, sentence, sItem) {
      let words = "",
        endIndex = 0;
      this.newWordList.forEach(item => {
        if (item.length == 1) {
          if (item == wItem.chs && !wItem.banLight) {
            words = wItem.chs;
            endIndex = startIndex + 1;
          }
        } else {
          if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
            let index = null;
            let chsStr = "";
            for (let i = startIndex; i < sItem.length + 1; i++) {
              index = i;
              if (chsStr.length == item.length) {
                break;
              } else {
                chsStr += sItem[i] ? sItem[i].chs : "";
              }
            }
            if (chsStr == item && !wItem.banLight) {
              words = item;
              endIndex = index;
            }
          } else if (
            wItem.new_word &&
            wItem.new_word == item &&
            !wItem.banLight
          ) {
            words = item;
            endIndex = startIndex + 1;
          }
        }
      });
      if (words) {
        this.highWords = { words: words, endIndex: endIndex };
      } else {
        this.highWords = null;
      }
    },
    //词和标点合一起
    mergeWordSymbol(sItem, wItem, curIndex) {
      let leg = sItem.length;
      if (wItem && wItem.chs) {
        // let nextIndex = curIndex + 1;
        // let chs = sItem[nextIndex].chs;
        // let pinyin = sItem[nextIndex].pinyin;
        // if (this.chsFhList.indexOf(chs) > -1) {
        //   wItem.chs = "<a>" + wItem.chs + "</a><a>" + chs + "</a>";
        //   wItem.pinyin = "<a>" + wItem.pinyin + "</a><a>" + pinyin + "</a>";
        // }
        if (
          this.chsFhList.indexOf(wItem.chs) > -1 ||
          this.NumberList.indexOf(wItem.chs) > -1
        ) {
          wItem.isShow = false;
        } else {
          wItem.isShow = true;
        }
      }

      // if (this.enFhList.indexOf(wItem.pinyin) > -1) {
      //   wItem.className = "textLeft";
      // }
    },
    mergeWordSymbols(wItem) {
      if (
        this.chsFhList.indexOf(wItem.chs) > -1 ||
        this.NumberList.indexOf(wItem.chs) > -1
      ) {
        wItem.isShow = false;
      } else {
        wItem.isShow = true;
      }
    },
    mergeWordTime(resArr, wordTimeList) {
      resArr.forEach((item, index) => {
        let wordsResultList = wordTimeList[index].wordsResultList;
        item.forEach(wItem => {
          let startIndex = wItem.startIndex;
          let endIndex = wItem.endIndex;
          wItem.timeList = wordsResultList.slice(startIndex, endIndex);
        });
      });
    },
    //判断是否有padding
    judgePad(sItem, wItem, curIndex) {
      let leg = sItem.length;
      if (curIndex < leg - 1) {
        let nextIndex = curIndex + 1;
        let chs = sItem[nextIndex].chs;
        if (
          this.chsFhList.indexOf(chs) > -1 ||
          this.chsFhList.indexOf(wItem.chs) > -1
        ) {
          wItem.padding = false;
        } else {
          wItem.padding = true;
        }
        if (this.enFhList.indexOf(wItem.pinyin) > -1) {
          wItem.className = "textLeft";
        }
      }
    },
    //转化时间
    handleTimeList(list) {
      let listRes = [];
      list.forEach(item => {
        let res = timeStrToSen(item);
        listRes.push(res);
      });
      return listRes;
    },
    //点击播放某个句子
    handleChangeTime(time) {
      this.curTime = time;
      this.$refs.audioLine.onTimeupdateTime(time);
    },
    handleNewword() {
      let NewWordList = [];
      this.NNPENewWordList.forEach(item => {
        item.forEach(wItem => {
          if (wItem.new_word) {
            NewWordList.push(wItem.new_word);
          } else if (wItem.detail && wItem.detail.sentence) {
            NewWordList.push(wItem.detail.sentence);
          }
        });
      });
      this.newWordList = JSON.parse(JSON.stringify(NewWordList));
    },

    showWordDetail(e, word, words) {
      let _this = this;
      _this.highIndex = 0;
      _this.highWordsArr = [];
      if (word && this.newWordList.indexOf(word) > -1) {
        this.highWordsArr.push(word);
      }
      if (words && word != words && this.newWordList.indexOf(words) > -1) {
        this.highWordsArr.push(words);
      }
      if (
        this.newWordList.indexOf(word) > -1 ||
        this.newWordList.indexOf(words) > -1
      ) {
        if (word && this.newWordList.indexOf(word) > -1) {
          if (_this.oldHz != word) {
            this.isShow = false;
            setTimeout(() => {
              _this.hz = word;
            }, 50);
          }
        } else if (words && this.newWordList.indexOf(words) > -1) {
          if (_this.oldHz != words) {
            this.isShow = false;
            setTimeout(() => {
              _this.hz = words;
            }, 50);
          }
        }
        _this.clientY = e.clientY;
        let left = e.clientX;
        let width = 0;

        if (word.length == 1 || word.length == 2) {
          width = 304;
        } else if (word.length == 3 || word.length == 4) {
          width = 432;
        } else if (word.length > 3) {
          width = 560;
        }

        if (left - this.bodyLeft > this.contentWidth / 2) {
          _this.left = left - width + 10;
        } else {
          _this.left = left;
        }
      }
    },
    hideWordDetail() {
      this.isShow = false;
    },
    changeWordCard(isShow) {
      this.isShow = isShow;
      this.oldHz = "";
      this.hz = "";
    },
    // 处理分词数据
    handleNewWords(val, top, left) {
      this.isShow = true;
      this.word = null;
      for (let i = 0; i < this.NNPENewWordList.length; i++) {
        let pItem = this.NNPENewWordList[i];
        for (let j = 0; j < pItem.length; j++) {
          let item = pItem[j];
          if (item.new_word.trim() == val.trim()) {
            let wordlist = val.split("");
            this.word = JSON.parse(
              JSON.stringify({
                list: wordlist,
                detail: item,
                top: top,
                left: left
              })
            );
            break;
          }
        }
      }
      this.oldHz = val;
    },
    getScreenHeight() {
      this.screenHeight = window.innerHeight;
    },
    changeCurQue(answer) {
      if (answer) {
        let writeModel = this.curQue.Bookanswer.writeModel;
        let hz = answer.hz;
        if (writeModel.hasOwnProperty(hz)) {
          writeModel[hz].push(answer);
        } else {
          writeModel[hz] = [answer];
        }
        console.log(this.curQue.Bookanswer);
      }
    },
    viewNotes(e, noteNum) {
      let _this = this;
      _this.clickType = "note";
      _this.activeWord = null;
      let noteIndex = "";
      if (_this.NumberList.indexOf(noteNum) > -1) {
        for (let i = 0; i < _this.NumberList.length; i++) {
          if (_this.NumberList[i] == noteNum) {
            noteIndex = "" + i + "";
            break;
          }
        }
        this.showNoteDetail(e, noteIndex);
      } else {
        if (this.newWordList.indexOf(noteNum) > -1) {
          if (_this.oldHz != noteNum) {
            this.isShow = false;
            _this.NNPENewWordList.forEach(item => {
              item.forEach(items => {
                if (items.new_word === noteNum) {
                  this.activeWord = items;
                }
              });
            });
            setTimeout(() => {
              _this.hz = noteNum;
            }, 50);
          }
          _this.clientY = e.clientY;
          let left = e.clientX;
          let width = 0;

          if (noteNum.length == 1 || noteNum.length == 2) {
            width = 304;
          } else if (noteNum.length == 3 || noteNum.length == 4) {
            width = 432;
          } else if (noteNum.length > 3) {
            width = 560;
          }

          if (left - this.bodyLeft > this.contentWidth / 2) {
            _this.left = left - width + 10;
          } else {
            _this.left = left;
          }
        }
      }
    },
    showNoteDetail(e, noteNum) {
      let _this = this;
      if (_this.oldNoteNum != noteNum) {
        this.isNoteShow = false;
        setTimeout(() => {
          _this.noteNum = noteNum;
        }, 50);
      }
      _this.clientY = e.clientY;
      let left = e.clientX;
      let width = 642;
      if (left - this.bodyLeft > this.contentWidth / 2) {
        _this.left = left - width + 10;
      } else {
        if (left - 200 > 500) {
          _this.left = 500;
        } else {
          _this.left = left - 200;
        }
      }
    },
    // 处理注释数据
    handleNote(val) {
      let _this = this;
      _this.isNoteShow = true;
      _this.oldNoteNum = val;
      let noteIndex = Number(val);
      if (_this.NNPEAnnotationList && _this.NNPEAnnotationList.length > 0) {
        _this.curNoteCon = _this.NNPEAnnotationList[noteIndex]
          ? _this.NNPEAnnotationList[noteIndex]
          : null;
      }
    },
    changeCard(isShow) {
      let _this = this;
      _this.isNoteShow = isShow;
      _this.oldNoteNum = "";
      _this.noteNum = "";
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
      this.handleNewword();
    }
    if (this.curQue) {
      this.handleData();
    }
    $(window).resize(() => {
      this.getScreenHeight();
    });
    this.getScreenHeight();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.NNPE-ArticleView {
  width: 100%;
  .aduioLine-practice-npc {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .aduioLine-content {
      flex: 1;
    }
    .aduioLine-right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 69px;
      height: 40px;
      box-sizing: border-box;
      padding: 0 12px;
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      > span {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
  }
  .NPC-sentences-list {
    padding: 24px 0;
  }
  .NNPE-detail {
    clear: both;
    overflow: hidden;
    color: rgba(0, 0, 0, 1);
    .NNPE-words {
      float: left;
      &-box {
        float: left;
        > span {
          display: block;
          &.NNPE-pinyin {
            font-family: "GB-PINYINOK-B";
            font-weight: normal;
            font-size: 14px;
            line-height: 22px;
            &.noFont {
              font-family: initial;
            }
            height: 22px;
            &.textLeft {
              text-align: left;
            }
          }
          &.NNPE-chs {
            font-family: "FZJCGFKTK";
            font-size: 20px;
            line-height: 28px;

            &.active {
              color: #de4444;
            }
          }
          &.padding {
            padding: 0 3px;
          }
        }
      }
      &.textLeft {
        text-align: left;
      }
      &.textCenter {
        text-align: center;
      }
      &.textRight {
        text-align: right;
      }
      > span {
        display: block;
        &.NNPE-pinyin {
          font-family: "GB-PINYINOK-B";
          font-weight: normal;
          font-size: 14px;
          line-height: 22px;

          height: 22px;
          &.noFont {
            font-family: initial;
          }
          &.textLeft {
            text-align: left;
          }
        }
        &.NNPE-chs {
          font-family: "FZJCGFKTK";
          font-size: 20px;
          line-height: 28px;

          &.active {
            color: #de4444;
          }
        }
        &.padding {
          padding: 0 3px;
        }
      }
    }
    &.NNPE-detail-title {
      .wordsList-box {
        > div {
          display: flex;
          justify-content: center;
          width: 100%;
          flex-flow: wrap;
        }
      }
    }
    .index {
      width: 48px;
      box-sizing: border-box;
      padding: 8px;
      text-align: right;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      b {
        font-weight: 400;
        color: #000000;
        line-height: 1.5;
      }
    }
    .wordsList-box {
      width: 100%;
      padding: 6px 24px 12px 24px;
      display: flex;
      &-left {
        justify-content: flex-start;
      }
      &-center {
        justify-content: center;
      }
      &-right {
        justify-content: flex-end;
      }
      > div {
        overflow: hidden;
        clear: both;
      }
      > img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
      }
    }
  }
  .NNPE-wordDetail {
    position: fixed;
    z-index: 116;
    top: 50%;
    margin-top: -196px;
    left: 50%;
    max-width: 100%;
    overflow: auto;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
    //   width: 260px;
    //   height: 200px;
    //   background: #cc0;
  }
  .NNPE-detail-box {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    box-sizing: border-box;
    padding: 8px 24px 8px;
    &.active {
      background: rgba(222, 68, 68, 0.15);
    }
  }
  .NNPE-details {
    clear: both;
    overflow: hidden;

    .NNPE-words {
      float: left;
      &-box {
        float: left;
        > span {
          display: block;
          &.NNPE-pinyin {
            font-family: "GB-PINYINOK-B";
            font-weight: normal;
            font-size: 14px;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.65);
            height: 20px;
            &.noFont {
              font-family: initial;
            }
            &.textLeft {
              text-align: left;
            }
            &.wordBlank {
              color: rgba(0, 0, 0, 0.65);
            }
          }
          &.NNPE-chs {
            font-family: "FZJCGFKTK";
            font-size: 20px;
            line-height: 28px;
            color: rgba(0, 0, 0, 0.65);
            &.active {
              color: #de4444;
            }
            &.wordBlank {
              color: rgba(0, 0, 0, 0.65);
            }
          }
          // &.padding {
          //   padding-right: 6px;
          // }
        }
      }
      &.textLeft {
        text-align: left;
      }
      &.textCenter {
        text-align: center;
      }
      &.textRight {
        text-align: right;
      }
      > span {
        display: block;
        &.NNPE-pinyin {
          font-family: "GB-PINYINOK-B";
          font-weight: normal;
          font-size: 14px;
          line-height: 20px;
          color: rgba(0, 0, 0, 0.65);
          height: 20px;
          &.noFont {
            font-family: initial;
          }
          &.textLeft {
            text-align: left;
          }
          &.wordBlank {
            color: rgba(0, 0, 0, 0.65);
          }
        }
        &.NNPE-chs {
          font-family: "FZJCGFKTK";
          font-size: 20px;
          line-height: 28px;
          color: rgba(0, 0, 0, 0.65);
          &.active {
            color: #de4444;
          }
          &.wordBlank {
            color: rgba(0, 0, 0, 0.65);
          }
        }
        &.padding {
          padding: 0 3px;
        }
      }
    }
  }
  .enwords {
    font-family: Helvetica;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.65);
    padding-left: 3px;
    word-break: break-word;
    &.wordBlank {
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
</style>