<template>
    <view
        class="headlines wrapper-small"
    >
        <image 
            v-if="data.icon"
            :src="data.icon"
            mode="widthFix"
            class="headlines__titleimg"
        />
        <view
            v-if="data.list && data.list.length"
            class="headlines__list">
            <view
                @tap="itemTap"
                class="headlines__list__cover">
            </view>
            <swiper
                autoplay
                :interval="3000"
                circular
                vertical
                class="headlines__list__swiper"
                @change="swiperChange"
                >
                <swiper-item
                    class="headlines__list__item"
                    v-for="(item, index) in data.list"
                    :key="index">
                    <navigate
                        :url="item.msUrl"
                        :extra="{
                            action: 'vacc__headlines'
                        }">
                        <view class="c-line-clamp1">
                            <c-label v-if="item.label" :text="item.label" :custom="true" :color="item.labelColor" :border-color="item.labelColor" bg-color="#fff" />
                            <text class="headlines__list__text c-gap-left-small">{{item.title}}</text>
                        </view>
                    </navigate>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
/**
 * @file 疫苗头条
 * @author zhangqian51
 * @categories 头条组件
 * @tags [component]
 */
import CLabel from '@baidu/med-ui/components/Label/Label';
import Navigate from '../common/navigate';
import {navigate, navToBdBoxH5, navToH5} from '../../utils/navigate';
import * as Log from '../../utils/log';
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 热榜数据
         */
        data: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            swiperIndex: 0
        };
    },
    components: {
        Navigate,
        CLabel
    },
    methods: {
        swiperChange(e) {
            this.swiperIndex = e.detail.current;
        },
        itemTap() {
            if (this.data.list[this.swiperIndex].webUrl) {
                Log.send({
                    type: 'b',
                    extra: {
                        action: 'headlines_jump',
                        module: 'vacc_home'
                    }
                });
                navToH5(this.data.list[this.swiperIndex].webUrl);
            } else {
                navigate({
                    url: this.data.msUrl || this.data.url,
                    extra: {
                        act: 'headlines_jump',
                        module: 'vacc_home'
                    }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.wrapper {
    padding-left: .17rem;
    padding-right: .17rem;
    &-small {
        padding-left: .13rem;
        padding-right: .13rem; 
    }
}
.headlines {
    background: #FFFFFF;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &__titleimg {
        width: .72rem;
        height: .17rem;
        flex: none;
    }
    &__list {
        width: 100%; 
        padding-left: 15px;
        flex: auto;
        position: relative;
        &__cover {
            position: absolute;
            z-index: 2;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
        &__swiper {
            height: 38px;
            width: 100%;
        }
        &__item {
            width: 100%;
            height: 38px;
            line-height: 38px;
            font-size: 13px;
            color: #555;
        }
        &__text {
            position: relative;
            top: 2px;
        }
}
}
</style>