<template>
    <view class="video">
        <c-navigate 
            :url="video.url"
            :extra="{type: 'newYear2021-video', videoTitle: video.title}"
            :url-type="4"
        >
            <view class="video__box">
                <!-- <template-mars target="h5"> -->
                <image
                    :src="video.cover" mode="widthFix"
                    class="video__box__cont"
                />
                <!-- </template-mars> -->
                <!-- <template-mars target="swan">
                    <video
                        :src="video.videoCover ? video.videoCover : 'https://medactivity.cdn.bcebos.com/new-year-2021/IMG_5210.mp4'"
                        muted
                        objectFit="fill"
                        :controls="false"
                        autoplay
                        loop
                        class="video__box__cont"
                    >
                    </video>
                </template-mars> -->
                <!-- 直播状态 -->
                <view class="video__status">
                    <template v-if="video.status === 0">
                        <view class="video__line-box">
                            <view class="video__line video__line1"/>
                            <view class="video__line video__line2"/>
                            <view class="video__line video__line3"/>
                        </view>
                        <text class="c-gap-left-small">直播中</text>
                    </template>
                </view>
                <!-- 播放icon -->
                <image :src="img.play" class="video__play"/>
                <!-- 占位,TODO: 小程序下部分机型点击视频会有一些默认效果 -->
                <view class="video__white"/>
            </view>
        </c-navigate>
        <view class="video__title c-line-clamp1 c-font-medium-less c-gap-inner-top-small" :style="{color: ueConf.videoFontColor}">{{ video.title }}</view>
    </view>
</template>

<script>
/**
 * @file 新春视频
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
import CNavigate from '@baidu/med-ui/components/Navigate/Navigate';

export default {
    options: {
        addGlobalClass: true
    },
    config: {
        component: true
    },
    components: {
        CNavigate
    },
    props: {
        /**
         * 优惠券列表
         */
        video: {
            type: Object,
            default: () => ({})
        },
        /**
         * 图片
         */
        img: {
            type: Object,
            default: () => ({
                play: 'https://medactivity.cdn.bcebos.com/new-year-2021/play1.png'
            })
        },
        /**
         * ue配置
         */
        ueConf: {
            type: Object,
            default: () => ({
                inLiveBg: '#ee3b35',
                playbackBg: 'rgba(0,0,0,0.5)',
                notBeginBg: '#feb322',
                videoFontColor: '#fff5bb'
            })
        }
    },
    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;
}
@keyframes lineChange {
    0% {
        -webkit-transform: scaleY(0.3);
        transform: scaleY(0.3);
    }
    25% {
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
    }
    50% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(0.3);
        transform: scaleY(0.3);
    }
}
.video {
    &__box {
        border-radius: 13px;
        overflow: hidden;
        width: 85.78vw; 
        height: 48vw; 
        margin: 0 auto;
        position: relative;
        &__cont {
            transform: translateX(-1px);
            width: calc(100% + 2px);
            height: 100%;
            border-radius: 13px;
            overflow: hidden;
        }
    }
    &__white {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    &__title {
        text-align: center;
        margin: 0 30px;
        font-weight: bold;
    }
    &__play {
        width: 43px;
        height: 43px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    &__status {
        position: absolute;
        left: 5px;
        top: 4px;
        font-size: 12px;
        line-height: 20px;
        background: #ff3333;
        padding: 0 8px;
        border-radius: 333px;
        color: #fff;
        display: flex;
        align-items: center;
    }
    &__line-box {
        position: relative;
        display: inline-block;
        width: 0.1rem;
        height: 0.07rem;
        bottom: 0.02rem;
    }
    &__line {
        position: absolute;
        top: 0;
        width: 0.02rem;
        height: 0.1rem;
        border-radius: 0.02rem;
        background-color: #fff;
        animation: lineChange 680ms linear infinite;
    }
    &__line1 {
        left: 0px;
        transform: scaleY(0.8);
        animation-delay: -340ms;
    }
    &__line2 {
        left: 4px;
        transform: scaleY(0.4);
        animation-delay: -170ms;
    }
    &__line3 {
        left: 8px;
        transform: scaleY(0.6);
    }
}
</style>
