<template>
    <scroll-view
        scroll-x
    >
        <view class="pcr-live-scroll">
            <view 
                v-for="(item, index) in videolist"
                :key="index"
                class="pcr-live-scroll-item"
                :style="{
                    width: isSingle ? '100%' : itemWidth,
                }"
            >
                <view 
                    class="video-big-pic-box"
                    :style="{
                        marginLeft: index === 0 && firstMarginLeft,
                        marginRight: index === videolist.length - 1 && firstMarginLeft,
                    }"
                >
                    <video-big-pic
                        :act-config="{
                            btnColor: color,
                            fontColor: color,
                            backgroundColor: backgroundColor,
                            padding: isSingle && '0.10rem 0.13rem',
                        }"
                        :video="item"
                        :log="log"
                        border-radius="0.10rem"
                        img-width="80vw"
                        :img-height="isSingle ? '53.53vw' : imageHeight"
                    />
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script>
/**
 * @file 机构
 * @author chenshuo04
 * @categories
 * @tags
 */
import VideoBigPic from '../../speTopic/live/VideoBigPic';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        VideoBigPic
    },
    props: {
        /**
         * videolist
         */
        videolist: {
            type: Array,
            required: true
        },
        /**
         * log
         */
        log: {
            type: String,
            default: 'hpv-pcr'
        },
        /**
         * color
         */
        color: {
            type: String,
            default: '#ff6161'
        },
        /**
         * imageHeight
         */
        imageHeight: {
            type: String,
            default: '46.85vw'
        },
        /**
         * itemWidth
         */
        itemWidth: {
            type: String,
            default: '85.5vw'
        },
        /**
         * firstMarginLeft
         */
        firstMarginLeft: {
            type: String,
            default: ''
        },
        /**
         * backgroundColor
         */
        backgroundColor: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            selectedIndex: 0,
            isSingle: false
        };
    },
    created() {
        this.isSingle = this.videolist && this.videolist.length === 1;
    },
    methods: {
        swiperChange(e) {
            this.selectedIndex = e.detail.current;
        }
    }
};
</script>
<style lang="less" scoped>
    .pcr-live-scroll {
        white-space: nowrap;
        &-item {
            vertical-align: top;
            display: inline-block;
        }
    }
    .video-big-pic-box {
        margin-right: 0.08rem;
    }
</style>
