HM21St_Page_User/src/views/bookShelf/articleDetail.vue

<template>
  <div
    class="bookStore"
    :style="{ background: bgColorList[activeIndex].contentBg }"
    v-if="articleInfo"
    :v-loading="loading"
  >
    <Header :LoginNavIndex="LoginNavIndex" />
    <div
      class="navBar"
      :class="['navBar-' + bgColorList[activeIndex].type]"
      :style="{ background: bgColorList[activeIndex].navBg }"
    >
      <div class="navBar-left">
        <a class="goback" @click="$router.go(-1)"
          ><i class="el-icon-arrow-left"></i> 第 {{ articleInfo.iss_no }} 期</a
        >
        <div class="border"></div>
        <p class="article-title">{{ articleInfo.art_title }}</p>
      </div>
      <div class="navBar-right">
        <el-input-number
          class="article-fontsize"
          v-model="wordFontsize"
          :step="2"
          step-strictly
          :min="12"
          :max="28"
          :style="{ borderColor: bgColorList[activeIndex].boxBorder }"
        ></el-input-number>
        <ul
          class="article-color"
          :style="{ borderColor: bgColorList[activeIndex].boxBorder }"
        >
          <li
            :class="['color-item', activeIndex === indexC ? 'active' : '']"
            v-for="(itemC, indexC) in bgColorList"
            :key="indexC"
            @click="handleChangeBgColor(indexC)"
            :style="{
              borderColor: activeIndex === indexC ? itemC.border_active : '',
            }"
          >
            <a
              :style="{
                background: itemC.border,
                borderColor: activeIndex === indexC ? itemC.borderColor : '',
              }"
            ></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="article-box">
      <div
        class="artricle-inner"
        :style="{ background: bgColorList[activeIndex].contentInnerBg }"
      >
        <!-- 文章 -->
        <div class="atricle-data">
          <normal-model
            :titleFontsize="48"
            :wordFontsize="wordFontsize"
            :colorObj="bgColorList[activeIndex]"
            :articleType="articleType"
            :style="{ padding: '0 40px' }"
            v-if="menuType === 'original'"
            :articleInfo="articleInfo"
            :likeSentencelist="likeSentencelist"
            :likeWord="likeWordList"
            :articleImg="articleImg"
            :activeArticleIndexLen="issueChnTanList.length"
            :activeArticleIndex="activeArticleIndex"
            @handlePage="handlePage"
          ></normal-model>
          <phrase-model
            :titleFontsize="48"
            :wordFontsize="wordFontsize"
            :colorObj="bgColorList[activeIndex]"
            :articleType="articleType"
            :style="{ padding: '0 40px' }"
            v-if="menuType === 'newWord'"
            :articleInfo="articleInfo"
            :likePhraseList="likePhraseList"
            :likeWord="likeWordList"
            @changeLike="changeLike"
            :likeSentencelist="likeSentencelist"
            :articleImg="articleImg"
          ></phrase-model>
          <practice-model
            :titleFontsize="48"
            :wordFontsize="wordFontsize"
            :colorObj="bgColorList[activeIndex]"
            :articleType="articleType"
            :style="{ padding: '0 40px' }"
            v-if="menuType === 'practice'"
            :articleInfo="articleInfo"
            :likeSentencelist="likeSentencelist"
            :likeWord="likeWordList"
            :articleImg="articleImg"
          ></practice-model>
          <inner-text-search
            :titleFontsize="48"
            :wordFontsize="wordFontsize"
            :colorObj="bgColorList[activeIndex]"
            :articleType="articleType"
            :style="{ padding: '0 40px' }"
            v-if="menuType === 'search'"
            :articleInfo="articleInfo"
            ref="innerTextSearchs"
            :likeSentencelist="likeSentencelist"
            :likeWord="likeWordList"
            :articleImg="articleImg"
          ></inner-text-search>
          <lexical-type
            :titleFontsize="48"
            :wordFontsize="wordFontsize"
            :colorObj="bgColorList[activeIndex]"
            :articleType="articleType"
            :style="{ padding: '0 40px' }"
            v-if="menuType === 'filtrate'"
            :articleInfo="articleInfo"
            ref="lexicalType"
            :likeSentencelist="likeSentencelist"
            :likeWord="likeWordList"
            :articleImg="articleImg"
          ></lexical-type>
          <notes-model
            :titleFontsize="48"
            :wordFontsize="wordFontsize"
            :colorObj="bgColorList[activeIndex]"
            :articleType="articleType"
            :style="{ padding: '0 40px' }"
            v-if="menuType === 'notebook'"
            :articleInfo="articleInfo"
            :likeSentencelist="likeSentencelist"
            :likeWord="likeWordList"
            :articleImg="articleImg"
          ></notes-model>
        </div>
        <div
          class="article-btn"
          v-if="this.$route.query.iss_id && menuType !== 'practice'"
          :style="{ background: bgColorList[activeIndex].glossaryBg }"
        >
          <div class="left">
            <span
              :class="['support colloct-article', !noRead ? 'active' : '']"
              @click="changeStatus('noRead')"
              ><svg-icon
                icon-class="like-line"
                :style="{ marginRight: articleNumber ? '8px' : '0px' }"
              ></svg-icon
              >{{ articleNumber ? articleNumber : "" }}</span
            >
            <!-- <span :class="['oppose',oppose?'active':'']" @click="changeStatus('oppose')"><svg-icon icon-class="oppose"></svg-icon></span> -->
          </div>
          <div class="center">
            <el-button
              type="text"
              class="btn-left"
              :class="[activeArticleIndex === 0 ? 'not-allow' : '']"
              @click="handlePage('-')"
              :style="{ color: bgColorList[activeIndex].btnColor }"
              ><svg-icon icon-class="arrow-left-line"></svg-icon
              >上一篇</el-button
            >
            <el-button
              type="text"
              class="btn-right"
              :class="[
                activeArticleIndex === issueChnTanList.length - 1
                  ? 'not-allow'
                  : '',
              ]"
              @click="handlePage('+')"
              :style="{ color: bgColorList[activeIndex].btnColor }"
              >下一篇<svg-icon icon-class="arrow-right-line"></svg-icon
            ></el-button>
          </div>
          <div class="right">
            <template v-if="support">
              <span
                class="support"
                @click="handleReadArticle"
                :style="{ color: bgColorList[activeIndex].btnColor }"
                ><svg-icon icon-class="no-read"></svg-icon>标记为已读</span
              >
            </template>
            <template v-else>
              <span
                class="support readed"
                :style="{ color: bgColorList[activeIndex].btnColor }"
                ><svg-icon
                  icon-class="readed"
                  :style="{ color: bgColorList[activeIndex].btnColor }"
                ></svg-icon
                >已读</span
              >
            </template>
          </div>
        </div>
        <!-- 词汇表 -->
        <div class="glossary-box" v-if="menuType !== 'practice'">
          <div
            class="title"
            :style="{ color: bgColorList[activeIndex].glossaryTitle }"
            v-if="
              (articleInfo.art_voc_data &&
                articleInfo.art_voc_data.length > 0) ||
              (articleInfo.art_phrase_data &&
                articleInfo.art_phrase_data.length > 0) ||
              (articleInfo.art_explain_data &&
                articleInfo.art_explain_data.length > 0)
            "
          >
            <h2>词汇表</h2>
            <a @click="showGlossary = !showGlossary">{{
              showGlossary ? "收起" : "展开"
            }}</a>
          </div>
          <el-collapse-transition>
            <div v-if="showGlossary">
              <template
                v-if="
                  articleInfo.art_voc_data &&
                  articleInfo.art_voc_data.length > 0
                "
              >
                <h4
                  :style="{ color: bgColorList[activeIndex].glossarySubtitle }"
                >
                  生词
                </h4>
                <new-word-list
                  class="newWord-list"
                  :list="articleInfo.art_voc_data"
                  :style="{ background: bgColorList[activeIndex].glossaryBg }"
                  :colorObj="bgColorList[activeIndex]"
                  :likeWordList="likeWordList"
                  @changeLike="changeLike"
                  ref="newWordList"
                ></new-word-list>
              </template>
              <template
                v-if="
                  articleInfo.art_phrase_data &&
                  articleInfo.art_phrase_data.length > 0
                "
              >
                <h4
                  :style="{ color: bgColorList[activeIndex].glossarySubtitle }"
                >
                  短语
                </h4>
                <phrase-list
                  class="newWord-list"
                  :list="articleInfo.art_phrase_data"
                  :style="{ background: bgColorList[activeIndex].glossaryBg }"
                  :colorObj="bgColorList[activeIndex]"
                  :likePhraseList="likePhraseList"
                  @changeLike="changeLike"
                  ref="phraseList"
                ></phrase-list>
              </template>
              <template
                v-if="
                  articleInfo.art_explain_data &&
                  articleInfo.art_explain_data.length > 0
                "
              >
                <h4
                  :style="{ color: bgColorList[activeIndex].glossarySubtitle }"
                >
                  注释
                </h4>
                <annotation-list
                  class="newWord-list"
                  :list="articleInfo.art_explain_data"
                  :style="{ background: bgColorList[activeIndex].glossaryBg }"
                  :colorObj="bgColorList[activeIndex]"
                ></annotation-list>
              </template>
            </div>
          </el-collapse-transition>
          <div
            class="title"
            :style="{
              color: bgColorList[activeIndex].glossaryTitle,
              marginTop: '40px',
            }"
            v-if="articleInfo.en_flag"
          >
            <h2>详细统计</h2>
            <a @click="showWordInfo = !showWordInfo">{{
              showWordInfo ? "收起" : "展开"
            }}</a>
          </div>
          <el-collapse-transition v-if="articleInfo.en_flag">
            <div v-if="showWordInfo">
              <h4 :style="{ color: bgColorList[activeIndex].glossarySubtitle }">
                词汇信息
              </h4>
              <div
                class="word-info"
                v-if="
                  articleInfo.art_corpus_data &&
                  articleInfo.art_corpus_data.artStatInfo
                "
              >
                <div
                  :style="{ background: bgColorList[activeIndex].glossaryBg }"
                >
                  <label
                    :style="{ color: bgColorList[activeIndex].statisticTitle }"
                    >文章长度</label
                  >
                  <span
                    :style="{ color: bgColorList[activeIndex].statisticValue }"
                    >{{ articleInfo.art_corpus_data.artStatInfo.wc }}</span
                  >
                </div>
                <div
                  :style="{ background: bgColorList[activeIndex].glossaryBg }"
                >
                  <label
                    :style="{ color: bgColorList[activeIndex].statisticTitle }"
                    >词汇数量</label
                  >
                  <span
                    :style="{ color: bgColorList[activeIndex].statisticValue }"
                    >{{ articleInfo.art_corpus_data.artStatInfo.wdc }}</span
                  >
                </div>
                <div
                  :style="{ background: bgColorList[activeIndex].glossaryBg }"
                >
                  <label
                    :style="{ color: bgColorList[activeIndex].statisticTitle }"
                    >平均词长</label
                  >
                  <span
                    :style="{ color: bgColorList[activeIndex].statisticValue }"
                    >{{
                      articleInfo.art_corpus_data.artStatInfo.avgWordLen
                    }}</span
                  >
                </div>
                <div
                  :style="{ background: bgColorList[activeIndex].glossaryBg }"
                >
                  <label
                    :style="{ color: bgColorList[activeIndex].statisticTitle }"
                    >词汇密度</label
                  >
                  <span
                    :style="{ color: bgColorList[activeIndex].statisticValue }"
                    >{{
                      articleInfo.art_corpus_data.artStatInfo.vocabDensity
                    }}</span
                  >
                </div>
                <div
                  :style="{ background: bgColorList[activeIndex].glossaryBg }"
                >
                  <label
                    :style="{ color: bgColorList[activeIndex].statisticTitle }"
                    >词汇难度</label
                  >
                  <span
                    :style="{ color: bgColorList[activeIndex].statisticValue }"
                    >{{
                      articleInfo.art_corpus_data.artStatInfo.vocabHardLevel
                    }}</span
                  >
                </div>
              </div>
              <h4 :style="{ color: bgColorList[activeIndex].glossarySubtitle }">
                词汇分布
              </h4>
              <div
                class="echarts-box"
                v-if="
                  articleInfo &&
                  articleInfo.art_corpus_data &&
                  articleInfo.art_corpus_data.artStatInfo &&
                  articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems
                "
              >
                <ul class="echarts-type">
                  <li
                    v-for="(itemE, indexE) in articleInfo.art_corpus_data
                      .artStatInfo.vocabVlLevelItems"
                    :key="indexE"
                    @mouseover="gaolangbzt(indexE, 'shanxing_main')"
                    @mouseout="closegaolangbzt(indexE, 'shanxing_main')"
                    :style="{
                      background:
                        bgColorList[activeIndex].type === 'white'
                          ? itemE.bg
                          : bgColorList[activeIndex].type === 'darkGreen'
                          ? itemE.darkGreenBg
                          : itemE.darkBg,
                      color:
                        bgColorList[activeIndex].type === 'white'
                          ? itemE.color
                          : bgColorList[activeIndex].type === 'darkGreen'
                          ? itemE.darkGreenColor
                          : itemE.darkColor,
                      borderColor:
                        bgColorList[activeIndex].type === 'white'
                          ? itemE.border
                          : bgColorList[activeIndex].type === 'darkGreen'
                          ? itemE.darkGreenBorder
                          : itemE.darkBorder,
                    }"
                  >
                    <span class="name">{{ itemE.vlCnName }}</span>
                    <span class="number">{{ itemE.value }}</span>
                    <span class="percent">{{ itemE.vocabPercentStr }}</span>
                  </li>
                </ul>
                <div id="shanxing_main" style="height: 360px"></div>
              </div>
            </div>
          </el-collapse-transition>
        </div>
        <!-- 右侧菜单 -->
        <div
          class="mene-right"
          :style="{
            background: bgColorList[activeIndex].contentInnerBg,
            borderColor: bgColorList[activeIndex].glossaryBg,
          }"
          v-if="articleInfo.en_flag"
        >
          <menu-right
            :colorObj="bgColorList[activeIndex]"
            @changeArticleType="changeArticleType"
          ></menu-right>
        </div>
      </div>
    </div>
    <div
      class="share-box"
      v-if="menuFeature === 'share'"
      v-loading="shareLoading"
    >
      <div class="share-box-top">
        <h5>分享</h5>
        <i class="el-icon-close" @click="handleCloseShare"></i>
      </div>
      <template v-if="shareSrc">
        <img :src="shareSrc" />
      </template>
      <template v-else>
        <el-skeleton style="width: 380px" :loading="true" animated>
          <template slot="template">
            <el-skeleton-item
              variant="image"
              style="width: 380px; height: 738px"
            />
          </template>
        </el-skeleton>
      </template>
      <div class="share-box-bottom">
        <el-button type="primary" @click="downLoadImg(shareSrc)" size="small"
          >下载图片</el-button
        >
        <el-button
          @click="CopyToClipboard('copyDownUrl')"
          size="small"
          type="primary"
          plain
          >复制链接</el-button
        >
        <span id="copyDownUrl">{{ share_url }}</span>
      </div>
    </div>
    <div class="catalog-box" v-if="menuFeature === 'list'">
      <ul class="treeList">
        <li v-for="(item, index) in issueChnList" :key="index">
          <p class="parent-node">
            <span class="number">{{ index + 1 }}</span
            ><b class="title">{{ item.chn_name }}</b>
          </p>
          <ul v-if="item.arts && item.arts.length > 0">
            <li
              :class="[
                items.canRead ? 'children-buy' : 'children-no',
                'children',
              ]"
              v-for="(items, indexs) in item.arts"
              :key="indexs"
              @click="handleLink(items, items.canRead, index)"
            >
              <p class="children-node">
                <span class="number">{{ indexs + 1 }}</span
                ><b class="title">{{ items.art_title }}</b>
              </p>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <el-dialog
      :visible.sync="articleInfoFlag"
      :show-close="false"
      :close-on-click-modal="false"
      width="968px"
      class="articleDetail-dialog"
      v-if="articleInfoFlag"
    >
      <article-info
        @closeArticleInfo="closeArticleInfo"
        :articleInfo="articleInfo"
        :colorObj="bgColorList[activeIndex]"
      ></article-info>
    </el-dialog>
    <el-dialog
      :visible.sync="ciyunShow"
      :show-close="true"
      :title="articleInfo.art_corpus_data.artTitle"
      :close-on-click-modal="false"
      width="1182px"
      class="ciyun-dialog"
      v-if="ciyunShow"
    >
      <iframe
        width="100%"
        height="834px"
        border="none"
        :src="
          './ciyun/ciyunindex.html?partitionKey=1&searchType=2&articleId=' +
          articleId
        "
      ></iframe>
    </el-dialog>
    <el-dialog
      :visible.sync="printFlag"
      :show-close="false"
      :close-on-click-modal="false"
      width="100%"
      top="0"
      class="articleDetail-dialog"
      v-if="printFlag"
    >
      <print-model
        :titleFontsize="48"
        :wordFontsize="wordFontsize"
        :colorObj="bgColorList[activeIndex]"
        :articleType="articleType"
        :articleInfo="articleInfo"
        @closePrint="closePrint"
        :articleImg="articleImg"
      ></print-model>
    </el-dialog>
  </div>
</template>

<script>
import Header from "../../components/Header.vue";
import NavBar from "../../components/common/NavBar.vue";
import NewWordList from "./components/NewWordList.vue";
import PhraseList from "./components/PhraseList.vue";
import AnnotationList from "./components/AnnotationList.vue";
import NormalModel from "./components/NormalModel.vue";
import PhraseModel from "./components/PhraseModel.vue";
import MenuRight from "./components/MenuRight.vue";
import ArticleInfo from "./components/ArticleInfo.vue";
import InnerTextSearch from "./components/InnerTextSearch.vue";
import LexicalType from "./components/LexicalType.vue";
import PracticeModel from "./components/PracticeModel.vue";
import NotesModel from "./components/NotesModel.vue";
import printModel from "./components/PrintModel.vue";
import * as echarts from "echarts";
import { getLogin } from "@/api/ajax";
import { getToken } from "@/utils/auth";
export default {
  name: "articleDetail",
  computed: {},
  components: {
    Header,
    NavBar,
    NewWordList,
    PhraseList,
    AnnotationList,
    NormalModel,
    MenuRight,
    PhraseModel,
    ArticleInfo,
    InnerTextSearch,
    LexicalType,
    PracticeModel,
    NotesModel,
    printModel,
  },
  data() {
    return {
      config: this.$route.query.headerConfig
        ? decodeURIComponent(this.$route.query.headerConfig)
        : "",
      LoginNavIndex: 0,
      wordFontsize: 22, // 文章文字大小
      bgColorList: [
        {
          type: "white",
          contentBg: "#D9EAF1",
          contentInnerBg: "#FFFFFF",
          navBg: "#00ADEF",
          border: "#E5E6EB",
          bg: "#FFFFFF",
          border_active: "#3459D2",
          boxBorder: "#E5E6EB",
          titleColor: "#1F2C5C",
          sourceColor: "#929CA8",
          contentColor: "#2F3742",
          btnColor: "#3459D2",
          glossaryTitle: "#2F3742",
          glossarySubtitle: "#4E5969",
          glossaryBg: "#F7F8FA",
          newWordColor: "#175DFF",
          newWordOtherColor: "#667180",
          newWordStar: "#FFB224",
          newWordType: {
            L0: {
              color: "#5B7217",
              bg: "#F1FCE3",
            },
            L1: {
              color: "#3D9A50",
              bg: "#EFFCEF",
            },
            L2: {
              color: "#0081F1",
              bg: "#E7F3FF",
            },
            L3: {
              color: "#3459D2",
              bg: "#EEF3FF",
            },
            LA: {
              color: "#E03177",
              bg: "#FFECF5",
            },
            LB: {
              color: "#CD2B31",
              bg: "#FFE8E8",
            },
            LC: {
              color: "#99A29E",
              bg: "#DFE4E2",
            },
            LD: {
              color: "#504F57",
              bg: "#C1C5CD",
            },
          },
          phraseColor: "#ED5F00",
          phraseOhterColor: "#2F3742",
          annotationTitle: "#4E5969",
          annotationOhter: "#667180",
          statisticTitle: "#2F3742",
          statisticValue: "#3459D2",
          menuBg: "#EEF3FF",
          audiobg: "#FFFFFF",
          audioBorder: "#EBEBEB",
          audioBtnColor: "#175DFF",
          audioBtnBg: "#EEF3FF",
          audioTimeColor: "#2F3742",
          audioSpeedColor: "#2F3742",
        },
        {
          type: "darkGreen",
          contentBg: "#C2C9C6",
          contentInnerBg: "#DFE4E2",
          navBg: "#236E55",
          border: "#5BB99A",
          bg: "#FFFFFF",
          border_active: "#FFFFFF",
          boxBorder: "#1B5441",
          titleColor: "#1F2C5C",
          sourceColor: "#929CA8",
          contentColor: "#2F3742",
          btnColor: "#3459D2",
          glossaryTitle: "#393F3C",
          glossarySubtitle: "#66736D",
          glossaryBg: "#D7DCDA",
          newWordColor: "#175DFF",
          newWordOtherColor: "#667180",
          newWordStar: "#FFB224",
          newWordType: {
            L0: {
              color: "#5B7217",
              bg: "#F1FCE3",
            },
            L1: {
              color: "#3D9A50",
              bg: "#EFFCEF",
            },
            L2: {
              color: "#0081F1",
              bg: "#E7F3FF",
            },
            L3: {
              color: "#3459D2",
              bg: "#EEF3FF",
            },
            LA: {
              color: "#E03177",
              bg: "#FFECF5",
            },
            LB: {
              color: "#CD2B31",
              bg: "#FFE8E8",
            },
            LC: {
              color: "#99A29E",
              bg: "#DFE4E2",
            },
            LD: {
              color: "#504F57",
              bg: "#C1C5CD",
            },
          },
          phraseColor: "#ED5F00",
          phraseOhterColor: "#2F3742",
          statisticTitle: "#393F3C",
          statisticValue: "#299772",
          menuBg: "#E9F7F2",
          audiobg: "#ECEFED",
          audioBorder: "#DFE4E2",
          audioBtnColor: "#299772",
          audioBtnBg: "#DFE4E2",
          audioTimeColor: "#393F3C",
          audioSpeedColor: "#299772",
        },
        {
          type: "darkBlue",
          contentBg: "#1C2129",
          contentInnerBg: "#2F3742",
          navBg: "#2F3742",
          border: "#1F2C5C",
          bg: "#1F2C5C",
          border_active: "#FFFFFF",
          boxBorder: "#1C2129",
          titleColor: "#5373E7",
          sourceColor: "#929CA8",
          contentColor: "#C1C5CD",
          btnColor: "#5373E7",
          glossaryTitle: "#929CA8",
          glossarySubtitle: "#929CA8",
          glossaryBg: "#3E4855",
          newWordColor: "#8DA4EF",
          newWordOtherColor: "#929CA8",
          newWordStar: "#816C00",
          newWordType: {
            L0: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#5B7217",
            },
            L1: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#2F6E3B",
            },
            L2: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#006793",
            },
            L3: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#AE1955",
            },
            LA: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#AE1955",
            },
            LB: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#8F2025",
            },
            LC: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#4A524E",
            },
            LD: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#2F3742",
            },
          },
          phraseColor: "#ED5F00",
          phraseOhterColor: "#929CA8",
          statisticTitle: "#D0D3D9",
          statisticValue: "#5373E7",
          menuBg: "#EEF3FF",
          audiobg: "#3E4855",
          audioBorder: "#2F3742",
          audioBtnColor: "#D0D3D9",
          audioBtnBg: "#4E5969",
          audioTimeColor: "#D0D3D9",
          audioSpeedColor: "#D0D3D9",
        },
        {
          type: "armyGreen",
          contentBg: "#2A2F2C",
          contentInnerBg: "#393F3C",
          navBg: "#393F3C",
          border: "#13392E",
          bg: "#13392E",
          border_active: "#FFFFFF",
          boxBorder: "#2A2F2C",
          titleColor: "#30A47D",
          sourceColor: "#99A29E",
          contentColor: "#C1C5CD",
          btnColor: "#30A47D",
          glossaryTitle: "#99A29E",
          glossarySubtitle: "#99A29E",
          glossaryBg: "#4A524E",
          newWordColor: "#8DA4EF",
          newWordOtherColor: "#99A29E",
          newWordStar: "#816C00",
          newWordType: {
            L0: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#5B7217",
            },
            L1: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#2F6E3B",
            },
            L2: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#006793",
            },
            L3: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#AE1955",
            },
            LA: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#AE1955",
            },
            LB: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#8F2025",
            },
            LC: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#4A524E",
            },
            LD: {
              color: "rgba(255, 255, 255, 0.64)",
              bg: "#2F3742",
            },
          },
          phraseColor: "#ED5F00",
          phraseOhterColor: "#99A29E",
          statisticTitle: "#D0D3D9",
          statisticValue: "#30A47D",
          menuBg: "#EEF3FF",
          audiobg: "#4A524E",
          audioBorder: "#393F3C",
          audioBtnColor: "#D7DCDA",
          audioBtnBg: "#66736D",
          audioTimeColor: "#D7DCDA",
          audioSpeedColor: "#D7DCDA",
        },
      ],
      activeIndex: 0, // 选择主题色的索引
      showGlossary: true, // 是否展开词汇表
      showWordInfo: true,
      wordList: [
        {
          src: ".",
          word: "cremation",
          symbol: "/krəˈmeɪʃn/",
          paraList: [
            {
              cixing: "n.",
              shiyi: "火葬；火化",
            },
          ],
          type: "daochu",
          rate: 3,
        },
        {
          src: ".",
          word: "thrive",
          symbol: "/θraɪv/",
          paraList: [
            {
              cixing: "v.",
              shiyi:
                "茁壮成长，兴旺，繁荣；（尤指在别人觉得困难的时候）以……为乐，可以出色应对",
            },
          ],
          type: "xuanbi",
          rate: 4,
        },
        {
          src: ".",
          word: "diversify",
          symbol: "/daɪˈvɜːsɪfaɪ/",
          paraList: [
            {
              cixing: "v.",
              shiyi:
                "（使）多样化，（使）不同；扩大经营范围，增加……的品种；（投资）多元化；",
            },
            {
              cixing: "n.",
              shiyi: "兽医；<美，非正式>老兵；兽医诊所（vet's）",
            },
          ],
          type: "daochu",
          rate: 2,
        },
      ],
      phraseList: [
        {
          word: "send off",
          paraList: ["送行"],
        },
        {
          word: "more than",
          paraList: ["多于"],
        },
        {
          word: "according to",
          paraList: ["根据"],
        },
        {
          word: "In addition to",
          paraList: ["除了……之外"],
        },
      ],
      annotationList: [
        {
          prefix: "visiting team",
          para: "时区。全球划分为24个时区。相邻两个时区的时问相差1小时。出国旅行的人，必须随时调整自己的手表，才能和当地时间相一致。凡向西走，每过一个时区，就要把表拨慢1小时；凡向东走，每过一个时区，就要把表拨快1小时。",
        },
        {
          prefix: "jet–lagged",
          para: "有时差反应的，有时差感的。人体症状多表现为疲劳、方向感减弱和失眠、往往会影响人们最初几天的活动。",
        },
      ],
      vocabularyType: {
        L0: {
          bg: "#F2FCE3",
          color: "#5B7217",
          darkBg: "#5B7217",
          border: "#F2FCE3",
          darkColor: "rgba(255, 255, 255, 0.64)",
          darkBorder: "rgba(255, 255, 255, 0.08)",
          darkGreenBg: "#F2FCE3",
          darkGreenColor: "#5B7217",
          darkGreenBorder: "#F2FCE3",
        },
        L1: {
          bg: "#EFFCEF",
          color: "#3D9A50",
          darkBg: "#2F6E3B",
          darkColor: "rgba(255, 255, 255, 0.64)",
          darkBorder: "rgba(255, 255, 255, 0.08)",
          darkGreenBg: "#EFFCEF",
          darkGreenColor: "#3D9A50",
          darkGreenBorder: "#EFFCEF",
        },
        L2: {
          bg: "#E7EEFF",
          color: "#175DFF",
          darkBg: "#006793",
          darkColor: "rgba(255, 255, 255, 0.64)",
          darkBorder: "rgba(255, 255, 255, 0.08)",
          darkGreenBg: "#E7F3FF",
          darkGreenColor: "#0081F1",
          darkGreenBorder: "#E7F3FF",
        },
        L3: {
          bg: "#EEF3FF",
          color: "#3459D2",
          darkBg: "#2C49AA",
          darkColor: "rgba(255, 255, 255, 0.64)",
          darkBorder: "rgba(255, 255, 255, 0.08)",
          darkGreenBg: "#EEF3FF",
          darkGreenColor: "#3459D2",
          darkGreenBorder: "#EEF3FF",
        },
        LA: {
          bg: "#FFECF5",
          color: "#E03177",
          darkBg: "#AE1955",
          darkColor: "rgba(255, 255, 255, 0.64)",
          darkBorder: "rgba(255, 255, 255, 0.08)",
          darkGreenBg: "#FFECF5",
          darkGreenColor: "#E03177",
          darkGreenBorder: "#FFECF5",
        },
        LB: {
          bg: "#FFE8E8",
          color: "#CD2B31",
          darkBg: "#8F2025",
          darkColor: "rgba(255, 255, 255, 0.64)",
          darkBorder: "rgba(255, 255, 255, 0.08)",
          darkGreenBg: "#FFE8E8",
          darkGreenColor: "#CD2B31",
          darkGreenBorder: "#FFE8E8",
        },
        LC: {
          bg: "#DFE4E2",
          color: "#99A29E",
          border: "rgba(0, 0, 0, 0.08)",
          darkBg: "#4A524E",
          darkColor: "rgba(255, 255, 255, 0.64)",
          darkBorder: "rgba(255, 255, 255, 0.08)",
          darkGreenBg: "#DFE4E2",
          darkGreenColor: "#4A524E",
          darkGreenBorder: "rgba(0, 0, 0, 0.08)",
        },
        LD: {
          bg: "#C1C5CD",
          color: "#504F57",
          darkBg: "#2F3742",
          darkColor: "rgba(255, 255, 255, 0.64)",
          darkBorder: "rgba(255, 255, 255, 0.08)",
          darkGreenBg: "#C1C5CD",
          darkGreenColor: "#504F57",
          darkGreenBorder: "#C1C5CD",
        },
      },
      articleType: this.$route.query.type ? this.$route.query.type * 1 : 1,
      articleId: this.$route.query.id ? this.$route.query.id : "",
      noRead: true, // 未读
      support: false, // 点赞
      oppose: false, // 不支持
      timer: null,
      readLength: 0,
      articleInfo: null,
      loading: false,
      menuType: "original",
      menuFeature: "", // 功能
      shareSrc: "", // 分享图片
      share_url: "", // 分享链接
      shareLoading: false,
      likeWordList: [], // 收藏短语list
      likePhraseList: [],
      likeSentencelist: [],
      issueChnList: [], // 报刊文章目录
      issueChnTanList: [], //文章摊平
      userMessage: getToken() ? JSON.parse(getToken()) : null,
      activeArticleIndex: 0,
      articleNumber: 0,
      articleInfoFlag: false, // 显示文章信息
      ciyunShow: false, // 显示词云
      printFlag: false, // 打印
      articleImg: {}, // 文章图片
    };
  },
  watch: {
    showWordInfo: {
      handler(val, oldVal) {
        const _this = this;
        if (val) {
          setTimeout(() => {
            _this.inityuan();
          }, 100);
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  methods: {
    inityuan() {
      if (
        this.articleInfo &&
        this.articleInfo.art_corpus_data &&
        this.articleInfo.art_corpus_data.artStatInfo &&
        this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems
      ) {
        var chartDom = document.getElementById("shanxing_main");
        var myChart = echarts.init(chartDom);
        var option;
        let newdata = JSON.parse(
          JSON.stringify(
            this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems
          )
        );
        newdata.forEach((item) => {
          let percent = item.vocabPercent / 100;
          if (percent % 1 == 0) {
            item.name = item.vlCnName + " " + percent + "%";
          } else {
            item.name = item.vlCnName + " " + percent.toFixed(2) + "%";
          }
        });
        option = {
          color:
            this.bgColorList[this.activeIndex].type === "white"
              ? this.articleInfo.vl_id === "VL26"
                ? [
                    "#90C62F",
                    "#55B467",
                    "#F04F88",
                    "#F2555A",
                    "#D7DCDA",
                    "#99A29E",
                  ]
                : [
                    "#90C62F",
                    "#55B467",
                    "#5FD4F4",
                    "#5373E7",
                    "#F04F88",
                    "#F2555A",
                    "#D7DCDA",
                    "#99A29E",
                  ]
              : this.bgColorList[this.activeIndex].type === "darkGreen"
              ? this.articleInfo.vl_id === "VL26"
                ? [
                    "#90C62F",
                    "#55B467",
                    "#5FD4F4",
                    "#5373E7",
                    "#F04F88",
                    "#F2555A",
                    "#D7DCDA",
                    "#99A29E",
                  ]
                : [
                    "#90C62F",
                    "#55B467",
                    "#F04F88",
                    "#F2555A",
                    "#D7DCDA",
                    "#99A29E",
                  ]
              : this.articleInfo.vl_id === "VL26"
              ? [
                  "#5B7217",
                  "#2F6E3B",
                  "#006793",
                  "#2C49AA",
                  "#AE1955",
                  "#F2555A",
                  "#4A524E",
                  "#2F3742",
                ]
              : [
                  "#5B7217",
                  "#2F6E3B",
                  "#AE1955",
                  "#F2555A",
                  "#4A524E",
                  "#2F3742",
                ],
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["50%", "90%"],
              data: newdata,
              itemStyle: {
                borderColor: "rgba(255, 255, 255, 0.24)",
                borderWidth: 1,
              },
              top: 50,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
          xAxis: {
            show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
              show: false, //不显示坐标轴刻度线
            },
            axisLine: {
              show: false, //不显示坐标轴线
            },
            axisLabel: {
              show: false, //不显示坐标轴上的文字
            },
          },
        };
        option && myChart.setOption(option);
      }
    },
    // 鼠标进入
    gaolangbzt(index, id) {
      var compareChart = echarts.getInstanceByDom(document.getElementById(id));
      compareChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: index,
      });
    },
    // 鼠标移出
    closegaolangbzt(index, id) {
      var compareChart = echarts.getInstanceByDom(document.getElementById(id));
      compareChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: index,
      });
    },
    // 切换主题颜色
    handleChangeBgColor(index) {
      this.activeIndex = index;
      this.inityuan();
    },
    async handlePage(type) {
      if (type === "-") {
        if (this.activeArticleIndex !== 0) {
          if (!this.issueChnTanList[this.activeArticleIndex - 1].canRead) {
            this.$message.error("您没有阅读其他文章的相关权益");
            return;
          }
          this.activeArticleIndex--;
          let MethodName = "/PaperServer/Client/Issue/SaveLastReadArtInIss";
          let data = {
            iss_id: this.$route.query.iss_id,
            art_id: this.issueChnTanList[this.activeArticleIndex].id,
          };
          await getLogin(MethodName, data).then((res) => {});
          this.$router.replace({
            path: "/articleDetail",
            query: {
              headerConfig: this.$route.query.headerConfig
                ? this.$route.query.headerConfig
                : "",
              id: this.issueChnTanList[this.activeArticleIndex].id,
              iss_id: this.$route.query.iss_id,
            },
          });
        } else {
          return;
        }
      } else {
        if (this.activeArticleIndex !== this.issueChnTanList.length - 1) {
          if (!this.issueChnTanList[this.activeArticleIndex + 1].canRead) {
            this.$message.error("您没有阅读其他文章的相关权益");
            return;
          }
          this.activeArticleIndex++;
          let MethodName = "/PaperServer/Client/Issue/SaveLastReadArtInIss";
          let data = {
            iss_id: this.$route.query.iss_id,
            art_id: this.issueChnTanList[this.activeArticleIndex].id,
          };
          await getLogin(MethodName, data).then((res) => {});
          this.$router.replace({
            path: "/articleDetail",
            query: {
              headerConfig: this.$route.query.headerConfig
                ? this.$route.query.headerConfig
                : "",
              id: this.issueChnTanList[this.activeArticleIndex].id,
              iss_id: this.$route.query.iss_id,
            },
          });
        } else {
          return;
        }
      }
      location.reload();
    },
    // 跳转
    async handleLink(item, flag) {
      if (!flag) {
        return;
      }
      let MethodName = "/PaperServer/Client/Issue/SaveLastReadArtInIss";
      let data = {
        iss_id: this.$route.query.iss_id,
        art_id: item.id,
      };
      await getLogin(MethodName, data).then((res) => {});
      this.$router.replace({
        path: "/articleDetail",
        query: {
          headerConfig: this.$route.query.headerConfig
            ? this.$route.query.headerConfig
            : "",
          id: item.id,
          iss_id: this.$route.query.iss_id,
        },
      });
      location.reload();
    },
    getArticleDetail() {
      this.loading = true;
      let this_ = this;
      let MethodName = "/PaperServer/Client/Article/GetArticleDetail";
      let data = {
        id: this.articleId,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.loading = false;
          if (res.status === 1) {
            this.articleInfo = res.data;
            if (
              this.articleInfo &&
              this.articleInfo.art_corpus_data &&
              this.articleInfo.art_corpus_data.artStatInfo &&
              this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems
            ) {
              this.articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems.forEach(
                (item) => {
                  item.value = item.vocabCount;
                  item = Object.assign(item, this.vocabularyType[item.vlId]);
                }
              );
              if (this.articleInfo.art_voc_data) {
                this.articleInfo.art_voc_data.forEach((item) => {
                  item.collect = false;
                });
              }
            }
            let articleArr =
              this.articleInfo.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,
                    };
                    imgArr.push(imgobj);
                  }
                });
                this.articleImg[pno] = imgArr;
              }
            });
            setTimeout(() => {
              this_.inityuan();
            }, 100);
          }
        })
        .catch(() => {
          this.loading = false;
        });
      getLogin(
        "/ShopServer/Client/CollectManager/GetMyCollectIntegrateInfo_Article",
        {
          article_id: this.articleId,
        }
      )
        .then((res) => {
          if (res.status === 1) {
            this.noRead = res.is_collect_article === "false";
            this.articleNumber = res.collect_person_count;
            this.likeWordList = [];
            res.word_list.forEach((item) => {
              this.likeWordList.push(item.word);
            });
            this.likePhraseList = [];
            res.phrase_list.forEach((item) => {
              this.likePhraseList.push(item.phrase);
            });
            this.likeSentencelist = [];
            res.sentence_list.forEach((item) => {
              this.likeSentencelist.push(item.sentence_id);
            });
          }
        })
        .catch(() => {
          this.loading = false;
        });
      getLogin(
        "/ShopServer/Client/ReadingRecordManager/GetReadingStatus_Article",
        {
          goods_type: 21,
          article_id: this.articleId,
        }
      )
        .then((res) => {
          if (res.status === 1) {
            this.support = res.reading_info.is_reading === "false";
            if (!this.support) {
              clearInterval(this_.timer);
              this_.timer = null;
            }
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleReadArticle() {
      let this_ = this;
      clearInterval(this_.timer);
      this_.timer = null;
      let MethodName =
        "/ShopServer/Client/ReadingRecordManager/AddReadingRecord_Article";
      let data = {
        goods_type: 21,
        article_id: this.articleId,
        duration: this.readLength,
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.support = false;
          }
        })
        .catch(() => {});
    },
    changeStatus(flag) {
      if (this[flag]) {
        let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Article";
        let data = {
          article_id: this.articleId,
        };
        getLogin(MethodName, data)
          .then((res) => {
            if (res.status === 1) {
              this[flag] = !this[flag];
              this.articleNumber++;
              this.$message({
                message: "收藏成功",
                type: "success",
              });
            }
          })
          .catch(() => {});
        // let datas = {
        //     sentence_id: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[1].id:this.articleInfo.art_corpus_data.sentList[1].id,
        //     audio_file_id: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.mp3:'',
        //     audio_begin_time: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[1].s:null,
        //     audio_end_time: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[1].e:null
        // }
        // getLogin('/ShopServer/Client/CollectManager/AddCollect_Sentence', datas)
        // .then((res) => {
        //     if(res.status===1){

        //     }
        // })
        // .catch(() => {
        // });
      } else {
        let MethodName =
          "/ShopServer/Client/CollectManager/CancelCollect_Article";
        getLogin(MethodName, {
          article_id: this.articleId,
        })
          .then((res) => {
            if (res.status === 1) {
              this[flag] = !this[flag];
              this.articleNumber--;
              this.$message({
                message: "取消收藏",
                type: "success",
              });
            }
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
    changeArticleType(type, e) {
      if (
        type === "print" ||
        type === "share" ||
        type === "list" ||
        type === "cloud" ||
        type === "chart"
      ) {
        if (type === "share" || type === "cloud" || type === "print") {
          if (this.userMessage) {
            if (type === "cloud") {
              this.ciyunEvent();
            } else if (type === "print") {
              let MethodName =
                "/ShopServer/Client/PrintRecordManager/GetMyPrintCount_Article";
              getLogin(MethodName, {
                goods_type: 21,
                date_range: "TODAY",
                article_id: this.articleId,
              }).then((res) => {
                if (res.status === 1) {
                  if (res.print_count < 5) {
                    this.printFlag = true;
                  } else {
                    this.$message.warning("今日打印次数已达上限");
                  }
                }
              });
            } else {
              this.handleCreateShare();
            }
            this.menuFeature = type;
          } else {
            this.$message.error("请先登录");
          }
        } else {
          if (type === "chart") {
            this.articleInfoFlag = true;
          } else {
            this.articleInfoFlag = false;
          }
          this.menuFeature = type;
        }
      } else {
        this.menuType = type;
        if (type === "search") {
          setTimeout(() => {
            this.$refs.innerTextSearchs.changeShow();
          }, 100);
        } else if (type === "filtrate") {
          setTimeout(() => {
            this.$refs.lexicalType.changeShow();
          }, 100);
        }
        this.menuFeature = "";
      }
    },
    ciyunEvent() {
      // let MethodName = "/PaperServer/Client/Article/CalcArtWordCloud";
      // let data = {
      //     type: 0,
      //     id: this.articleId
      // }
      // getLogin(MethodName, data)
      // .then((res) => {
      this.ciyunShow = true;
      //     window.localStorage.setItem('ciyunData', JSON.stringify(res.data))
      // window.open(
      // "./ciyun/ciyunindex.html?partitionKey=1&searchType=2&articleId=" +
      //     this.articleId,
      // "_blank"
      // );
      // })
      // .catch(() => {
      // });
    },
    handleCloseShare() {
      this.menuFeature = "";
    },
    CopyToClipboard(element) {
      var doc = document,
        text = doc.getElementById(element),
        range,
        selection;
      if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      } else if (window.getSelection) {
        selection = window.getSelection();
        range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
      }
      document.execCommand("copy");
      this.$message({
        message: "复制成功",
        type: "success",
      });
      window.getSelection().removeAllRanges();
    },
    downLoadImg(base64URL) {
      const a = document.createElement("a");
      a.download = "分享图片";
      const mimeType = base64URL.match(/:(.*?);/)[1];
      const byteCharacters = atob(base64URL.split(",")[1]);
      const byteNumbers = new Array(byteCharacters.length);
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      const byteArray = new Uint8Array(byteNumbers);
      const blob = new Blob([byteArray], { type: mimeType });
      a.href = URL.createObjectURL(blob);
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    // 创建分享
    handleCreateShare() {
      this.shareLoading = true;
      let MethodName = "/ShopServer/Client/ShareManager/CreateShareRecord";
      let data = {
        goods_type: 21,
        goods_id: this.articleId,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.shareLoading = false;
          if (res.status === 1) {
            this.share_url = res.share_url;
            this.shareSrc =
              "data:image/jpeg;base64," + res.image_content_base64;
          }
        })
        .catch(() => {
          this.shareLoading = false;
        });
    },
    changeLike(type, list) {
      this[type] = list;
      if (type === "likePhraseList") {
        this.$refs.phraseList.handleData();
      } else if (type === "likeWordList") {
        this.$refs.newWordList.handleData();
      }
    },
    // 报刊信息
    getIssueDetail() {
      this.issueChnTanList = [];
      this.issueChnList = [];
      let articleindex = 0;
      let MethodName = "/PaperServer/Client/Issue/GetIssueBriefInfo";
      let data = {
        id: this.$route.query.iss_id,
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            let issueChnList = res.data.chn_art_data;
            if (this.userMessage) {
              getLogin("/ShopServer/Client/BookshelfQuery/GetGoodsBuyStatus", {
                goods_type: 2,
                goods_id: this.$route.query.iss_id,
              })
                .then((res) => {
                  if (res.status === 1) {
                    let isBuy = res.buy_info.is_buy === "true";
                    issueChnList.forEach((item, index) => {
                      item.canRead = isBuy || index === 0;
                      item.arts.forEach((items) => {
                        if (items.id === this.$route.query.id) {
                          this.activeArticleIndex = articleindex;
                          item.active = true;
                          items.active = true;
                        }
                        this.issueChnTanList.push({
                          id: items.id,
                          canRead: isBuy || index === 0,
                        });
                        if (isBuy || index === 0) {
                          items.canRead = true;
                        } else {
                          items.canRead = false;
                        }
                        articleindex++;
                      });
                    });
                    this.issueChnList = issueChnList;
                  }
                })
                .catch(() => {});
            } else {
              let isBuy = false;
              issueChnList.forEach((item, index) => {
                item.canRead = isBuy || index === 0;
                item.arts.forEach((items) => {
                  if (items.id === this.$route.query.id) {
                    this.activeArticleIndex = articleindex;
                    item.active = true;
                    items.active = true;
                  }
                  this.issueChnTanList.push({
                    id: items.id,
                    canRead: isBuy || index === 0,
                  });
                  if (isBuy || index === 0) {
                    items.canRead = true;
                  } else {
                    items.canRead = false;
                  }
                  articleindex++;
                });
              });
              this.issueChnList = issueChnList;
            }
          }
        })
        .catch(() => {});
    },
    closeArticleInfo() {
      this.articleInfoFlag = false;
    },
    closePrint() {
      this.printFlag = false;
    },
  },
  created() {
    if (this.config) {
      let arr = this.config.split("&&&");
      this.LoginNavIndex = arr[0] * 1;
      this.userBg = arr[1] ? arr[1] : "rgba(0, 0, 0, 0.24)";
      this.headerBorder = arr[2] ? arr[2] : "#5C5C5C";
      this.headerBg = arr[3] ? arr[3] : "#00ADEF";
      this.previousPage = arr[4] ? arr[4] : "商城";
    }
    if (this.articleId) {
      this.getArticleDetail();
    }
    if (this.$route.query.iss_id) {
      this.getIssueDetail();
    }
  },
  mounted() {
    let this_ = this;
    this_.timer = null;
    this_.readLength = 0;
    this_.timer = setInterval(() => {
      this_.readLength++;
    }, 1000);
  },
};
</script>

<style lang="scss" scoped>
.bookStore {
  min-height: calc(100vh - 64px);
  .navBar-right {
    display: flex;
    align-items: center;
  }
  .article-color {
    display: flex;
    width: 132px;
    height: 32px;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e5e6eb;
    border-radius: 40px;
    margin-left: 12px;
    padding: 4px;
    .color-item {
      padding: 2px;
      border: 2px solid transparent;
      border-radius: 50%;
      a {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: block;
        border: 1px solid transparent;
        padding: 0;
      }
    }
  }
  .article-box {
    position: relative;
    padding: 80px 0;
    .artricle-inner {
      width: 1000px;
      margin: 0 auto;
      border-radius: 8px;
    }
    .mene-right {
      position: fixed;
      right: calc((100% - 1000px) / 2 - 172px);
      top: 144px;
      width: 152px;
      max-height: 80%;
      overflow: auto;
      background: #ffffff;
      border: 1px solid #e5e6eb;
      border-radius: 8px;
      padding: 4px;
      z-index: 99;
    }
  }
  .atricle-data {
    padding: 120px 100px 40px 100px;
  }
  .glossary-box {
    // border-top: 1px solid #F2F3F5;
    padding: 40px;
    .title {
      display: flex;
      justify-content: space-between;
      h2 {
        margin: 0;
        font-weight: 400;
        font-size: 24px;
        line-height: 32px;
      }
      a {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
      }
    }
    h4 {
      margin: 24px 0 8px 0;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
    }
  }
  .newWord-list {
    padding: 2px 4px;
  }
  .word-info {
    display: flex;
    justify-content: space-between;
    > div {
      width: 178px;
      height: 64px;
      border-radius: 4px;
      padding: 8px 12px;
      label {
        display: block;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 4px;
      }
      span {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
  .echarts-box {
    display: flex;
    .echarts-type {
      width: 232px;
      flex-shrink: 0;
      li {
        height: 38px;
        border-radius: 4px;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 20px;
        display: flex;
        padding: 8px 12px;
        cursor: pointer;
        border: 1px solid transparent;
        .name {
          flex: 1;
        }
        .number {
          width: 40px;
          text-align: right;
        }
        .percent {
          width: 80px;
          text-align: right;
        }
      }
    }
    #shanxing_main {
      flex: 1;
    }
  }
}
.article-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f7f8fa;
  .right {
    width: 150px;
    margin-right: -8px;
    text-align: right;
  }
  .support {
    padding: 8px 16px;
    border-radius: 20px;
    background: #e5e6eb;
    margin-right: 8px;
    color: rgba(0, 0, 0, 0.88);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    .svg-icon {
      margin-right: 8px;
      color: rgba(23, 93, 255, 1);
    }
    &.active {
      background: rgba(48, 110, 255, 1);
      color: #fff;
      .svg-icon {
        color: #fff;
      }
    }
  }
  .colloct-article {
    .svg-icon {
      color: rgba(242, 85, 90, 1);
    }
    &.active {
      background: rgba(242, 85, 90, 1);
    }
  }
  .oppose {
    padding: 12px;
    border-radius: 20px;
    background: #e5e6eb;
    height: 40px;
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
    cursor: pointer;
    .svg-icon {
      width: 16px;
      height: 16px;
    }
    &.active {
      background: rgba(48, 110, 255, 1);
      .svg-icon {
        color: #fff;
      }
    }
  }
  .btn-left,
  .btn-right {
    color: #3459d2;
    font-size: 16px;
    line-height: 24px;
    padding: 0;
    .svg-icon {
      margin-right: 12px;
    }
    &.not-allow {
      color: #5e89ef;
      cursor: not-allowed;
    }
  }
  .btn-right {
    .svg-icon {
      margin-right: 0;
      margin-left: 12px;
    }
  }
  .readed {
    background: rgba(231, 238, 255, 1);
    color: rgba(23, 93, 255, 1);
    cursor: initial;
  }
}
.share-box,
.catalog-box {
  padding: 24px;
  width: 428px;
  height: 90%;
  overflow: auto;
  max-height: 712px;
  position: fixed;
  top: 40%;
  left: 50%;
  z-index: 10;
  font-size: 0;
  margin-top: -270px;
  margin-left: -214px;
  border-radius: 8px;
  border: 1px solid #d0d3d9;
  background: #fff;
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08),
    0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h5 {
      color: #000;
      font-size: 24px;
      font-weight: 400;
      line-height: 32px;
      margin: 0;
    }
    .el-icon-close {
      color: rgba(47, 55, 66, 1);
      cursor: pointer;
      font-size: 16px;
    }
  }
  img {
    width: 380px;
    height: 738px;
    border-radius: 16px;
    margin: 24px 0;
  }
  #copyDownUrl {
    width: 0;
    height: 0;
    opacity: 0;
    display: block;
  }
  &-bottom {
    .el-button {
      width: 174px;
      height: 48px;
      color: #fff;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      border-radius: 8px;
      &.is-plain {
        color: rgba(23, 93, 255, 1);
        border-color: rgba(23, 93, 255, 1);
        &:hover {
          background: rgba(231, 238, 255, 1);
        }
        &:focus {
          color: rgba(23, 93, 255, 1);
          border-color: rgba(23, 93, 255, 1);
          background: rgba(231, 238, 255, 1);
        }
      }
    }
  }
}
.catalog-box {
  right: calc((100% - 1000px) / 2);
  left: auto;
  margin-left: auto;
  .treeList {
    .parent-node {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .number {
        width: 26px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #2f3742;
      }
      .title {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #2f3742;
        word-break: break-word;
      }
    }
    ul {
      margin-bottom: 16px;
      .children {
        padding: 0 32px;
        border-radius: 4px;
        height: 40px;
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        &-buy {
          .number,
          .title {
            color: #2f3742;
          }
        }
        &-no {
          .number,
          .title {
            color: #929ca8;
          }
        }
        &-buy:hover {
          background: #e5e6eb;
          cursor: pointer;
        }
        &-node {
          display: flex;
          width: 100%;
        }
        .number {
          width: 24px;
        }
        .title {
          flex: 1;
          word-break: break-word;
        }
        .number,
        .title {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
        }
        .el-icon-lock {
          height: 16px;
          color: #929ca8;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.article-fontsize {
  width: 144px;
  height: 32px;
  line-height: 30px;
  border: 1px solid #e5e6eb;
  border-radius: 40px;
  overflow: hidden;
  .el-input {
    height: 30px;
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    height: 30px;
    border: none;
    background: transparent;
    color: #d9e2fc;
  }
  .el-input-number__decrease {
    border-right: 1px solid #1b5441;
  }
  .el-input-number__increase {
    border-left: 1px solid #1b5441;
  }
  .el-input__inner {
    height: 30px;
    border: none;
    line-height: 30px;
    background: transparent;
    color: #d9e2fc;
  }
}
.navBar {
  border-color: transparent;
  &-white {
    border-color: #ebebeb;
    .el-input-number__decrease,
    .el-input-number__increase,
    .el-input__inner {
      color: #fff;
    }
    .el-input-number__decrease {
      border-right: 1px solid #e5e6eb;
    }
    .el-input-number__increase {
      border-left: 1px solid #e5e6eb;
    }
    .goback {
      color: #fff;
    }
    .border {
      background: #e5e6eb;
      height: 16px;
      margin-top: 2px;
    }
    .article-title {
      color: #fff;
    }
  }
  &-darkGreen {
    .el-input-number__decrease {
      border-right: 1px solid #1b5441;
    }
    .el-input-number__increase {
      border-left: 1px solid #1b5441;
    }
    .goback {
      color: #e9f7f2;
    }
    .border {
      background: #1b5441;
      height: 16px;
      margin-top: 2px;
    }
    .article-title {
      color: #ccebe1;
    }
  }
  &-darkBlue {
    .el-input-number__decrease {
      border-right: 1px solid #1c2129;
    }
    .el-input-number__increase {
      border-left: 1px solid #1c2129;
    }
    .goback {
      color: #e9f7f2;
    }
    .border {
      background: #667180;
      height: 16px;
      margin-top: 2px;
    }
    .article-title {
      color: #d9e2fc;
    }
  }
  &-armyGreen {
    .el-input-number__decrease {
      border-right: 1px solid #2a2f2c;
    }
    .el-input-number__increase {
      border-left: 1px solid #2a2f2c;
    }
    .goback {
      color: #e9f7f2;
    }
    .border {
      background: #99a29e;
      height: 16px;
      margin-top: 2px;
    }
    .article-title {
      color: #d9e2fc;
    }
  }
}
.articleDetail-dialog {
  .el-dialog__header,
  .el-dialog__body {
    padding: 0;
  }
}
.ciyun-dialog {
  .el-dialog__title {
    color: #2f3742;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
  }
  iframe {
    border: none;
  }
  .el-dialog__body {
    padding: 0;
  }
}
.NNPE-ArticleView {
  figure {
    font-size: 0;
    img {
      max-width: 100%;
    }
  }
}
</style>