<!--
 * @Description:
 * @Author: yantingxi
 * @Date: 2019-09-05 14:29:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-02-25 17:56:51
 -->

<template>
    <b-navigate
        :url="url"
        :extra="{
            mod: module,
            page: page,
        }"
    >
        <view
            :class="{
                'no-background': !background,
            }"
            class="scroll-banner-item"
            @tap="toLink($event)"
        >
            <view
                v-if="background"
                class="scroll-banner-item__header"
            >
                <!-- <c-image
                :src="background"
                :is-round="false"
                :hack-white-stroke="false"
                radius="6px 6px 0 0"
                width="100%"
                :height="imgHeight"
                hack-bg="radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.05) 100%)"
                @load="imgLoad($event)"
            /> -->
                <view
                    class="scroll-banner-item__bg"
                    :style="{
                        'background-image': 'url(' + background + ')',
                    } | imgCompress('background-image', {column: 6})"
                >
                    <view class="scroll-banner-item__bg__hack"/>
                </view>
                <view class="scroll-banner-item__header__text">
                    <view v-if="number" class="scroll-banner-item__header__number">{{ number }}篇文章</view>
                    <view
                        v-if="view"
                        :class="{
                            'has-number': number,
                        }"
                        class="scroll-banner-item__header__view c-line-clamp1"
                    >{{ view }}次阅读</view>
                </view>
                <view class="scroll-banner-item__header__masking"/>
            </view>
            <view class="scroll-banner-item__content">
                <view
                    v-if="title"
                    :class="{
                        'not-labels': !labels || (labels && labels.length < 1),
                        'c-gap-right-small': true,
                        'c-line-clamp1': labels && labels && labels.length > 0,
                    }"
                    class="scroll-banner-item__content__title c-gap-top-small c-line-clamp2 c-gap-right-small"
                >
                    <view class="scroll-banner-item__content__title__icon m-icon m-icon-spetopicicon"/>
                    <text>{{ title }}</text>
                </view>
                <view
                    v-if="labels && labels.length > 0"
                    :class="{
                        'c-gap-bottom-small': !background,
                    }"
                    class="scroll-banner-item__content__labels c-gap-left c-gap-bottom"
                >
                    <c-label
                        v-for="(label, index) in labels"
                        :key="index"
                        :text="label"
                        :class="{
                            'c-gap-left-small': index !== 0,
                        }"
                        color="gray"
                        class="scroll-banner-item__content__labels__label"
                    />
                </view>
                <view
                    v-if="!background"
                    class="scroll-banner-item__header__text no-pic c-gap-left"
                >
                    <view v-if="number" class="scroll-banner-item__header__number">{{ number }}篇文章</view>
                    <view
                        v-if="view"
                        :class="{
                            'has-number': number,
                        }"
                        class="scroll-banner-item__header__view c-line-clamp1"
                    >{{ view }}次阅读</view>
                </view>
            </view>
        </view>
    </b-navigate>
</template>

<script>
/**
* @file ScrollBannerItem
* @author yantingxi
*/
import Label from '@baidu/med-ui/components/Label/LabelOld';
import Navigate from '../../../components/common/navigate';
import {navToBdBoxH5} from '../../../utils/navigate';
import {send} from '../../../utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        background: String,
        number: String,
        view: String,
        title: String,
        url: {
            type: String,
            default: ''
        },
        labels: {
            type: Array,
            default: () => []
        },
        module: {
            type: String,
            default: 'scroll-banner'
        },
        page: String,
        outLink: {
            type: String,
            default: ''
        }
    },
    components: {
        'c-label': Label,
        'b-navigate': Navigate
    },
    methods: {
        toLink(e) {
            if (this.outLink) {
                if (process.env.MARS_ENV === 'h5') {
                    e.stopPropagation();
                }
                navToBdBoxH5(this.outLink, {
                    module: 'browser',
                    action: 'open',
                    parameters: {
                        simple: '1'
                    }
                });
                send({
                    type: 't',
                    action: 'click',
                    extra: {
                        mod: this.module,
                        page: this.page
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
    .scroll-banner-item {
        width: 1.83rem;
        width: 44.8vw;
        overflow: hidden;
        border-radius: 9px;
        background: #f8f8f8;
        // background: #FFF;
        // box-shadow: 0 3px 16px 0 rgba(0,0,0,.08);

        &__bg {
            position: relative;
            width: 100%;
            padding-top: 41.94%;
            border-radius: 6px 6px 0 0;
            background-size: cover;

            &__hack {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.05) 100%);
                z-index: 0;
            }
        }

        &__header {
            position: relative;
            background: #eee;

            &__text {
                display: flex;
                position: absolute;
                width: 100%;
                left: 0;
                bottom: 0;
                height: 22px;
                color: #fff;
                font-size: .12rem;
                z-index: 2;
                padding-left: 10px;
                box-sizing: border-box;

                &.no-pic {
                    color: #999;
                    line-height: normal;
                }
            }

            &__number {
                flex: 0 0 auto;
            }

            &__view.has-number {
                margin-left: .05rem;

                &.has-number::before {
                    content: '\2022';
                    font-weight: 900;
                    padding-right: .05rem;
                }
            }

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

        &__content {
            &__title {
                margin-left: .1rem;
                color: #333;
                font-size: 14px;

                &.not-labels {
                    margin: 10px 10px;
                    height: 45px;
                }

                &__icon {
                    display: inline-block;
                    color: #00c8c8;
                    margin-right: .05rem;
                }
            }
        }

        &.no-background {
            padding: 5px 0;
        }
    }
</style>
