<!--
 * @Description: 科普专题
 * @Author: yantingxi
 * @Date: 2019-08-20 14:12:36
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-05-14 17:06:01
 -->
<template>
    <view
        :class="{
            'c-gap-inner-bottom-large': !recommendBanner || (recommendBanner && !recommendBanner.url)
        }"
        class="spe-topic__detail-overview c-gap-top-large">
        <view ref="scopedIdRef">
            <rich-text v-if="htmlContent" class="spe-topic__detail-overview" :nodes="htmlContent"/>
        </view>
        <!-- 短摘要 -->
        <view v-if="sortText" class="spe-topic__detail-overview__sort-text">
            <view
                v-if="sortText.answer"
                :class="[
                    sortText.type === '0' ? 'red' : 'green'
                ]"
                class="spe-topic__detail-overview__sort-text__answer c-gap-inner-top-small"
            >
                {{ sortText.answer }}
            </view>
            <view v-if="sortText.content" class="spe-topic__detail-overview__sort-text__content c-gap-top">
                {{ sortText.content }}
            </view>
        </view>

        <view v-if="labels && labels[0]" class="spe-topic__detail-overview__links">
            <b-navigate
                v-for="(label, index) in labels"
                :key="index"
                :url="url"
                :style="{
                    color: '#00c8c8',
                    background: '#F8F8F8'
                }"
                :extra="{
                    mod: 'science-detail-overview-label',
                    page: page
                }"
                class="spe-topic__detail-overview__link c-gap-right"
            >
                <view class="spe-topic__detail-overview__link__icon m-icon m-icon-spetopicicon"></view>
                {{ label }}
            </b-navigate>
        </view>
        <view
            v-if="recommendBanner && recommendBanner.url"
            :class="{
                'bottomZero': !bannerGapBottom
            }"
            class="spe-topic__detail-overview__recommend-banner"
        >
            <recommend-banner
                :page="page"
                :url="recommendBanner.url"
                :title="recommendBanner.title"
                :overview="recommendBanner.overview"
                :image="recommendBanner.image"
            />
        </view>
    </view>
</template>

<script>

/**
* @file 文本处理区
* @author yantingxi
*/
import Icon from '@baidu/med-ui/components/Icon/Icon';
import Navigate from '../../components/common/navigate';

import RecommendBanner from './Recommend/Banner';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        content: {
            type: String,
            default: ''
        },
        labels: {
            type: Array,
            default: () => []
        },
        url: {
            type: String,
            default: ''
        },
        page: {
            type: String,
            default: ''
        },
        sortText: {
            type: Object,
            default: () => {}
        },
        recommendBanner: {
            type: Object,
            default: () => {}
        },
        bannerGapBottom: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            htmlContent: ''
        };
    },
    components: {
        'c-icon': Icon,
        'b-navigate': Navigate,
        RecommendBanner
    },
    mounted() {
        this.htmlContent = this.fetchHtml(this.content);
    },
    methods: {
        fetchHtml(htmlString) {

            const scopedId = process.env.MARS_ENV === 'h5'
            ? this.edId()
            : '';

            htmlString = htmlString
                .replace(
                    /<([a-z]{1,10}[1-6]{0,1})([\s\S]*?)(\/*?)>/ig,
                    `<$1 class="swan-detail-overview-content-$1" ${scopedId} $2>`
                )
                // 资源方换行符提交错误，暂时处理
                .replace(/<\/br>/ig, '<br/>')
                .replace(/>[\s\r\n]+</g, '><');
            htmlString = `<div class="swan-detail-overview-content" ${scopedId}>${htmlString}</div>`;
            return htmlString;
        },
        // h5需单独获取样式作用域，样式方可生效 TODO：scoped机制不该生效，且id不该如此获取
        edId() {
            const detailOverview$ = this.$refs.scopedIdRef.$el;
            const dataset = detailOverview$.dataset;
            return Object.keys(dataset).reduce((value, key) => `${value} data-${key}`, '');
        }
    }
};
</script>

<style lang="less">
.swan-detail-overview-content {
    &-p {
        padding: 0;
        margin: 0;
        margin-bottom: 20px;
        line-height: 27px;
        text-align: justify;
    }

    &-blockquote {
        background-color: #f8f8f8;
        padding: 8px;
        color: #999;
        font-size: 14px;
        line-height: 22px;
    }

    &-ul,
    &-ol,
    &-li {
        padding: 0;
        margin: 0;
        list-style-type: none;
        line-height: 27px;
    }

    &-ul,
    &-ol {
        margin-bottom: 20px;
    }

    &-ol {
        counter-reset: num;
        .swan-detail-overview-content-li {
            counter-increment: num;
            &:before {
                content: counter(num) '、';
            }
        }
    }
}
.swan-detail-overview-content-ul .swan-detail-overview-content-li {
    position: relative;
    padding-left: 14px;

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

.swan-detail-overview-content-img {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 20px;
    display: block;
    box-shadow: 0 0 0 1px rgba(0,0,0,.02);
}
.swan-detail-overview-content-h3 {
    font-size: 16px;
    margin: 15px 0 15px;
    color: #333;
    position: relative;
    padding-left: 10px;
    line-height: 27px;

    &:before {
        content: '';
        position: absolute;
        top: 6px;
        left: 0;
        width: 4px;
        height: 14px;
        border-radius: 4px;
        background: #8FDBE4;
    }
}
.swan-detail-overview-content-h6 {
    font-size: 14px;
    color: #333;
    line-height: 27px;
    font-weight: normal;
}
.swan-detail-overview-content-br {
    content: '';
    display: block;
    width: 100%;
    height: 1px;

    &:before {
        content: '';
        display: block;
        margin: 8px 0;
    }
}
.spe-topic__detail-overview {
    font-size: 17px;
    letter-spacing: 0;
    color: #333;

    &__sort-text {
        &__answer {
            font-size: 24px;
            &.red {
                color: #EE4433;
            }
            &.green {
                color: #00C8C8;
            }
        }
        &__content {
            font-size: 17px;
            line-height: 27px;
            color: #000;
        }
    }

    &__recommend-banner {
        margin: 24px 0 -15px;

        &.bottomZero {
            margin-bottom: 0;
        }
    }

    &__links {
        margin-top: 0.08rem;
    }
    &__link {
        display: inline-block;
        padding: 0.06rem 0.11rem;
        line-height: normal;
        background: rgba(3, 208, 191, 0.1);
        border-radius: 15px;
        font-size: 0.13rem;

        &__icon {
            font-size: .14rem;
            display: inline-block;
            margin-right: 0.03rem;
        }
    }
}
</style>