GCLS_Page_Book_Component_NPC/src/components/Adult/preview/DialogueArticleViewChs/AnswerModel.vue

<!--  -->
<template>
  <div
    class="NNPE-ArticleView"
    :class="['NPC-ArticleAnswerView-' + judgeAnswer]"
    v-if="curQue && Bookanswer"
  >
    <div
      class="aduioLine-box"
      v-if="
        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
      "
    >
      <AudioLine
        audioId="'answerAudio'"
        :mp3="curQue.mp3_list[0].id"
        :getCurTime="getCurTime"
        ref="audioLine"
        :width="audioWidth"
      />
    </div>
    <template v-if="resArr.length > 0">
      <div class="NPC-sentences-list">
        <p class="notice" v-if="curQue.notice">{{ curQue.notice }}</p>
        <div
          :class="[
            'NNPE-detail',
            item.isTitle ? 'NNPE-detail-title' : '',
            item.timeList.length > 0 &&
            curTime >= item.timeList[0].bg &&
            curTime <= item.timeList[item.timeList.length - 1].ed
              ? 'active'
              : ''
          ]"
          v-for="(item, index) in resArr"
          :key="'detail' + index"
        >
          <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
            <RoleChs :curRole="item.roleDetail" :type="1" />
            <div class="wordsList-box">
              <div
                class="roleDetail"
                v-if="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
                class="para-con"
                :style="{ background: item.roleDetail.color.bg }"
              >
                <div
                  v-if="item.enwords && enPosition && enPosition == 'top'"
                  class="enwords"
                >
                  {{ item.enwords }}
                </div>
                <div class="clearFix"></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="
                    handleChangeTime(
                      item.timeList &&
                        item.timeList.length > 0 &&
                        item.timeList[pItem.sentIndex].bg,
                      item,
                      item.timeList &&
                        item.timeList.length > 0 &&
                        item.timeList[pItem.sentIndex].ed
                    )
                  "
                >
                  <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
                        "
                      >
                        <span
                          class="NNPE-words-box"
                          :style="boxStyle(pItem.config, item.isHasPY)"
                        >
                          <span
                            v-if="item.isHasPY > 0 && pyPosition == 'top'"
                            class="NNPE-pinyin"
                            :class="[
                              pItem.className ? pItem.className : '',
                              pItem.pinyin && noFont.indexOf(pItem.pinyin) > -1
                                ? 'noFont'
                                : '',
                              pItem.config.underLine
                                ? 'NNPE-pinyin-underline'
                                : ''
                            ]"
                            >{{ pItem.pinyin | handlePY }}</span
                          >
                          <template v-if="!pItem.isHeng">
                            <span
                              v-for="(wItem, wIndex) in pItem.leg"
                              :key="'ci' + wIndex + pIndex + index"
                              :class="[
                                pItem.chstimeList &&
                                pItem.chstimeList[wIndex] &&
                                curTime >= pItem.chstimeList[wIndex].wordBg &&
                                curTime < item.timeList[pItem.sentIndex].ed
                                  ? 'wordActive'
                                  : '',
                                'NNPE-chs',
                                pItem.config.underLine
                                  ? 'NNPE-chs-underline'
                                  : ''
                              ]"
                              :style="hengStyle(pItem.config)"
                              >{{ pItem.chs[wIndex] }}</span
                            >
                            <!-- <span
                              class="NNPE-chs"
                              :class="[
                                pItem.chstimeList &&
                                  pItem.chstimeList[wIndex] &&
                                  curTime >= pItem.chstimeList[wIndex].wordBg &&
                                curTime <= item.timeList[pItem.sentIndex].ed
                                  ? 'wordActive'
                                  : '',
                                pItem.config.underLine
                                  ? 'NNPE-chs-underline'
                                  : '',
                              ]"
                              :style="hengStyle(pItem.config)"
                              >{{ pItem.chs }}</span
                            > -->
                          </template>
                          <template v-else>
                            <template v-if="judgeAnswer == 'standardAnswer'">
                              <EditDiv
                                :id="
                                  'dialogue_' +
                                    Math.random()
                                      .toString(36)
                                      .substr(2) +
                                    '_' +
                                    pItem.hengIndex
                                "
                                class="answer-input userRight"
                                v-model="curQue.answerArr[pItem.hengIndex - 1]"
                                :canEdit="false"
                                :textAlign="pItem.config.DiaTextAlign"
                                :style="hengStyle(pItem.config)"
                              />
                            </template>
                            <template v-else>
                              <EditDiv
                                :id="
                                  'dialogue_' +
                                    Math.random()
                                      .toString(36)
                                      .substr(2) +
                                    '_' +
                                    pItem.hengIndex
                                "
                                class="answer-input"
                                :class="[
                                  curQue.answerArr &&
                                  curQue.answerArr[pItem.hengIndex - 1] &&
                                  curQue.answerArr[pItem.hengIndex - 1] ==
                                    Bookanswer.input[pItem.hengIndex - 1].value
                                    ? 'userRight'
                                    : curQue.answerArr &&
                                      curQue.answerArr[pItem.hengIndex - 1] &&
                                      curQue.answerArr[pItem.hengIndex - 1] !=
                                        Bookanswer.input[pItem.hengIndex - 1]
                                          .value
                                    ? 'userError'
                                    : ''
                                ]"
                                v-model="
                                  Bookanswer.input[pItem.hengIndex - 1].value
                                "
                                :canEdit="
                                  TaskModel == 'ANSWER' || judgeAnswer
                                    ? false
                                    : true
                                "
                                :hengIndex="pItem.hengIndex - 1"
                                @saveBlankTF="saveBlankTF"
                                :style="hengStyle(pItem.config)"
                                :textAlign="pItem.config.DiaTextAlign"
                              />
                            </template>
                          </template>
                          <span
                            v-if="item.isHasPY > 0 && pyPosition == 'bottom'"
                            class="NNPE-pinyin"
                            :class="[
                              pItem.className ? pItem.className : '',
                              noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                              pItem.config.underLine
                                ? 'NNPE-pinyin-underline'
                                : ''
                            ]"
                            >{{ pItem.pinyin | handlePY }}</span
                          >
                        </span>
                        <span
                          class="NNPE-words-box"
                          v-if="item.wordsList[pIndex + 1]"
                          :style="
                            boxStyle(
                              item.wordsList[pIndex + 1].config,
                              item.isHasPY
                            )
                          "
                        >
                          <span
                            v-if="item.isHasPY > 0 && pyPosition == 'top'"
                            class="NNPE-pinyin"
                            :class="[
                              noFont.indexOf(
                                item.wordsList[pIndex + 1].pinyin
                              ) > -1
                                ? 'noFont'
                                : '',
                              item.wordsList[pIndex + 1].config.underLine
                                ? 'NNPE-pinyin-underline'
                                : ''
                            ]"
                            style="text-align: left"
                            >{{
                              item.wordsList[pIndex + 1].pinyin | handlePY
                            }}</span
                          >
                          <span
                            class="NNPE-chs"
                            style="text-align: left"
                            :class="[
                              item.timeList.length > 0 &&
                              pItem.chstimeList &&
                              pItem.chstimeList[pItem.leg - 1] &&
                              curTime >=
                                pItem.chstimeList[pItem.leg - 1].wordBg &&
                              curQue.wordTime &&
                              curTime <= item.timeList[pItem.sentIndex].ed
                                ? 'wordActive'
                                : ''
                            ]"
                            :style="
                              hengStyle(item.wordsList[pIndex + 1].config)
                            "
                            >{{ item.wordsList[pIndex + 1].chs }}</span
                          >

                          <span
                            v-if="item.isHasPY > 0 && pyPosition == 'bottom'"
                            class="NNPE-pinyin"
                            :class="[
                              noFont.indexOf(
                                item.wordsList[pIndex + 1].pinyin
                              ) > -1
                                ? 'noFont'
                                : '',
                              item.wordsList[pIndex + 1].config.underLine
                                ? 'NNPE-pinyin-underline'
                                : ''
                            ]"
                            style="text-align: left"
                            >{{
                              item.wordsList[pIndex + 1].pinyin | handlePY
                            }}</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
                          "
                          :style="
                            boxStyle(
                              item.wordsList[pIndex + 2].config,
                              item.isHasPY
                            )
                          "
                        >
                          <span
                            v-if="
                              item.isHasPY > 0 &&
                                curQue.pyPosition == 'top' &&
                                config.isShowPY
                            "
                            :class="[
                              'NNPE-pinyin',
                              noFont.indexOf(
                                item.wordsList[pIndex + 2].pinyin
                              ) > -1
                                ? 'noFont'
                                : '',
                              item.wordsList[pIndex + 2].config.underLine
                                ? 'NNPE-pinyin-underline'
                                : ''
                            ]"
                            style="text-align: left"
                            >{{ item.wordsList[pIndex + 2].pinyin }}</span
                          >
                          <span
                            class="NNPE-chs"
                            style="text-align: left"
                            :class="[
                              item.timeList &&
                              item.timeList[pItem.sentIndex] &&
                              curTime >= item.timeList[pItem.sentIndex].bg &&
                              curTime <= item.timeList[pItem.sentIndex].ed
                                ? 'active'
                                : '',
                              pItem.chstimeList &&
                              pItem.chstimeList[pItem.leg - 1] &&
                              curTime >=
                                pItem.chstimeList[pItem.leg - 1].wordBg &&
                              curQue.wordTime &&
                              curTime <= item.timeList[pItem.sentIndex].ed
                                ? 'wordActive'
                                : ''
                            ]"
                            :style="
                              hengStyle(item.wordsList[pIndex + 2].config)
                            "
                            >{{ item.wordsList[pIndex + 2].chs }}</span
                          >
                          <span
                            v-if="
                              item.isHasPY > 0 &&
                                curQue.pyPosition == 'bottom' &&
                                config.isShowPY
                            "
                            :class="[
                              'NNPE-pinyin',
                              noFont.indexOf(
                                item.wordsList[pIndex + 2].pinyin
                              ) > -1
                                ? 'noFont'
                                : '',
                              item.wordsList[pIndex + 2].config.underLine
                                ? 'NNPE-pinyin-underline'
                                : ''
                            ]"
                            style="text-align: left"
                            >{{ item.wordsList[pIndex + 2].pinyin }}</span
                          >
                        </span>
                      </template>

                      <!--下一个元素不是标点-->
                      <template v-else>
                        <span
                          v-if="item.isHasPY > 0 && pyPosition == 'top'"
                          class="NNPE-pinyin"
                          :class="[
                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                            pItem.className ? pItem.className : '',
                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                            pItem.config.underLine
                              ? 'NNPE-pinyin-underline'
                              : ''
                          ]"
                          >{{ pItem.pinyin | handlePY }}</span
                        >
                        <template v-if="!pItem.isHeng">
                          <span
                            v-if="pItem.chs != '#'"
                            class="NNPE-chs"
                            :class="[
                              pItem.chs != '“' && pItem.padding && item.isHasPY
                                ? 'padding'
                                : ''
                            ]"
                          >
                            <template>
                              <span
                                v-for="(wItem, wIndex) in pItem.leg"
                                :key="'ci' + wIndex + pIndex + index"
                                :class="[
                                  pItem.chstimeList &&
                                  pItem.chstimeList[wIndex] &&
                                  curTime >= pItem.chstimeList[wIndex].wordBg &&
                                  curTime <= item.timeList[pItem.sentIndex].ed
                                    ? 'wordActive'
                                    : '',
                                  'NNPE-chs',
                                  pItem.config.underLine
                                    ? 'NNPE-chs-underline'
                                    : ''
                                ]"
                                :style="hengStyle(pItem.config)"
                                >{{ pItem.chs[wIndex] }}</span
                              >
                            </template>
                          </span>
                          <!-- <span
                            v-if="pItem.chs != '#'"
                            class="NNPE-chs"
                            :class="[
                              pItem.chstimeList &&
                                pItem.chstimeList[wIndex] &&
                                curTime >= pItem.chstimeList[wIndex].wordBg &&
                              curTime <= item.timeList[pItem.sentIndex].ed
                                ? 'wordActive'
                                : '',
                              pItem.chs != '“' && pItem.padding && item.isHasPY
                                ? 'padding'
                                : '',
                              pItem.config.underLine
                                ? 'NNPE-chs-underline'
                                : '',
                            ]"
                            :style="hengStyle(pItem.config)"
                            >{{ pItem.chs }}</span
                          > -->
                        </template>
                        <template v-else>
                          <template v-if="judgeAnswer == 'standardAnswer'">
                            <EditDiv
                              :id="
                                'dialogue_' +
                                  Math.random()
                                    .toString(36)
                                    .substr(2) +
                                  '_' +
                                  pItem.hengIndex
                              "
                              class="answer-input userRight"
                              v-model="curQue.answerArr[pItem.hengIndex - 1]"
                              :canEdit="false"
                              :style="hengStyle(pItem.config)"
                              :textAlign="pItem.config.DiaTextAlign"
                            />
                          </template>
                          <template v-else>
                            <EditDiv
                              :id="
                                'dialogue_' +
                                  Math.random()
                                    .toString(36)
                                    .substr(2) +
                                  '_' +
                                  pItem.hengIndex
                              "
                              class="answer-input"
                              :class="[
                                curQue.answerArr &&
                                curQue.answerArr[pItem.hengIndex - 1] &&
                                curQue.answerArr[pItem.hengIndex - 1] ==
                                  Bookanswer.input[pItem.hengIndex - 1].value
                                  ? 'userRight'
                                  : curQue.answerArr &&
                                    curQue.answerArr[pItem.hengIndex - 1] &&
                                    curQue.answerArr[pItem.hengIndex - 1] !=
                                      Bookanswer.input[pItem.hengIndex - 1]
                                        .value
                                  ? 'userError'
                                  : ''
                              ]"
                              v-model="
                                Bookanswer.input[pItem.hengIndex - 1].value
                              "
                              :canEdit="
                                TaskModel == 'ANSWER' || judgeAnswer
                                  ? false
                                  : true
                              "
                              :hengIndex="pItem.hengIndex - 1"
                              @saveBlankTF="saveBlankTF"
                              :style="hengStyle(pItem.config)"
                              :textAlign="pItem.config.DiaTextAlign"
                            />
                          </template>
                        </template>
                        <span
                          v-if="item.isHasPY > 0 && pyPosition == 'bottom'"
                          class="NNPE-pinyin"
                          :class="[
                            pItem.chs != '“' && pItem.padding ? 'padding' : '',
                            pItem.className ? pItem.className : '',
                            noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                            pItem.config.underLine
                              ? 'NNPE-pinyin-underline'
                              : ''
                          ]"
                          >{{ pItem.pinyin | handlePY }}</span
                        >
                      </template>
                    </template>
                  </template>
                  <template v-else>
                    <span
                      :style="{
                        height: pItem.height + 'px',
                        width: pItem.width + 'px'
                      }"
                    ></span>
                  </template>
                </div>
                <div class="clearFix"></div>
                <div
                  v-if="
                    item.enwords &&
                      (!enPosition || (enPosition && enPosition == 'bottom'))
                  "
                  class="enwords"
                >
                  {{ item.enwords }}
                </div>
              </div>
              <div class="clearFix"></div>
              <div class="answer-box">
                <div class="input-record" v-if="item.isRecord">
                  <Soundrecord
                    type="normal"
                    class="normal-box"
                    :TaskModel="TaskModel"
                    :answerRecordList="
                      judgeAnswer != 'standardAnswer'
                        ? Bookanswer.recordList[index]
                        : []
                    "
                    :tmIndex="index"
                    @handleWav="handleWav"
                  />
                </div>
                <template
                  class="input-record"
                  v-if="
                    curQue.checkList && curQue.checkList.indexOf('judge') > -1
                  "
                >
                  <div class="judge-box" v-if="curQue.judge[index].isJudge">
                    <a
                      :class="[
                        'right-btn',
                        TaskModel != 'ANSWER' ? 'right-btn-hover' : '',
                        judgeAnswerClass('right', index)
                      ]"
                      @click="handleSelectJudge('right', index)"
                    >
                    </a>
                    <a
                      :class="[
                        'error-btn',
                        TaskModel != 'ANSWER' ? 'error-btn-hover' : '',
                        judgeAnswerClass('error', index)
                      ]"
                      @click="handleSelectJudge('error', index)"
                    >
                    </a>
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div
            class="remarkBox remark-top"
            v-if="
              item.remarkDetail &&
                (item.remarkDetail.chs ||
                  item.remarkDetail.en ||
                  (item.remarkDetail.img_list &&
                    item.remarkDetail.img_list.length > 0))
            "
          >
            <RemarkChs :remarkDetail="item.remarkDetail" />
          </div>
        </div>
        <!-- <div class="dia-article-record">
          <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
        </div> -->
      </div>
    </template>
    <template v-if="paraArr.length > 0">
      <div class="NPC-sentences-list">
        <p class="notice" v-if="curQue.notice">{{ curQue.notice }}</p>
        <div
          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
          v-for="(item, index) in paraArr"
          :key="'detail' + index"
        >
          <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
            <RoleChs :curRole="item.roleDetail" :type="1" />
            <div class="wordsList-box">
              <div
                class="roleDetail"
                v-if="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
                class="para-con"
                :style="{ background: item.roleDetail.color.bg }"
              >
                <div
                  v-if="item.enwords && enPosition && enPosition == 'top'"
                  class="enwords"
                >
                  {{ item.enwords }}
                </div>
                <div class="clearFix"></div>
                <div
                  class="NNPE-words"
                  v-for="(pItem, pIndex) in item.wordsList"
                  :key="'wordsList' + pIndex"
                >
                  <template v-if="!pItem.isHeng">
                    <span class="NNPE-para-pinyin padding">{{
                      pItem.con
                    }}</span>
                  </template>
                  <template v-else>
                    <template v-if="judgeAnswer == 'standardAnswer'">
                      <EditDiv
                        :id="
                          'dialogue_' +
                            Math.random()
                              .toString(36)
                              .substr(2) +
                            '_' +
                            pItem.hengIndex
                        "
                        class="answer-input userRight"
                        v-model="curQue.answerArr[pItem.hengIndex - 1]"
                        :canEdit="false"
                        :style="hengStyle(pItem.config)"
                        :textAlign="pItem.config.DiaTextAlign"
                      />
                    </template>
                    <template v-else>
                      <EditDiv
                        :id="
                          'dialogue_' +
                            Math.random()
                              .toString(36)
                              .substr(2) +
                            '_' +
                            pItem.hengIndex
                        "
                        class="answer-input"
                        :class="[
                          curQue.answerArr &&
                          curQue.answerArr[pItem.hengIndex - 1] &&
                          curQue.answerArr[pItem.hengIndex - 1] ==
                            Bookanswer.input[pItem.hengIndex - 1].value
                            ? 'userRight'
                            : curQue.answerArr &&
                              curQue.answerArr[pItem.hengIndex - 1] &&
                              curQue.answerArr[pItem.hengIndex - 1] !=
                                Bookanswer.input[pItem.hengIndex - 1].value
                            ? 'userError'
                            : ''
                        ]"
                        v-model="Bookanswer.input[pItem.hengIndex - 1].value"
                        :canEdit="
                          TaskModel == 'ANSWER' || judgeAnswer ? false : true
                        "
                        :hengIndex="pItem.hengIndex - 1"
                        @saveBlankTF="saveBlankTF"
                        :style="hengStyle(pItem.config)"
                        :textAlign="pItem.config.DiaTextAlign"
                      />
                    </template>
                  </template>
                </div>
                <div class="clearFix"></div>
                <div
                  v-if="
                    item.enwords &&
                      (!enPosition || (enPosition && enPosition == 'bottom'))
                  "
                  class="enwords"
                >
                  {{ item.enwords }}
                </div>
              </div>
              <div class="clearFix"></div>
              <div class="answer-box">
                <div class="input-record" v-if="item.isRecord">
                  <Soundrecord
                    type="normal"
                    class="normal-box"
                    :TaskModel="TaskModel"
                    :answerRecordList="
                      judgeAnswer != 'standardAnswer'
                        ? Bookanswer.recordList[index]
                        : []
                    "
                    :tmIndex="index"
                    @handleWav="handleWav"
                  />
                </div>
                <template
                  class="input-record"
                  v-if="
                    curQue.checkList && curQue.checkList.indexOf('judge') > -1
                  "
                >
                  <div class="judge-box" v-if="curQue.judge[index].isJudge">
                    <a
                      :class="[
                        'right-btn',
                        TaskModel != 'ANSWER' ? 'right-btn-hover' : '',
                        judgeAnswerClass('right', index)
                      ]"
                      @click="handleSelectJudge('right', index)"
                    >
                    </a>
                    <a
                      :class="[
                        'error-btn',
                        TaskModel != 'ANSWER' ? 'error-btn-hover' : '',
                        judgeAnswerClass('error', index)
                      ]"
                      @click="handleSelectJudge('error', index)"
                    >
                    </a>
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div
            class="remarkBox remark-top"
            v-if="
              item.remarkDetail &&
                (item.remarkDetail.chs ||
                  item.remarkDetail.en ||
                  (item.remarkDetail.img_list &&
                    item.remarkDetail.img_list.length > 0))
            "
          >
            <RemarkChs :remarkDetail="item.remarkDetail" />
          </div>
        </div>
        <!-- <div class="dia-article-record">
          <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
        </div> -->
      </div>
    </template>
  </div>
</template>

<script>
import { timeStrToSen } from "../../../../utils/index";
import AudioLine from "../AudioLine.vue";
import RoleChs from "./RoleChs.vue";
import RemarkChs from "./RemarkChs.vue";
import Soundrecord from "../Soundrecord.vue";
import EditDiv from "../EditDiv.vue";
export default {
  name: "DialogueNormalModelChs",
  props: [
    "curQue",
    "pyPosition",
    "colorBox",
    "listIndex",
    "Bookanswer",
    "TaskModel",
    "judgeAnswer",
    "audioWidth",
    "enPosition"
  ],
  components: {
    AudioLine,
    RoleChs,
    RemarkChs,
    Soundrecord,
    EditDiv
  },
  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;
    },
    handlePY(pinyin) {
      let reg = /_{2,}/g;
      let py = "";
      if (!reg.test(pinyin)) {
        py = pinyin;
      }
      return py;
    }
  },
  data() {
    return {
      resArr: [],
      curTime: 0, //单位s
      chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；", "、"],
      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
      newWords: ["鱼", "辩礼义"],
      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/", "_"],
      oldHz: "",
      hz: "",
      top: 0,
      left: 0,
      articleImg: {}, // 文章图片
      isHasRemark: false,
      paraArr: [],
      answer: [],
      hengIndex: 0
    };
  },
  computed: {
    judgeAnswerClass() {
      return function(type, index) {
        let _this = this;
        let classname = "";
        let answer = _this.Bookanswer.judge[index].value;
        let correct = _this.curQue.judge[index].judge;
        if (_this.judgeAnswer == "standardAnswer") {
          if (correct == type) {
            classname = "userRight_" + type;
          }
        } else if (
          _this.judgeAnswer == "studentAnswer" ||
          _this.judgeAnswer == "userAnswer"
        ) {
          if (answer == type) {
            if (correct) {
              if (answer == correct) {
                classname = "userRight_" + type;
              } else {
                classname = "userError_" + type;
              }
            } else {
              classname = "active";
            }
          }
        } else {
          if (answer == type) {
            classname = "active";
          }
        }
        return classname;
      };
    },
    hengStyle() {
      return function(config) {
        let sizeVal =
          config && config.fontSize ? config.fontSize.replace("px", "") : 20;
        return {
          minHeight: Number(sizeVal) + 13 + "px",
          lineHeight: Number(sizeVal) + 12 + "px",
          fontSize: config ? config.fontSize : "20px",
          fontFamily: config ? config.fontFamily : "FZJCGFKTK",
          textAlign:
            config && config.DiaTextAlign ? config.DiaTextAlign : "left",
          minWidth:
            config && config.DiaInputLength
              ? config.DiaInputLength * Number(sizeVal) + 28 + "px"
              : ""
        };
      };
    },
    boxStyle() {
      return function(config, isHasPY) {
        let sizeVal =
          config && config.fontSize ? config.fontSize.replace("px", "") : 20;
        return {
          minHeight: Number(sizeVal) + 13 + (isHasPY ? 18 : 0) + "px"
        };
      };
    }
  },
  watch: {},
  //方法集合
  methods: {
    // 判断题选择
    handleSelectJudge(obj, index) {
      let _this = this;
      if (_this.TaskModel != "ANSWER" || !_this.judgeAnswer) {
        _this.$set(_this.Bookanswer.judge[index], "value", obj);
        let correct = _this.curQue.judge[index].judge;
        if (correct) {
          if (correct == obj) {
            _this.$set(
              _this.Bookanswer.judge[index],
              "userAnswerJudge",
              "[JUDGE##T##JUDGE]"
            );
          } else {
            _this.$set(
              _this.Bookanswer.judge[index],
              "userAnswerJudge",
              "[JUDGE##F##JUDGE]"
            );
          }
        }
      }
      _this.$forceUpdate();
    },
    handleWav(list, tmIndex) {
      tmIndex = tmIndex ? tmIndex : 0;
      this.$set(this.Bookanswer.recordList, tmIndex, list);
    },
    saveBlankTF(value, hengIndex) {
      let _this = this;
      let answerArr = this.curQue.answerArr;
      if (answerArr.length > 0) {
        if (value.trim() == answerArr[hengIndex]) {
          _this.$set(
            _this.Bookanswer.input[hengIndex],
            "userAnswerJudge",
            "[JUDGE##T##JUDGE]"
          );
        } else {
          _this.$set(
            _this.Bookanswer.input[hengIndex],
            "userAnswerJudge",
            "[JUDGE##F##JUDGE]"
          );
        }
      }
    },
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
    },
    handleData() {
      let resArr = [];
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      let wordTimeList = curQue.wordTime;
      let reg = /_{2,}/g;
      let leg = this.curQue.detail.length;
      let asIndex = 0;
      this.curQue.answerArr = this.curQue.answer
        ? this.curQue.answer.split("\n")
        : [];
      let hengIndex = 0;
      curQue.detail.forEach((dItem, dIndex) => {
        let isHasPY = 0;
        let isRecord = 0;
        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 = [];
        if (dItem.wordsList && dItem.wordsList.length > 0) {
          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.mergeWordSymbol(wItem);
              if (wItem.pinyin) {
                isHasPY++;
              }
              let obj = {
                paraIndex: dIndex, //段落索引
                sentIndex: sIndex, //在段落中句子索引
                wordIndex: wIndex, //单词的索引
                pinyin: wItem.pinyin,
                chs: wItem.chs,
                isHeng: reg.test(wItem.chs),
                padding: true, //wItem.padding,
                className: wItem.className,
                isShow: wItem.isShow,
                isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
                config: {
                  fontColor: wItem.fontColor,
                  fontFamily: wItem.fontFamily,
                  fontSize: wItem.fontSize,
                  underLine: wItem.underLine,
                  wordPadding: wItem.wordPadding,
                  DiaTextAlign: wItem.DiaTextAlign
                    ? wItem.DiaTextAlign
                    : "left",
                  DiaInputLength: wItem.DiaInputLength
                    ? wItem.DiaInputLength
                    : ""
                },
                leg: wItem.chs.length,
                chstimeList: [],
                startIndex: startIndex,
                endIndex: endIndex
              };
              if (wordTimeList && wordTimeList.length > 0) {
                obj.chstimeList = wordTimeList[asIndex].wordsResultList.slice(
                  startIndex,
                  endIndex
                );
              }
              if (obj.isHeng) {
                isRecord = isRecord + 1;
                hengIndex = hengIndex + 1;
                obj.hengIndex = hengIndex;
                obj.answer = "";
              }
              sentArr.push(obj);
              paraArr.push(obj);
              if (wIndex == sItem.length - 1) {
                asIndex++;
              }
            });
          });
          let curSentencesLeg = dItem.sentences.length;
          let startLeg = dIndex == 0 ? 0 : curQue.detail[dIndex - 1].endLeg;
          let endLeg = startLeg + curSentencesLeg;
          dItem.endLeg = endLeg;
          let timeList = [];
          if (curQue.wordTime && curQue.wordTime.length > 0) {
            timeList = curQue.wordTime.slice(startLeg, endLeg);
          }
          let enwords =
            dItem.sentencesEn && dItem.sentencesEn.length > 0
              ? dItem.sentencesEn.join(" ").replace(/\'/g, "’")
              : "";
          let paraObj = {
            wordsList: paraArr,
            enwords: enwords,
            timeList: timeList,
            roleDetail: roleDetail,
            remarkDetail: remarkDetail,
            isRecord:
              isRecord > 0 ||
              (curQue.checkList && curQue.checkList.indexOf("record") > -1)
                ? true
                : false,
            isHasPY: isHasPY
          };
          resArr.push(paraObj);
        }
      });
      this.resArr = resArr;
      // 循环文章图片
      if (curQue.img_list) {
        curQue.img_list.forEach(item => {
          this.articleImg[item.imgNumber] = item.id;
        });
      }
    },
    handlePYData() {
      let pararArr = [];
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      this.hengIndex = 0;
      curQue.detail.forEach((dItem, dIndex) => {
        let para = dItem.para;
        let paraObj = this.handlePara(para);
        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 obj = {
          wordsList: paraObj.wordsList,
          roleDetail: roleDetail,
          remarkDetail: remarkDetail,
          isRecord: paraObj.isRecord
        };
        pararArr.push(obj);
      });
      this.paraArr = pararArr;
    },
    //词和标点合一起
    mergeWordSymbol(wItem) {
      if (this.chsFhList.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.roleList));
      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, item, ed) {
      if (item.timeList && item.timeList.length > 0) {
        this.curTime = time;
        this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
      }
      this.ed = ed;
    },
    //处理数组
    handlePara(para) {
      para = para.trim();
      para = para.replace(/\s+/g, " ");
      para = para.replace(/_{2,}/g, "^ ");
      let paraArr = para.split(/\s/g);
      let resArr = [];
      paraArr.forEach((item, index) => {
        let obj = {
          isHeng: false,
          con: item
        };
        if (item == "^") {
          obj.isHeng = true;
          obj.answer = "";
          this.hengIndex++;
          obj.hengIndex = this.hengIndex;
        }
        resArr.push(obj);
      });
      let isRecord = /^/g.test(para);
      return { wordsList: resArr, isRecord: isRecord };
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.curQue) {
      if (this.curQue.font == "cn" || !this.curQue.font) {
        this.handleData();
      } else {
        this.handlePYData();
      }
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.NNPE-ArticleView {
  width: 100%;
  .clearFix {
    clear: both;
    overflow: hidden;
  }
  .NPC-sentences-list {
    .NPC-article-empty {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      > div {
        height: 24px;
        &.empty-left {
          width: 100%;
          box-sizing: border-box;

          &.hasRemark {
            width: 553px;
            box-sizing: border-box;
            border-right: 1px rgba(0, 0, 0, 0.1) solid;
          }
        }
        &.empty-right {
          flex: 1;
        }
      }
      &-bottom {
        > div {
          height: 40px;
        }
      }
    }
    .dia-article-record {
      width: 100%;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      .luyin-box {
        justify-content: start;
        padding: 8px 12px;
        height: 40px;
        width: 280px;
        justify-content: flex-start;
      }
    }
  }
  .NNPE-detail {
    clear: both;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    &.active {
      background: rgba(0, 0, 0, 0.06);
    }
    .article-content {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 24px 8px 24px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      &.hasRemark {
        width: 553px;
        border-right: 1px rgba(0, 0, 0, 0.1) solid;
        padding: 8px 0px 8px 23px;
      }
      &.paraLast {
        padding-bottom: 24px;
      }
    }
    .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: 18px;
            color: #000000;
            height: 18px;
            display: block;
            &.noFont {
              font-family: initial;
            }
            &.textLeft {
              text-align: left;
            }
            &.wordActive {
              color: #de4444;
            }
            &.NNPE-pinyin-underline {
              text-decoration: underline;
            }
            .NNPE-pinyin-underline {
              text-decoration: underline;
            }
          }
          &.NNPE-chs {
            font-family: "FZJCGFKTK";
            font-size: 20px;
            line-height: 32px;
            min-height: 33px;
            color: #000000;
            &.active {
              background: rgba(60, 200, 99, 0.2);
            }
            &.wordActive {
              color: #de4444;
            }
            &.NNPE-chs-underline {
              text-decoration: underline;
            }
            .NNPE-chs-underline {
              text-decoration: underline;
            }
            .wordActive {
              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: 18px;
          color: #000000;
          height: 18px;
          display: block;
          &.noFont {
            font-family: initial;
          }
          &.textLeft {
            text-align: left;
          }
          &.wordActive {
            color: #de4444;
          }
          &.NNPE-pinyin-underline {
            text-decoration: underline;
          }
          .NNPE-pinyin-underline {
            text-decoration: underline;
          }
        }
        &.NNPE-chs {
          font-family: "FZJCGFKTK";
          font-size: 20px;
          line-height: 32px;
          min-height: 33px;
          color: #000000;
          &.active {
            background: rgba(60, 200, 99, 0.2);
          }
          &.wordActive {
            color: #de4444;
          }
          &.NNPE-chs-underline {
            text-decoration: underline;
          }
          .NNPE-chs-underline {
            text-decoration: underline;
          }
          .wordActive {
            color: #de4444;
          }
        }
        &.padding {
          padding: 0 3px;
        }
      }
    }
    .enwords {
      font-family: Helvetica;
      font-weight: normal;
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);
      word-break: break-word;
    }
    &.NNPE-detail-title {
      .wordsList-box {
        > div {
          display: flex;
          justify-content: center;
          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: 0px 24px 0px 8px;
      clear: both;
      overflow: hidden;
      .roleDetail {
        height: 36px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .pinyin {
          font-family: "GB-PINYINOK-B";
          font-size: 14px;
          line-height: 18px;
          color: rgba(0, 0, 0, 0.85);
          margin-right: 4px;
        }
        .chs {
          font-family: "FZJCGFKTK";
          font-size: 20px;
          line-height: 24px;
          color: rgba(0, 0, 0, 0.85);
        }
      }
      > .para-con {
        float: left;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        padding: 8px 12px 8px 12px;
        border-radius: 8px;
      }
      > img {
        width: 100%;
        display: block;
      }
      .input-record {
        margin-right: 8px;
        .mini-box {
          width: 64px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          padding: 0 12px;
        }
        .normal-box {
          width: 129px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          padding: 0 12px;
        }
      }
    }
  }
  .remarkBox {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    &.remark72 {
      padding-top: 72px;
    }
    &.remark-top {
      padding-top: 44px;
    }
  }
  .NNPE-para-pinyin {
    font-weight: normal;
    font-size: 20px;
    line-height: 28px;
    color: #000000;
    height: 28px;
  }
  .answer-input {
    min-height: 28px;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px #000 solid;
    background: 0 0;
    min-width: 100px;
    outline: 0;
    text-align: left;
    font-family: "FZJCGFKTK";
    font-size: 20px;
    padding: 0 10px;
    box-sizing: border-box;
    color: #000000;
    line-height: 26px;
  }
}
.NPC-ArticleAnswerView {
  &-userAnswer,
  &-standardAnswer,
  &-studentAnswer {
    .NNPE-detail {
      .NNPE-words {
        .answer-input {
          &.userRight {
            color: #2ca767;
          }
          &.userError {
            color: #ed342d;
          }
        }
      }
    }
  }
}
.judge-box {
  display: flex;
  justify-content: center;

  a {
    width: 32px;
    height: 32px;
    background: #fff url("../../../../assets/NPC/right-btn-gray.png") center
      no-repeat;
    background-size: 24px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    > img {
      width: 24px;
      height: 24px;
    }
    &.right-btn-hover:hover,
    &.active {
      background: #727272 url("../../../../assets/NPC/right-btn-white.png")
        center no-repeat;
      background-size: 24px;
      border-color: #727272;
    }
    &.error-btn {
      background: #fff url("../../../../assets/NPC/error-btn-gray.png") center
        no-repeat;
      background-size: 24px;
      margin-left: 4px;
      &.error-btn-hover:hover,
      &.active {
        background: #727272 url("../../../../assets/NPC/error-btn-white.png")
          center no-repeat;
        background-size: 24px;
        border-color: #727272;
      }
    }
    &.userRight_right {
      background-color: rgba(44, 167, 103, 0.1);
      border: 1px solid #2ca767;
    }
    &.userError_right {
      border: 1px solid #ed342d;
      background: rgba(237, 52, 45, 0.1)
        url("../../../../assets/newImage/common/judge-dui.png") center no-repeat;
      background-size: 24px;
    }
    &.userRight_error {
      border: 1px solid #2ca767;
      background: rgba(44, 167, 103, 0.1)
        url("../../../../assets/newImage/common/judge-cuo.png") center no-repeat;
      background-size: 24px;
    }
    &.userError_error {
      background-color: rgba(237, 52, 45, 0.1);
      border: 1px solid #ed342d;
    }
  }
}
.answer-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 8px;
}

.NPC-sentences-list {
  .notice {
    word-break: break-word;
  }
}
</style>