<template>
    <med-container hide-header>
        <b-top-bar
            :title="pageTitle"
            :bar-class="barClass"
            :text-color="barClass === 'white' ? '#333' : '#fff'"
            :blank="false">
        </b-top-bar>
        <!-- 推荐区域 -->
        <view class="spe-live-header" :class="{'c-filter-gray': isGray}">
            <view class="spe-live-header-content">
                 <view v-if="title" class="spe-live-header-content-project">{{ title }}</view>
                 <view class="spe-live-header-content-group" v-if="logo">
                    <view v-for="(item, index) in logo" :key="index" :style="{display: 'inline-block'}">
                        <!-- <view class="logo-text">{{ item.title }}</view> -->
                        <image
                            :src="item.img"
                            class="logo-img"
                            :style="{
                                width: item.width,
                                height: '15px'
                            }"
                            @load="imgLoad($event, index)">
                    </view>
                 </view>
                 <view class="spe-live-header-content-card">
                    <view class="spe-live-header-content-card-live">   
                            <view @tap="toLink(video.url, {act: 'spe_live', title: video.title, status:video.status, statusText: video.statusText})">
                                <image
                                    :src="video.img"
                                    class="spe-live-header-content-card-poster">                            
                            </view>
                            <view class="spe-live-header-content-card-play" @tap="toLink(video.url, {act: 'spe_live_play', title: video.title, status:video.status, statusText: video.statusText})">
                                <view class="msui-iconfont icon ms-icon-play spe-live-header-content-card-play-icon"></view>
                            </view>
                            
                            <c-btn
                                :class="video.status == 1 ? 'spe-live-header-content-card-shipin' : (video.status === 2 || video.status === 3 ? 'spe-live-header-content-card-huifang' : 'spe-live-header-content-card-yugao')"
                                class="spe-live-header-content-card-btn"
                                font-size="12px"
                                primary-color="#3c76ff"
                                border-radius="30px"
                                auto
                                @tap="toLink(video.url, {act: 'spe_live_btn', title: video.title, status:video.status, statusText: video.statusText})">{{video.statusText}}</c-btn>
                    </view>
                    <view v-if="video.status == 0 || video.audience || video.brief" class="spe-live-header-content-card-wrapper">  
                        <view v-if="video.status == 0">
                            <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">天</text></text>
                                    <text class="spe-live-header-content-card-box"><text> {{ hour }} </text> <text class="c-font-normal">时</text></text>
                                    <text class="spe-live-header-content-card-box"><text> {{ min }} </text> <text class="c-font-normal">分</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 v-if="video.audience || video.brief" class="spe-live-header-content-card-line"></view>
                            </view>
                        </view>
                        <view v-if="video.audience || video.brief" @tap="toLink(video.url, {act: 'spe_live', title: video.title, status:video.status, statusText: video.statusText})">
                            <view v-if="video.audience">观看人数：{{ video.audience }} 人</view>
                            <view v-if="video.brief" class="spe-live-header-content-card-desc c-line-clamp3">简介：{{ video.brief }}</view>
                        </view> 
                    </view>
                 </view>
            </view>
        </view>

        <!-- 直播日历 -->
        <view class="spe-live-calendar" v-if="lives && lives.list && lives.list.length !== 0" :class="{'c-filter-gray': isGray}">
            <navigate
                :url="lives.moreurl"
                :extra="{
                    act: 'spe_live_calendar_list',
                    module: 'liveMore',
                    ref: from
                }"
                class="spe-live-calendar-navigate">
                <view class="title c-font-big">{{ lives.title }}</view>
                <view v-if="lives.moreurl" class="more c-font-15">
                    更多
                    <view class="msui-iconfont icon ms-icon-right icon-more"></view>
                </view>
            </navigate>
             <view class="wrapper">
                <view
                    v-for="(live, liveIndex) in lives.list"
                    :key="liveIndex"
                    @tap="toLink(live.url, {act: 'spe_live_list_item', module: liveIndex, title: live.title, status:live.status, statusText: live.statusText})"
                    class="spe-live-list c-gap-top-large">
                    <view
                        :class="[live.status === 1 ? 'red' : 'gray']"
                        class="spe-live-list-status">
                        <view
                            :class="live.status === 1 ? 'm-icon-shipin shipin' : (live.status === 2 ? 'm-icon-huifang huifang' : 'm-icon-yugao yugao')"
                            class="m-icon icon"></view>
                        <view
                        :class="live.status === 1 ? 'shipin' : (live.status === 2 ? 'huifang' : 'yugao')"
                        class="c-font-small txt">{{ live.statusText }}</view>
                    </view>
                    <view class="spe-live-list-time">
                        <view>{{ live.time }}</view>
                        <view>{{ live.date }}</view>
                    </view>
                    <view class="spe-live-list-info c-line-clamp1">
                        <view 
                            :class="[live.name ? 'c-line-clamp1' : 'c-line-clamp2']"
                            class="spe-live-list-info-title">
                            {{ live.title }}
                        </view>
                        <!-- 医生信息 -->
                        <view v-if="live.name" class="c-line-clamp1">
                            <text class="spe-live-list-info-name">{{ live.name }}</text>
                            <text v-if="live.level" class="c-gap-left-small spe-live-list-info-name">{{ live.level }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <share-img
            v-show="shareImg.show"
            :src="shareImg.src"
            height='78.11vh'
            @close="onCloseShare"
        />

        <view class="spe-topic-share-wrapper swan-security-padding-bottom" :class="{'c-filter-gray': isGray}">
            <view @tap="onTapShare" class="spe-topic-share msui-iconfont icon ms-icon-share">
                <text class="spe-topic-share-text">分享疫情直播</text>
            </view>
        </view>

        <!-- 各种回顾 -->
        <view v-for="(videos, videosIndex) in videoList" :key="videosIndex" class="spe-video-wrapper">
            <navigate
                :url="videos.moreurl"
                :extra="{
                    act: 'spe_live_video_list',
                    module: 'videosMore',
                    ref: from,
                    title: videos.title
                }"
                class="spe-video-navigate">
                <view class="text c-font-big spe-video-title">{{ videos.title }}</view>
                <view v-if="videos.moreurl" class="more c-font-15">
                    更多
                    <view class="msui-iconfont icon ms-icon-right icon-more"></view>                    
                </view>
            </navigate>
            <view
                v-if="videos.list && videos.list.length">
                <view class="spe-video-list">
                    <view
                        v-for="(vItem, i) in videos.list"
                        :key="i"
                        @tap="toLink(vItem.url, {act: 'spe_video_list_item', module: i, title: vItem.title, status:vItem.status, statusText: vItem.statusText})"
                        class="spe-video-list-item c-gap-top-large">
                        <view class="spe-video-list-item-wrapper">
                            <view class="spe-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="spe-video-list-item-wrapper2">
                            <view class="c-line-clamp2 title c-font-normal c-gap-top-small text-clamp2">
                                {{ vItem.title }}
                            </view>
                            <view v-if="vItem.audience" class="spe-video-list-item-audience c-line-clamp1 info c-font-normal">
                                <text>观看人数：{{ vItem.audience }}</text>
                            </view>
                            <!-- <view v-if="vItem.name || vItem.level" class="c-line-clamp1 info c-font-normal">
                                <text>{{ vItem.name }}</text>
                                <text class="c-gap-left">{{ vItem.level }}</text>
                            </view>
                            <view v-if="vItem.hospital || vItem.department" class="c-line-clamp1 info c-font-normal">
                                <text>{{ vItem.hospital }}</text>
                                <text class="c-gap-left">{{ vItem.department }}</text>
                            </view> -->
                        </view>
                    </view>
                </view>
            </view>
        <view>
    </med-container>
</template>

<script>

/**
* @file 直播聚合页
* @author lixue25
*/
import * as conf from '../../../utils/conf';
import * as core from '../../../utils/core';
import {navToBdBoxH5} from '../../../utils/navigate';
import {request} from '../../../utils/request';
import {send, ShowLog} from '../../../utils/log';
import {shareBdBox} from '../../../utils/share';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import Container from '../../../components/common/container';
import ShareImg from '../../../components/common/share-img';
import CButton from '@baidu/med-ui/components/Button/Button';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import Navigate from '../../../components/common/navigate';
import videoCover from '../../../components/common/video-cover';
import topBar from '../../../components/common/topbar';

export default {
    data() {
        return {
            pageTitle: '健康直播间',
            title: '',
            logo: [],
            lives:{},
            videoWidth: 0,
            video: {},
            isPageRender: true,
            loadStatus: 'init',
            from: '',
            shareInfo4Bd: {
                title: '健康直播间',
                content: '',
                imageUrl: ''
            },
            shareImg: {
                show: false,
                src: 'https://med-video.bj.bcebos.com/liveposter-2-0.jpg'
            },
            sh: null,
            day: '',
            hour: '',
            min: '',
            second: '',
            barClass: 'transparent',
            isGray: core.isQingMingTime()
        };
    },
    onPageScroll(scrollInfo) {
        if (scrollInfo.scrollTop < 44) {
            this.barClass = 'transparent';
        } else {
            this.barClass = 'white';
        }
    },
    onLoad(options) {
        const systemInfo = getSystemInfo();
        this.videoWidth = systemInfo.screenWidth - 34;

        this.getPageData(options);
        this.from = options.sf_ref || '';
    },
    onShareAppMessage() {
        return this.shareInfo4Bd;
    },
    mounted() {
        if (process.env.MARS_ENV === 'h5') {
            shareBdBox(this.shareInfo4Bd);
        }
    },
    methods: {
        getPageData(options) {
            request({
                url: conf.apiHost + '/med/page/livefyhome',
                method: 'GET',
                data: Object.assign({
                    vn: 'med'
                }, options),
                isFirstScreen: true,
                isNeedLogin: false,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            })
            .then(({data, update}) => {
                // 透传sf_ref
                if (data.lives && data.lives.moreurl) {
                    data.lives.moreurl = data.lives.moreurl + '&sf_ref=' + this.from;                    
                }
                if (data.sections) {
                    data.sections.forEach(element => {
                        if (element.moreurl) {
                            element.moreurl = element.moreurl+ '&sf_ref=' + this.from;                            
                        }
                    });
                    this.videoList = data.sections;                    
                }
                this.title = data.logo.title;
                if (data.logo && data.logo.unit && data.logo.unit.list) {
                    this.logo = data.logo.unit.list;                    
                }
                if (data.lives) {
                    this.lives = data.lives;
                    if (this.lives.list) {
                        this.lives.list.forEach(element => {
                            let date = element.date.split('/');
                            element.date = date[1] + '/' +date[2];
                        })
                    }
                }
                this.video = data.banner;
                if (data.banner.date && data.banner.time) {
                    this.endDate = data.banner.date;
                    this.endTime = data.banner.time;
                    this.countDown();
                    this.sh = setInterval(this.countDown, 1000);
                }
                update.call(this, () => {
                    this.$mpUpdated().then(() => {
                        // 更新数据，页面渲染完成后，获取值
                        try {
                            
                        } catch (error) {
                            console.error(error);
                        }
                    });
                });
            })
            .catch(error => console.error(error));
        },
        onCloseShare() {
            this.shareImg.show = false;
        },
        toLink(url, extra) {
            // send({
            //     type: 'b',
            //     action: 'spe_live_link',
            //     extra: Object.assign({
            //         ref: this.from
            //     }, extra)
            // });
            if (process.env.MARS_ENV === 'h5' && url) {
                window.location.href = url;
            }
        },
        countDown() {
            let endtime=new Date(this.endDate + ',' + this.endTime);//结束时间
            let nowtime = new Date();//当前时间
            let lefttime= parseInt((endtime.getTime()-nowtime.getTime())/1000);
            this.day = parseInt(lefttime/3600/24);
            this.hour = parseInt(lefttime/(60*60))%24;
            this.min = parseInt(lefttime/(60))%60;
            this.second = parseInt(lefttime%60);
        
            if(lefttime <= 0){
                clearInterval(this.sh);
                this.second = this.min = this.hour = this.day = 0;
            }
        },
        imgLoad(e, index) {
            let {width, height} = e.detail;
            let iWidth= 15 * width / height;
            this.logo[index].width = iWidth + 'px';
            this.$set(this.logo, index, this.logo[index]);
        },
        onTapShare() {
            this.shareImg.show = true;
            send({
                type: 't',
                action: 'o',
                extra: {
                    page: 'speLiveShare',
                    ref: this.from
                }
            });
        },
    },
    components: {
        CIcon,
        videoCover,        
        'c-btn': CButton,
        'navigate': Navigate,
        'med-container': Container,
        'share-img': ShareImg,
        'b-top-bar': topBar
    }
};
</script>

<style lang="less" scoped>
.text-clamp2 {
    overflow : hidden;
    text-overflow: ellipsis;
    display: box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.logo {
    // &-text {
    //     display: inline-block;
        
    // }
    &-img {
        width: 0.43rem;
        height: .15rem;
        display: inline-block;
        margin: .2rem .2rem 0 0;
    } 
}
.title {
    font-family: PingFang-SC-Medium;
    font-size: .19rem;
    letter-spacing: 0;
    line-height: .19rem;
}
.txt {
    display: inline-block;
    font-family: PingFang-SC-Medium;
    font-size: .12rem;
    letter-spacing: 0;
    line-height: .12rem;
}
.more {
    // float: right;
    font-family: PingFang-SC-Regular;
    font-size: .14rem;
    color: #999999;
    letter-spacing: 0;
    line-height: .19rem;   
}
.icon-more {
    display: inline-block;
    float: right;
}
.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: #FFFFFF;
            letter-spacing: 0;
            line-height: .11rem;
        }

        &-project {
            margin-top: .37rem;
            font-family: PingFang-SC-Medium;
            font-size: 30px;
            color: #FFFFFF;
            letter-spacing: 0;
            line-height: .22rem;
        }

        &-group {

        }

        &-card {
            margin: .12rem 0 0 0;            
            // padding: 0 0 .15rem 0;
            font-family: PingFang-SC-Regular;
            font-size: .14rem;
            color: #555555;
            letter-spacing: 0;
            line-height: .21rem;
            background: #FFFFFF;
            box-shadow: 0 3.3px 16.7px 0 rgba(0,0,0,0.08);
            border-radius: 10px;
            overflow: hidden;

            &-wrapper {
                padding: 0.07rem 0.17rem 0 0.17rem;
                margin: 0.05rem 0 .15rem 0;
            }

            &-live {
                position: relative;
            }

            &-btn {
                width: 53.01px;
                position: absolute;
                right: 6.02px;
                bottom: 6.02px;
                background: rgba(0, 0, 0, 0.5) !important;
                padding: 0.1px 7px;
                color: white !important;
                border: none !important;
                font-size: 12px;
                transform:scale(0.83,0.83);                
            }

            &-shipin {
                background: #FF1700 !important;
                opacity: 1 !important;
            }
            &-huifang {
                // background: #999999 !important;
                // opacity: 1 !important;
            }
            &-yugao {
                // background: #01C8C1 !important;
                // opacity: 1 !important;                
            }

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

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

                &-icon {
                    font-size: 24px;
                    margin: 13.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: #555555;
                line-height: 30px;
                text-align: center;
                margin: 3px 0;                
            }
            &-distance {
                font-family: PingFangSC-Regular;
                font-size: 13px;
                color: #999999;
                text-align: center;
                line-height: 13px;
                margin-bottom: 15px;                
            }

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

            &-desc {
                margin-bottom: 0.15rem;
                font-family: PingFang-SC-Regular;
                font-size: 14px;
                color: #555555;
                letter-spacing: 0;
                line-height: 23.3px;
            }
        }
    }
}
.spe-live-calendar {
    margin-top: .30rem;
    padding: 0 .17rem;
    &-navigate {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
.shipin {
    color: #ff6050;
}
.huifang {
    color: #999999;    
}
.yugao {
    color:  #00C8C8;;
}
.spe-live {
    &-list {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        color: #333;
        font-size: 13px;
        line-height: 23px;
        box-shadow: 0 3.3px 16.7px 0 rgba(0,0,0,.08);
        background: #FFFFFF;
        border-radius: 6px;

        &-status {
            flex: none;
            white-space: nowrap;
            background: #fafafa;
            padding-top: 7px;
            padding-bottom: 7px;
            width: 60px;
            text-align: center;
            font-family: PingFang-SC-Regular;
            font-size: 10px;
            color: #00C8C8;
            letter-spacing: 0;
            text-align: center;
            line-height: 12px;
            &.red {
                color: #f86b62;
            }
            &.gray {
                color: #00C8C8;
                background: #FAFAFA;
                border-radius: 6px 0px 0px 6px;
            }
            .icon {
                font-size: 22px;
                line-height: 26px;
                padding-top: 1px;
            }
            .txt {
                line-height: 1;
                padding-top: 6px;
            }
        }
        &-time {
            flex: none;
            white-space: nowrap;
            margin-top: 7px;
            margin-bottom: 7px;
            border-right: 1px solid #f6f6f6;
            margin-right: 10px;
            width: 54px;
            text-align: center;
        }
        &-info {
            flex: 1;
            padding-top: 7px;
            padding-bottom: 7px;
            padding-right: .15rem;
            font-weight: bold;  
            font-family: PingFang-SC-Medium;
            font-size: 14px;
            color: #333333;
            letter-spacing: 0;
            line-height: 21px;          
            &-name {
                font-size: 12px;
                color: #999;
            }
            &-title {
                margin: 0.03rem 0 0 0;
                font-family: PingFang-SC-Medium;
                font-size: 14px;
                color: #333333;
                letter-spacing: 0;
            }
        }
    }
}
.spe-video {
    &-wrapper {
        margin: 0.30rem 0;
        padding: 0 0.17rem;
    }

    &-navigate {
        margin-top: 0.07rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &-title {
        display: inline-block;
        font-family: PingFang-SC-Medium;
        font-size: 19px;
        color: #333333;
        letter-spacing: 0;
        // line-height: 19px;
    }
    &-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: -5px;
        &-item {
            padding: 0;
            // padding: 0 10px 10px 10px;
            // flex: none;
            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;
            }

            &-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;
            }
        }
    }
}
.spe-topic-share {
    font-size: 22px;
    color: #ffffff;
    &-wrapper {
        z-index: 89;
        position: fixed;
        right: 0;
        bottom: 12.6%;
        display: flex;
        padding: 0 .15rem;
        justify-content: center;
        align-items: center;
        height: 44px;
        border-top-left-radius: .6rem;
        border-bottom-left-radius: .6rem;
        background-image: linear-gradient(44deg, #07D2C7 0%, #2FEBA7 100%);
        box-shadow: 0 3.3px 16.7px 0 rgba(15,216,193,0.30);
    }
    &-text {
        margin-left: 5px;
        font-size: 16px; 
        font-weight: bold;
        display: inline-block;
        padding-bottom: 3px;       
    }
}
.ms-icon-share:before {
    content: "\E642";
    vertical-align: middle;
}
</style>
