<template>
    <view>
        <!-- 直播推荐 -->
        <view
            class="spe-live-header-content-card"
            @tap="toLink(
                banner.ori_url,
                banner.url,
                banner.status !== -1,
                {'module': 'live_channel_banner'}
            )"
        >
            <view class="spe-live-header-content-card-live">
                <view>
                    <view
                        class="spe-live-header-content-card-poster"
                        :style="{
                            'background-image': 'url(' + (banner && banner.img) + ')'
                        } | imgCompress('background-image')"
                    ></view>
                </view>
                <view class="spe-live-header-content-card-play">
                    <c-icon
                        name="play"
                        font-size="24px"
                        :style="{color: '#ffffff'}"
                        class="spe-live-header-content-card-play-icon"
                    >
                    </c-icon>
                </view>

                <!-- eslint-disable max-len -->
                <view
                    :class="(banner && banner.status) == 0 ? 'spe-live-header-content-card-shipin' : ((banner && banner.status) === 1 ? 'spe-live-header-content-card-huifang' : 'spe-live-header-content-card-yugao')"
                    class="spe-live-header-content-card-btn"
                >
                    <view :class="(banner && banner.status) === 0 ? 'spe-live-header-content-card-shipin-bg' : ''"></view>
                    {{ banner && banner.statusText }}
                </view>
                <!-- eslint-enable max-len -->

                <!-- 浮层 -->
                <view class="spe-live-header-content-card-mask">
                    <view class="spe-live-header-content-card-mask-text">
                        <!-- eslint-disable max-len -->
                        <view
                            v-if="(banner && banner.title)"
                            class="c-line-clamp1"
                            :style="{fontWeight: 'bold'}"
                        >{{ banner && banner.title }}</view>
                        <view v-if="(banner && banner.date) || (banner && banner.time)" class="c-line-clamp1 c-font-small">{{ banner && banner.date }}<text v-if="banner && banner.date" class="c-gap-right-small"></text>{{ banner && banner.time }}开播</view>
                        <!-- eslint-enable max-len -->
                    </view>
                </view>
            </view>
            <!-- eslint-disable max-len -->
            <view v-if="banner && (banner.status == 0 || banner.audience || banner.brief)" class="spe-live-header-content-card-wrapper">
                <view v-if="banner && banner.status == -1">
                    <view class="spe-live-header-content-card-count">
                        <view class="spe-live-header-content-card-time">
                            <text class="spe-live-header-content-card-box"><text>{{ day }}</text> <text class="c-font-normal">天&nbsp;</text></text>
                            <text class="spe-live-header-content-card-box"><text>{{ hour }}</text> <text class="c-font-normal">时&nbsp;</text></text>
                            <text class="spe-live-header-content-card-box"><text>{{ min }}</text> <text class="c-font-normal">分&nbsp;</text></text>
                            <text class="spe-live-header-content-card-box"><text>{{ second }}</text> <text class="c-font-normal">秒</text></text>
                        </view>
                        <view class="spe-live-header-content-card-distance">距离直播开始还有</view>
                    </view>
                </view>
                <view
                    v-if="banner && (banner.status == -1) && (banner.audience || banner.brief)"
                    class="spe-live-header-content-card-line"
                ></view>
                <view v-if="banner && banner.audience || banner.brief">
                    <view
                        v-if="banner && banner.audience"
                    >观看人数：{{ banner && banner.audience }} 人</view>
                    <view
                        v-if="banner && banner.brief"
                        class="spe-live-header-content-card-desc c-line-clamp3"
                    >简介：{{ banner && banner.brief }}</view>
                </view>
            </view>
            <!-- eslint-enable max-len -->
        </view>
        <!-- 精选栏目 -->
        <view v-if="topics && topics.length" class="topic-wrap">
            <view class="c-gap-bottom c-gap-top">精选栏目</view>
            <video-swiper
                :column-list="topics"
                page="popular_science"
                :swiper-width="screenWidth - 22"
                livesource="sbjkzbpd-xcx"
                :is-shadow="false"
                previous-margin="16px"
                next-margin="8px"
                banner-text-width="75%"
            />
        </view>
    </view>
</template>
<script>
/**
 * @author zhangqian51
 * @file 精选名医直播
 * @categories 组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import VideoSwiper from '../speTopic/live/VideoSwiper';
import * as core from '../../utils/core';
import {navigate, navToBdBoxH5} from '../../utils/navigate';
import {send} from '../../utils/log';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
export default {
    config: {
        component: true
    },
    components: {
        CIcon,
        VideoSwiper
    },
    props: {
        /**
         * 数据
         */
        data: {
            type: Object,
            default: () => {
                return {};
            },
            required: true
        }
    },
    data() {
        return {
            banner: {
                img: '',
                status: '',
                statusText: '',
                title: '',
                date: '',
                brief: '',
                duration: '',
                url: '',
                time: ''
            },
            topics: [],
            screenWidth: 0
        };
    },
    watch: {
        data(newVal, oldVal) {
            if (newVal.topics.length !== (this.topics && this.topics.length)) {
                this.banner = newVal.banner;
                this.topics = newVal.topics;
            }
        }
    },
    lifetimes: {
        attached() {
            this.banner = this.data.banner;
            this.topics = this.data.topics;
        }
    },
    created() {
        const systemInfoSync = getSystemInfo();
        this.screenWidth = systemInfoSync.screenWidth;
    },
    methods: {
        toLink(oriUrl = '', outLink = '', isNaLink = false, extra = {}) {
            if (oriUrl) {
                if (process.env.MARS_ENV === 'h5') {
                    window.location.href = oriUrl;
                } else {
                    navigate({
                        url: oriUrl,
                        extra: JSON.stringify(extra)
                    });
                }
            } else if (outLink) {
                outLink = outLink + '&source=' + (process.env.MARS_ENV === 'swan' ? 'sbjkzbpd-xcx' : 'sbjkzbpd-h5');
                navToBdBoxH5(outLink, isNaLink ? {
                    module: 'live',
                    action: 'enterRoom',
                    parameters: {
                        params: {
                            roomId: core.getQueryObject(outLink).room_id,
                            source: {
                                livesource: 'sbjkzbpd-xcx'
                            }
                        }
                    }
                } : {
                    module: 'browser',
                    action: 'open',
                    parameters: {
                        simple: '1'
                    }
                });
            }
            send({
                type: 'l',
                action: 'click',
                extra: Object.assign({
                    from: this.from
                }, extra)
            });
        }
    }
};
</script>
<style lang="less" scoped>
.spe-live-header {
    position: relative;

    &::before {
        content: '';
        height: 2rem;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
        background: linear-gradient(134deg, #00cfa3 0%, #05cfcd 61%, #00d3ea 100%);
    }

    &-content {
        position: relative;
        z-index: 1;
        height: 100%;
        padding: .17rem .17rem 0 .17rem;

        &-text {
            text-align: center;
            font-family: PingFang-SC-Medium;
            font-size: .2rem;
            color: #fff;
            letter-spacing: 0;
            line-height: .11rem;
        }

        &-group {
            margin-top: 30px;
        }

        &-card {
            margin: .09rem 0 0 0;
            // padding: 0 0 .15rem 0;
            font-family: PingFang-SC-Regular;
            font-size: .14rem;
            color: #555;
            letter-spacing: 0;
            line-height: .21rem;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;

            &-wrapper {
                padding: .1rem .17rem .05rem .17rem;
                background: #fafafa;
            }

            &-live {
                position: relative;
            }

            &-btn {
                width: 53.01px;
                position: absolute;
                right: 6.02px;
                bottom: 6.02px;
                background: rgba(0, 0, 0, 0.5) !important;
                padding: 4px 7px;
                color: white !important;
                border: none !important;
                font-size: 12px;
                // transform:scale(0.83,0.83);
                text-align: center;
                border-radius: 30px;
                z-index: 1;
            }

            &-mask {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                padding: .2rem .15rem .05rem .15rem;
                color: #fff;
                font-size: .17rem;
                font-family: PingFang-SC-Regular;
                line-height: .18rem;
                background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);

                &-text {
                    width: 75%;
                }
            }

            &-shipin {
                background: #fa463f !important;
                opacity: 1 !important;

                &-bg {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    margin-right: .01rem;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-image: url(data:image/gif;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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);
                }
            }

            &-poster {
                width: 100%;
                height: calc(60.22vw - 34px);
                display: block;
                background-size: cover;
            }

            &-play {
                width: 48px;
                height: 48px;
                border-radius: 100%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0, 0, 0, 0.4);
                color: #fff !important;
                text-align: center;
                line-height: 48px;

                &-icon {
                    font-size: 24px;
                    margin-left: 4px;
                }
            }

            &-box {
                font-family: Helvetica Neue, Consolas, Monaco, monospace;
            }

            &-count {
                margin: 5px 0 10px 0;
            }

            &-time {
                font-family: PingFang-SC-Light;
                font-size: 28px;
                color: #555;
                line-height: 30px;
                text-align: center;
                margin: 3px 0;
            }

            &-distance {
                font-family: PingFangSC-Regular;
                font-size: 13px;
                color: #999;
                text-align: center;
                line-height: 13px;
                margin-bottom: 15px;
            }

            &-line {
                border-bottom: 1px solid #f4f4f4;
                margin: 15px 0;
            }

            &-desc {
                font-family: PingFang-SC-Regular;
                font-size: 14px;
                color: #555;
                letter-spacing: 0;
                line-height: 23.3px;
            }
        }
    }
}
</style>
