<template>
    <div class="container" :style="{'padding-top':navHeight +'px'}">
        <div class="navbar" :style="{'height' : navHeight + 'px','padding-top':navTop+'px'}">
            <div @click="toLiveList" class="history-btn">
                <span class="iconfont iconzuo"></span>
            </div>
            <div class="navbar-title">直播计划</div>
        </div>
        <div class="uprefresh" v-if="isUprefresh">正在刷新...</div>
        <div class="no-history"  v-if="!list.length">无历史直播</div>
        <div class="history-list">  
            <div class="list-item" v-for="(item,index) in list" :key="index" @click="liveDetail(item)">
                <div class="item-top">
                    <div class="top-img">
                        <img :src="item.logoUrl" alt="">
                    </div>
                    <div class="top-name">{{item.shopName}}</div>
                </div>
                <div class="item-info">
                    <div class="info-poster">
                        <image :src="item.coverUrl" mode="aspectFill" alt=""></image>
                    </div>
                    <div class="info-detail">
                        <div class="detail-name">{{item.title}}</div>
                        <div class="detail-time">开播时间:{{item.startTime}}</div>
                        <div class="detail-data">
                            <div class="look data-icon">
                                <span class="iconfont iconyanjing"></span>
                                {{item.watchNum}}
                            </div>
                            <div class="thumbs data-icon">
                                <span class="iconfont iconicon_huabanfuben"></span>
                                {{item.likeNum}}
                            </div>
                            <div class="comment data-icon">
                                <span class="iconfont iconpinglun"></span>
                                {{item.guestBookNum}}
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <van-divider 
            class="no-more" 
            v-if="isNoMore" 
            contentPosition="center"
            customStyle="border-color: #ccc;"
        >
        已经到底了
        </van-divider>
    </div>
</template>

<script>
import liveApi from '@/api/liveing'
import { DFSImg,getNavbarInfo } from '../../utils/common.js'
export default {
    data(){
        return{
            list:[],
            currentPage : 1,
            pageSize : 5,
            pages : 0,

            navTop : '',
            navHeight : '',
            isUprefresh :false,
            isNoMore : false,
        }
    },
    methods:{
        getLiveHandler(type){
            if(type == 'init'){
                wx.showLoading({
                    title : '加载中'
                })
            }
            liveApi.queryCompleteLive({
                pageSize : this.pageSize,
                currentPage : this.currentPage
            }).then(res => {
                if(res.data.code == '200'){
                    wx.hideLoading()

                    this.pages = res.data.pages;

                    if(type == 'refresh'){
                        wx.hideNavigationBarLoading();

                        this.isUprefresh = false;
                        // 停止下拉动作
                        wx.stopPullDownRefresh();
                        res.data.data.forEach(item => {
                            item.coverUrl = DFSImg(item.coverUrl)
                            item.logoUrl = DFSImg(item.logoUrl)
                            item.startTime = `${item.startTime.split(' ')[0]} ${item.startTimeByWeek} ${item.startTime.split(' ')[1].substr(0,5)}`
                            
                        })
                        this.list = res.data.data;
                    }else if(type == 'more'){
                        res.data.data.forEach(item => {
                            item.coverUrl = DFSImg(item.coverUrl)
                            item.logoUrl = DFSImg(item.logoUrl)
                            item.startTime = `${item.startTime.split(' ')[0]} ${item.startTimeByWeek} ${item.startTime.split(' ')[1].substr(0,5)}`
                            this.list.push(item)
                        })
                        if(res.data.current == res.data.pages){
                            this.isNoMore = true;
                        }
                    }else{
 
                        res.data.data.forEach(item => {
                            item.coverUrl = DFSImg(item.coverUrl)
                            item.logoUrl = DFSImg(item.logoUrl)
                            item.startTime = `${item.startTime.split(' ')[0]} ${item.startTimeByWeek} ${item.startTime.split(' ')[1].substr(0,5)}`
                        })
                        this.list = res.data.data;

                        
                    }
                    
                }
            }).catch(error => {
                wx.showToast({ title: error, icon: "none" });
                wx.hideLoading()
            })
        },
        liveDetail(item){
            wx.navigateTo({url:`../liveOver/main?id=${item.id}&type=3&liveInfo=${JSON.stringify(item)}`})
        },
        toLiveList(){
            wx.reLaunch({url:`../liveList/main`})
        }
    },
    onShow(){
        this.isUprefresh = false;
        this.isNoMore = false;
        this.currentPage = 1;
        this.getLiveHandler('init')
    },
    created(){
        //获取导航栏信息
        getNavbarInfo((res) => {
            this.navTop = res.navTop
            this.navHeight = res.navHeight
        })  
    },

    onPullDownRefresh(){

        this.isUprefresh = true;

        this.currentPage = 1;

        this.getLiveHandler('refresh');

        wx.showNavigationBarLoading();

        

    },
    onReachBottom(){
        
        if(this.currentPage < this.pages){
            ++this.currentPage;
            this.getLiveHandler('more');
        }
        
    },
    
}
</script>

<style scoped lang="scss">
    img{
        width: 100%;
        height: 100%;
    }
    .container{
        min-height: 100vh;
        background-color: #efefef;
        padding-bottom: 24px;
    }
    .navbar{
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: white;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        .history-btn{
            width: 24px;
            height: 24px;
            position: absolute;
            left: 16px;
            .iconfont{
                font-size: 15px;
                color: #323232;
            }
        }
        .navbar-title{
            font-size: 14px;
            color: #000;
            text-align: center;
        }
    }
    .uprefresh{
        line-height: 30px;
        font-size: 16px;
        color: #999;
        text-align: center;
    }
    .no-history{
        text-align: center;
        padding-top: 20vh;
        font-size: 30px;
        color: #999999;
    }
    .history-list{
        width: 100%;
        box-sizing: border-box;
        padding: 12px 12px 0 12px;
        .list-item{
            width: 100%;
            background-color: white;
            border-radius: 4px;
            padding: 0 12px 16px;
            margin-bottom: 12px;
            box-sizing: border-box;
            .item-top{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                height: 42px;
                margin-bottom: 4px;
                .top-img{
                    width: 27px;
                    height: 27px;
                    border-radius: 50%;
                    overflow: hidden;
                    background-color: #B5B5B5;
                    margin-right: 6px;
                }
                .top-name{
                    font-size: 15px;
                    color: #333333;
                }
            }
            .item-info{
                width: 100%;
                display: flex;
                justify-content: flex-start;
                justify-items: center;
                .info-poster{
                    width: 90px;
                    height: 90px;
                    border-radius: 3px;
                    background-color: #B5B5B5;
                    margin-right: 16px;
                    overflow: hidden;

                    image{
                        width: 100%;
                        height: 100%;
                    }
                }
                .info-detail{
                    .detail-name{
                        font-size: 15px;
                        color: #333333;
                    }
                    .detail-time{
                        font-size: 13px;
                        color: #999999;
                        line-height: 34px;
                    }
                }
                .detail-data{
                    color: #999;
                    font-size: 13px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-top: 14px;
                    .data-icon{
                        margin-right: 16px;
                        font-size: 13px;
                    }
                }
            }
        }
    }
    .no-more{
        width: 90%;
        line-height: 30px;
        font-size: 16px;
        color: #999;
        text-align: center;

    }
</style>