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

<template>
    <div class="page-zt-blueray">
        <section class="blueray-hd">
            <div class="hd-row1" @click="toggleCalendar()">{{month}}月<span v-if="calendarList && calendarList[month-1]">({{calendarList[month-1].count}}部)</span></div>
            <div class="hd-row2">
                <div class="calendar-hd">
                    <div class="col-fl" @click="changeYear(-1)"></div>
                    <div class="col-fm">{{year}}年</div>
                    <div class="col-fr" @click="changeYear(1)"></div>
                </div>
                <div class="calendar-bd">
                    <ul>
                        <li v-for="(item,index) in calendarList" :key="index" :class="{active:item.month==month}"  @click="changeMonth(item.month)">
                            <p>{{item.month}}月</p>({{item.count}}部)
                        </li>
                    </ul>
                </div>
            </div>
            <div class="hd-row3 title-date"><i></i>{{curShowDate}}</div>
        </section>
        <section class="blueray-bd">
            <ul class="list-date">
                <li class="item-date" v-for="(dateData,index) in dateList" :key="index" :data-time="index">
                    <h2 class="title-date"><i></i>{{index | parseDay}}</h2>
                    <ul class="zt-list-film">
                        <li class="item-film" v-for="(article,index) in dateData" :key="index" @click="toVideoDetail(article.aid)">
                            <div class="item-fl">
                                <img :data-original="article.cover" src="//h5-glance.duowan.com/build/bg-pic.png" :alt="article.name">
                            </div>
                            <div class="item-fr">
                                <h2>{{article.name}}<em>{{article.rate}}</em></h2>
                                <p v-if="article.filmmakers">
                                导演：<span v-for="(director,index) in article.filmmakers.directors" :key="index">{{director.name}}&nbsp;</span>  
                                演员：<span v-for="actor in article.filmmakers.actors" :key="actor.name">{{actor.name}}/</span> 
                                </p>
                                <ul class="list-icons">
                                    <li v-for="(type,index) in article.typelist" :key="index">
                                        <i class="icon-blueray1" v-if="type==0"></i>
                                        <i class="icon-blueray2" v-if="type==1 || type==3"></i>
                                        <i class="icon-blueray3" v-if="type==2 || type==3"></i>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>   
            <div class="no-blueray" v-if="!articles.length && !isloading">这月暂无蓝光碟发售</div>
        </section>
        <loading 
            :nextFlag = "nextFlag"
            :loading = "isloading"
            @addScrollEvent = "initScroll"
            @getLoadMore = "getBluRayList"></loading>
    </div>
</template>

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