HM21St_Page_User/src/views/bookShelf/components/PrintModel.vue

<template>
  <div class="print-model">
    <div class="print-model-top">
      <a class="goback" @click="goBack"
        ><i class="el-icon-arrow-left"></i>回到文章</a
      >
      <div class="border"></div>
      <p class="article-title">打印预览</p>
    </div>
    <div class="print-model-bottom">
      <div
        class="print-model-bottom-left"
        ref="printArea"
        id="showWaterMark"
        :style="{ width: isPrint ? '220mm' : '' }"
      >
        <div class="print-inner">
          <h2>
            <span
              :style="{
                color: colorObj.titleColor,
                fontSize: titleFontsize + 'px',
                lineHeight: titleFontsize + 8 + 'px',
                marginRight: '10px',
                fontWeight: '700',
                cursor: 'pointer',
                wordBreak: 'break-word',
              }"
              >{{ articleInfo.art_title }}</span
            >
          </h2>
          <h6
            class="nnpe-article-author"
            :style="{
              color: colorObj.sourceColor,
              fontSize: wordFontsize - 4 + 'px',
              lineHeight: wordFontsize + 4 + 'px',
              fontWeight: '400',
            }"
          >
            {{
              articleInfo.art_author +
              " · " +
              articleInfo.study_phase_name +
              "版 · 第 " +
              articleInfo.iss_no +
              " 期 · " +
              articleInfo.release_date +
              " · " +
              articleInfo.chn_item +
              (articleInfo.page_no_in_pub
                ? " · P" + articleInfo.page_no_in_pub
                : "")
            }}
            {{ printForm.info.length > 0 ? " | " : "" }}
            {{
              printForm.info.indexOf("wordLength") > -1
                ? " 长度 " + articleInfo.art_corpus_data.artStatInfo.wc
                : ""
            }}
            {{
              printForm.info.indexOf("wordNumber") > -1
                ? " · 词数 " + articleInfo.art_corpus_data.artStatInfo.wdc
                : ""
            }}
            {{
              printForm.info.indexOf("difficulty") > -1
                ? " · 难度 " +
                  articleInfo.art_corpus_data.artStatInfo.vocabHardLevel
                : ""
            }}
          </h6>
          <template v-if="resArr.length > 0 && articleInfo.en_flag">
            <div class="table-box">
              <div
                :class="['NNPE-detail']"
                v-for="(item, index) in resArr"
                :key="'detail' + index"
              >
                <div class="wordsList-box">
                  <template v-if="index !== 0">
                    <div class="nnpe-sentence-box">
                      <div
                        v-for="(pItem, pIndex) in item.wordsList"
                        :key="'wordsList' + pIndex"
                        class="word-box"
                        :class="[
                          pItem.isExplain || pItem.explainNumber
                            ? 'hasExplain'
                            : '',
                        ]"
                      >
                        <!-- <template v-if="pItem.isShow"> -->
                        <template v-if="pItem.tokens[2] === '#@@#'">
                          <span
                            class="NNPE-chs"
                            :style="{
                              width: printForm.fontSize + 'px',
                              height:
                                printForm.fontSize * printForm.lineHeight +
                                'px',
                              display: 'block',
                              fontFamily: printForm.fontFamily,
                            }"
                          ></span>
                        </template>
                        <template v-else>
                          <div :class="['NNPE-words']">
                            <span
                              class="NNPE-chs"
                              :class="[
                                pItem.noBefore ? 'marginLeft' : '',
                                pItem.noAfter ? 'marginRight' : '',
                                (pItem.highIndex &&
                                  printForm.bold.indexOf(pItem.types) > -1) ||
                                (printForm.bold.indexOf('sentence') > -1 &&
                                  longSentIds.indexOf(pItem.sent_id) > -1)
                                  ? 'fontWeight'
                                  : '',
                                pItem.marginRigh ? 'marginSingleRight' : '',
                              ]"
                              :style="{
                                fontSize: printForm.fontSize + 'px',
                                color: printForm.color,
                                lineHeight: printForm.lineHeight,
                                fontFamily: printForm.fontFamily,
                              }"
                              >{{ pItem.tokens[2] }}</span
                            >
                            <!-- <span
                                class="NNPE-chs NNPE-chs-both"
                                v-if="
                                  item.wordsList[pIndex + 1] &&
                                  item.wordsList[pIndex + 1].tokens[2] &&
                                  enFhList.indexOf(
                                    item.wordsList[pIndex + 1].tokens[2]
                                  ) > -1
                                "
                                :class="[
                                  item.wordsList[pIndex + 1].tokens[8] === ''
                                    ? 'marginLeft'
                                    : '',
                                  (item.wordsList[pIndex + 1].highIndex &&
                                    printForm.bold.indexOf(
                                      item.wordsList[pIndex + 1].types
                                    ) > -1) ||
                                  (printForm.bold.indexOf('sentence') > -1 &&
                                    longSentIds.indexOf(
                                      item.wordsList[pIndex + 1].sent_id
                                    ) > -1)
                                    ? 'fontWeight'
                                    : '',
                                  item.wordsList[pIndex + 1].marginRight
                                    ? 'marginSingleRight'
                                    : '',
                                ]"
                                :style="{
                                  fontSize: printForm.fontSize + 'px',
                                  color: printForm.color,
                                  lineHeight: printForm.lineHeight,
                                  fontFamily: printForm.fontFamily,
                                }"
                                >{{
                                  item.wordsList[pIndex + 1].tokens[2]
                                }}</span
                              > -->
                          </div>
                        </template>
                        <!-- </template> -->
                      </div>
                    </div>
                  </template>
                </div>
                <template
                  v-if="
                    articleImg &&
                    articleImg[index] &&
                    printForm.range.indexOf('image') > -1
                  "
                >
                  <figure
                    v-for="(itemI, indexI) in articleImg[index]"
                    :key="indexI"
                    style="text-align: center"
                  >
                    <img
                      @load="handleImageLoad($event, itemI)"
                      :style="{
                        width: itemI.width,
                        height: itemI.height,
                        maxWidth: isPrint ? '630px' : '',
                      }"
                      :src="itemI.newSrc ? itemI.newSrc : itemI.src"
                    />
                    <!-- <el-image
                      :src="itemI.src"
                      fit="contain"
                      :style="{
                        width: itemI.width,
                        height: itemI.height,
                      }"
                      :preview-src-list="[itemI.src]"
                      @load="handleImageLoad($event, itemI)"
                    ></el-image> -->
                  </figure>
                </template>
              </div>
            </div>
          </template>
          <div
            v-else
            class="cn-content"
            v-html="articleInfo.art_content"
            :style="{
              color: printForm.color,
              fontSize: printForm.fontSize + 'px',
              lineHeight: printForm.lineHeight,
            }"
          ></div>
          <template v-if="printForm.range.indexOf('vocab') > -1">
            <h5>词表</h5>
            <ul class="newwordlist">
              <li
                v-for="(itemW, indexW) in wordLit"
                :key="indexW"
                :class="['li-' + colorObj.type]"
              >
                <div class="word-info">
                  <div class="word-info-top">
                    <b class="word" :style="{ color: colorObj.newWordColor }">{{
                      itemW.word
                    }}</b>
                    <span
                      class="symbol"
                      :style="{ color: colorObj.newWordOtherColor }"
                      >{{ itemW.symbol }}</span
                    >
                    <label
                      class="word-type"
                      :style="{
                        color: colorObj.newWordType[itemW.type]
                          ? colorObj.newWordType[itemW.type].color
                          : '',
                        background: colorObj.newWordType[itemW.type]
                          ? colorObj.newWordType[itemW.type].bg
                          : '',
                      }"
                      >{{ itemW.typeCn }}</label
                    >
                    <span class="star" v-if="itemW.rate">
                      <svg-icon
                        icon-class="star-filled"
                        v-for="(itemS, indexS) in itemW.rate"
                        :key="indexS"
                        :style="{ color: colorObj.newWordStar }"
                      ></svg-icon>
                    </span>
                    <div class="para-list">
                      <div
                        class="para"
                        v-for="(itemP, indexP) in itemW.paraList"
                        :key="indexP"
                      >
                        <span
                          class="cixing"
                          :style="{ color: colorObj.newWordOtherColor }"
                          >{{ itemP.cixing }}</span
                        >
                        <span
                          class="shiyi"
                          :style="{ color: colorObj.newWordOtherColor }"
                          >{{ itemP.para }}</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <h5
              v-if="
                articleInfo.art_phrase_data &&
                articleInfo.art_phrase_data.length > 0
              "
            >
              短语
            </h5>
            <ul
              class="phraselist"
              v-if="
                articleInfo.art_phrase_data &&
                articleInfo.art_phrase_data.length > 0
              "
            >
              <li v-for="(itemW, indexW) in phraseList" :key="indexW">
                <div class="word-info">
                  <div class="word-info-top">
                    <b
                      class="phrase"
                      :style="{ color: colorObj.phraseColor }"
                      @click="showItem(itemW, indexW)"
                      >{{ itemW.exp_title }}</b
                    >
                    <div class="para-list">
                      <div class="para">
                        <span
                          class="shiyi"
                          :style="{ color: colorObj.phraseOhterColor }"
                          >{{ itemW.exp_content }}</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <h5
              v-if="
                articleInfo.art_explain_data &&
                articleInfo.art_explain_data.length > 0
              "
            >
              注释
            </h5>
            <ul
              class="explainlist"
              v-if="
                articleInfo.art_explain_data &&
                articleInfo.art_explain_data.length > 0
              "
            >
              <li
                v-for="(itemW, indexW) in articleInfo.art_explain_data"
                :key="indexW"
              >
                <b
                  class="prefix"
                  :style="{ color: colorObj.phraseOhterColor }"
                  >{{ itemW.exp_title }}</b
                >
                <div
                  class="para-list"
                  :style="{ color: colorObj.newWordOtherColor }"
                  v-html="itemW.exp_content"
                ></div>
              </li>
            </ul>
          </template>
          <template v-if="printForm.range.indexOf('ciyun') > -1">
            <iframe
              class="ciyun-box"
              width="100%"
              height="720px"
              border="none"
              :src="
                './ciyun/ciyunPrint.html?partitionKey=1&searchType=2&articleId=' +
                articleId
              "
            ></iframe>
          </template>
          <template v-if="printForm.range.indexOf('notes') > -1">
            <h5 v-if="notesList.length > 0">笔记</h5>
            <ul class="explainlist">
              <li v-for="(itemW, indexW) in notesList" :key="indexW">
                <b
                  class="prefix"
                  :style="{ color: colorObj.phraseOhterColor }"
                  >{{ itemW.select_text }}</b
                >
                <div
                  class="para-list"
                  :style="{ color: colorObj.newWordOtherColor }"
                  v-html="itemW.note"
                ></div>
              </li>
            </ul>
          </template>
        </div>
        <footer
          class="print-footer"
          v-if="
            printForm.school ||
            printForm.className ||
            printForm.name ||
            printForm.dateStr ||
            printForm.momo
          "
        >
          <span>{{ printForm.school }}</span>
          <span>{{ printForm.className }}</span>
          <span>{{ printForm.name }}</span>
          <span style="flex: 1"></span>
          <span>{{ printForm.dateStr }}</span>
          <span>{{ printForm.momo }}</span>
        </footer>
      </div>
      <div class="print-model-bottom-right">
        <h3><svg-icon icon-class="print"></svg-icon>打印设置</h3>
        <div class="config-box">
          <div class="item-page">
            <label>字体：</label>
            <el-select v-model="printForm.fontFamily" placeholder="请选择">
              <el-option
                v-for="item in fontList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="item-page">
            <label>字号：</label>
            <el-input-number
              v-model="printForm.fontSize"
              :step="2"
            ></el-input-number>
          </div>
          <div class="item-page">
            <label>颜色：</label>
            <el-color-picker
              v-model="printForm.color"
              size="small"
            ></el-color-picker>
          </div>
          <el-divider class="print-divider"></el-divider>
          <div class="item-page">
            <label>行距：</label>
            <el-select v-model="printForm.lineHeight" placeholder="请选择">
              <el-option
                v-for="item in lineHeightList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-divider class="print-divider"></el-divider>
          <div class="item-page">
            <label>打印/下载范围：</label>
            <el-checkbox-group v-model="printForm.range">
              <el-checkbox
                v-for="(itemT, indexT) in rangeList"
                :key="indexT"
                :label="itemT.value"
                >{{ itemT.name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="item-page" v-if="articleInfo.en_flag">
            <label>加粗显示：</label>
            <el-checkbox-group v-model="printForm.bold">
              <el-checkbox
                v-for="(itemT, indexT) in boldList"
                :key="indexT"
                :label="itemT.value"
                >{{ itemT.name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <el-divider class="print-divider"></el-divider>
          <div class="item-page">
            <label>附加信息：</label>
            <b @click="handleClear"
              ><svg-icon icon-class="clear"></svg-icon>清除</b
            >
          </div>
          <div class="item-page">
            <label>姓名：</label>
            <el-input
              v-model="printForm.name"
              autocomplete="off"
              placeholder="请输入"
              maxlength="20"
            >
            </el-input>
          </div>
          <div class="item-page">
            <label>学校：</label>
            <el-input
              v-model="printForm.school"
              autocomplete="off"
              placeholder="请输入"
              maxlength="20"
            >
            </el-input>
          </div>
          <div class="item-page">
            <label>班级：</label>
            <el-input
              v-model="printForm.className"
              autocomplete="off"
              placeholder="请输入"
              maxlength="20"
            >
            </el-input>
          </div>
          <div class="item-page">
            <label>日期：</label>
            <el-input
              v-model="printForm.dateStr"
              autocomplete="off"
              placeholder="请输入"
              maxlength="20"
            >
            </el-input>
          </div>
          <div class="item-page">
            <label>备注：</label>
            <el-input
              v-model="printForm.momo"
              autocomplete="off"
              placeholder="请输入"
              maxlength="20"
            >
            </el-input>
          </div>
          <el-divider class="print-divider"></el-divider>
          <div class="item-page">
            <label>统计信息：</label>
            <el-checkbox-group v-model="printForm.info">
              <el-checkbox
                v-for="(itemT, indexT) in infoList"
                :key="indexT"
                :label="itemT.value"
                >{{ itemT.name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <el-divider class="print-divider"></el-divider>
        </div>

        <p style="color: red; width: 100%; margin: 10px 0; text-align: center">
          若点击打印按钮无法显示，下一个页面点击更多设置，勾选背景图形
        </p>
        <div class="item-page" style="padding: 0 24px">
          <el-button @click="goBack" size="small">取消</el-button>
          <el-button
            type="primary"
            @click="generatePDF(articleInfo.art_title)"
            size="small"
            >下载</el-button
          >
          <el-button type="primary" @click="handlePrint" size="small"
            >打印</el-button
          >
          <el-button type="primary" @click="handleManyPrint" size="small"
            >打印多篇</el-button
          >
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="printManyFlag"
      width="500px"
      append-to-body
      :show-close="true"
      title="选择打印的文章"
      :close-on-click-modal="false"
    >
      <el-form ref="form">
        <el-form-item prop="name">
          <el-cascader
            v-model="printManyId"
            :props="{ multiple: true }"
            collapse-tags
            :options="printManyMenu"
            style="width: 470px"
          />
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button @click="printManyFlag = false">取 消</el-button>
          <el-button :loading="loading" type="primary" @click="submitPrintMore"
            >确 定</el-button
          ></el-form-item
        >
      </el-form>
    </el-dialog>
    <div
      class="print-model-bottom-left"
      ref="printAreaManys"
      id="showWaterMarks"
      v-if="isPrintMore"
      :style="{
        width: '220mm',
      }"
    >
      <div
        class="print-inner"
        v-for="(itemA, index) in printManyDetails"
        :key="index"
      >
        <h2>
          <span
            :style="{
              color: colorObj.titleColor,
              fontSize: titleFontsize + 'px',
              lineHeight: titleFontsize + 8 + 'px',
              marginRight: '10px',
              fontWeight: '700',
              cursor: 'pointer',
              wordBreak: 'break-word',
            }"
            >{{ itemA.art_title }}</span
          >
        </h2>
        <h6
          class="nnpe-article-author"
          :style="{
            color: colorObj.sourceColor,
            fontSize: wordFontsize - 4 + 'px',
            lineHeight: wordFontsize + 4 + 'px',
            fontWeight: '400',
          }"
        >
          {{
            itemA.art_author +
            " · " +
            itemA.study_phase_name +
            "版 · 第 " +
            itemA.iss_no +
            " 期 · " +
            itemA.release_date +
            " · " +
            itemA.chn_item +
            (itemA.page_no_in_pub ? " · P" + itemA.page_no_in_pub : "")
          }}
          {{ printForm.info.length > 0 ? " | " : "" }}
          {{
            printForm.info.indexOf("wordLength") > -1
              ? " 长度 " + itemA.art_corpus_data.artStatInfo.wc
              : ""
          }}
          {{
            printForm.info.indexOf("wordNumber") > -1
              ? " · 词数 " + itemA.art_corpus_data.artStatInfo.wdc
              : ""
          }}
          {{
            printForm.info.indexOf("difficulty") > -1
              ? " · 难度 " + itemA.art_corpus_data.artStatInfo.vocabHardLevel
              : ""
          }}
        </h6>
        <template v-if="itemA.resArr.length > 0 && itemA.en_flag">
          <div class="table-box">
            <div
              :class="['NNPE-detail']"
              v-for="(item, index) in itemA.resArr"
              :key="'detail' + index"
            >
              <div class="wordsList-box">
                <template v-if="index !== 0">
                  <div class="nnpe-sentence-box">
                    <div
                      v-for="(pItem, pIndex) in item.wordsList"
                      :key="'wordsList' + pIndex"
                      class="word-box"
                      :class="[
                        pItem.isExplain || pItem.explainNumber
                          ? 'hasExplain'
                          : '',
                      ]"
                    >
                      <!-- <template v-if="pItem.isShow"> -->
                      <template v-if="pItem.tokens[2] === '#@@#'">
                        <span
                          class="NNPE-chs"
                          :style="{
                            width: printForm.fontSize + 'px',
                            height:
                              printForm.fontSize * printForm.lineHeight + 'px',
                            display: 'block',
                            fontFamily: printForm.fontFamily,
                          }"
                        ></span>
                      </template>
                      <template v-else>
                        <div :class="['NNPE-words']">
                          <span
                            class="NNPE-chs"
                            :class="[
                              pItem.noBefore ? 'marginLeft' : '',
                              pItem.noAfter ? 'marginRight' : '',
                              (pItem.highIndex &&
                                printForm.bold.indexOf(pItem.types) > -1) ||
                              (printForm.bold.indexOf('sentence') > -1 &&
                                longSentIds.indexOf(pItem.sent_id) > -1)
                                ? 'fontWeight'
                                : '',
                              pItem.marginRigh ? 'marginSingleRight' : '',
                            ]"
                            :style="{
                              fontSize: printForm.fontSize + 'px',
                              color: printForm.color,
                              lineHeight: printForm.lineHeight,
                              fontFamily: printForm.fontFamily,
                            }"
                            >{{ pItem.tokens[2] }}</span
                          >
                          <!-- <span
                              class="NNPE-chs NNPE-chs-both"
                              v-if="
                                item.wordsList[pIndex + 1] &&
                                item.wordsList[pIndex + 1].tokens[2] &&
                                enFhList.indexOf(
                                  item.wordsList[pIndex + 1].tokens[2]
                                ) > -1
                              "
                              :class="[
                                item.wordsList[pIndex + 1].tokens[8] === ''
                                  ? 'marginLeft'
                                  : '',
                                (item.wordsList[pIndex + 1].highIndex &&
                                  printForm.bold.indexOf(
                                    item.wordsList[pIndex + 1].types
                                  ) > -1) ||
                                (printForm.bold.indexOf('sentence') > -1 &&
                                  longSentIds.indexOf(
                                    item.wordsList[pIndex + 1].sent_id
                                  ) > -1)
                                  ? 'fontWeight'
                                  : '',
                                item.wordsList[pIndex + 1].marginRight
                                  ? 'marginSingleRight'
                                  : '',
                              ]"
                              :style="{
                                fontSize: printForm.fontSize + 'px',
                                color: printForm.color,
                                lineHeight: printForm.lineHeight,
                                fontFamily: printForm.fontFamily,
                              }"
                              >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
                            > -->
                        </div>
                      </template>
                      <!-- </template> -->
                    </div>
                  </div>
                </template>
              </div>
              <template
                v-if="
                  itemA.articleImg &&
                  itemA.articleImg[index] &&
                  printForm.range.indexOf('image') > -1
                "
              >
                <figure
                  v-for="(itemI, indexI) in itemA.articleImg[index]"
                  :key="indexI"
                  style="text-align: center"
                >
                  <img
                    @load="handleImageLoad($event, itemI)"
                    :style="{
                      width: itemI.width,
                      height: itemI.height,
                    }"
                    :src="itemI.src"
                  />
                  <!-- <el-image
                    :src="itemI.src"
                    fit="contain"
                    :style="{
                      width: itemI.width,
                      height: itemI.height,
                    }"
                    :preview-src-list="[itemI.src]"
                    
                  ></el-image> -->
                </figure>
              </template>
            </div>
          </div>
        </template>
        <div
          v-else
          class="cn-content"
          v-html="itemA.art_content"
          :style="{
            color: printForm.color,
            fontSize: printForm.fontSize + 'px',
            lineHeight: printForm.lineHeight,
          }"
        ></div>
        <template v-if="printForm.range.indexOf('vocab') > -1">
          <h5>词表</h5>
          <ul class="newwordlist">
            <li
              v-for="(itemW, indexW) in itemA.wordLit"
              :key="indexW"
              :class="['li-' + colorObj.type]"
            >
              <div class="word-info">
                <div class="word-info-top">
                  <b class="word" :style="{ color: colorObj.newWordColor }">{{
                    itemW.word
                  }}</b>
                  <span
                    class="symbol"
                    :style="{ color: colorObj.newWordOtherColor }"
                    >{{ itemW.symbol }}</span
                  >
                  <label
                    class="word-type"
                    :style="{
                      color: colorObj.newWordType[itemW.type]
                        ? colorObj.newWordType[itemW.type].color
                        : '',
                      background: colorObj.newWordType[itemW.type]
                        ? colorObj.newWordType[itemW.type].bg
                        : '',
                    }"
                    >{{ itemW.typeCn }}</label
                  >
                  <span class="star" v-if="itemW.rate">
                    <svg-icon
                      icon-class="star-filled"
                      v-for="(itemS, indexS) in itemW.rate"
                      :key="indexS"
                      :style="{ color: colorObj.newWordStar }"
                    ></svg-icon>
                  </span>
                  <div class="para-list">
                    <div
                      class="para"
                      v-for="(itemP, indexP) in itemW.paraList"
                      :key="indexP"
                    >
                      <span
                        class="cixing"
                        :style="{ color: colorObj.newWordOtherColor }"
                        >{{ itemP.cixing }}</span
                      >
                      <span
                        class="shiyi"
                        :style="{ color: colorObj.newWordOtherColor }"
                        >{{ itemP.para }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <h5 v-if="itemA.art_phrase_data && itemA.art_phrase_data.length > 0">
            短语
          </h5>
          <ul
            class="phraselist"
            v-if="itemA.art_phrase_data && itemA.art_phrase_data.length > 0"
          >
            <li v-for="(itemW, indexW) in itemA.phraseList" :key="indexW">
              <div class="word-info">
                <div class="word-info-top">
                  <b
                    class="phrase"
                    :style="{ color: colorObj.phraseColor }"
                    @click="showItem(itemW, indexW)"
                    >{{ itemW.exp_title }}</b
                  >
                  <div class="para-list">
                    <div class="para">
                      <span
                        class="shiyi"
                        :style="{ color: colorObj.phraseOhterColor }"
                        >{{ itemW.exp_content }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <h5
            v-if="itemA.art_explain_data && itemA.art_explain_data.length > 0"
          >
            注释
          </h5>
          <ul
            class="explainlist"
            v-if="itemA.art_explain_data && itemA.art_explain_data.length > 0"
          >
            <li v-for="(itemW, indexW) in itemA.art_explain_data" :key="indexW">
              <b class="prefix" :style="{ color: colorObj.phraseOhterColor }">{{
                itemW.exp_title
              }}</b>
              <div
                class="para-list"
                :style="{ color: colorObj.newWordOtherColor }"
                v-html="itemW.exp_content"
              ></div>
            </li>
          </ul>
        </template>
        <template v-if="printForm.range.indexOf('ciyun') > -1">
          <iframe
            class="ciyun-box"
            width="100%"
            height="720px"
            border="none"
            :src="
              './ciyun/ciyunPrint.html?partitionKey=1&searchType=2&articleId=' +
              itemA.id
            "
          ></iframe>
        </template>
        <template v-if="printForm.range.indexOf('notes') > -1">
          <h5 v-if="itemA.notesList.length > 0">笔记</h5>
          <ul class="explainlist">
            <li v-for="(itemW, indexW) in itemA.notesList" :key="indexW">
              <b class="prefix" :style="{ color: colorObj.phraseOhterColor }">{{
                itemW.select_text
              }}</b>
              <div
                class="para-list"
                :style="{ color: colorObj.newWordOtherColor }"
                v-html="itemW.note"
              ></div>
            </li>
          </ul>
        </template>
      </div>
      <footer class="print-footer">
        <span>{{ printForm.school }}</span>
        <span>{{ printForm.className }}</span>
        <span>{{ printForm.name }}</span>
        <span style="flex: 1"></span>
        <span>{{ printForm.dateStr }}</span>
        <span>{{ printForm.momo }}</span>
      </footer>
    </div>
  </div>
</template>

<script>
import waterMark from "../../../store/watermark";
import { getToken } from "@/utils/auth";
import { getLogin } from "@/api/ajax";
import html2pdf from "html2pdf.js";
export default {
  props: [
    "titleFontsize",
    "wordFontsize",
    "colorObj",
    "articleType",
    "articleInfo",
    "likePhraseList",
    "likeWord",
    "articleImg",
  ],
  data() {
    return {
      userMessage: getToken() ? JSON.parse(getToken()) : null,
      articleId: this.$route.query.id ? this.$route.query.id : "",
      issId: this.$route.query.iss_id ? this.$route.query.iss_id : "",
      resArr: [],
      enFhList: [
        ",",
        ".",
        ";",
        "?",
        "!",
        ":",
        ">",
        "<",
        "'",
        "’",
        "n't",
        "n’t",
        "n’ts",
        "n‘t",
        "'t",
        "’t",
        "‘t",
        "'s",
        "’s",
        "‘s",
        "'m",
        "’m",
        "‘m",
        "'re",
        "’re",
        "‘re",
        "'d",
        "’d",
        "‘d",
        "'ve",
        "’ve",
        "‘ve",
        ")",
        "'ll",
        "’ll",
        "‘ll",
        "”",
      ],
      firstEnFhlist: ["'", "‘", "“", '"', "("],
      sentenceList: [],
      longSentIds: [], // 长句id
      allWordList: [], // 生词短语注释总列表
      wordLit: [],
      annotationList: [],
      phraseList: [],
      notesList: [], // 笔记列表
      fontList: [
        {
          value: "roman",
          name: "Times New Roman",
        },
        {
          value: "Arial",
          name: "Arial",
        },
      ],
      lineHeightList: [
        {
          value: "0.8",
          name: "0.8倍",
        },
        {
          value: "1.0",
          name: "1.0倍",
        },
        {
          value: "1.5",
          name: "1.5倍",
        },
        {
          value: "2.0",
          name: "2.0倍",
        },
      ],
      rangeList: [
        {
          value: "image",
          name: "图片",
        },
        {
          value: "vocab",
          name: "词表",
        },
        // {
        //   value: "ciyun",
        //   name: "词云",
        // },
        {
          value: "notes",
          name: "笔记",
        },
      ],
      boldList: [
        {
          value: "newWord",
          name: "生词",
        },
        {
          value: "phrase",
          name: "短语",
        },
        {
          value: "sentence",
          name: "长句",
        },
      ],
      infoList: [
        {
          value: "wordLength",
          name: "长度",
        },
        {
          value: "wordNumber",
          name: "词数",
        },
        {
          value: "difficulty",
          name: "难度",
        },
      ],
      printForm: {
        fontFamily: "roman",
        fontSize: 24,
        color: "#2F3742",
        lineHeight: "1.5",
        range: [],
        bold: ["newWord", "phrase"],
        info: [],
        name: "",
        school: "",
        className: "",
        dateStr: "",
        momo: "",
      },
      isPrint: false,
      printNumber: 0,
      issDetail: null, // 整期文章内容
      issDetailMap: {}, // 整期文章详情map
      printManyFlag: false,
      printManyId: [], // 打印多篇文章id
      loading: false,
      printManyMenu: [], // 打印多篇文章目录
      printManyDetails: [], // 最终确定打印文章内容详情
      isPrintMore: false,
    };
  },
  created() {
    if (this.articleInfo.en_flag) {
      this.rangeList = [
        {
          value: "image",
          name: "图片",
        },
        {
          value: "vocab",
          name: "词表",
        },
        // {
        //   value: "ciyun",
        //   name: "词云",
        // },
        {
          value: "notes",
          name: "笔记",
        },
      ];
    } else {
      this.rangeList = [
        {
          value: "vocab",
          name: "词表",
        },
        // {
        //   value: "ciyun",
        //   name: "词云",
        // },
        {
          value: "notes",
          name: "笔记",
        },
      ];
    }
    this.getIssueDetail();
  },
  methods: {
    goBack() {
      this.$emit("closePrint");
    },
    handleData() {
      let explainNumber = 1;
      let resArr = [];
      let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
      this.sentenceList =
        articleInfo.art_corpus_data && articleInfo.art_corpus_data.sentList
          ? articleInfo.art_corpus_data.sentList
          : [];
      this.longSentIds =
        articleInfo.art_corpus_data && articleInfo.art_corpus_data.artStatInfo
          ? articleInfo.art_corpus_data.artStatInfo.longSentIds
          : [];
      this.wordLit = articleInfo.art_voc_data ? articleInfo.art_voc_data : [];
      this.annotationList = articleInfo.art_phrase_data
        ? articleInfo.art_explain_data
        : [];
      this.phraseList = articleInfo.art_explain_data
        ? articleInfo.art_phrase_data
        : [];
      this.wordLit.forEach((item) => {
        item.types = "newWord";
        item.exp_title = item.word_name;
        let paraStr = "";
        if (item.word_explain && item.word_explain.word_para_list) {
          item.word_explain.word_para_list.forEach((items) => {
            paraStr += items.para;
          });
        }
        item.exp_content = paraStr;
        item.word = item.word_name;
        item.symbol = item.word_explain.ph ? item.word_explain.ph : "";
        item.paraList = item.word_explain.word_para_list;
        item.type = item.word_explain.vl_level
          ? item.word_explain.vl_level
          : "";
        item.typeCn = item.word_explain.vl_level_name
          ? item.word_explain.vl_level_name
          : "";
        item.rate = item.word_explain.star ? item.word_explain.star : null;
      });
      this.phraseList.forEach((item) => {
        item.type = "phrase";
      });
      this.annotationList.forEach((item) => {
        item.type = "explain";
      });
      this.allWordList = this.wordLit.concat(this.phraseList);
      let leg = articleInfo.art_corpus_data
        ? articleInfo.art_corpus_data.sentList[
            articleInfo.art_corpus_data.sentList.length - 1
          ].pno
        : 0;
      this.sentenceList.forEach((item, index) => {
        let flag = "";
        item.StyleTokens = [];
        item.tokens.forEach((items, indexs) => {
          let obj = {
            tokens: items,
            marginRight: indexs === item.tokens.length - 1,
            noBefore: indexs !== 0 && !items[8],
            noAfter: !items[9],
          };
          this.allWordList.forEach((itema, indexa) => {
            itema.bind_sent_data.bind_sents.forEach((itemb, indexb) => {
              if (itemb.sent_id === item.id) {
                if (itema.type === "explain") {
                  if (
                    indexs ===
                    itemb.sel_token_idxes[itemb.sel_token_idxes.length - 1]
                  ) {
                    obj.highIndex = true;
                    obj.type = itema.type;
                    obj.types = itema.type;
                    obj.word_id = itema.id; // 生词注释短语的id
                    obj.explainNumber = explainNumber;
                    explainNumber++;
                  }
                } else {
                  itemb.sel_token_idxes.forEach((itemi) => {
                    if (indexs === itemi) {
                      obj.highIndex = true;
                      obj.type = itema.type;
                      obj.types = itema.types ? itema.types : itema.type;
                      obj.word_id = itema.id; // 生词注释短语的id
                    }
                  });
                }

                if (
                  itemb.sel_token_idxes.length === 0 &&
                  itema.type === "explain" &&
                  indexs === item.tokens.length - 1
                ) {
                  flag = itema.id;
                }
              }
            });
          });
          item.StyleTokens.push(obj);
          if (flag) {
            item.StyleTokens.push({
              tokens: [
                0,
                8,
                "Students",
                "",
                "",
                "",
                "",
                "",
                "",
                " ",
                0,
                "",
                "",
                "",
              ],
              type: "explain",
              word_id: flag,
              isExplain: true,
              explainNumber: explainNumber,
            });
            explainNumber++;
          }
        });
      });
      for (let i = 0; i < leg + 1; i++) {
        let obgs = {
          isShow: true,
          marginRight: false,
          tokens: [
            "",
            "",
            "#@@#",
            "",
            "",
            "",
            "",
            "",
            " ",
            " ",
            "",
            "",
            "",
            "",
            "",
          ],
        };
        let obj = {
          wordsList: i === 0 ? [] : [obgs, obgs],
        };
        resArr.push(obj);
      }
      this.sentenceList.forEach((item, index) => {
        item.StyleTokens.forEach((items, indexs) => {
          items.isShow = this.enFhList.indexOf(items.tokens[2]) == -1;
          items.sent_id = item.id;
          resArr[item.pno].wordsList.push(items);
        });
      });
      this.resArr = resArr;
      setTimeout(() => {
        waterMark.set(
          this.userMessage.user_name + " " + this.userMessage.phone,
          "",
          "showWaterMark"
        );
      }, 1000);
    },
    // 打印
    handlePrint() {
      let MethodName =
        "/ShopServer/Client/PrintRecordManager/GetMyPrintCount_Article";
      getLogin(MethodName, {
        goods_type: 21,
        date_range: "ALL",
        article_id: this.articleId,
      }).then((res) => {
        if (res.status === 1) {
          if (res.print_count < 5) {
            getLogin(
              "/ShopServer/Client/PrintRecordManager/AddPrintRecord_Article",
              {
                goods_type: 21,
                article_id: this.articleId,
              }
            ).then((res) => {
              if (res.status === 1) {
              }
            });
            this.$nextTick(() => {
              this.$print(this.$refs["printArea"], {
                noPrint: ".noPrint",
                type: "html",
                scanStyles: true,
                showModal: true,
                // style: style,// 亦可使用引入的外部css;
                onStart: () => {
                  // console.log("打印开始");
                },
                onEnd: () => {
                  // console.log("打印完成");
                },
              });
            });
          } else {
            this.$message.warning("每篇文章打印+下载次数共5次，现已达上限。");
          }
        }
      });
    },
    // 清除
    handleClear() {
      this.printForm.name = "";
      this.printForm.school = "";
      this.printForm.className = "";
      this.printForm.dateStr = "";
      this.printForm.momo = "";
    },
    // 高亮笔记句子
    handleHighSentence() {
      let MethodName = "/PaperServer/Client/Article/ArtNoteListInArt";
      let data = {
        id: this.$route.query.id,
      };
      getLogin(MethodName, data).then((res) => {
        if (res.status === 1) {
          this.notesList = res.data;
        }
      });
    },
    // 下载pdf
    async generatePDF(title) {
      let MethodName =
        "/ShopServer/Client/PrintRecordManager/GetMyPrintCount_Article";
      getLogin(MethodName, {
        goods_type: 21,
        date_range: "ALL",
        article_id: this.articleId,
      }).then((res) => {
        if (res.status === 1) {
          if (res.print_count < 5) {
            getLogin(
              "/ShopServer/Client/PrintRecordManager/AddPrintRecord_Article",
              {
                goods_type: 21,
                article_id: this.articleId,
              }
            ).then((res) => {
              if (res.status === 1) {
              }
            });
            this.$nextTick(() => {
              this.isPrint = true;
              const element = document.getElementById("showWaterMark");
              const opt = {
                margin: [0, 0, 0, 0],
                useCORS: true,
                filename: title + ".pdf",
                image: { type: "jpeg", quality: 0.98 },
                html2canvas: { scale: 2 }, // 或其他自定义设置，例如scale可以放大内容以便更容易阅读和打印。
                jsPDF: { unit: "mm", format: "a4", orientation: "portrait" }, // A4尺寸的PDF，纵向打印。
              };
              html2pdf().set(opt).from(element).save();

              setTimeout(() => {
                this.isPrint = false;
              }, 100);
            });
          } else {
            this.$message.warning("每篇文章打印+下载次数共5次，现已达上限。");
          }
        }
      });
    },
    // 获取整期报刊内容
    getIssueDetail() {
      this.issDetail = null;
      this.issDetailMap = {};
      let MethodName = "/PaperServer/Client/Article/GetIssueDetail";
      getLogin(MethodName, {
        id: this.issId,
      }).then((res) => {
        if (res.status === 1) {
          this.issDetail = res.data;
          if (res.data.articles) {
            this.issDetailMap = res.data.articles.reduce((acc, user) => {
              acc[user.id] = user;
              return acc;
            }, {});
            res.data.articles.forEach((itemA) => {
              let explainNumber = 1;
              let resArr = [];
              let articleInfo = JSON.parse(JSON.stringify(itemA));
              let sentenceList = articleInfo.art_corpus_data
                ? articleInfo.art_corpus_data.sentList
                : [];
              let longSentIds =
                articleInfo.art_corpus_data &&
                articleInfo.art_corpus_data.artStatInfo
                  ? articleInfo.art_corpus_data.artStatInfo.longSentIds
                  : [];
              let wordLit = articleInfo.art_voc_data
                ? articleInfo.art_voc_data
                : [];
              let annotationList = articleInfo.art_phrase_data
                ? articleInfo.art_explain_data
                : [];
              let phraseList = articleInfo.art_explain_data
                ? articleInfo.art_phrase_data
                : [];
              wordLit.forEach((item) => {
                item.types = "newWord";
                item.exp_title = item.word_name;
                let paraStr = "";
                if (item.word_explain && item.word_explain.word_para_list) {
                  item.word_explain.word_para_list.forEach((items) => {
                    paraStr += items.para;
                  });
                }
                item.exp_content = paraStr;
                item.word = item.word_name;
                item.symbol = item.word_explain.ph ? item.word_explain.ph : "";
                item.paraList = item.word_explain.word_para_list;
                item.type = item.word_explain.vl_level
                  ? item.word_explain.vl_level
                  : "";
                item.typeCn = item.word_explain.vl_level_name
                  ? item.word_explain.vl_level_name
                  : "";
                item.rate = item.word_explain.star
                  ? item.word_explain.star
                  : null;
              });
              phraseList.forEach((item) => {
                item.type = "phrase";
              });
              annotationList.forEach((item) => {
                item.type = "explain";
              });
              let allWordList = wordLit.concat(phraseList);
              let leg =
                articleInfo.art_corpus_data &&
                articleInfo.art_corpus_data.sentList
                  ? articleInfo.art_corpus_data.sentList[
                      articleInfo.art_corpus_data.sentList.length - 1
                    ].pno
                  : 0;
              sentenceList.forEach((item, index) => {
                let flag = "";
                item.StyleTokens = [];
                item.tokens.forEach((items, indexs) => {
                  let obj = {
                    tokens: items,
                    marginRight: indexs === item.tokens.length - 1,
                    noBefore: indexs !== 0 && !items[8],
                    noAfter: !items[9],
                  };
                  allWordList.forEach((itema, indexa) => {
                    itema.bind_sent_data.bind_sents.forEach((itemb, indexb) => {
                      if (itemb.sent_id === item.id) {
                        if (itema.type === "explain") {
                          if (
                            indexs ===
                            itemb.sel_token_idxes[
                              itemb.sel_token_idxes.length - 1
                            ]
                          ) {
                            obj.highIndex = true;
                            obj.type = itema.type;
                            obj.types = itema.type;
                            obj.word_id = itema.id; // 生词注释短语的id
                            obj.explainNumber = explainNumber;
                            explainNumber++;
                          }
                        } else {
                          itemb.sel_token_idxes.forEach((itemi) => {
                            if (indexs === itemi) {
                              obj.highIndex = true;
                              obj.type = itema.type;
                              obj.types = itema.types
                                ? itema.types
                                : itema.type;
                              obj.word_id = itema.id; // 生词注释短语的id
                            }
                          });
                        }

                        if (
                          itemb.sel_token_idxes.length === 0 &&
                          itema.type === "explain" &&
                          indexs === item.tokens.length - 1
                        ) {
                          flag = itema.id;
                        }
                      }
                    });
                  });
                  item.StyleTokens.push(obj);
                  if (flag) {
                    item.StyleTokens.push({
                      tokens: [
                        0,
                        8,
                        "Students",
                        "",
                        "",
                        "",
                        "",
                        "",
                        "",
                        " ",
                        0,
                        "",
                        "",
                        "",
                      ],
                      type: "explain",
                      word_id: flag,
                      isExplain: true,
                      explainNumber: explainNumber,
                    });
                    explainNumber++;
                  }
                });
              });
              for (let i = 0; i < leg + 1; i++) {
                let obgs = {
                  isShow: true,
                  marginRight: false,
                  tokens: [
                    "",
                    "",
                    "#@@#",
                    "",
                    "",
                    "",
                    "",
                    "",
                    " ",
                    " ",
                    "",
                    "",
                    "",
                    "",
                    "",
                  ],
                };
                let obj = {
                  wordsList: i === 0 ? [] : [obgs, obgs],
                };
                resArr.push(obj);
              }
              sentenceList.forEach((item, index) => {
                item.StyleTokens.forEach((items, indexs) => {
                  items.isShow = this.enFhList.indexOf(items.tokens[2]) == -1;
                  items.sent_id = item.id;
                  resArr[item.pno].wordsList.push(items);
                });
              });
              itemA.resArr = resArr;
              itemA.longSentIds = longSentIds;
              itemA.sentenceList = sentenceList;
              itemA.wordLit = wordLit;
              itemA.annotationList = annotationList;
              itemA.phraseList = phraseList;
              itemA.allWordList = allWordList;
              itemA.articleImg = {};
              let articleArr = itemA.art_content.split('<p class="para"');
              articleArr.forEach((itema) => {
                if (itema.indexOf("<img") > -1) {
                  // 当前段落有图片
                  let imgArr = [];
                  let pno =
                    itema.indexOf('pno="') > -1
                      ? itema.substring(
                          itema.indexOf('pno="') + 5,
                          itema
                            .substring(itema.indexOf('pno="') + 5)
                            .indexOf('"') +
                            1 +
                            5
                        )
                      : 0;
                  let itemArr = itema.split("<img");
                  itemArr.forEach((items) => {
                    if (items.indexOf('src="') > -1) {
                      let indexS =
                        items
                          .substring(items.indexOf('src="') + 5)
                          .indexOf('"') + items.indexOf('src="'); // src所在索引
                      let indexW =
                        items.indexOf('width="') > -1
                          ? items
                              .substring(items.indexOf('width="') + 7)
                              .indexOf('"')
                          : items.indexOf("width: ") > -1
                          ? items
                              .substring(items.indexOf("width: ") + 7)
                              .indexOf(";")
                          : -1; // width所在索引
                      let indexH =
                        items.indexOf('height="') > -1
                          ? items
                              .substring(items.indexOf('height="') + 8)
                              .indexOf('"')
                          : items.indexOf("height: ") > -1
                          ? items
                              .substring(items.indexOf("height: ") + 8)
                              .indexOf(";")
                          : -1; // height所在索引
                      let imgobj = {
                        src: items.substring(
                          items.indexOf('src="') + 5,
                          indexS + 5
                        ),
                        width:
                          items.indexOf('width="') > -1
                            ? items.substring(
                                items.indexOf('width="') + 7,
                                items.indexOf('width="') + indexW + 7
                              )
                            : items.indexOf("width: ") > -1
                            ? items.substring(
                                items.indexOf("width: ") + 7,
                                items.indexOf("width: ") + indexW + 7
                              )
                            : null,
                        height:
                          items.indexOf('height="') > -1
                            ? items.substring(
                                items.indexOf('height="') + 8,
                                items.indexOf('height="') + indexH + 8
                              )
                            : items.indexOf("height: ") > -1
                            ? items.substring(
                                items.indexOf("height: ") + 8,
                                items.indexOf('height="') + indexH + 8
                              )
                            : null,
                      };
                      imgArr.push(imgobj);
                    }
                  });
                  itemA.articleImg[pno] = imgArr;
                }
              });

              let MethodNames = "/PaperServer/Client/Article/ArtNoteListInArt";
              let data = {
                id: itemA.id,
              };
              getLogin(MethodNames, data).then((res) => {
                if (res.status === 1) {
                  itemA.notesList = res.data;
                }
              });
            });
          }
          if (res.data.issueInfo) {
            let arr = [];
            res.data.issueInfo.chn_art_data.forEach((item) => {
              let arrs = [];
              item.arts.forEach((items) => {
                arrs.push({
                  value: items.id,
                  label: items.art_title,
                });
              });
              arr.push({
                value: item.chn_idx,
                label: item.chn_name,
                children: arrs,
              });
            });
            this.printManyMenu = [
              {
                value: res.data.issueInfo.id,
                label: res.data.issueInfo.iss_name,
                children: arr,
              },
            ];
          }
        }
      });
    },
    // 打印多篇按钮
    handleManyPrint() {
      this.printManyFlag = true;
    },
    // 确定打印多篇
    submitPrintMore() {
      this.loading = true;
      let printManyIds = [];
      let printManyDetails = [];
      this.printManyId.forEach((item) => {
        printManyIds.push(item[2]);
        printManyDetails.push(this.issDetailMap[item[2]]);
      });
      this.printManyDetails = printManyDetails;
      this.isPrintMore = true;
      setTimeout(() => {
        waterMark.set(
          this.userMessage.user_name + " " + this.userMessage.phone,
          "",
          "showWaterMarks"
        );
      }, 1000);
      setTimeout(() => {
        this.handlePrintManyDetails();
      }, 1500);
    },
    handlePrintManyDetails() {
      let MethodName =
        "/ShopServer/Client/PrintRecordManager/GetMyPrintCount_Article";
      getLogin(MethodName, {
        goods_type: 21,
        date_range: "ALL",
        article_id: this.articleId,
      }).then((res) => {
        if (res.status === 1) {
          if (res.print_count < 5) {
            getLogin(
              "/ShopServer/Client/PrintRecordManager/AddPrintRecord_Article",
              {
                goods_type: 21,
                article_id: this.articleId,
              }
            ).then((res) => {
              if (res.status === 1) {
              }
            });
            this.$nextTick(() => {
              this.$print(this.$refs["printAreaManys"], {
                noPrint: ".noPrint",
                type: "html",
                scanStyles: true,
                showModal: true,
                // style: style,// 亦可使用引入的外部css;
                onStart: () => {
                  // console.log("打印开始");
                },
                onEnd: () => {
                  // console.log("打印完成");
                },
              });

              this.loading = false;
              this.printManyFlag = false;
              this.isPrintMore = false;
            });
          } else {
            this.loading = false;
            this.printManyFlag = false;
            this.isPrintMore = false;
            this.$message.warning("每篇文章打印+下载次数共5次，现已达上限。");
          }
        }
      });
    },
    handleImageLoad(event, item) {
      if (!item.width || item.width > 870) {
        item.width =
          event.target.naturalWidth > 870
            ? 870 + "px"
            : event.target.naturalWidth + "px";
      }
      if (!item.height) {
        item.height =
          item.width === "870px" ? "" : event.target.naturalHeight + "px";
      }
      // item.src = this.getBase64Image(
      //   "http://cms-bucket.ws.126.net/2021/0114/003bc5dej00qmxg5o0089c000s600e3c.jpg"
      // );
      this.getBase64Image(item);
    },
    getBase64Image(item) {
      var image = new Image();
      image.src = item.src + "?v=" + Math.random(); // 处理缓存
      image.crossOrigin = "*"; // 支持跨域图片
      image.onload = () => {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var quality = 0.8;
        let dataurl = canvas.toDataURL("image/jpeg", quality);
        // this.url = dataurl;
        item.src = dataurl;
        this.$forceUpdate();
      };
    },
  },
  mounted() {
    if (this.articleInfo) {
      this.handleData();
      this.handleHighSentence();
    }

    this.$nextTick(() => {
      document.onselectstart = new Function("event.returnValue=false");
    });
  },
  beforeDestroy() {
    document.onselectstart = new Function("event.returnValue=true");
  },
};
</script>
<style lang="scss" scoped>
.print-model {
  background: #f2f3f5;
  &-top {
    padding: 8px 16px;
    border-bottom: 1px solid #ebebeb;
    background: #fff;
    display: flex;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    .goback {
      color: #2f3742;
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      padding-right: 12px;
      .el-icon-arrow-left {
        width: 24px;
        height: 24px;
      }
    }
    .border {
      background: #e5e6eb;
      height: 16px;
      margin-top: 2px;
      width: 1px;
    }
    p {
      margin: 0 12px;
      color: #1c2129;
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
    }
  }
  &-bottom {
    display: flex;
    justify-content: center;
    padding-top: 46px;
    &-left {
      // width: 1070px;
      flex: 1;
      margin: 8px 370px 8px 8px;
      background: #fff;
      flex-shrink: 0;

      .print-inner {
        overflow: auto;
        padding: 120px 100px 30px 100px;
      }
      .nnpe-article-author {
        margin: 24px 0;
        text-align: center;
      }
      h2 {
        display: flex;
        flex-flow: wrap;
        justify-content: center;
      }
      .table-box {
        // background: #f7f7f7;
        // border-top: 1px solid rgba(0, 0, 0, 0.1);
        :last-child {
          :last-child.wordsList-box {
            padding-bottom: 40px;
          }
        }
        .wordsList-box {
          flex: 1;
          // padding: 6px 0 12px 0;
          .nnpe-sentence-box {
            display: flex;
            flex-flow: wrap;
            .word-box {
              position: relative;
            }
          }
          > img {
            max-width: 50%;
            display: block;
            padding: 16px 0;
            margin: 0 auto;
          }
        }
      }
      .NNPE-detail {
        clear: both;
        overflow: hidden;
        // display: flex;
        .NNPE-words {
          float: left;
          padding: 0;
          &.noPadding {
            padding: 0;
          }
          &.sentActive {
            background: rgba(24, 144, 255, 0.1);
          }
          &.overActive {
            background: rgba(0, 0, 0, 0.06);
          }
          > span {
            float: left;
            &.NNPE-chs {
              //   font-size: 24px;
              font-family: "Smartisan";
              line-height: 150%;
              color: #000000;
              padding: 0 3px;
              &.wordActive {
                color: #175dff !important;
              }
              &.marginRight {
                padding-right: 0;
              }
              &.marginLeft {
                padding-left: 0;
              }
              &.marginSingleRight {
                padding-right: 3px;
              }
              &.fontWeight {
                font-weight: bold;
              }
              &.newWord {
                color: #3459d2 !important;
              }
              &.phrase {
                color: #ff802b !important;
              }
              &.explain {
                // color: #23C847 !important;
                font-weight: 400;
              }
            }
            &.padding {
              padding: 0 3px;
              cursor: pointer;
            }
          }
        }
      }
      h5 {
        color: #000;
        font-size: 36px;
        font-weight: 700;
        line-height: 44px;
        margin: 24px 0;
      }
      .newwordlist,
      .phraselist {
        li {
          padding: 4px;
          display: flex;
          margin: 1px 0;
          border-radius: 4px;
          .word-info {
            flex: 1;
          }
          .sentence {
            font-size: 14px;
            line-height: 22px;
            color: #2f3742;
          }
          .word-type {
            padding: 0px 8px;
            border-radius: 2px;
            font-weight: 500;
            font-size: 12px;
            line-height: 20px;
            height: 20px;
            margin: 4px 8px 0 0;
          }
          .el-icon-arrow-right {
            width: 24px;
            height: 24px;
            color: #929ca8;
            text-align: center;
            line-height: 24px;
            cursor: pointer;
          }
          .word-info-top {
            display: flex;
            .word {
              font-weight: 700;
              font-size: 20px;
              line-height: 28px;
              color: #175dff;
              margin-right: 8px;
              font-family: "Arial";
              cursor: pointer;
            }
            .phrase {
              font-weight: 500;
              font-size: 24px;
              line-height: 32px;
              color: #ed5f00;
              max-width: 60%;
              word-break: break-word;
            }
            .symbol {
              font-size: 20px;
              line-height: 28px;
              color: #667180;
              margin-right: 8px;
              font-family: "Arial";
            }
            .star {
              margin-right: 8px;
              line-height: 20px;
            }
            .para-list {
              flex: 1;
              .para {
                display: flex;
                font-size: 16px;
                line-height: 24px;
                color: #1c2129;
                margin-bottom: 4px;
                .cixing {
                  margin-right: 4px;
                }
              }
            }
          }
          .word-info-bottom {
            font-size: 12px;
            line-height: 20px;
            color: #929ca8;
            margin: 4px 8px 0 0;
            span {
              margin-right: 8px;
            }
          }
        }
      }
      .phraselist {
        .para {
          line-height: 32px !important;
          margin-left: 8px;
          margin-bottom: 0 !important;
        }
      }
      .explainlist {
        li {
          padding: 8px;
          margin: 4px 0;
          .prefix {
            color: #151515;
            font-size: 24px;
            font-weight: 700;
            line-height: 32px;
          }
          .para-list {
            color: #2f3742;
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            margin-top: 8px;
          }
        }
      }
    }
    &-right {
      width: 360px;
      padding: 24px 0;
      background: #fff;
      position: fixed;
      z-index: 1;
      top: 46px;
      right: 0px;
      height: calc(100% - 48px);
      .config-box {
        height: calc(100% - 110px);
        overflow: auto;
        padding: 0 24px;
      }
      h3 {
        color: #2f3742;
        font-size: 24px;
        font-weight: 400;
        line-height: 32px;
        margin: 0;
        padding: 0 24px;
        .svg-icon {
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }
      }
    }
  }
}
.item-page {
  display: flex;
  padding-top: 24px;
  > label {
    color: #2f3742;
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    width: 72px;
    margin-right: 16px;
    flex-shrink: 0;
  }
  .el-select {
    height: 32px;
    border-radius: 2px;
    width: 202px;
  }
  .el-button {
    width: 70px;
    padding: 8px 0;
    color: rgba(0, 0, 0, 0.91);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    border-radius: 4px;
    background: #ebebeb;
    border: none;
  }
  .el-button--primary {
    background: #3459d2;
    color: #fff;
  }
  > b {
    flex: 1;
    text-align: right;
    cursor: pointer;
    line-height: 30px;
    color: #175dff;
    font-size: 14px;
    font-weight: 400;
    .svg-icon {
      width: 12px;
      margin-right: 4px;
    }
  }
}
.print-divider {
  margin: 24px 0 0 0;
  background-color: #f2f3f5;
}
#showWaterMark,
#showWaterMarks {
  overflow: hidden;
  position: relative;
  z-index: 9999;
  // width: 210mm;
}
.print-footer {
  width: 100%;
  min-height: 22px;
  padding: 30px 96px;
  color: #667180;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  display: flex;
  justify-content: space-between;
  span {
    margin: 0 4px;
  }
}
.ciyun-box {
  width: 870px;
  height: 720px;
  border: none;
  overflow: hidden;
}
@media print {
  .no-print {
    display: none;
  }
  body {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .printheader {
    font-size: 50px;
    color: green;
    font-weight: bold;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
  }
  .printFotter {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100000;
  }
  .print-footer {
    position: fixed;
    bottom: -30px;
    left: 10px;
  }
  @page {
    margin: 30px 30px 60px 30px;
  }
  #showWaterMark,
  #showWaterMarks {
    margin: 0;
  }
}
:deep .image img {
  max-width: 100%;
}
:deep figure {
  margin: 1em 0;
  text-align: center;
  img {
    max-width: 70%;
  }
}
</style>
<style lang="scss">
.item-page {
  .el-input__inner {
    height: 32px;
    line-height: 32px;
    background: #f2f3f5;
    border: none;
  }
  .el-input__icon {
    line-height: 32px;
  }
  .el-input-number {
    line-height: 30px;
    width: 202px;
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    height: 30px;
    width: 30px;
  }
  .el-checkbox {
    margin-right: 12px;
    line-height: 30px;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #2f3742;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #3459d2;
    border-color: #3459d2;
  }
}
</style>