<template>
    <view class="pannel">
        <view class="pannel__head">
            <text class="pannel__head__title c-font-big-less">{{ module.module_name }}</text>
            <!-- <text class="pannel__head__subtitle c-gap-left-middle">大家都在读的科普，不可错过</text> -->
        </view>
        <view class="pannel__cont">
            <scroll-view
                :scroll-x="true"
                style="height: .94rem;"
            >
                <view
                    class="pannel__cont__scroll"
                    :style="{
                        marginLeft: module.item_list.length === 1 ? '13px' : '17px'
                    }"
                >
                    <view
                        v-for="(item, idx) in module.item_list"
                        :key="idx"
                        class="pannel__cont__scroll__item c-gap-right-middle"
                        :style="{
                            backgroundImage: 'url(' + item.field_value.bannerImage + ')',
                            width: module.item_list.length > 1 ? '44.93vw' : '93.72vw'
                        }"
                        @tap="detailTap(item.field_value)"
                    ></view>
                </view>
            </scroll-view>
            <!-- <view class="pannel__cont__mask left"/>
            <view class="pannel__cont__mask right"/> -->
        </view>
    </view>
</template>

<script>
/**
 * @file banner运营位
 * @author shizhognwei02
 * @categories 业务组件
 * @tags [component]
 */
import {navigate} from '@baidu/med-utils/lib/Mars';
import {ubcSend} from '@utils/log';
export default {
    config: {
        component: true
    },
    props: {
        module: {
            type: Object,
            default: () => ({})
        },
        topicId: {
            type: [Number, String],
            default: ''
        }
    },
    methods: {
        detailTap(info) {
            const isBdBox = /baiduboxapp/.test(navigator.userAgent);
            if (info.swanUrl && isBdBox) {
                navigate({url: info.swanUrl, urlType: '1'});
            } else {
                navigate({url: info.h5Url, urlType: '3'});
            }

            ubcSend({
                type: 'clk',
                value: 'banner',
                ext: Object.assign({
                    page_source_id: this.topicId,
                    page_source_key: 'id'
                })
            });
        }
    }
};
/* eslint-disable */
</script>
<style lang="less" scoped>
.pannel {
    background: #fff;
    background-repeat: no-repeat;
    background-size: contain;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    // background-image: url(https://med-fe.cdn.bcebos.com/specialDisease/%20tuberculosis/titlebg.png);
    &__head {
        padding: .06rem 0 .1rem .17rem;

        &__title {
            font-family: PingFangSC-Medium;
            color: #1f1f1f;
        }

        &__subtitle {
            font-family: PingFangSC-Regular;
            font-size: .14rem;
            color: #b8b8b8;
        }
    }

    &__cont {
        position: relative;
        background-color: #fff;
        padding-bottom: .1rem;

        &__mask {
            position: absolute;
            top: 0;
            bottom: 0;
            width: .17rem;
            height: .94rem;

            &.left {
                background-image: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.90) 39%, rgba(255, 255, 255, 0.00) 100%);
                left: 0;
            }

            &.right {
                right: 0;
                background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0.90) 39%, rgba(255, 255, 255, 0.00) 100%);
            }
        }

        &__scroll {
            display: flex;
            margin-left: .17rem;
            width: fit-content;
            padding-right: 0.05rem;

            &__item {
                width: 1.86rem;
                position: relative;
                height: .93rem;
                border-radius: .09rem;
                background-size: cover;
            }
        }
    }
}
</style>
