<style lang="sass">
@import "./scss/schedule.scss";
</style>

<template>
    <div class="page-video-schedule">
        <section class="schedule-hd">
            <ul class="hd-row1">
                <li>
                    <a :class='{active:area=="CN"}' @click='changeNav("CN",timeType,true)'>中国</a>
                </li>
                <li>
                    <a :class='{active:area=="USA"}' @click='changeNav("USA",timeType,true)'>北美</a>
                </li>
                <li>
                    <a :class='{active:area=="WORLD"}' @click='changeNav("WORLD",5,true)'>全球</a>
                </li>
            </ul>
            <div class="hd-row2">
                <p>
                    <template v-if='area=="CN" || area=="USA"'>
                        <a :class='{active:timeType=="1"}' @click='changeNav(area,1)'>{{area=="CN"?"实时":"日榜"}}&nbsp;</a>
                        <a :class='{active:timeType=="3"}' @click='changeNav(area,3)'>/&nbsp;月榜&nbsp;</a>
                        <a :class='{active:timeType=="4"}' @click='changeNav(area,4)'>/&nbsp;总榜&nbsp;</a>
                    </template>
                    <template v-else>
                        <a class="active">&nbsp;总榜&nbsp;</a>
                    </template>
                </p>
                <p class="tip">{{updataTip}}</p>
            </div>
        </section>
        <section  class="schedule-bd">

            <ul class="zt-list-film ext-list">
                <li class="item-film" v-for="(article,index) in articles" :key="index" @click="toVideoDetail(article.articleId)">
                    <div :class='"item-rank item-rank"+(index+1)'><em>{{index+1}}</em></div>
                    <div class="item-fl">
                        <img :src="article.cover" :alt="article.name">
                    </div>
                    <div class="item-fr">
                        <h2>{{article.name}}<em>{{article.rate}}</em><span v-if="article.newMoiveFlag==1" class="tag-new"></span></h2>

                        <template v-if="timeType==1 || timeType==3">
                            <p>
                                {{timeType==1?"今日票房":"当月票房"}}<em>{{area=="CN"?"￥":"$"}}{{article.boxOffice | parseBoxOffice}}</em>
                            </p>
                            <p>
                                累计票房{{area=="CN"?"￥":"$"}}{{article.sumBoxOffice | parseBoxOffice}}，已上映{{article.releaseDate | parseReleaseDate}}
                            </p>
                        </template>
                        <template v-else>
                            <p>
                                累计票房<em>{{area=="CN"?"￥":"$"}}{{article.boxOffice | parseBoxOffice}}</em>
                            </p>
                            <p v-if="article.filmmakers">
                                <span v-if="article.filmmakers.directors">导演：</span><span v-for="(director,index) in article.filmmakers.directors" :key="index">{{director.name}}&nbsp;</span>  
                                <span v-if="article.filmmakers.actors">演员：</span><span v-for="actor in article.filmmakers.actors">{{actor.name}}/</span> 
                            </p>
                        </template>

                        <div class="item-btns2">
                            <span class="btn btn-preview" v-if="article.trailerCount>0" @click.stop.prevent="toVideoPreview(article.articleId)">预告片</span>
                            <span class="btn btn-post" v-if="article.commentaryCount>0" @click.stop.prevent="toCommentaryDetail(article.commentaryId)">解说视频</span>
                        </div>
                    </div>
                </li>
            </ul>

        </section>
        <loading 
            :nextFlag = "nextFlag"
            :loading = "isloading"
            @getLoadMore = "getBoxOfficeList"></loading>
    </div>
</template>

<script>
    import boxoffice from './js/boxoffice.js'
    export default boxoffice
</script>