<template>
    <view
        :style="{
            background: background
        }"
        :class="{
            'scroll-banner--cancel-gap': cancelGap
        }"
        class="scroll-banner"
        @touchmove="onTouchmove"
    >
        <view v-if="title" class="scroll-banner__title">{{ title }}</view>
        <scroll-view
            scroll-x
            upper-threshold="1"
            lower-threshold="1"
            @scroll="onScroll"
        >
            <view class="scroll-banner__inner">
                <scroll-banner-item
                    v-for="(topic, index) in topics"
                    :key="index"
                    :title="topic.title"
                    :url="topic.url"
                    :outLink="topic.outLink"
                    :labels="topic.labels"
                    :view="topic.view"
                    :number="topic.number"
                    :background="topic.background"
                    :page="page"
                    :module="module + '-scroll-banner-' + index"
                    class="scroll-banner__inner__row-view"/>
            </view>
        </scroll-view>
    </view>
</template>

<script>
/**
 *  @file index
 *  @author yantingxi
 */
import ScrollBannerItem from './ScrollBannerItem';
import {throttle} from '../../../utils/core';
import {send} from '../../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        title: String,
        topics: {
            type: Array,
            default: () => []
        },
        module: {
            type: String,
            default: 'scrollBanner'
        },
        page: String,
        background: {
            type: String,
            default: '#FFF'
        },
        cancelGap: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            timer: null
        };
    },
    components: {
        ScrollBannerItem
    },
    methods: {
        onScroll() {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                send({
                    type: 't',
                    action: 'scroll',
                    extra: {
                        mod: 'scroll-banner-' + this.page
                    }
                });
            }, 700);
        },
        onTouchmove(e) {
            e.stopPropagation && e.stopPropagation();
        }
    }
};
</script>

<style lang="less" scoped>
.scroll-banner {
    background: #f5f5f5;
    padding: 5px 0 20px 0;
    margin-bottom: -10px;
    &--cancel-gap {
        padding: 0;
    }

    &__title {
        margin-left: 17px;
        font-size: .19rem;
        font-weight: bold;
        color: #333;
        padding: .15rem 0;
    }

    &__inner {
        width: fit-content;
        padding-right: 17px;
        padding-bottom: 10px;
        display: flex;
        flex-flow: row nowrap;

        &__row-view {
            flex: 1 0 auto;

            &:nth-of-type(n+2) {
                margin-left: .08rem;
            }

            &:first-child {
                margin-left: 17px;
            }
        }
    }
}
</style>