<template>
    <b-med-container
        :title="title"
    >
        <c-page-loading v-if="loading" :z-index="2"></c-page-loading>
        <view v-if="!videoData.url" class="yd-logo">
            <b-img
                :src="ydLogo"
                width="101px"
                height="19px"
                :isRound="false"
                :hackWhiteStroke="false">
            </b-img>
        </view>
        <c-video
            v-if="videoData.url"
            :hasRadius="hasRadius"
            :videoData="videoData"
            :fullWith="fullWith"
            :isAuto="isAuto">
        </c-video>
        <view class="articles-wrap">
            <view v-if="mainTitle" class="articles">
                <view v-if="mainTitle" class="articles-main-title">{{ mainTitle }}</view>
                <view v-if="readNum" class="articles-sub-title">
                    <text>{{ readNum }}人阅读</text>
                </view>
            </view>
            <view v-if="doctorAuthor.name" class="doctor-wrap">
                <view class="doctor-wrap-img">
                    <b-img
                        :src="doctorAuthor.portrait"
                        width="35px"
                        height="35px"
                        has-border>
                    </b-img>
                </view>
                <view class="doctor-wrap-msg">
                    <view v-if="doctorAuthor.name" class="doctor-name">{{ doctorAuthor.name }}</view>
                    <view class="doctor-title">
                        <text v-if="doctorAuthor.orgnization && doctorAuthor.title" class="c-gap-right">{{ doctorAuthor.orgnization }}</text>
                        <text v-if="doctorAuthor.title" class="c-gap-right">{{ doctorAuthor.title }}</text>
                        <text v-if="doctorAuthor.department && doctorAuthor.title" class="c-gap-right">{{ doctorAuthor.department }}</text>
                        <text v-if="doctorAuthor.description && !doctorAuthor.title" class="c-gap-right">{{ doctorAuthor.description }}</text>
                    </view>
                </view>
            </view>
            <view v-if="detailHtml" class="detail-cont">
                <c-detail
                    :detailData="detailHtml"
                >
                </c-detail>
            </view>
            <view
                v-if="date"
                class="date">
                <text class="date-text c-gap-right">发布时间 {{ date }}</text>
            </view>
            <view
                v-if="correlation.length"
                class="correlation"
            >
                <text class="c-gap-right-large">相关疾病:</text>
                <b-navigate
                    v-for="(item, index) in correlation"
                    :key="index"
                    :url="item.url"
                >
                    <text
                        class="correlation-label c-gap-right"
                    >{{ item.name }}</text>
                </b-navigate>
            </view>
            <view v-if="articles.length" class="interval"></view>
            <view v-if="articles.length">
                <view class="articles-title">相关阅读</view>
                <recommend-item
                    v-for="(article, index) in articles"
                    :top-line="articles ? true : false"
                    :bottom-line="true"
                    :key="index"
                    :title="article.title || ''"
                    :doctor="{
                        name: article.author.title || '',
                        rank: article.author.docTitle || '',
                        label: article.author.tag || '',
                        hospital: article.author.hospital || '',
                        image: article.author.imgUrl || '',
                        intro: article.author.intro || ''
                    }"
                    :duration="article.duration || ''"
                    page="pageArticles"
                    :image="article.imgUrl"
                    :url="article.url"
                    :module="'subpage-nav-content-' + (selectedIndex + 1)"
                />
                <view v-if="!hasMore" class="spread-wrap">
                    <text>更多专业内容，持续更新中</text>
                </view>
            </view>
        </view>
        <view class="mentions-wrap">
            <view>
                <text>百度健康医典内容仅供医学知识科普使用</text>
            </view>
            <view>
                <text>不能替代专业诊疗意见，具体决策请遵医嘱</text>
            </view>
        </view>
    </b-med-container>
</template>

<script>
/**
* @file 百科医典相关阅读落地页
* @author xuyong08
*/
import container from '../../../components/common/container';
import pageloading from '../../../components/common/pageloading';
import Icon from '@baidu/med-ui/components/Icon/Icon';
import bkVideo from '../../../components/speTopic/bk/bk-video';
import bkDetail from '../../../components/speTopic/bk/bk-detail';
import RecommendItem from '../../../components/speTopic/Recommend/RecommendItem';
import Image from '../../../components/common/image';
import Navigate from '../../../components/common/navigate';
import {shareBdBox} from '../../../utils/share';

import * as Conf from '../../../utils/conf';
import {request} from '../../../utils/request';
import {navToH5} from '../../../utils/navigate';

export default {
    data() {
        return {
            pageDataApi: '/asmallpro', // 文章接口api
            articlesApi: '/self/medsmartappapi', // 相关阅读接口api
            preview: '',
            ydLogo: 'https://sari.cdn.bcebos.com/sari_pic%2F%E5%8C%BB%E5%85%B8logo.png',
            title: '百度健康医典',
            curartid: '',
            diseaseId: '',
            env: 'swan',
            loading: true,
            isAuto: false,
            hasRadius: false,
            fullWith: true,
            videoData: {},
            mainTitle: '',
            date: '',
            readNum: '',
            doctorAuthor: {},
            doctorData: '',
            detailHtml: '',
            correlation: [],
            articles: [], // 相关阅读
            pn: 0, // 相关阅读分页
            hasMore: true, // 是否有更多
            shareInfo4Bd: {
                title: '',
                content: '',
                imageUrl: 'https://med-fe.cdn.bcebos.com/yd%2Fyd-share-dis.png'
            }
        };
    },
    components: {
        'b-med-container': container,
        'c-page-loading': pageloading,
        'c-video': bkVideo, // 视频
        'c-detail': bkDetail, // 详情
        'c-icon': Icon,
        'b-img': Image,
        'recommend-item': RecommendItem, // 相关阅读
        'b-navigate': Navigate
    },
    onReady() {
        this.env = process.env.MARS_ENV;
    },
    onLoad(options) {
        this.curartid = options.contentid || '';
        this.diseaseId = options.diseaseId || '';
        this.preview = options.preview ? parseInt(options.preview, 10) : '';
        this.getPageData(options);
        this.getArticlesData(options);
    },
    mounted() {
        if (this.env === 'swan') {
            swan.getNetworkType({
                success: res => {
                    if (res.networkType === 'wifi') {
                        this.isAuto = true;
                    }
                },
                fail: err => {
                }
            });
        }
    },
    onShareAppMessage() {
        return this.shareInfo4Bd;
    },
    onReachBottom() {
        this.articlesHandleTap();
    },
    methods: {
        getPageData(options) {
            let self = this;

            request({
                url: Conf.apiHost + this.pageDataApi,
                method: 'POST',
                data: Object.assign({}, {
                    originalUrl: options.originalUrl || '',
                    contentid: options.contentid || '',
                    preview: this.preview
                }),
                isFirstScreen: true,
                isNeedLogin: false,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            })
            .then(res => {
                let data = res && res.data;
                let article = data && data.article;
                self.mainTitle = article.title || '';
                self.shareInfo4Bd.title = self.mainTitle + ' - 百度健康医典';
                self.shareInfo4Bd.content = '点击进入百度健康医典，查看权威健康科普知识';
                if (process.env.MARS_ENV === 'h5') {
                    shareBdBox(this.shareInfo4Bd);
                }
                self.date = article.date || '';
                self.readNum = article.readNum || '';
                self.doctorAuthor = article.author || {};
                self.detailHtml = article.content || '';
                self.correlation = article.entity || [];
                self.videoData = article.video || {};
                res.update.call(self);
                setTimeout(() => {
                    self.loading = false;
                }, 300);
            }).catch(err => {
                self.loading = false;
            });
        },

        // 相关阅读
        getArticlesData(options) {
            let self = this;
            request({
                url: Conf.apiHost + this.articlesApi,
                method: 'POST',
                data: Object.assign({}, {
                    contentid: options.diseaseId || self.diseaseId, // 疾病id
                    curartid: options.contentid || self.curartid, // 当前文章id
                    from: 'smartappjsonb',
                    pn: options.pn || 0,
                    rn: 5,
                    preview: this.preview
                }),
                isFirstScreen: true,
                isNeedLogin: false,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            })
            .then(res => {
                let data = res && res.data;

                if (data.hasMore === '0') {
                    this.hasMore = false;
                }
                self.articles = self.articles.concat(data.articles);
                res.update.call(self);
            }).catch(err => {
                self.loading = false;
            });
        },

        // 跳转
        tapUrl(url) {
            url && navToH5(url);
        },

        // 相关阅读更多
        articlesHandleTap() {
            if (!this.hasMore) {
                return false;
            }
            this.pn = this.pn + 10;
            this.getArticlesData({
                pn: this.pn
            });
        }
    }
};
</script>
<style lang="less" scoped>

.yd-logo {
    padding: 16px 0 0 17px;
}

.articles-wrap {

    .articles {
        padding: 18px 17px;

        &-main-title {
            font-size: 24px;
            color: #333;
            line-height: 30px;
            font-family: 'PingFangSC-Semibold';
        }

        &-sub-title {
            font-size: 13px;
            color: #999;
            padding-top: 10px;
            line-height: 13px;
            font-family: 'PingFangSC-Regular';
        }
    }

    .doctor-wrap {
        display: flex;
        align-items: flex-start;
        padding: 0 17px 12px;
        font-family: 'PingFang-SC-Regular';

        .doctor-wrap-img {
            margin-right: 10px;
        }

        .doctor-name {
            font-size: 16px;
            color: #000;
            line-height: 18px;
        }

        .doctor-title {
            font-size: 13px;
            color: #999;
            line-height: 18px;
            margin-top: 3px;
        }
    }

    .detail-cont {
        padding: 0 17px;
    }

    .correlation {
        display: flex;
        padding: 0 17px;
        margin: 14px 0 26px;
        font-size: 14px;
        color: #999;
        font-family: 'PingFang-SC-Regular';

        &-label {
            padding: 5px 10px;
            font-size: 14px;
            color: #00C8C8;
            background: #f8f8f8;
            border-radius: 15px;
        }
    }

    .date-text {
        font-size: 14px;
        color: #999;
        padding: 0 17px;
    }

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

    .articles-title {
        padding: 20px 17px 15px;
        color: #333;
        letter-spacing: 0;
        font-family: 'PingFang-SC-Medium';
        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;
    background: #FBFBFB;
    font-family: 'PingFangSC-Regular';
    font-size: 13px;
    color: #999;
    text-align: center;
    line-height: 20px;
}
</style>