EEP_BookPreview/src/views/book/courseware/preview/components/dialogue_article/PhraseModelChs.vue

<!--  -->
<template>
  <div v-if="curQue" class="NNPE-ArticleView">
    <div
      v-if="
        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
          config.isHasPY ||
          config.isHasEN) &&
        curQue.property.mp3_position === 'top'
      "
      class="aduioLine-box aduioLine-practice-npc"
    >
      <div class="aduioLine-content">
        <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
          <AudioLine
            ref="audioLine"
            audio-id="diaPhraAudio"
            :mp3="curQue.mp3_list[0].url"
            :get-cur-time="getCurTime"
            :mp3-source="curQue.mp3_list[0].source"
            :width="colLength == 2 ? 200 : isPhone ? 200 : 790"
            :attrib="attrib"
          />
        </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> -->
        <SvgIcon
          v-if="config.isHasPY"
          icon-class="pin-btn"
          size="16"
          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
          :style="{ color: config.isShowPY ? (attrib ? attrib.topic_color : '') : '#DCDFE6' }"
          @click="changePinyin"
        />
        <!-- <span :class="['EN-16', config.isShowEN ? '' : 'disabled']" @click="changeEN" v-if="config.isHasEN"></span> -->
        <SvgIcon
          v-if="config.isHasEN"
          icon-class="en-btn"
          size="16"
          :class="['EN-16', config.isShowEN ? '' : 'disabled']"
          :style="{ color: config.isShowEN ? (attrib ? attrib.topic_color : '') : '#DCDFE6' }"
          @click="changeEN"
        />
      </div>
    </div>
    <template v-if="resArr.length > 0">
      <div class="NPC-sentences-list">
        <div class="NPC-article-empty">
          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
          <div class="empty-right"></div>
        </div>
        <p v-if="curQue.notice" :class="['notice', isHasRemark ? 'hasRemark' : '']">
          {{ curQue.notice }}
        </p>
        <div
          v-for="(item, index) in resArr"
          :key="'detail' + index"
          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
        >
          <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
            <RoleChs :cur-role="item.roleDetail" :type="curQue.property.role_img_type" />
            <div class="wordsList-box">
              <img v-if="articleImg[0] && index == 0" :src="articleImg[index]" />
              <!-- <div class="roleDetail" v-if="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0">
                <span class="pinyin">{{ item.roleDetail.detail.wordsList | handlePinyin }}</span>
                <span class="chs">{{ item.roleDetail.detail.wordsList | handleChs }}</span>
              </div> -->
              <div v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin" class="roleDetail">
                <span class="chs">{{ item.roleDetail.fullName }}</span>
                <span class="pinyin">{{ item.roleDetail.fullPinyin }}</span>
              </div>
              <div class="para-con" :style="{ background: item.roleDetail.color.bg }">
                <div
                  v-if="config.isShowEN && item.enwords && curQue.enPosition && curQue.enPosition == 'top'"
                  class="enwords"
                >
                  {{ item.enwords }}
                </div>
                <div style="overflow: hidden; clear: both"></div>
                <div
                  v-for="(pItem, pIndex) in item.wordsList"
                  :key="'wordsList' + pIndex"
                  class="NNPE-words"
                  :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.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
                            class="NNPE-pinyin"
                            :class="[
                              pItem.className ? pItem.className : '',
                              noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
                            ]"
                            @click.stop="viewNotes($event, pItem.pinyin)"
                            :style="{
                              fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                              height:
                                attrib && attrib.pinyin_size
                                  ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                  : '22px',
                            }"
                            >{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
                          >
                          <span
                            class="NNPE-chs"
                            :class="[
                              newWordList.indexOf(pItem.chs) > -1 ? 'newActive' : '',
                              pItem.words ? 'newActive' : '',
                            ]"
                            :style="{
                              fontFamily: pItem.config.fontFamily,
                              height:
                                attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                              fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                              lineHeight:
                                attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                              color:
                                newWordList.indexOf(pItem.chs) > -1 || pItem.words
                                  ? attrib
                                    ? attrib.topic_color
                                    : ''
                                  : '',
                            }"
                            @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                            >{{ pItem.chs }}</span
                          >
                          <span
                            v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                            class="NNPE-pinyin"
                            :class="[
                              pItem.className ? pItem.className : '',
                              noFont.indexOf(item.pinyin) > -1 ? 'noFont' : '',
                            ]"
                            @click.stop="viewNotes($event, pItem.pinyin)"
                            :style="{
                              fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                              height:
                                attrib && attrib.pinyin_size
                                  ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                  : '22px',
                            }"
                            >{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
                          >
                        </span>
                        <span class="NNPE-words-box">
                          <span
                            v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
                            class="NNPE-pinyin"
                            style="text-align: left"
                            :class="[noFont.indexOf(item.wordsList[pIndex + 1].pinyin) > -1 ? 'noFont' : '']"
                            @click.stop="viewNotes($event, item.wordsList[pIndex + 1].pinyin)"
                            :style="{
                              fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                              height:
                                attrib && attrib.pinyin_size
                                  ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                  : '22px',
                            }"
                            >{{
                              NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) === -1
                                ? item.wordsList[pIndex + 1].pinyin
                                : ''
                            }}</span
                          >
                          <span
                            class="NNPE-chs"
                            style="text-align: left"
                            :style="{
                              fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
                              height:
                                attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                              fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                              lineHeight:
                                attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                            }"
                            @click.stop="
                              viewNotes(
                                $event,
                                item.wordsList[pIndex + 1].words
                                  ? item.wordsList[pIndex + 1].words
                                  : item.wordsList[pIndex + 1].chs,
                              )
                            "
                            >{{ item.wordsList[pIndex + 1].chs }}</span
                          >
                          <span
                            v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                            class="NNPE-pinyin"
                            :class="[noFont.indexOf(item.wordsList[pIndex + 1].pinyin) > -1 ? 'noFont' : '']"
                            style="text-align: left"
                            @click.stop="viewNotes($event, item.wordsList[pIndex + 1].pinyin)"
                            :style="{
                              fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                              height:
                                attrib && attrib.pinyin_size
                                  ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                  : '22px',
                            }"
                            >{{
                              NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) === -1
                                ? item.wordsList[pIndex + 1].pinyin
                                : ''
                            }}</span
                          >
                        </span>
                        <span
                          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)
                          "
                          class="NNPE-words-box"
                        >
                          <span
                            v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
                            :class="[
                              'NNPE-pinyin',
                              noFont.indexOf(item.wordsList[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                            ]"
                            style="text-align: left"
                            :style="{
                              fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                              height:
                                attrib && attrib.pinyin_size
                                  ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                  : '22px',
                            }"
                            @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
                            >{{
                              NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) === -1
                                ? item.wordsList[pIndex + 2].pinyin
                                : ''
                            }}</span
                          >
                          <span
                            class="NNPE-chs"
                            style="text-align: left"
                            :class="[
                              pItem.chstimeList &&
                              pItem.chstimeList[pItem.leg - 1] &&
                              curTime >= pItem.chstimeList[pItem.leg - 1].wordBg &&
                              curQue.wordTime &&
                              curTime <= item.timeList[pItem.sentIndex].ed
                                ? 'wordActive'
                                : '',
                            ]"
                            :style="{
                              fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
                              height:
                                attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                              fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                              lineHeight:
                                attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                            }"
                            @click.stop="
                              viewNotes(
                                $event,
                                item.wordsList[pIndex + 2].words
                                  ? item.wordsList[pIndex + 2].words
                                  : item.wordsList[pIndex + 2].chs,
                              )
                            "
                            >{{ item.wordsList[pIndex + 2].chs }}</span
                          >
                          <span
                            v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                            :class="[
                              'NNPE-pinyin',
                              noFont.indexOf(item.wordsList[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                            ]"
                            style="text-align: left"
                            :style="{
                              fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                              height:
                                attrib && attrib.pinyin_size
                                  ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                  : '22px',
                            }"
                            @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
                            >{{
                              NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) === -1
                                ? item.wordsList[pIndex + 2].pinyin
                                : ''
                            }}</span
                          >
                        </span>
                      </template>
                      <template v-else>
                        <span
                          v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
                          class="NNPE-pinyin"
                          :class="[
                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                            pItem.className ? pItem.className : '',
                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                          ]"
                          :style="{
                            fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                            height:
                              attrib && attrib.pinyin_size ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt' : '22px',
                          }"
                          @click.stop="viewNotes($event, pItem.pinyin)"
                          >{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
                        >
                        <span
                          v-if="pItem.chs != '#'"
                          class="NNPE-chs"
                          :class="[
                            newWordList.indexOf(pItem.chs) > -1 ? 'newActive' : '',
                            pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
                            pItem.words ? 'newActive' : '',
                          ]"
                          :style="{
                            fontFamily: pItem.config.fontFamily,
                            height:
                              attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                            fontSize: attrib && attrib.font_size ? attrib.font_size : '20px',
                            lineHeight:
                              attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                            color:
                              newWordList.indexOf(pItem.chs) > -1 || pItem.words
                                ? attrib
                                  ? attrib.topic_color
                                  : ''
                                : '',
                          }"
                          @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                          >{{ pItem.chs }}</span
                        >
                        <span
                          v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                          class="NNPE-pinyin"
                          :class="[
                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                            pItem.className ? pItem.className : '',
                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                          ]"
                          :style="{
                            fontSize: attrib && attrib.pinyin_size ? attrib.pinyin_size : '14px',
                            height:
                              attrib && attrib.pinyin_size ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt' : '22px',
                          }"
                          @click.stop="viewNotes($event, pItem.pinyin)"
                          >{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
                        >
                      </template>
                    </template>
                  </template>
                  <template v-else>
                    <span
                      :style="{
                        height: pItem.height + 'px',
                        width: pItem.width + 'px',
                      }"
                    ></span>
                  </template>
                </div>
                <div style="overflow: hidden; clear: both"></div>
                <div
                  v-if="
                    config.isShowEN &&
                    item.enwords &&
                    (!curQue.enPosition || (curQue.enPosition && curQue.enPosition == 'bottom'))
                  "
                  class="enwords"
                >
                  {{ item.enwords }}
                </div>
                <div
                  v-if="curQue.property.multilingual_position === 'para'"
                  class="multilingual-para"
                  :class="[item.isTitle ? 'multilingual-para-center' : '']"
                >
                  {{
                    curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
                      ? curQue.detail[index].multilingualTextList[multilingual].join(' ')
                      : ''
                  }}
                </div>
              </div>
              <img v-if="articleImg[index + 1]" :src="articleImg[index + 1]" />
            </div>
          </div>
          <div class="remarkBox remark-top">
            <RemarkChs
              :remark-detail="item.remarkDetail"
              :margin-top="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0 ? 44 : 8"
            />
          </div>
        </div>
        <div class="NPC-article-empty NPC-article-empty-bottom">
          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
          <div class="empty-right"></div>
        </div>
        <template v-for="(items, indexs) in curQue.detail">
          <div
            v-if="
              curQue.property.multilingual_position === 'all' &&
              items.multilingualTextList &&
              items.multilingualTextList[multilingual] &&
              items.multilingualTextList[multilingual].length > 0
            "
            :key="indexs"
            class="multilingual"
          >
            <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
              {{
                items.multilingualTextList && items.multilingualTextList[multilingual]
                  ? items.multilingualTextList[multilingual].join(' ')
                  : ''
              }}
            </div>
          </div>
        </template>
        <div v-if="1 == 2" class="dia-article-record">
          <Soundrecord type="promax" class="luyin-box" @handleWav="handleWav" />
        </div>
      </div>
    </template>
    <div
      v-if="
        ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
          config.isHasPY ||
          config.isHasEN) &&
        curQue.property.mp3_position === 'bottom'
      "
      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
    >
      <div class="aduioLine-content">
        <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
          <AudioLine
            ref="audioLine"
            audio-id="diaPhraAudio"
            :mp3="curQue.mp3_list[0].url"
            :get-cur-time="getCurTime"
            :mp3-source="curQue.mp3_list[0].source"
            :width="colLength == 2 ? 200 : isPhone ? 200 : 790"
            :attrib="attrib"
          />
        </template>
      </div>
      <div class="aduioLine-right">
        <SvgIcon
          v-if="config.isHasPY"
          icon-class="pin-btn"
          size="16"
          :class="['pinyin-16', config.isShowPY ? '' : 'disabled']"
          :style="{ color: config.isShowPY ? (attrib ? attrib.topic_color : '') : '#DCDFE6' }"
          @click="changePinyin"
        />
        <SvgIcon
          v-if="config.isHasEN"
          icon-class="en-btn"
          size="16"
          :class="['EN-16', config.isShowEN ? '' : 'disabled']"
          :style="{ color: config.isShowEN ? (attrib ? attrib.topic_color : '') : '#DCDFE6' }"
          @click="changeEN"
        />
      </div>
    </div>
    <template v-if="isShow">
      <div
        ref="dialogueWordcard"
        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"
          :change-word-card="changeWordCard"
          :theme-color="attrib ? attrib.topic_color : '#e35454'"
          :current-tree-i-d="currentTreeID"
          :TaskModel="TaskModel"
          :write-list="curQue.Bookanswer.writeModel"
          :mp3-url="wordPlayMp3"
          :bg="wordbgs"
          :ed="wordeds"
          :attrib="attrib"
          @changeCurQue="changeCurQue"
        />
      </div>
    </template>
    <template v-if="isNoteShow">
      <div
        ref="dialogueNotecard"
        class="NNPE-wordDetail NNPE-noteDetail"
        :style="{
          marginLeft: windowWidth > 642 ? '-321px' : '0px',
          left: windowWidth > 642 ? '' : '0px',
        }"
      >
        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" />
      </div>
    </template>
  </div>
</template>

<script>
import { timeStrToSen } from '@/utils/transform';
import AudioLine from '../voice_matrix/components/AudioLine.vue';
import Wordcard from '../article/components/Wordcard.vue'; // 卡片
import Notecard from '../article/components/Notecard.vue'; // 注释
import RoleChs from './RoleChs.vue';
import RemarkChs from './RemarkChs.vue';
import Soundrecord from '../../common/SoundRecord.vue';
export default {
  name: 'PhraseModelChs',
  components: {
    AudioLine,
    Wordcard,
    RoleChs,
    RemarkChs,
    Soundrecord,
    Notecard,
  },
  filters: {
    handlePinyin(wordsList) {
      let str = '';
      wordsList.forEach((item, index) => {
        if (index < wordsList.length - 1) {
          str += `${item.pinyin} `;
        } else {
          str += item.pinyin;
        }
      });
      return str;
    },
    handleChs(wordsList) {
      let str = '';
      wordsList.forEach((item, index) => {
        if (index < wordsList.length - 1) {
          str += `${item.chs} `;
        } else {
          str += item.chs;
        }
      });
      return str;
    },
  },
  props: [
    'curQue',
    'bodyLeft',
    'NNPENewWordList',
    'NNPEAnnotationList',
    'colorBox',
    'attrib',
    'noFont',
    'currentTreeID',
    'config',
    'TaskModel',
    'colLength',
    'NpcNewWordMp3',
    'isPhone',
    'multilingual',
  ],
  data() {
    return {
      resArr: [],
      curTime: 0, // 单位s
      chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '#', '、'],
      enFhList: [',', '.', ';', '?', '!', ':', '>', '<'],
      NumberList: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'],
      newWords: ['鱼', '辩礼义'],
      oldHz: '',
      hz: '',
      clientY: '',
      top: 0,
      left: 0,
      articleImg: {}, // 文章图片
      newWordList: [],
      word: null,
      isShow: false,
      screenHeight: 0,
      cardHeight: 0,
      isHasRemark: false,
      clickType: '',
      isNoteShow: false,
      noteNum: '',
      oldNoteNum: '',
      curNoteCon: null,
      contentWidth: 732,
      highWords: null,
      highWordsArr: [],
      highIndex: 0,
      wordbgs: 0,
      wordeds: 0,
      wordPlayMp3: '',
      windowWidth: window.innerWidth,
    };
  },
  computed: {},
  watch: {
    hz: {
      handler(val, oldVal) {
        let _this = this;
        if (val) {
          _this.handleNewWords(val, _this.top, _this.left);
        }
      },
      // 深度观察监听
      deep: true,
    },
    isShow: {
      handler(val, oldVal) {
        let _this = this;
        if (val) {
          setTimeout(() => {
            _this.cardHeight = _this.$refs.dialogueWordcard.offsetHeight;
            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
              _this.top = _this.clientY + 20;
            } else {
              _this.top = _this.clientY - _this.cardHeight - 30;
            }
          }, 50);
        }
      },
      // 深度观察监听
      deep: true,
    },
    noteNum: {
      handler(val, oldVal) {
        let _this = this;
        if (val) {
          _this.handleNote(val);
        }
      },
      // 深度观察监听
      deep: true,
    },
    isNoteShow: {
      handler(val, oldVal) {
        let _this = this;
        if (val) {
          setTimeout(() => {
            _this.cardHeight = _this.$refs.dialogueNotecard.offsetHeight;
            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
              _this.top = _this.clientY + 20;
            } else {
              _this.top = _this.clientY - _this.cardHeight - 30;
            }
          }, 50);
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
      this.handleNewword();
    }
    if (this.curQue) {
      this.handleData();
    }
    window.addEventListener('resize', this.getScreenHeight);
    this.getScreenHeight();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {
    window.removeEventListener('resize', this.getScreenHeight);
  }, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    // 拼音的显示和隐藏
    changePinyin() {
      if (this.config.isHasPY) {
        this.$emit('changeConfig', 'isShowPY');
      }
    },
    // 英文的显示和隐藏
    changeEN() {
      if (this.config.isHasEN) {
        this.$emit('changeConfig', 'isShowEN');
      }
    },

    handleWav() {},
    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 roleDetail = this.getRole(dItem);
        let remarkDetail = dItem.remark;
        if (
          remarkDetail &&
          (remarkDetail.chs || remarkDetail.en || (remarkDetail.img_list && remarkDetail.img_list.length > 0))
        ) {
          this.isHasRemark = true;
        }
        let paraArr = [];
        dItem.wordsList.forEach((sItem, sIndex) => {
          let sentence = dItem.sentences[sIndex];
          sItem.forEach((wItem, wIndex) => {
            // this.judgePad(sItem, wItem, wIndex);
            this.mergeWordSymbol(wItem);
            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:
                curQue.pinyin_type === 'pinyin'
                  ? curQue.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && wIndex === 0
                    ? wItem.pinyin_up
                    : wItem.pinyin
                  : wItem.pinyin_tone,
              chs: wItem.chs,
              padding: true, // wItem.padding,
              className: wItem.className,
              isShow: wItem.isShow,
              words,
              isNewWord: this.newWords.indexOf(wItem.chs) > -1,
              config: {
                fontFamily: wItem.fontFamily,
              },
            };
            paraArr.push(obj);
            if (wItem.pinyin) dhaspinyin = true;
          });
        });
        let enwords =
          dItem.sentencesEn && dItem.sentencesEn.length > 0 ? dItem.sentencesEn.join(' ').replace(/\\'/g, '’') : '';
        let paraObj = {
          wordsList: paraArr,
          enwords,
          roleDetail,
          remarkDetail,
          dhaspinyin,
        };
        resArr.push(paraObj);
      });
      this.resArr = resArr;

      // 循环文章图片
      if (curQue.img_list) {
        curQue.img_list.forEach((item) => {
          this.articleImg[item.imgNumber] = item.id;
        });
      }
    },
    findLightWord(wItem, startIndex, sentence, sItem) {
      let endIndex = 0;
      let words = '';
      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, endIndex };
      } else {
        this.highWords = null;
      }
    },
    // 词和标点合一起
    mergeWordSymbol(wItem) {
      if (this.chsFhList.indexOf(wItem.chs) > -1 || this.NumberList.indexOf(wItem.chs) > -1) {
        wItem.isShow = false;
      } else {
        wItem.isShow = true;
      }
    },
    // 获取角色
    getRole(dItem) {
      let roleIndex = dItem.roleIndex;
      let resObj = null;
      let roleList = JSON.parse(JSON.stringify(this.curQue.property.role_list));
      for (let i = 0; i < roleList.length; i++) {
        let item = roleList[i];
        if (item.id === roleIndex) {
          resObj = item;
          // resObj.color = this.colorBox[i];
          break;
        }
      }

      return resObj;
    },
    // 判断是否有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((wItem) => {
        // 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;
        if (item.new_word.trim() == val.trim()) {
          let wordlist = val.split('');
          this.word = JSON.parse(
            JSON.stringify({
              list: wordlist,
              detail: item,
              top,
              left,
            }),
          );
          break;
        }
        // }
      }
      this.oldHz = val;
    },
    viewNotes(e, noteNum) {
      let _this = this;
      _this.clickType = 'note';
      let noteIndex = '';
      _this.wordPlayMp3 = '';
      _this.NNPENewWordList.forEach((itemn) => {
        // items.forEach((itemn) => {
        if (itemn.new_word === noteNum) {
          _this.wordbgs = itemn.bg;
          _this.wordeds = itemn.ed;
          _this.wordPlayMp3 = itemn.newWordMp3;
        }
        // });
      });
      if (_this.NumberList.indexOf(noteNum) > -1) {
        for (let i = 0; i < _this.NumberList.length; i++) {
          if (_this.NumberList[i] == noteNum) {
            noteIndex = `${String(i)}`;
            break;
          }
        }
        this.showNoteDetail(e, noteIndex);
      } else if (this.newWordList.indexOf(noteNum) > -1) {
        if (_this.oldHz != noteNum) {
          this.isShow = false;
          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 {
        _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 = '';
    },
    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];
        }
      }
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.NNPE-ArticleView {
  width: 100%;

  .aduioLine-practice-npc {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .aduioLine-content {
      flex: 1;
    }

    .aduioLine-right {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 69px;
      height: 40px;
      padding: 0 12px;
      border-left: 1px solid rgba(0, 0, 0, 10%);

      > span {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
  }

  .NPC-sentences-list {
    .NPC-article-empty {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;

      > div {
        height: 24px;

        &.empty-left {
          box-sizing: border-box;
          width: 100%;

          &.hasRemark {
            box-sizing: border-box;
            width: 553px;
            border-right: 1px rgba(0, 0, 0, 10%) solid;
          }
        }

        &.empty-right {
          flex: 1;
        }
      }

      &-bottom {
        > div {
          height: 40px;
        }
      }
    }

    .dia-article-record {
      width: 100%;
      border-top: 1px solid rgba(0, 0, 0, 10%);

      .luyin-box {
        justify-content: start;
        justify-content: flex-start;
        width: 280px;
        height: 40px;
        padding: 8px 12px;
      }
    }
  }

  .multilingual {
    padding: 6px 24px 12px;
    word-break: break-word;
  }

  .NNPE-detail {
    // overflow: hidden; // 为了不遮挡备注内容
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    clear: both;

    &.active {
      background: rgba(0, 0, 0, 6%);
    }

    .article-content {
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      padding: 8px 24px;

      &.hasRemark {
        width: 553px;
        padding: 8px 0 8px 23px;
        border-right: 1px rgba(0, 0, 0, 10%) solid;
      }

      &.paraLast {
        padding-bottom: 24px;
      }
    }

    .enwords {
      padding-left: 3px;
      font-family: 'Helvetica';
      font-size: 14px;
      font-weight: normal;
      line-height: 22px;
      color: rgba(0, 0, 0, 85%);
      word-break: break-word;
    }

    .NNPE-words {
      float: left;
      padding-bottom: 5px;

      &-box {
        float: left;

        > span {
          display: block;

          &.NNPE-pinyin {
            height: 22px;
            font-family: 'League';
            font-size: 14px;
            font-weight: normal;
            line-height: 1.5;
            color: #000;

            &.noFont {
              font-family: initial;
            }

            &.textLeft {
              text-align: left;
            }
          }

          &.NNPE-chs {
            font-family: '楷体';
            font-size: 20px;
            line-height: 1.4;
            color: #000;

            &.active {
              background: rgba(60, 200, 99, 20%);
            }

            &.wordActive {
              color: #de4444;
            }

            &.newActive {
              color: #de4444;
            }
          }

          &.padding {
            padding: 0 3px;
          }
        }
      }

      &.textLeft {
        text-align: left;
      }

      &.textCenter {
        text-align: center;
      }

      &.textRight {
        text-align: right;
      }

      > span {
        display: block;

        &.NNPE-pinyin {
          height: 22px;
          font-family: 'League';
          font-size: 14px;
          font-weight: normal;
          line-height: 1.5;
          color: #000;

          &.noFont {
            font-family: initial;
          }

          &.textLeft {
            text-align: left;
          }
        }

        &.NNPE-chs {
          font-family: '楷体';
          font-size: 20px;
          line-height: 1.4;
          color: #000;

          &.active {
            background: rgba(60, 200, 99, 20%);
          }

          &.wordActive {
            color: #de4444;
          }

          &.newActive {
            color: #de4444;
          }
        }

        &.padding {
          padding: 0 3px;
        }
      }
    }

    &.NNPE-detail-title {
      .wordsList-box {
        > div {
          display: flex;
          flex-flow: wrap;
          justify-content: center;
        }
      }
    }

    .index {
      box-sizing: border-box;
      width: 48px;
      padding: 8px;
      text-align: right;
      border-right: 1px solid rgba(0, 0, 0, 10%);

      b {
        font-weight: 400;
        line-height: 1.5;
        color: #000;
      }
    }

    .wordsList-box {
      width: 100%;
      padding: 0 24px 0 8px;
      overflow: hidden;
      clear: both;

      .roleDetail {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 36px;

        .pinyin {
          margin-left: 4px;
          font-family: 'League';
          font-size: 14px;
          line-height: 22px;
          color: rgba(0, 0, 0, 85%);
        }

        .chs {
          font-family: '楷体';
          font-size: 16px;
          line-height: 24px;
          color: rgba(0, 0, 0, 85%);
        }
      }

      > .para-con {
        box-sizing: border-box;
        float: left;
        padding: 8px 12px;
        border: 1px solid rgba(0, 0, 0, 10%);
        border-radius: 8px;
      }

      > img {
        display: block;
        width: 100%;
      }
    }
  }

  .remarkBox {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;

    &.remark72 {
      padding-top: 72px;
    }

    &.remark-top {
      padding-top: 44px;
    }
  }

  .NNPE-wordDetail {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 116;
    max-width: 100%;
    margin-top: -196px;
    overflow: auto;

    // box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);
  }

  .NNPE-noteDetail {
    padding: 8px;
    margin-top: -130px;
    box-shadow: none;
  }
}
</style>