<template>
    <view
        :style="{
            height: height,
            'background-image': 'url(' + cover + ')'
        } | imgCompress('background-image')"
        class="live-export-bottom"
        @tap="onjump"
    >
        <view class="loading-video">
            <view v-if="status === '0'" class="feed-live-content-card-btn">
                <view class="card-shipin-bg"></view>
                {{ statusWord }}
            </view>
            <view v-if="status === '-1'" class="feed-live-content-card-btn yugao">
                {{ statusWord }}
            </view>
            <view v-if="statusWord === '1'" class="feed-live-content-card-btn huifang">
                {{ statusWord }}
            </view>
        </view>
        <view class="vedio-play">
            <c-icon
                name="play"
                class="play-icon"
                :style="{color: '#fff'}"
                font-size="0.24rem"
            ></c-icon>
        </view>
        <view class="show-time">开播时间：{{ releaseTime }}</view>
    </view>
</template>

<script>
/**
 * @file 9点直播间
 * @author lijiahang
 */

import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '../../../utils/navigate';
// import {send} from '../../../utils/log';
export default {
    config: {
        component: true
    },
    components: {
        'c-icon': CIcon
    },
    props: {
        height: {type: String, default: '203px'},
        statusWord: {type: String, default: ''},
        url: {type: String, default: ''},
        cover: {type: String, default: ''},
        releaseTime: {type: String, default: ''},
        status: {type: String, default: ''}
    },
    methods: {
        // 跳转直播间
        onjump() {
            // 0 status 0 直播中 1回放 -1 预告
            navigate({
                url: this.url,
                urlType: this.status === '0' ? '4' : '3',
                extra: {
                    mod: 'live-night-room-zhibojian'
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.live-export-bottom {
    width: 100%;
    height: 203px;
    position: relative;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;

    .loading-video {
        // width: 150px;
        width: 60px;
        height: 24px;
        // background: fade(#000000, 40%);
        display: flex;
        justify-content: right;
        border-radius: 12px;
        box-sizing: border-box;
        // 左边 上边 都是5
        padding-top: 5px;
        margin-left: 5px;
        align-items: center;

        .peoples {
            width: 75px;
            height: 13px;
            line-height: 13px;
            font-size: 13px;
            color: #fff;
            margin-left: 6px;
        }

        .feed-live-content-card-btn {
            background: #fa463f !important;
            opacity: 1 !important;
            width: 60px;
            margin-top: 5px;
            height: 24px;
            color: #fff !important;
            border: none !important;
            font-size: 12px;
            text-align: center;
            border-radius: 50px;
            z-index: 1;

            .card {
                &-shipin {
                    &-bg {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        margin-right: 0.01rem;
                        background-position: 50%;
                        background-repeat: no-repeat;
                        background-image: url(data:image/gif;base64,R0lGODlhCgAKAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBOEQ3QkM1NDcyNDQxMUU2QTVFRDg5Q0IwRUY3QjFDQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBOEQ3QkM1NTcyNDQxMUU2QTVFRDg5Q0IwRUY3QjFDQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkE4RDdCQzUyNzI0NDExRTZBNUVEODlDQjBFRjdCMUNDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4RDdCQzUzNzI0NDExRTZBNUVEODlDQjBFRjdCMUNDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQMAAQAsAAAAAAoACgAAAhCMj6nLnQAYNPPUC2PAmIICACH5BAUDAAEALAAABAAKAAMAAAIHBIKpaOthCgAh+QQFAwABACwIAAUAAgABAAACAgQKACH5BAUDAAEALAAAAwAKAAIAAAIGBIKpaAkFACH5BAUDAAEALAAAAgAJAAMAAAIHBIKpYetQAAAh+QQFAwABACwEAAIABgACAAACBASCiVYAIfkEBQMAAQAsAAABAAoAAgAAAgUEgqkbVgAh+QQJAwABACwAAAAABgACAAACBASCiVYAIfkEBQMAAQAsAAAAAAoACgAAAg2MA3CobLminLTai2kBACH5BAkDAAEALAAAAAAKAAIAAAIFjG8AyFEAIfkECQMAAQAsAAAAAAoACgAAAgyMbwCouQijnLTaKwsAIfkECQMAAQAsAAAAAAoACgAAAhSMjwkGe82ag0HOS7OMUff7cRVQAAAh+QQJAwABACwAAAAACgAKAAACFIyPqQdgHVyUDc5XMbY839lt1FgAACH5BAkDAAEALAAAAAAKAAoAAAITjI+pB2CNYGiy0ufm1dj2bHlaAQAh+QQJAwABACwAAAAACgAKAAACEoyPqasA5lAMbtoKH8U7X69dBQAh+QQJAwABACwAAAAACgAKAAACEYyPqbvA4AJEU8JYL96ZbwMVACH5BAkDAAEALAAAAAAKAAoAAAIRjI+pywxgHpLh0WsjrJlrrBUAIfkECQMAAQAsAAAAAAoACgAAAhCMj6nLDOBgeIjOJy3OXPMCACH5BAkDAAEALAAAAAAKAAoAAAIRjI+py90ADEQzwIqvjFb3XQAAIfkEBQMAAQAsAAAAAAoACgAAAhGMj6nL3QAQNDPAii+NVvddAAAh+QQFAwABACwEAAQAAgABAAACAgQKACH5BAUDAAEALAEABQABAAEAAAICRAEAIfkEBQMAAQAsAAADAAoAAwAAAgeMA3DLpo0KACH5BAUDAAEALAQAAgAFAAQAAAIFBIKpi1AAIfkEBQMAAQAsAAAEAAIAAQAAAgIECgAh+QQFAwABACwEAAEAAgABAAACAgQKACH5BAUDAAEALAAAAwACAAEAAAICBAoAIfkECQMAAQAsAAAAAAoABQAAAgiMA3DL7Q9TAQAh+QQJAwABACwAAAAACgAKAAACD4wDcIvKlh50szaJs96sAAAh+QQJAwABACwAAAAACgAKAAACFIyPCJC3bZ5jQS5Lb944Xu91FVAAACH5BAkDAAEALAAAAAAKAAoAAAITjI+pB7DRkoOzRWps3bfbzG1gAQAh+QQJAwABACwAAAAACgAKAAACEoyPqQew0V5kDtY2MzZa8219BQAh+QQJAwABACwAAAAACgAKAAACEYyPqasA7FAM09VHrbl36+wVACH5BAUDAAEALAAAAAAKAAoAAAIRjI+pywzgYHjP1EmtpLvfDxQAIfkECQMAAQAsBAAEAAYAAgAAAgOMj1YAIfkECQMAAQAsAAAAAAoACgAAAgqMj6nL3QCcnLIAACH5BAkDAAEALAAAAAAKAAoAAAIQjI+py+0NgIlxykBvxdTaAgAh+QQFAwABACwAAAAACgAKAAACD4yPqcvtjwAwksoZar7WFgAh+QQFAwABACwAAAYAAgABAAACAgQKACH5BAUDAAEALAAABQAGAAIAAAIEBIKJVgAh+QQFAwABACwAAAQACgADAAACBgSCqctrBQAh+QQFAwABACwEAAUABgABAAACAwQSVgAh+QQFAwABACwAAAMACgACAAACBQSCqYtQACH5BAUDAAEALAAAAgAJAAMAAAIHBIKpu4ZQAAAh+QQFAwABACwIAAMAAgABAAACAgQKACH5BAUDAAEALAAAAQAKAAMAAAIHBIKpG6aeCgAh+QQJAwABACwAAAAAAgABAAACAgQKACH5BAUDAAEALAAAAAAKAAoAAAILjI95AMgKo5y00gIAIfkECQMAAQAsAAAAAAoAAgAAAgWMbwDIUQAh+QQJAwABACwAAAAACgAKAAACC4xvAIjKD6OctNYCACH5BAkDAAEALAAAAAAKAAoAAAIUjI95AGrMXgtwRgqlvDzjbYWdVAAAIfkECQMAAQAsAAAAAAoACgAAAhSMj3kAahxalAzO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);
                    }
                }
            }
        }

        .huifang {
            background: #555 !important;
            opacity: 1 !important;
            width: 60px;
            height: 24px;
            color: #fff !important;
            border: none !important;
            font-size: 12px;
            text-align: center;
            border-radius: 50px;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 5px;
        }

        .yugao {
            background: rgba(0, 0, 0, 0.5) !important;
            opacity: 1 !important;
            width: 60px;
            height: 24px;
            color: #fff !important;
            margin-top: 5px;
            border: none !important;
            font-size: 12px;
            text-align: center;
            border-radius: 50px;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .vedio-play {
        width: 48px;
        height: 48px;
        border-radius: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.5);
        color: #fff !important;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;

        .play-icon {
            margin-left: 2px;
            margin-top: 2px;
        }
        // .feed-live-content-card-play-icon {
        //     width: 48px;
        //     height: 48px;
        //     font-size: 24px;
        //     margin: 13.4px;
        //     color: #fff !important;
        // }
    }

    .show-time {
        background: fade(#000, 50%);
        height: 25px;
        width: 100%;
        color: #fff;
        font-size: 13px;
        line-height: 25px;
        text-align: center;
        position: absolute;
        bottom: 0;
    }
}
</style>
