<template>
    <view
        class="spe-calendar-container feed-live"
        @tap="toLink(liveItem.url || liveItem.outLink, liveItem.outLink && isNewInterface && liveItem.status !== -1 || !isNewInterface && liveItem.outLink && liveItem.status !== 0)"
    >
        <view class="spe-calendar-container-img">
            <image :src="liveItem.img" class="spe-calendar-container-img"/>
            <!-- 标题浮层 -->
            <view v-if="liveItem.title" class="spe-calendar-mask c-line-clamp1">{{ liveItem.title }}</view>
            <view class="spe-calendar-container-play">
                <c-icon
                    font-size="24px"
                    name="play"
                />
            </view>
        </view>
        <view class="spe-calendar-container-info">
            <view
                v-if="isNewInterface && liveItem.status == -1"
                class="spe-calendar-container-text"
            >开播时间 : {{ liveItem.date }} {{ liveItem.time }}</view>
            <view
                v-else
                class="spe-calendar-container-text"
            >{{ liveItem.statusText }} : {{ liveItem.date }} {{ liveItem.time }}</view>
            <view
                v-if="isNewInterface"
                :class="liveItem.status == 0 ? 'shipin' : (liveItem.status === 1 ? 'huifang' : 'yugao')"
                class="spe-calendar-container-btn"
            >
                <view
                    :class="liveItem.status === 0 ? 'spe-live-header-content-card-shipin-bg' : ''"
                />
                {{ liveItem.statusText }}
            </view>
            <view
                v-else
                :class="liveItem.status == 1 ? 'shipin' : (liveItem.status === 2 || liveItem.status === 3 ? 'huifang' : 'yugao')"
                class="spe-calendar-container-btn"
            >
                <view
                    :class="liveItem.status === 1 ? 'spe-live-header-content-card-shipin-bg' : ''"
                />
                {{ liveItem.statusText }}
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 直播单个卡片组件
 * @author yumingzhi
 */
import {navToBdBoxH5} from '../../../../utils/navigate';
import * as core from '../../../../utils/core';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        liveItem: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            isNewInterface: 1
        };
    },
    components: {
        CIcon
    },
    methods: {
        toLink(url, isNaLink = false, extra) {
            this.$emit('liveCardTrans');
            navToBdBoxH5(
                url,
                isNaLink
                    ? {
                        module: 'live',
                        action: 'enterRoom',
                        parameters: {
                            params: {
                                roomId: core.getQueryObject(url)['room_id'],
                                source: {
                                    livesource: 'jiankang'
                                }
                            }
                        }
                    }
                    : {
                        module: 'browser',
                        action: 'open',
                        parameters: {
                            simple: '1'
                        }
                    }
            );
        }
    }
};
</script>
<style lang="less" scoped>

.spe-calendar {
    &-container {
        position: relative;
        background: #ffffff;
        box-shadow: 0 3.3px 16.7px 0 rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        &-img {
            width: 100%;
            height: calc(60.22vw - 34px);
            background: #effdff;
            border-radius: 10px 10px 0 0;
            position: relative;
        }
        &-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            height: 52px;
            font-family: PingFang-SC-Regular;
            font-size: 15px;
            color: #555555;
        }
        &-btn {
            width: 80px;
            background: rgba(0, 0, 0, 0.5) !important;
            padding: 4px 7px;
            color: white !important;
            border: none !important;
            font-size: 13px;
            text-align: center;
            border-radius: 30px;
            box-sizing: border-box;
        }

        &-play {
            width: 48px;
            height: 48px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #fff !important;
            text-align: center;
            line-height: 48px; 
        }
    }
    &-mask {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 0.3rem;
        padding: 0.2rem 0.15rem 0.05rem 0.15rem;
        color: #fff;
        font-size: 0.15rem;
        font-family: PingFang-SC-Regular;
        line-height: 0.31rem;
        background-image: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.35) 100%
        );
    }
}
.shipin {
    background: #ff0000 !important;
    opacity: 1 !important;
}
.yugao {
    background: #00c8c8 !important;
    opacity: 1 !important;
}
</style>
