<template>
    <b-med-container
        :is-skt-show="!isPageRender"
        :bg-color="'#00c8c8'"
        hide-header
        skt-tpl="dictDiease"
    >
        <view class="canon-medcine">
            <!-- 顶部bar -->
            <top-bar
                ref="topbar"
                :title="title"
                :show-input="showInput"
                :bar-class="barClass"
                :search-url="searchUrl"
                :extra="{contentid: contentid, type: 'ydsearch', title: title}"
                :is-swan="isSwan"
                :cal-share-bar="false"
                share-bar
                @topbarHeightHandle="topbarHeightHandle"
                @wordsPagesToHome="dictIndexUbcSend('ydcty_sousuokuang')"
            />
            <view
                v-if="!isloadTabTop"
                class="load-Tab-Top"
                @touchmove.stop.prevent
            />
            <view
                :style="{
                    paddingTop: topBarHeight + 11 + 'px',
                }"
                class="dict"
            >
                <view class="dict-write"/>
                <!-- 顶部卡片区域 -->
                <view
                    v-if="topCardData"
                    class="c-gap-bottom"
                    :class="setFMPrender ? 'fmp-height' : ''"
                >
                    <top-card
                        :top-card-data="topCardData"
                        :notes-ubc-class="notesUbcClass"
                        @tipsClick="dictIndexUbcSend('ydcty_zhushi')"
                    />
                </view>
                <!-- 同义词 -->
                <view
                    v-if="relatedEntity"
                    class="alias-card"
                    @tap.stop="clickAlias"
                >
                    <view class="alias">
                        {{ `此内容有同义词【${relatedEntity.name}】` }}
                    </view>
                    <c-icon
                        name="right"
                        font-size="13px"
                        class="icon"
                    />
                </view>
                <view
                    class="dict-content"
                    :class="setFMPrender ? 'fmp-height' : ''"
                >
                    <!-- tab切换 -->
                    <view
                        v-if="tabList && tabList.length > 0"
                        id="yd-tabs"
                        :class="tabFixed ? 'tabs-fixed' : ''"
                        :style="{top: topBarHeight + 'px'}"
                        class="yd-tabs"
                    >
                        <yd-drug-tab
                            :list="tabList"
                            :selected-index="selectedIndex"
                            :extra="{contentid: contentid, type: 'disease'}"
                            @swiperNav="swiperNav"
                        />
                    </view>
                    <view v-if="tabFixed" :style="{height: '53px'}"/>
                    <swiper
                        :current="selectedIndex"
                        :duration="200"
                        :style="{
                            height: swiperHeight + 'px',
                        }"
                        class="swiper-class"
                        @change="swiperChange"
                    >
                        <swiper-item v-for="(item, index) in overviewDetail" :key="index">
                            <view v-if="item" :id="'content' + index">
                                <view
                                    :class="[
                                        item.level1TextType === '2'
                                            ? 'canon-medcine-wrap-pic'
                                            : 'canon-medcine-wrap c-padding-h',
                                    ]"
                                    :style="{
                                        'margin-top': (item.level1TextType === '2' && sid === '178296') ? '' : '7px',
                                    }"
                                >
                                    <c-video
                                        v-if="item.videoData && item.level1TextType !== '2'"
                                        :id="'video' + index"
                                        :video-data="item.videoData"
                                        :dust="dust"
                                        :height="(videoWidth * 231) / 411 + 'px'"
                                        :object-fit="'contain'"
                                        :show-load="false"
                                        :has-gap="false"
                                        :structured-ubc-show-log-class="structuredUbcShowLogClass"
                                        :contentid="contentid"
                                        @play="playVideo"
                                    />
                                    <view v-if="item.level1TextType === '1'" class="summary-wrap">
                                        <view
                                            v-for="(summary, index2) in item.level1Text"
                                            :key="index2"
                                            :class="
                                                ttsStatus !== 'idle' && ttsIndex - item.startTtsIndex === index2
                                                    ? 'c-color-main'
                                                    : ''
                                            "
                                            class="summary-wrap-list"
                                            @tap="handleParse(index2 + item.startTtsIndex)"
                                        >
                                            {{ summary }}
                                        </view>
                                    </view>
                                    <c-parse
                                        v-if="item.level1Node || item.level1Html"
                                        :id="'parseOut' + index"
                                        :nodes="item.level1Node || item.level1Html"
                                        :preview-pic="item.level1TextType === '2' ? false : true"
                                        :tts-index="ttsStatus !== 'idle' ? ttsIndex * 1 : -1"
                                        base-a-color="#00c8c8"
                                        @onTapA="onTapA"
                                        @handleParse="handleParse"
                                        @imageOnload="imageOnload"
                                    />
                                    <c-dialogue
                                        v-if="item.questions && item.questions.length && item.level1TextType !== '2'"
                                        :dialogue-data="item.questions"
                                        :dust="dust"
                                        :tts-index="ttsIndex"
                                        :scroll-flag="optionsDataA.qtitle"
                                        @handleParse="handleParse"
                                    />

                                    <c-reference
                                        v-if="item.referinfo && item.level1TextType !== '2'"
                                        :reference-data="item.referinfo"
                                        @isload="isload"
                                    />
                                    <c-direct
                                        :tab-list="tabList"
                                        :selected-index="selectedIndex"
                                        :is-pic="item.level1TextType === '2'"
                                        :dust="dust"
                                        @directTap="swiperNav"
                                    />
                                    <view v-if="doctorData && item.level1TextType !== '2'" class="gratitude">
                                        <c-icon
                                            name="exclamation-circle"
                                            font-size="13px"
                                            class="gratitude-icon"
                                        />
                                        <text>
                                            以上内容由<text
                                                v-for="(doctor, index2) in doctorData"
                                                :key="index2"
                                            >{{ doctor.name }}{{ doctor.title
                                            }}<text v-if="index2 !== doctorData.length - 1">、</text></text>参与编审
                                        </text>
                                    </view>
                                </view>
                                <view v-if="showEvaluate && userQuestion.length && Array.isArray(userQuestion)" class="evaluate-wrap">
                                    <c-evaluate
                                        :user-question="userQuestion"
                                        @closeEvaluate="closeEvaluate"
                                        @setEvaluate="setEvaluate"
                                    />
                                </view>
                            </view>
                        </swiper-item>
                    </swiper>

                    <view v-if="yidianPageBanner.length" class="interval"/>
                    <med-op-banner
                        v-if="yidianPageBanner.length"
                        :data="yidianPageBanner"
                        :height-percent="1 / 4.75"
                        :bottom-dot-gap="6"
                        :border-radius="'0px'"
                        :width-gap="0"
                        :class="bannerItemShowLogClass"
                        :contentid="contentid"
                        :dot-value="'ydcty_banner'"
                        class="coop-hide-element"
                        :current-page="'pages/speTopic/dict/index'"
                    />
                    <!-- <view v-if="live" class="interval coop-hide-element"/>
                    <view v-if="live" class="c-padding-h coop-hide-element">
                        <head-line
                            v-if="live.title"
                            :title="live.title"
                            :more-url="live.moreurl"
                            :more-text="'更多直播'"
                        />
                        <view v-if="live.list && live.list.length > 0" class="c-gap-bottom-large">
                            <video-calendar :data="live.list"/>
                        </view>
                    </view> -->
                    <view v-if="articles.length" class="interval"/>
                    <view
                        v-if="articles.length"
                        :data-extra="contentid"
                        :data-show="contentid ? 'all_article_show_' + contentid : 'article_show_all'"
                        @tap="upTCLog('all_article_click')"
                    >
                        <view class="articles-title">相关阅读</view>
                        <view
                            v-for="(article, index) in articles"
                            :key="index"
                            :data-show="article.nid ? 'one_article_show_' + article.nid : 'article_show'"
                        >
                            <recommend-item
                                :top-line="false"
                                :bottom-line="true"
                                :is-yd="true"
                                :title="article.title || ''"
                                :doctor="{
                                    name: (article.author && article.author.title) || '',
                                    rank: (article.author && article.author.docTitle) || '',
                                    label: (article.author && article.author.tag) || '',
                                    hospital:
                                        article.author && article.author.type === '1' ? article.author.hospital : '',
                                    image: (article.author && article.author.imgUrl) || '',
                                    intro: (article.author && article.author.intro) || '',
                                }"
                                :duration="article.duration || ''"
                                page="pageDisease"
                                :image="article.imgUrl"
                                :url="!article.source || (article.source && article.source !== '1') ? article.url : ''"
                                :out-link="article.source && article.source === '1' ? article.url : ''"
                                :dust="dust"
                                :module="'one_article_click_' + article.nid"
                                :rele-read-ubc-class="showLogClass"
                                @articlesDetailDot="dictIndexUbcSend('ydcty_xiangguanyuedu')"
                            />
                        </view>
                        <view class="spread-wrap">
                            <text>更多专业内容，持续更新中</text>
                        </view>
                    </view>
                    <view class="mentions-wrap">
                        <view> 百度健康医典内容仅供医学知识科普使用 </view>
                        <view> 不能替代专业诊疗意见，具体决策请遵医嘱 </view>
                    </view>
                    <!-- 右侧直播间 -->
                    <right-entry
                        v-if="JSON.stringify(yidianLiveFloat) !== '{}' && showLiveFloat"
                        :yidian-live-float="yidianLiveFloat"
                        :module="'click_' + contentid"
                        page="pageDisease"
                        class="coop-hide-element"
                        @closeEntry="closeEntry"
                    />
                    <!-- 底部tab -->
                    <view class="swan-security-padding-bottom">
                        <bottom-card
                            :btn-tab-list="btnTabList"
                            :pay-tab-list="[]"
                            :share-info4-bd="shareInfo4Bd"
                            :tts-status="ttsStatus"
                            :env="env"
                            :contentid="contentid"
                            :title="title"
                            :buy-drug-tab-ubc-class="buyDrugTabUbcClass"
                            :ask-tab-ubc-class="askTabUbcClass"
                            :phone-tab-play-ubc-class="phoneTabPlayUbcClass"
                            :share-url="shareUrl"
                            @showTts="showTts"
                            @bottomTabChange="bottomTabChange"
                            @bottomPayTab="bottomPayTab"
                        />
                    </view>
                    <!-- 目录按钮 -->
                    <right-card
                        :catalogue="catalogue"
                        :active-index="selectedIndex"
                        :active-sub-index="activeSubIndex"
                        :width="60"
                        @swiperNav="swiperNav"
                        @openDrawer="openDrawer"
                    />
                </view>
            </view>
        </view>
    </b-med-container>
</template>

<script>
/* global getApp, getCurrentPages */
import container from '@components/common/container';
import TopBar from '@components/speTopic/dict/TopBar';
import YdDrugTab from '@components/speTopic/dict/drugs/YdDrugTab';
import Icon from '@baidu/med-ui/components/Icon/Icon';
import Parse from '@baidu/med-ui/components/Parse/Parse';
import Video from '@components/common/video';
import Direct from '@components/speTopic/dict/direct';
import Dialogue from '@components/speTopic/dict/dialogue';
import Reference from '@components/speTopic/dict/reference';
import RecommendItem from '@components/speTopic/Recommend/RecommendItem';
import RightEntry from '@components/speTopic/dict/RightEntry';
import EvaluateCard from '@components/speTopic/dict/EvaluateCard';
import * as Conf from '@utils/conf';
import * as core from '@utils/core';
import {shareBdBox} from '@utils/share';
import {request} from '@utils/request';
import {sendWebb, WEBB_GROUP} from '@utils/monitor';
import {navigate} from '@utils/navigate';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import OpBanner from '@components/speTopic/dict/op-banner';
import {send, ShowLog, CollectLog, ubcSend} from '@utils/log';
import TopCard from '@components/speTopic/dict/TopCard';
import BottomCard from '@components/speTopic/dict/BottomCard';
import RightCard from '@components/speTopic/dict/RightCard';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {setPageInfo, DICT_PREFIX} from '@utils/pagetit';

import dictData, { DICT_DATA } from './dictData';

let t = null;
/**
 * @file 百度健康医典
 * @author xuyong08
 * @query tab=概述&title=高血压&contentid=ydxx_7725353291756410849&query=高血压&sf_ref=dict_home
 * @query tab=原因&title=头晕&contentid=ydzz_13041511171950428820&query=头晕是什么原因引起&lid=2180564322
 * @query tab=概述&title=阴道痒&contentid=ydzz_10892712430788883331&query=阴道瘙痒
 * @query tab=概述&title=阴道出血&contentid=ydzz_10815715332302777809&query=阴道出血
 * @query tab=原因&title=血压低压高&contentid=ydzz_10996416950181631658&query=低压高是怎么回事
 * @query tab=原因&title=膝关节疼痛&contentid=ydzz_10345528116836383853&query=膝盖疼痛是怎么回事
 * @query tab=治疗&title=鼻塞&contentid=ydzz_10503624626083475309&query=鼻子堵塞不通气怎么办
 * @query tab=概述&title=咳嗽&contentid=ydzz_11416314488068562897&query=咳嗽
 * @query tab=原因&title=腰痛&contentid=ydzz_10389025604300979309&query=腰部酸痛是怎么回事
 * @query tab=原因&title=头皮屑过多&contentid=ydzz_13621218979691772547&query=头皮屑多是什么原因
 */
export default {
    config: {
        navigationStyle: 'custom',
        navigationBarTextStyle: 'black'
    },
    data() {
        const systemInfoSync = getSystemInfo();
        const isInApp = getApp().globalData.isInApp;
        let isSwan = true;
        let isFull = false;
        if (process.env.MARS_ENV === 'h5') {
            isSwan = false;
        }
        if (isSwan) {
            if (
                systemInfoSync.platform.toUpperCase() === 'IOS' ||
                (systemInfoSync.platform === 'devtools' && systemInfoSync.screenHeight >= 812)
            ) {
                isFull = true;
            }
        }
        return {
            isFull: isFull,
            showDrawer: false,
            catalogue: [],
            barClass: 'transparent',
            tabFixed: false,
            isPageRender: false,
            title: '',
            contentid: '',
            topBarHeight: 0,
            env: 'swan',
            isSwan: isSwan,
            selectedIndex: 0, // 选中索引
            overviewDetail: [], // 详情
            doctorData: [], // 医生信息
            articles: [], // 相关阅读
            shareInfo4Bd: {
                title: '',
                content: '',
                imageUrl: isInApp ? 'https://med-fe.cdn.bcebos.com/bdhealth/logo/bdhealth_logo_180.png' : 'https://med-fe.cdn.bcebos.com/yd%2Fyd-share-dis.png'
            },
            scrollTop: 0, // scrollview 滚动距离
            dust: false, // 是否置灰
            showEvaluate: true,
            yidianPageBanner: [], // 运营位
            userQuestion: [],
            isUpVideoLog: false,
            videoWidth: 341,
            showLogIns: null,
            showLogClass: 'SHOW_LOG_MODULE_' + core.rand(6),
            live: {},
            yidianLiveFloat: {},
            showLiveFloat: false,
            btnTabList: [
                // type 跳转 1 分享 2  播放音频 3
                {
                    text: '首页',
                    type: 1,
                    icon: 'https://med-fe.cdn.bcebos.com/yd%2Fyd_tab_home.png',
                    url: '/pages/speTopic/dict/home/index',
                    key: 'home'
                },
                {
                    text: '反馈',
                    type: 1,
                    icon: 'https://med-fe.cdn.bcebos.com/yd%2Fyd_tab_edit.png',
                    url: '/pages/brand-sub/feedbacklist/index',
                    key: 'report'
                },
                {
                    text: '分享',
                    type: 2,
                    icon: 'https://med-fe.cdn.bcebos.com/yd%2Fyd_tab_share.png',
                    key: 'share'
                },
                {
                    text: '播放',
                    type: 3,
                    key: 'voice'
                }
            ],
            ttsIndex: -1,
            parseArray: [],
            ttsStatus: 'idle',
            topCardData: null,
            tabTop: 0,
            activeSubIndex: 0, // 视图内二级索引
            letterCount: 0,
            optionsDataA: {},
            optionsDataB: {},
            showInput: true,
            searchUrl: '',
            swiperHeight: 0,
            // oldData: {},
            tabList: [],
            isloadTabTop: false,
            speaker: '4106', // 给医典的默认的
            iconImageUrl: 'https://med-fe.cdn.bcebos.com/yd%2Fyd_tts-audio-logo-new.jpg',

            imageStart: 0,
            imageEnd: 0,
            imageLoadDuration: 0,
            curLoadCount: 0,
            sid: '',
            isInPicTab: false,
            showFab: false,
            changeTabFlag: false,
            bannerItemShowLogClass: 'bannerItemShowLogClass' + core.rand(6),
            structuredUbcShowLogClass: 'structuredUbcShowLogClass' + core.rand(6),
            notesUbcClass: 'notesUbcClass' + core.rand(6), 
            buyDrugTabUbcClass: 'buyDrugTabUbcClass' + core.rand(6),
            askTabUbcClass: 'askTabUbcClass' + core.rand(6),
            phoneTabPlayUbcClass: 'phoneTabPlayUbcClass' + core.rand(6),
            relatedEntity: null,
            setFMPrender: true,
            shareUrl: ''
        };
    },
    components: {
        BMedContainer: container,
        TopBar,
        YdDrugTab: YdDrugTab,
        CVideo: Video, // 视频
        CDirect: Direct, // 指引按钮
        CDialogue: Dialogue, // 问答
        CReference: Reference, // 参考文献
        CIcon: Icon,
        RecommendItem: RecommendItem, // 相关阅读
        CEvaluate: EvaluateCard, // 评价功能
        MedOpBanner: OpBanner,
        RightEntry: RightEntry,
        // VideoCalendar: VideoCalendar,
        // HeadLine: HeadLine,
        CParse: Parse,
        TopCard,
        BottomCard,
        RightCard,
        CIcon
    },
    created() {
        this.env = process.env.MARS_ENV;
        if (this.env !== 'swan') {
            this.btnTabList = this.btnTabList.slice(0, 3);
        }
    },
    onInit(options) {
        this.contentid = options.contentid || '';
        this.optionsDataA = Object.assign({}, options);
        this.optionsDataB = Object.assign({}, options);
        this.getPageData(this.optionsDataA);
        this.videoWidth = getSystemInfo().screenWidth - 34;
        this.upTCLog('channle_from', 'open');
        if (this.env === 'swan') {
            this.streamTTSManager = this.$api.getStreamTTSManager() || null;
            // 正在播放
            this.streamTTSManager.onPlay(res => {
                this.ttsStatus = res.ttsStatus;
                this.ttsFinished = res.finished;
                // 安卓返回的是字符串1
                this.ttsIndex = res.index * 1;
                // 第一次
                if (this.ttsIndex === 0) {
                    this.swiperNav(0, null, false);
                }
                // 当前篇播放完了
                if (
                    this.ttsIndex >= dictData.get(DICT_DATA.OLD_DATA_INDEX, [])[this.selectedIndex + 1].startTtsIndex &&
                    this.selectedIndex < this.overviewDetail.length - 1
                ) {
                    this.streamTTSManager.pause();
                    this.swiperNav(this.selectedIndex + 1);
                }
            });
            this.streamTTSManager.onPause(res => {
                this.ttsIndex = res.index * 1;
                this.ttsStatus = res.ttsStatus;
                this.ttsFinished = res.finished;
            });
            this.streamTTSManager.onStop(res => {
                this.ttsIndex = res.index * 1;
                this.ttsStatus = res.ttsStatus;
                this.ttsFinished = res.finished;
            });
            this.streamTTSManager.onEnded(res => {
                this.ttsIndex = res.index * 1;
                this.ttsStatus = res.ttsStatus;
                this.ttsFinished = res.finished;
            });
        }
    },
    onUnload() {
        if (this.showLogIns) {
            this.showLogIns.reset();
            this.showLogIns.remove();
            this.showLogIns = null;
        }
        dictData.set(DICT_DATA.TTS_ARRAY_INDEX, []);
        clearTimeout(t);
    },
    onShareAppMessage() {
        return this.shareInfo4Bd;
    },
    onPageScroll(e) {
        this.__fetchRects(e.scrollTop);
        this.$refs.topbar && this.$refs.topbar.pageScroll(e);
        this.$refs.fab && this.$refs.fab && this.$refs.fab.handleScrollDistance && this.$refs.fab.handleScrollDistance(e.scrollTop);

        this.showFab = e.scrollTop > 250;
    },
    mounted() {
        this.setFeedContainerHeight(500);
    },
    methods: {
        showTts() {
            const ttsArray = dictData.get(DICT_DATA.TTS_ARRAY_INDEX) || [];
            if (this.ttsStatus === 'idle' || this.ttsStatus === 'paused') {
                if (ttsArray.length === 0 || !ttsArray) {
                    return;
                }
                this.playTTS(this.ttsIndex);
            } else {
                this.streamTTSManager.pause();
            }
        },
        playTTS(index, delay = 500) {
            this.upTCLog('play_tts');
            // ttsStatus 播报状态，有三种返回值：playing，paused，idle（stop和end状态均返回idle）
            // 如果还未执行先清除掉之前的
            // 第一次播放
            if (t) {
                clearTimeout(t);
            }
            t = setTimeout(() => {
                this.streamTTSManager.playStream({
                    index: Number(index),
                    title: this.title,
                    context: {
                        paragraphCount: (dictData.get(DICT_DATA.TTS_ARRAY_INDEX) || []).length,
                        letterCount: this.letterCount,
                        imageUrl: 'https://med-fe.cdn.bcebos.com/yd%2Fyd_tts-audio-bg-new.png',
                        iconImageUrl: this.iconImageUrl,
                        engine: {
                            pid: '1326',
                            key: 'com.baidu.tts.medical',
                            speaker: this.speaker,
                            modelId: 'wangyige'
                        }
                    },
                    content: dictData.get(DICT_DATA.TTS_ARRAY_INDEX)
                });
            }, delay);
        },
        topbarHeightHandle(e) {
            this.topBarHeight = e;
        },
        isload(e) {
            if (e) {
                this.setFeedContainerHeight(300);
            }
        },
        setFeedContainerHeight(delay) {
            const __set = (check, oHeight) => {
                const query = this.$api.createSelectorQuery().select(`#content${this.selectedIndex}`);
                query
                    .boundingClientRect(rect => {
                        if (!rect) {
                            return;
                        }
                        const height = rect.height || {};
                        if (height) {
                            // check 第二次
                            if (check) {
                                // 设置二级标题定位
                                this.setTop();
                            }
                            if (check && Math.abs(oHeight - height) > 10) {
                                this.swiperHeight = height + 20;
                                return;
                            }
                            this.swiperHeight = height + 20;
                            !check && setTimeout(() => __set(!check, height), 500);
                        } else {
                            this.setFeedContainerHeight(500);
                        }
                    })
                    .exec();
            };

            delay ? setTimeout(__set, delay) : __set();
        },
        __fetchRects(scrollTop) {
            if (scrollTop < 22) {
                this.showInput = true;
                this.barClass = 'transparent';
                this.$api.setNavigationBarColor({
                    frontColor: '#ffffff',
                    backgroundColor: '#ffffff'
                });
            } else {
                this.showInput = false;
                this.barClass = 'white';
                this.$api.setNavigationBarColor({
                    frontColor: '#000000',
                    backgroundColor: '#ffffff'
                });
            }
            if (scrollTop >= this.tabTop - this.topBarHeight) {
                this.tabFixed = true;
            } else {
                this.tabFixed = false;
            }
            this.scrollTop = scrollTop;
        },
        handleParse(e) {
            if (this.ttsIndex !== e && this.ttsStatus !== 'idle') {
                this.playTTS(e);
            }
        },
        swiperNav(index, subIndex, checkTTS = true, thirdTitle = '') {
            if (!this.changeTabFlag) {
                this.changeTabFlag = true;
            } else {
                this.dictIndexUbcSend('ydcty_tabqiehuan');
            }
            if (this.selectedIndex !== index) {
                // 先暂停之前的视频
                if (this.env === 'swan') {
                    const videoContext = this.$api.createVideoContext('video' + this.selectedIndex);
                    videoContext.pause();
                }
                this.selectedIndex = index;
                this.activeSubIndex = 0;
                if (!this.overviewDetail[this.selectedIndex]) {
                    this.$set(this.overviewDetail, this.selectedIndex, dictData.get(DICT_DATA.OLD_DATA_INDEX, [])[this.selectedIndex]);
                }

                if (this.tabFixed) {
                    this.$api.pageScrollTo({
                        scrollTop: this.tabTop - this.topBarHeight,
                        duration: 200
                    });
                }
                // 获取swiper视图高度
                this.setFeedContainerHeight(300);

                // 图解界面渲染起始时间
                if (this.overviewDetail[this.selectedIndex].level1Tag === '图解') {
                    this.isInPicTab = true;
                    this.imageStart = Date.now();
                } else {
                    this.isInPicTab = false;
                }

                // 正在播放的情况 继续播放当前tab
                if (
                    this.ttsStatus === 'playing' &&
                    this.overviewDetail[this.selectedIndex].level1TextType !== '2' &&
                    checkTTS
                ) {
                    this.playTTS(this.overviewDetail[this.selectedIndex].startTtsIndex, 1500);
                }
                // 调用接口上报（延续之前的统计逻辑）
                request({
                    url: Conf.apiHost + '/self/medsmartappapi',
                    method: 'POST',
                    data: Object.assign(this.optionsDataA, {from: 'smartappjsona'}, {tab: this.tabList[this.selectedIndex].level1Tag}),
                    isNeedLogin: false,
                    isFirstScreen: false,
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    }
                });
            }
            // 目录点击了一级标题但是目前在此一级标题下
            if (index === this.selectedIndex && !subIndex) {
                this.activeSubIndex = 0;
                if (this.tabFixed) {
                    this.$api.pageScrollTo({
                        scrollTop: this.tabTop - this.topBarHeight,
                        duration: 200
                    });
                }
            }
            // 二级定位
            if (subIndex || subIndex === 0) {
                if (!this.tabFixed) {
                    this.$api.pageScrollTo({
                        scrollTop: this.tabTop - this.topBarHeight,
                        duration: 0
                    });
                }
                let subTitle = this.catalogue[index].children[subIndex].subtitle;
                let level1NodeH2 = this.overviewDetail[this.selectedIndex].level1NodeH2;
                if (level1NodeH2 && level1NodeH2.length > 0) {
                    this.$api.hideLoading();
                    // 已经计算好二级标题高度的数据
                    for (let i = 0; i < level1NodeH2.length; i++) {
                        if (level1NodeH2[i].children && level1NodeH2[i].children[0] && level1NodeH2[i].children[0].text && level1NodeH2[i].children[0].text.replace(/\s+/g, '') === subTitle) {
                            this.$api.pageScrollTo({
                                scrollTop: level1NodeH2[i].top,
                                duration: 200
                            });
                            return;
                        }
                    }
                } else {
                    // 还没计算好的 设置二级标题定位
                    setTimeout(() => {
                        this.swiperNav(index, subIndex);
                    }, 700);
                    this.$api.showLoading({
                        title: '正在定位中...',
                        mask: false,
                        success: () => {},
                        fail: err => {}
                    });
                }
            } else if (thirdTitle) {
                let level1NodeH3 = this.overviewDetail[this.selectedIndex].level1NodeH3;
                if (level1NodeH3 && level1NodeH3.length > 0) {
                    this.$api.hideLoading();
                    // 已经计算好二级标题高度的数据
                    for (let i = 0; i < level1NodeH3.length; i++) {
                        let thirdText = '';
                        // 超链接多一个层级
                        if (level1NodeH3[i].children[0].children && level1NodeH3[i].children[0].children[0].text) {
                            thirdText = level1NodeH3[i].children[0].children[0].text;
                        } else {
                            thirdText = level1NodeH3[i].children[0].text;
                        }
                        if (thirdText.replace(/\s+/g, '') === thirdTitle) {
                            this.$api.pageScrollTo({
                                scrollTop: level1NodeH3[i].top,
                                duration: 200
                            });
                            return;
                        }
                    }
                } else {
                    // 还没计算好的 设置二级标题定位
                    setTimeout(() => {
                        this.swiperNav(index, null, true, thirdTitle);
                    }, 700);
                    this.$api.showLoading({
                        title: '正在定位中...',
                        mask: false,
                        success: () => {},
                        fail: err => {}
                    });
                }
            }
        },
        // 打开窗口根据当前距离顶部高度判断二级高亮
        openDrawer() {
            this.dictIndexUbcSend('ydcty_mulu');
            this.upTCLog('open_drawer');
            let level1NodeH2 = this.overviewDetail[this.selectedIndex].level1NodeH2;
            let scrollTop = this.scrollTop + 1;
            if (level1NodeH2) {
                for (let i = 0; i < level1NodeH2.length; i++) {
                    if (scrollTop >= level1NodeH2[i].top) {
                        if (i === level1NodeH2.length - 1) {
                            if (scrollTop >= level1NodeH2[i].top) {
                                this.activeSubIndex = i;
                                return;
                            }
                        } else {
                            if (scrollTop < level1NodeH2[i + 1].top) {
                                this.activeSubIndex = i;
                                return;
                            }
                        }
                    }
                }
            }
        },
        onTapA(e, attrs) {
            if (attrs.from === 'yd' && attrs.href) {
                navigate({url: attrs.href});
            }
            this.upTCLog('highlightA');
        },
        closeEntry(e) {
            if (e) {
                this.yidianLiveFloat = {};
                this.showLiveFloat = false;
            }
        },
        playVideo(e) {
            this.dictIndexUbcSend('ydcty_jiegouhuashipin');
            if (!this.isUpVideoLog) {
                this.isUpVideoLog = true;
                this.upTCLog('yd_video_play_dis');
            }
        },
        upTCLog(module, action = 'click') {
            send({
                type: 't',
                action: action,
                extra: Object.assign({
                    module: module,
                    contentid: this.optionsDataA.contentid,
                    from: this.optionsDataA.from,
                    ref: this.optionsDataA.sf_ref
                })
            });
        },
        setEvaluate(obj) {
            // 处理数据满足rd
            let existVideo = this.overviewDetail[this.selectedIndex].videoData ? 1 : 0;
            let existPicture = this.overviewDetail[this.selectedIndex].level1Html.indexOf('img') > -1 ? 1 : 0;
            Object.assign(
                obj,
                {existVideo: existVideo},
                {existPicture: existPicture},
                {contentid: this.contentid},
                {tab: this.optionsDataA[this.selectedIndex].text},
                {entryName: this.title}
            );
            request({
                url: Conf.apiHost + '/med/page/jp/yidian/saveuserquestionsurvey',
                method: 'POST',
                data: Object.assign(
                    obj,
                    {contentid: this.contentid},
                    {tab: this.optionsDataA[this.selectedIndex].text}
                ),
                isNeedLogin: false,
                isFirstScreen: false,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            });
        },
        closeEvaluate(e) {
            if (e) {
                this.showEvaluate = false;
            }
        },
        // 获取页面信息
        getPageData() {
            request({
                url: Conf.apiHost + '/self/medsmartappapi',
                method: 'POST',
                data: Object.assign(this.optionsDataA, {from: 'smartappjsona'}),
                isNeedLogin: false,
                isFirstScreen: true,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            })
                .then(res => {
                    let data = res && res.data;
                    this.title = data.title;
                    this.searchUrl = data.searchUrl;
                    this.doctorData = res.data.doctor;
                    this.catalogue = data.catalogue;
                    dictData.set(DICT_DATA.OLD_DATA_INDEX, data.overview.level1Data);
                    this.sid = data.overview.sid || '0';
                    this.relatedEntity = data.relatedEntity;
                    this.shareUrl = data.shareUrl || '';

                    getApp().globalData.sid = data.overview.sid || '';

                    setPageInfo({title: DICT_PREFIX + this.title});
                    // 设置tts数据
                    if (this.doctorData && this.doctorData.length > 0 && this.isSwan) {
                        if (this.doctorData[0].ttsVoiceId) {
                            this.speaker = this.doctorData[0].ttsVoiceId;
                            this.iconImageUrl = this.doctorData[0].docImg;
                        }
                    }
                    this.isSwan && this.setTtsData();
                    let oneIndex = 0;
                    dictData.get(DICT_DATA.OLD_DATA_INDEX, []).forEach((item, index) => {
                        this.tabList.push({level1Tag: item.level1Tag});
                        if (item.level1Tag === this.optionsDataA.tab) {
                            oneIndex = index;
                        }
                        this.overviewDetail.push('');
                    });
                    this.overviewDetail[oneIndex] = dictData.get(DICT_DATA.OLD_DATA_INDEX, [])[oneIndex];
                    // 一级锚点
                    this.swiperNav(oneIndex);
                    let lineList = [];
                    res.data.alias &&
                        lineList.push({
                            title: '别名',
                            value: Array.isArray(res.data.alias) ? res.data.alias.join('、') : res.data.alias
                        });
                    res.data.departments &&
                        lineList.push({
                            title: '就诊科室',
                            value: Array.isArray(res.data.departments)
                                ? res.data.departments.join('、')
                                : res.data.departments
                        });
                    let organizationList = [];
                    res.data.academicSupports &&
                        organizationList.push({
                            title: '学术支持',
                            organization: res.data.academicSupports.academicSupport,
                            name: res.data.academicSupports.academicSupport[0].name
                        });
                    this.topCardData = {};
                    Object.assign(
                        this.topCardData,
                        {name: this.title},
                        {lineList: lineList},
                        {doctor: res.data.doctor},
                        {organizationList: organizationList}
                    );
                    this.shareInfo4Bd.title = this.title + ' - 百度健康医典';
                    this.shareInfo4Bd.content = '点击查看更多「' + this.title + '」相关权威科普知识';
                    if (res.data.feedbackUrl && this.btnTabList.length) {
                        this.btnTabList[1].url = res.data.feedbackUrl;
                    }
                    if (data.dust && data.dust !== null) {
                        this.dust = true;
                    }
                    // 打开骨架屏
                    if (this.env === 'h5') {
                        shareBdBox(this.shareInfo4Bd);
                    } else {
                        this.$mp.scope.removeSkeleton();
                    }
                    this.isPageRender = true;
                    setTimeout(() => {
                        // 确定tab的位置
                        this.$api
                            .createSelectorQuery()
                            .select('#yd-tabs')
                            .boundingClientRect(data => {
                                if (data && data.top) {
                                    this.tabTop = data.top;
                                } else {
                                    this.tabFixed = false;
                                }
                                // 计算完高度才可以滑动
                                this.isloadTabTop = true;
                            })
                            .exec();
                    }, 300);
                    res.update.call(this, () => {
                        this.setFMPrender = false;
                        this.$mpUpdated(() => {
                            if (this.optionsDataA.thirdTab) {
                                // 三级锚点
                                this.swiperNav(oneIndex, null, true, this.optionsDataA.thirdTab);
                            } else if (this.optionsDataA.subTab) {
                                // 二级锚点
                                for (let i = 0; i < this.catalogue[oneIndex].children.length; i++) {
                                    let nodeData = this.catalogue[oneIndex].children[i];
                                    if (nodeData.title === this.optionsDataA.subTab) {
                                        this.swiperNav(oneIndex, i);
                                        return;
                                    }
                                }
                            }
                            this.getArticlesData(this.optionsDataB);
                            const collectLogDotInfos = [
                                {signClass: this.bannerItemShowLogClass, value: 'ydcty_banner1'},
                                {signClass: this.showLogClass, value: 'ydcty_xiangguanyuedu1'},
                                {signClass: this.structuredUbcShowLogClass, value: 'ydcty_jiegouhuashipin1'},
                                {signClass: this.notesUbcClass, value: 'ydcty_zhushi1'},
                                {signClass: this.buyDrugTabUbcClass, value: 'ydcty_shangyehuagouyao1'},
                                {signClass: this.askTabUbcClass, value: 'ydcty_shangyehuawenzhen1'},
                                {signClass: this.phoneTabPlayUbcClass, value: 'ydcty_shangyehuadianhua1'},
                            ];
                            for (let i = 0, length = collectLogDotInfos.length; i < length; i++){
                                new CollectLog({
                                    SIGN: collectLogDotInfos[i].signClass,
                                    sendCallback:(contentid)=>{
                                        ubcSend({
                                            type: 'view',
                                            value: collectLogDotInfos[i].value,
                                            page: 'pages/speTopic/dict/index',
                                            ext:{
                                                value_id: contentid || ''
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    });
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // B区接口
        getArticlesData() {
            request({
                url: Conf.apiHost + '/self/medsmartappapi',
                method: 'POST',
                data: Object.assign(this.optionsDataB, {from: 'smartappjsonb'}),
                isNeedLogin: false,
                isFirstScreen: false,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            })
                .then(res => {
                    let data = res && res.data;
                    res.data.articles.forEach(item => {
                        if (item.author && item.author.imgUrl) {
                            item.author.imgUrl =
                                this.getImgUrl(item.author.imgUrl) + '?x-bce-process=image/resize,m_lfit,w_100,h_100';
                        }
                        if (item.imgUrl) {
                            item.imgUrl = this.getImgUrl(item.imgUrl) + '?x-bce-process=image/resize,m_lfit,w_200';
                        }
                    });
                    // 文章列表
                    if (data.articles.length) {
                        this.articles = res.data.articles;
                    }
                    // banner
                    if (res.data.yidianPageBanner.length) {
                        this.yidianPageBanner = res.data.yidianPageBanner;
                    }
                    // ufo评价
                    if (res.data.userQuestion) {
                        this.userQuestion = res.data.userQuestion;
                    }
                    // 直播日历
                    if (data.live && data.live.list) {
                        this.live = res.data.live;
                        this.live.list.forEach(element => {
                            let date = element.date.split('/');
                            element.formatDate = date[1] + '/' + date[2];
                        });
                    }
                    // 直播引导浮窗
                    if (data.yidianLiveFloat && data.yidianLiveFloat.title) {
                        this.showLiveFloat = true;
                        this.yidianLiveFloat = data.yidianLiveFloat;
                        if (this.yidianLiveFloat.isStrong * 1 === 1) {
                            setTimeout(() => {
                                this.$set(this.yidianLiveFloat, 'isStrong', 0);
                            }, 5000);
                        }
                    }
                    res.update.call(this, () => {
                        try {
                            this.showLogIns = new ShowLog();
                            this.showLogIns.SIGN = '.' + this.showLogClass;
                            this.showLogIns.init();
                        } catch (error) {
                            console.error(error);
                        }
                    });
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 图片url截取
        getImgUrl(url) {
            if (url.indexOf('png') > 0) {
                url = url.substring(0, url.indexOf('png')) + 'png';
            } else if (url.indexOf('jpg') > 0) {
                url = url.substring(0, url.indexOf('jpg')) + 'jpg';
            } else if (url.indexOf('jpeg') > 0) {
                url = url.substring(0, url.indexOf('jpeg')) + 'jpeg';
            } else if (url.indexOf('JPEG') > 0) {
                url = url.substring(0, url.indexOf('JPEG')) + 'JPEG';
            }
            return url;
        },
        // 左右滑动
        swiperChange(e) {
            if (e.detail.source === 'touch') {
                this.swiperNav(e.detail.current);
            }
        },

        // 跳转
        tapUrl(url) {
            url && navigate({url: url, extra: {mod: 'goYdHome'}});
        },

        setTop() {
            // 避免多次修改数据
            if (this.overviewDetail[this.selectedIndex].level1NodeH2) {
                return;
            }
            // 格式化H2数据
            let level1NodeH2 = [];
            // 格式化H3数据
            let level1NodeH3 = [];
            let level1Node = this.overviewDetail[this.selectedIndex].level1Node;
            level1Node.forEach((parseItem, parseIndex) => {
                // 处理parse节点高度
                if (parseItem.name === 'h2' || parseItem.name === 'h3') {
                    this.$api
                        .createSelectorQuery()
                        .select(`#parseOut${this.selectedIndex} #parse${parseIndex}`)
                        .boundingClientRect(data => {
                            if (data) {
                                // 吸顶之后顶部高度需要增加 非tabFixed 定位没问题
                                parseItem.top = this.tabFixed
                                    ? data.top +
                                        this.topBarHeight +
                                        53 -
                                        (this.isFull ? 63 : 0) +
                                        (this.isSwan ? 0 : 30)
                                    : data.top - this.topBarHeight - 53;
                                if (parseItem.name === 'h2') {
                                    level1NodeH2.push(parseItem);
                                } else if (parseItem.name === 'h3') {
                                    level1NodeH3.push(parseItem);
                                }
                            }
                        })
                        .exec();
                }
            });
            this.overviewDetail[this.selectedIndex].level1NodeH2 = level1NodeH2;
            this.overviewDetail[this.selectedIndex].level1NodeH3 = level1NodeH3;
        },
        // 递归遍历parse数据
        traverseParse(array) {
            array.forEach(item => {
                if (item.children) {
                    this.traverseParse(item.children);
                } else {
                    if (item.type === 'text' && item.text) {
                        this.parseArray.push(item.text);
                    }
                }
            });
        },
        setTtsData() {
            // 处理tts 要播报的数据
            dictData.get(DICT_DATA.OLD_DATA_INDEX, []).forEach((item, index) => {
                item.startTtsIndex = dictData.get(DICT_DATA.TTS_ARRAY_INDEX, []).length;
                // 处理li 数据
                if (item.level1TextType === '1' && item.level1Text) {
                    item.level1Text.forEach((liItem, liIndex) => {
                        const liItemTts = dictData.get(DICT_DATA.TTS_ARRAY_INDEX, []);
                        liItemTts.push({
                            data: liItem,
                            type: 'text',
                            index: dictData.get(DICT_DATA.TTS_ARRAY_INDEX, []).length
                        });
                        dictData.set(DICT_DATA.TTS_ARRAY_INDEX, liItemTts);
                    });
                }
                // 处理parse数据
                item.level1Node.forEach((parseItem, parseIndex) => {
                    if (parseItem.children) {
                        // 数据打入ttsIndex标识
                        const parseItemTts = dictData.get(DICT_DATA.TTS_ARRAY_INDEX, []);
                        parseItem.ttsIndex = parseItemTts.length;
                        this.traverseParse(parseItem.children);
                        if (this.parseArray.join('')) {
                            parseItemTts.push({
                                data: this.parseArray.join(''),
                                type: 'text',
                                index: dictData.get(DICT_DATA.TTS_ARRAY_INDEX, []).length
                            });
                            dictData.set(DICT_DATA.TTS_ARRAY_INDEX, parseItemTts);
                        }
                        this.parseArray = [];
                    }
                });
                // 处理问答数据
                if (item.questions && Array.isArray(item.questions)) {
                    item.questions.forEach((quItem, quIndex) => {
                        // 数据打入ttsIndex标识
                        const quItemTts = dictData.get(DICT_DATA.TTS_ARRAY_INDEX, []);
                        quItem.ttsIndex = quItemTts.length;
                        let questWords = quItem.question + quItem.answer;
                        quItemTts.push({
                            data: questWords,
                            type: 'text',
                            index: dictData.get(DICT_DATA.TTS_ARRAY_INDEX, []).length
                        });
                        dictData.set(DICT_DATA.TTS_ARRAY_INDEX, quItemTts);
                        this.letterCount += questWords.length;
                    });
                }
            });
            dictData.get(DICT_DATA.TTS_ARRAY_INDEX, []).forEach(item => {
                this.letterCount += item.data.length;
            });
        },
        sendLongPicLoadTime(duration) {
            sendWebb(
                {
                    group: WEBB_GROUP.PAGE,
                    dim: {
                        sid: this.sid
                    },
                    info: {
                        lp: duration
                    }
                }
            );
        },
        // 长图实验
        imageOnload($event, item) {
            this.imageEnd = Date.now();
            let duration = 0;
            duration = this.imageEnd - this.imageStart;
            if (this.sid === 178296) {
                this.isInPicTab && this.sendLongPicLoadTime(duration);
            } else if (this.sid === 178295) {
                if (item && item.index <= 2) {
                    this.curLoadCount++;
                    if (duration >= this.imageLoadDuration) {
                        this.imageLoadDuration = duration;
                    }
                    if (this.curLoadCount === 3) {
                        this.isInPicTab && this.sendLongPicLoadTime(this.imageLoadDuration);
                    }
                }
            }
        },
        bottomTabChange(text) {
            let valueOfTabText = '';
            switch (text){
                case '首页':
                    valueOfTabText = 'ydcty_dibushouye';
                    break;
                case '反馈':
                    valueOfTabText = 'ydcty_dibufankui';
                    break;
                case '分享':
                    valueOfTabText = 'ydcty_dibufenxinag';
                    break;
                case '播放':
                    valueOfTabText = 'ydcty_dibubofang';
                    break;
                default:
                    valueOfTabText = '';
                    break;
            }
            this.dictIndexUbcSend(valueOfTabText);
        },
        bottomPayTab(payTabType) {
            let dotValue = '';
            switch (payTabType){
                case 'buydrug':
                    dotValue = 'ydcty_shangyehuagouyao';
                    break;
                case 'ask':
                    dotValue = 'ydcty_shangyehuawenzhen';
                    break;
                case 'phone':
                    dotValue = 'ydcty_shangyehuadianhua';
                    break;
                default:
                    dotValue = '';
                    break;
            }
            this.dictIndexUbcSend(dotValue);
        },
        dictIndexUbcSend(dotValue) {
            const contentid = this.contentid;
            ubcSend({
                type: 'clk',
                value: dotValue,
                page: 'pages/speTopic/dict/index',
                ext: {
                    value_id: contentid
                }
            });
        },
        clickAlias() {
            if (this.relatedEntity && this.relatedEntity.url) {
                navigate({
                    url: this.relatedEntity.url,
                    log: {
                        type: 'clk',
                        value: 'relatedEntity',
                    }}
                );
            }
        }
    }
};
</script>
<style lang="less" scoped>
.dust {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);       
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
.fmp-height {
    min-height: 30vh;
}
.load-Tab-Top {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
}
.dict {
    width: 100%;
    background: linear-gradient(134deg, #00cfa3 0%, #00d3ea 100%) no-repeat top;
    background-size: 100% 210px;
    position: relative;
    .tabs-fixed {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 100;
    }
    .yd-tabs {
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.04);
    }
    .alias-card {
        width: calc(100% - 15px);
        margin: 0 auto;
        margin-bottom: .1rem;
        height: .44rem;
        background: #fff;
        border-radius: 8px 8px;
        padding: 0 13px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        color: #1f1f1f;
        .alias {
            flex: 1;
            padding-right: .17rem;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .icon {
            color: #666;
            line-height: 1;
        }
    }
}
.dict-write {
    position: absolute;
    left: 0;
    top: 110px;
    background: linear-gradient(180deg, rgba(245, 246, 250, 0) 0%, #f5f6fa 100%);
    width: 100%;
    height: 100px;
    background-size: 100% 100%;
}
.dict-content {
    background: #fff;
    &.fmp-height {
        min-height: 70vh;
    }
}
.canon-medcine {
    display: block;
    background: #f5f5f5;

    .bk_fix_nav {
        position: fixed;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 201;
    }

    .bk_navs {
        border-bottom: 1px solid #eee;
        z-index: 203;
    }

    &-wrap {
        &-pic {
            margin-top: 20px;
            .gratitude {
                margin: 0 17px;
            }
        }
        .summary-wrap {
            margin-top: 20px;
            color: #333;
            &-list {
                position: relative;
                padding-left: 15px;
                line-height: 31px;
                font-size: 15px;
                &:before {
                    content: '';
                    position: absolute;
                    top: 15px;
                    left: 0;
                    width: 6px;
                    height: 6px;
                    transform: translateY(-50%);
                    border-radius: 50%;
                    background: #00c8c8;
                }
            }
        }
    }

    .gratitude {
        font-family: 'PingFangSC-Regular';
        font-size: 14px;
        color: #999;
        letter-spacing: 0;
        line-height: 24px;
        padding-bottom: 21px;
        &-icon {
            color: #999;
            margin-right: 7px;
        }
    }

    .interval {
        width: 100%;
        height: 10px;
        background: #f5f5f5;
    }

    .articles-title {
        padding: 20px 17px 15px;
        color: #333;
        letter-spacing: 0;
        font-family: 'PingFangSC-Regular';
        font-size: 20px;
        line-height: 20px;
        font-weight: bold;
    }

    .spread-wrap {
        width: 100%;
        padding: 16px 0;
        text-align: center;
        font-size: 13px;
        line-height: 13px;
        color: #555;
    }

    .mentions-wrap {
        padding: 10px 0 80px;
        font-family: 'PingFangSC-Regular';
        font-size: 13px;
        color: #999;
        text-align: center;
        line-height: 20px;
    }

    .evaluate-wrap {
        padding: 30px 17px;
    }
}
</style>
