<template>
    <view class="live-calendar">
        <view
            v-for="(live, index) in data"
            :key="index"
            class="live-calendar-item"
            :class="videoCalendarItemClass"
            @tap="onClickLives({
                url: live.outLink,
                xcxUrl: live.xcxUrl,
                extra: {
                    mod: page + '-calendar-' + index,
                },
                isNaLink: live.status * 1 !== -1,
            })"
        >
            <view
                v-if="live.img"
                class="live-calendar-item-image-mark"
            >
                <view
                    class="live-calendar-item-image"
                >
                    <c-image
                        has-compress
                        class="live-calendar-item-image"
                        :src="live.img"
                        :is-round="false"
                        radius="6px"
                        width="100%"
                        height="101px"
                        hack-bg="radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.05) 100%)"
                    />
                </view>
                <view class="video-play">
                    <c-icon
                        name="play"
                        font-size="13.5px"
                        :style="{color: '#ffffff'}"
                    />
                </view>
                <view class="live-calendar-item-mark">
                    <view class="live-calendar-item-mark-ground"/>
                    <text class="live-calendar-item-mark-text">{{ live.statusText }}</text>
                </view>
            </view>
            <view class="live-calendar-item-wrap">
                <view v-if="live.brief" class="live-calendar-item-text c-line-clamp2">{{ live.brief }}</view>
            </view>
        </view>
    </view>
</template>

<script>

/**
 *  @file 直播日历单条
 *  @author yumingzhi
 */
/* eslint-disable */ 
import CImage from '../../common/image';
import Icon from '@baidu/med-ui/components/Icon/Icon';
import {send} from '../../../utils/log';
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import * as core from '../../../utils/core';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CImage,
        'c-icon': Icon
    },
    props: {
        data: {
            type: Array,
            default: () => []
        },
        videoCalendarItemClass: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            timer: null
        };
    },
    methods: {
        onClickLives(params) {
            this.$emit("seeVedioDetail");
            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
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.live-calendar {
    display: flex;

    &-item {
        flex: 1;
        padding: 0 0 13px 0;
        background: #fff;
        vertical-align: middle;
        margin-right: 8px;

        &:last-child {
            margin-right: 0;
        }

        &-wrap {
            padding: 7px 0 0 0;
            box-shadow: none;
        }

        &-image-mark {
            position: relative;
        }

        .video-play {
            position: absolute;
            top: 50%;
            left: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: -13.5px;
            margin-left: -13.55px;
            width: 27px;
            height: 27px;
            background: rgba(0, 0, 0, .5);
            border-radius: 100%;
        }

        &-mark {
            position: absolute;
            right: 8px;
            bottom: 7px;
            padding: 3px 9px;
            border-radius: 10px;
            line-height: 10px;

            &-ground {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: #000;
                border-radius: 10px;
                opacity: 0.65;
            }

            &-text {
                position: relative;
                font-size: 10px;
                line-height: 10px;
                color: #fff;
            }
        }
    }
}
</style>