<template>
    <view>
        <view v-if="videos.length" class="video-list">
            <view
                v-for="(vItem, i) in videos"
                :key="i"
                @tap="toLink({
                    url: vItem.outLink,
                    xcxUrl: vItem.xcxUrl,
                    extra: {
                        mod: page + '-video-list-' + i
                    },
                    isNaLink: vItem.status !== -1
                })"
                class="video-list-item c-gap-top-large">
                <view class="video-list-item-wrapper">
                    <view class="video-list-item-video">
                        <video-cover
                            :img="vItem.img"
                            :status="vItem.status"
                            :status-text="vItem.statusText"
                            :duration="vItem.duration"
                            :bigTag="true"
                        />
                    </view>
                </view>
                <view class="video-list-item-wrapper2">
                    <view class="c-line-clamp2 video-list-item-title c-font-normal c-gap-top-small text-clamp2">
                        {{ vItem.title }}
                    </view>
                    <view v-if="vItem.audience" class="video-list-item-audience c-line-clamp1 video-list-item-info c-font-normal">
                        <text>观看人数：{{ vItem.audience }}人</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 视频列表
 * @author lixue25
*/
import {send} from '../../../utils/log';
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import videoCover from './VideoItem';
import * as core from '../../../utils/core';

export default {
    config: {
        component: true
    },
    props: {
        videos: {
            type: Array,
            default: () => []
        },
        page: {
            type: String,
            default: 'feed'
        },
        livesource: {
            type: String,
            default: 'jiankang'
        }
    },
    methods: {
        toLink(params) {
            if (params.xcxUrl) {
                navigate({url: params.xcxUrl, extra: params.extra});
            } else if (params.url) {
                navToBdBoxH5(params.url, params.isNaLink ? {
                    module: 'live',
                    action: 'enterRoom',
                    parameters: {
                        params: {
                            roomId: core.getQueryObject(params.url)['room_id'],
                            source: {
                                livesource: this.livesource
                            }
                        }
                    }
                } : {});
                send({
                    type: 'l',
                    action: 'navigate2h5',
                    extra: params.extra
                });
            }
        }
    },
    components: {
        videoCover
    }
};
</script>

<style lang="less" scoped>
.video-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: -5px;
    &-item {
        padding: 0;
        background: #FFFFFF;
        box-shadow: 0 3.3px 16.7px 0 rgba(0,0,0,0.08);
        border-radius: 8px;
        box-sizing: border-box;

        &-audience {
            font-family: PingFang-SC-Regular;
            font-size: 14px;
            color: #3F3F3F;
            letter-spacing: 0;
            line-height: 22.67px;
        }

        &:nth-child(odd) {
            width: calc(50% - 7.5px);        
            margin-right: 7.5px;
        }

        &:nth-child(even) {
            width: calc(50% - 7.5px);
            margin-left: 7.5px;
        }

        &:nth-child(1),
        &:nth-child(2) {
            margin-top: 0;
        }

        &-wrapper {
            position: relative;
            padding-top: 56.25%;
        }

        &-wrapper2 {
            padding: 0 0.1rem 0.1rem 0.1rem;
        }

        &-video {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: 5px 5px 0 0;
            overflow: hidden;
        }
        &-title {
            margin-bottom: 0;
            color: #333;
            font-family: PingFang-SC-Regular;
            font-size: 14px;
            color: #333333;
            letter-spacing: 0;
            line-height: 22px;
        }
        &-info {
            color: #a5a5a5;
        }
    }
}
</style>