<!--
 * @Description: 科普专题
 * @Author: yantingxi
 * @Date: 2019-08-20 14:12:36
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-02-23 14:09:31
 -->
<template>
    <med-container hide-header>
        <custom-header
            ref="customHeaderRef"
            :title="title"
            :view="view"
            :background="background"
            bar-title=" "
        />
        <view
            v-if="dataReady"
            class="science-popular fadein"
        >
            <view class="science-popular-content">
                <view
                    v-if="brief"
                    class="science-popular-overview"
                    @tap="onOverviewClick"
                >
                    <view
                        v-if="brief.title"
                        class="science-popular-overview-title c-gap-top-large"
                    >{{ brief.title }}</view>
                    <view
                        v-if="brief.content && brief.content[0]"
                        class="science-popular-overview-content c-gap-top"
                    >
                        <view
                            v-for="(text, index) in brief.content"
                            :key="index"
                            :class="{
                                'c-line-clamp4': brief.content.length === 1,
                                'science-popular-overview-content-point': brief.content.length > 1,
                                'c-line-clamp1': brief.content.length > 1
                            }"
                        > {{ text }} </view>
                    </view>
                    <show-more v-if="detail_url"/>
                </view>

                <view v-if="hot_articles && hot_articles.articles" class="science-popular-hot-article">
                    <view
                        v-if="hot_articles.label"
                        class="science-popular-hot-article-title"
                    >{{ hot_articles.label }}</view>
                    <view
                        v-if="hot_articles.articles && hot_articles.articles.length > 0"
                        class="science-popular-hot-article-articles"
                    >
                        <recommend-item
                            v-for="(article, index) in hot_articles.articles"
                            :key="index"
                            :title="article.title"
                            :doctor="{
                                name: article.doctor,
                                rank: article.information,
                                label: article.hospi_level,
                                hospital: article.hospital,
                                image: article.portrait
                            }"
                            :image="article.imageUrl"
                            :url="article.url"
                            :module="'science-popular-hot-article-' + (index + 1)"
                        />
                    </view>
                </view>

                <view v-if="topics && topics.length > 0" class="science-popular-topics">
                    <view
                        v-for="(topic, topicIndex) in topics"
                        :key="topicIndex"
                        class="c-gap-top-ll science-popular-topics-item"
                    >
                        <b-navigate
                            :url="topic.url"
                            :extra="{
                                mod: 'science-popular-topics-header-' + topicIndex
                            }"
                        >
                            <view
                                :style="{
                                    'background-image': 'url(' + topic.background + ')'
                                } | imgCompress('background-image', {column: 12})"
                                class="science-popular-topics-header"
                            >
                                <view class="science-popular-topics-header-title c-line-clamp2">
                                    <!-- eslint-disable max-len -->
                                    <view
                                        class="science-popular-topics-header-icon c-gap-right-small m-icon m-icon-spetopicicon"
                                    ></view>
                                    <!-- eslint-enable max-len -->
                                    <text>{{ topic.title }}</text>
                                </view>
                                <view class="science-popular-topics-header-masking"></view>
                            </view>
                        </b-navigate>
                        <view
                            v-if="topic.articles && topic.articles.length > 0"
                            class="science-popular-hot-article-articles"
                        >
                            <!-- eslint-disable max-len -->
                            <recommend-item
                                v-for="(article, articleIndex) in topic.articles"
                                :key="articleIndex"
                                :title="article.title"
                                :doctor="{
                                    name: article.doctor,
                                    rank: article.information,
                                    label: article.hospi_level,
                                    hospital: article.hospital,
                                    image: article.portrait
                                }"
                                :image="article.imageUrl"
                                :url="article.url"
                                :module="'science-popular-topics-' + (topicIndex + 1) + '-recommend-' + (articleIndex + 1)"
                            />
                            <!-- eslint-enable max-len -->
                        </view>
                        <b-navigate
                            v-if="topic.more"
                            :url="topic.url"
                            :extra="{
                                mod: 'science-popular-topics-footer-' + topicIndex
                            }"
                        >
                            <view class="science-popular-topics-footer">
                                <view class="c-line-top science-popular-topics-footer-line"></view>
                                <view class="science-popular-topics-footer-text">
                                    <view>剩余{{ topic.more }}篇内容</view>
                                    <view>
                                        <c-icon name="right" font-size="14px"/>
                                    </view>
                                </view>
                            </view>
                        </b-navigate>
                    </view>
                </view>
            </view>
            <view class="science-popular-bottom"></view>
        </view>
    </med-container>
</template>
<script>
/**
* @file 科普专题
* @author yantingxi
*/

/* global getCurrentPages */
import * as conf from '../../../utils/conf';
import {send, ShowLog} from '../../../utils/log';
import {request} from '../../../utils/request';
import {navToH5} from '../../../utils/navigate';
import Container from '../../../components/common/container';
import Icon from '@baidu/med-ui/components/Icon/Icon';
import Navigate from '../../../components/common/navigate';
import ShowMore from '../../../components/speTopic/ShowMore';
import CustomHeader from '../../../components/speTopic/CustomHeader';
import RecommendItem from '../../../components/speTopic/Recommend/RecommendItem';

const showLog = new ShowLog();

export default {
    config: {
        navigationStyle: 'custom',
        navigationBarTextStyle: 'white'
    },
    props: {},
    data() {
        /* eslint-disable camelcase */
        return {
            title: '',
            view: '',
            brief: {},
            detail_url: '',
            hot_articles: {},
            topics: [],
            background: '',

            showHome: true,
            navigateBackShow: true,
            viewStartTime: Date.now(),
            from: '',
            dataReady: false
        };
        /* eslint-enable camelcase */
    },
    onLoad(options) {
        this.getPageData(options);
        showLog.from = this.from = options.from || 'speTopic';
    },
    created() {
        let pages = getCurrentPages();
        this.navigateBackShow = pages.length > 1;
    },
    onPageScroll(scrollInfo) {
        this.$refs.customHeaderRef.onPageScroll(scrollInfo);

        // 状态栏颜色随滑动位置变化
        if (scrollInfo.scrollTop > 80) {
            this.$api.setNavigationBarColor({
                frontColor: '#000000',
                backgroundColor: '#ffffff'
            });
        }
        else {
            this.$api.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#ffffff'
            });
        }
    },
    onHide() {
        send({
            type: 'l',
            action: 'leaveTime',
            extra: {
                time: Date.now() - this.viewStartTime,
                page: 'sciencePopular',
                from: this.from
            }
        });
    },
    methods: {
        getPageData(options) {
            request({
                url: conf.apiHost + '/med/page/jp/science/topic',
                method: 'GET',
                data: {
                    query: options.query,
                    topic: options.topic
                },
                isFirstScreen: true,
                isNeedLogin: false,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            })
                .then(({data, update}) => {
                    /* eslint-disable max-len */
                    const dataKeyHash = ['title', 'view', 'topics', 'brief', 'hot_articles', 'detail_url', 'background'];
                    /* eslint-enable max-len */
                    dataKeyHash.forEach(key => this[key] = data[key]);
                    update.call(this);

                    this.$mpUpdated().then(() => {
                        showLog.send({
                            moduleName: 'sciencePopular'
                        });
                    });

                    this.dataReady = true;
                });
        },
        onOverviewClick() {
            send({
                type: 'l',
                action: 'navToH5',
                extra: {
                    mod: 'science-popular-overview'
                }
            });
            /* eslint-disable camelcase */
            this.detail_url && navToH5(this.detail_url);
            /* eslint-enable camelcase */
        }
    },
    components: {
        'c-icon': Icon,
        'ShowMore': ShowMore,
        'recommend-item': RecommendItem,
        'b-navigate': Navigate,
        'med-container': Container,
        'custom-header': CustomHeader
    }
};
</script>

<style lang="less" scoped>
.science-popular {
    // font-family: 'PingFang-SC-Medium';
    background: #fff;

    &-bottom {
        height: 20px;
    }

    &-overview {
        &-title {
            font-weight: bold;
            font-size: .19rem;
            color: #333;
        }

        &-content {
            color: #555;
            font-size: .15rem;
            line-height: .233rem;

            &-point {
                position: relative;
                padding-left: 10px;

                &::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 0;
                    width: 4px;
                    height: 4px;
                    transform: translateY(-50%);
                    border-radius: 50%;
                    background: #000;
                }
            }
        }
    }

    &-content {
        padding: 0 0.17rem;
    }

    &-hot-article {
        margin-top: .3rem;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08);

        &-title {
            padding: .15rem .15rem .13rem .15rem;
            font-size: .19rem;
            color: #333;
            font-weight: bold;
        }
    }

    &-topics {
        background: #f6f6f6;
        box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08);

        &-item {
            border-radius: 8px;
            overflow: hidden;
        }

        &-header {
            position: relative;
            padding: 0 .15rem;
            height: 1.44rem;
            font-size: .19rem;
            color: #fff;
            font-weight: bold;
            background-size: cover;

            &-title {
                position: absolute;
                line-height: .24rem;
                bottom: .13rem;
                padding-right: .15rem;
                z-index: 2;
                margin-bottom: 0;
            }

            &-icon {
                display: inline-block;
            }

            &-masking {
                position: absolute;
                width: 100%;
                height: 100%;
                bottom: 0;
                left: 0;
                background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
            }
        }

        &-footer {
            background: #fff;

            &-line {
                margin: 0 17px;
            }

            &-text {
                color: #999;
                padding: 10px 17px;
                font-size: .14rem;
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>
