<template>
    <scroll-view scroll-x class="video-list">
        <c-navigate 
            v-for="(video, index) in videoList"
            :key="index"
            class="video-list__item c-inline-block c-gap-inner-right-small"
            :url="video.url"
            :extra="{type: 'newYear2021-video', videoTitle: video.title}"
            :url-type="4"
        >
            <view class="video-list__item__img">
                <image
                    class="video-list__item__image" lazy-load
                    :src="video.img" mode="widthFix"
                />
                <c-label 
                    custom	
                    :text="video.labelText"
                    :bg-color="video.status === 0 ? ueConf.inLiveBg : video.status === 1 ? ueConf.playbackBg : ueConf.notBeginBg"
                    :border-color="video.status === 0 ? ueConf.inLiveBg : video.status === 1 ? ueConf.playbackBg : ueConf.notBeginBg"
                    color="#fff" 
                    class="video-list__item__label"
                />
                <image :src="img.play" class="video-list__item__play"/>
            </view>
            <view class="video-list__item__info" :style="{color: ueConf.videoFontColor}">
                <view class="video-list__item__info__title c-gap-top-large c-line-clamp1">{{ video.title }}</view>
                <view class="video-list__item__info__desc c-font-13 c-line-clamp1">{{ video.desc }}</view>
            </view>
        </c-navigate>
    </scroll-view>
</template>

<script>
/**
 * @file tag横滑切换模块
 * @author chenshuo04
 * @categories
 * @tags
 */
/* global getApp */

// import {request} from '../../../utils/request';
// import * as log from '../../../utils/log';
// import {navigate} from '../../../utils/navigate';
import CLabel from '@baidu/med-ui/components/Label/Label';
import CNavigate from '@baidu/med-ui/components/Navigate/Navigate';

export default {
    options: {
        addGlobalClass: true
    },
    config: {
        component: true
    },
    components: {
        CLabel,
        CNavigate
    },
    props: {
        /**
         * 优惠券列表
         */
        videoList: {
            type: Array,
            default: () => []
        },
        /**
         * 图片
         */
        img: {
            type: Object,
            default: () => ({
                play: 'https://medactivity.cdn.bcebos.com/new-year-2021/play.png'
            })
        },
        /**
         * ue配置
         */
        ueConf: {
            type: Object,
            default: () => ({
                inLiveBg: '#ee3b35',
                playbackBg: 'rgba(0,0,0,0.5)',
                notBeginBg: '#feb322',
                videoFontColor: '#fff5bb'
            })
        },
        /**
         * 行数,支持1-3行
         */
        row: {
            type: Number,
            default: 3
        }
    },
    data() {
        return {};
    },
    created() {

    },
    methods: {}
};
</script>

<style lang="less" scoped>
.img-background {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}
.video-list {
    white-space: nowrap;
    box-sizing: border-box;
    &__item {
        width: 37.6vw;
        &__img {
            position: relative;
            width: 100%;
            height: 21vw;
        }
        &__image {
            border-radius: 10px;
            width: 100%;
            display: block;
        }
        &__label {
            position: absolute;
            left: 5px;
            top: 4px;
        }
        &__info {
            &__title {
                font-size: 15px;
                line-height: 15px;
                font-weight: 500;
            }
        }
        &__play {
            width: 43px;
            height: 43px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        &:first-child {
            padding-left: 12px;
        }
    }
    &__bold500 {
        font-weight: 500 !important;
    }
}
</style>
