<!--index.wxml-->
<scroll-view class='films' scroll-y="true" bindscrolltolower="lower" bindscrolltoupper="bindscrolltoupper" style="height:{{scrollHeight}}px" >
	<view class='top'>
		<view class='position'>
			<text>广州</text>
		</view>
		<view class='search'>
			<view><icon type='search' size='18' />找影视剧、影院</view>
		</view>
	</view>
	<view class='main'>
		<view wx:for='{{films}}' class='film' wx:key='{{index}}' data-id='{{item.id}}' bindtap='bindDetail' >
			<view style='margin-left:10px;display: flex;border-bottom:1px solid #ccc;'>
				<view class='image'>
					<image src="{{item.img}}"></image>
				</view>
				<view class='detail'>
					<title>{{item.nm}}
						<text class="threeD" wx:if='{{item["3d"]}}'>3D</text>
						<text class='imax' wx:if='{{item.imax}}'>IMAX</text>
						<text class='score' wx:if='{{item.preSale !== 1}}'>{{item.sc}}<text style='font-size:12px'>分</text></text>
						<text class='wish' wx:else>{{item.wish}}<text style='font-size:12px'>想看</text></text>
					</title>
					<view class='type'>
						{{item.cat}}
					</view>
					<view class='star'>
						{{item.star}}
					</view>
					<view class='showInfo'>
						{{item.showInfo}}
					</view>
					<button type='warn' size='mini' class='buy' wx:if='{{item.preSale !== 1}}'>购买</button>
					<button type='warn' size='mini' style='background: #007fef' class='buy' wx:else>预售</button>
				</view>
			</view>
		</view>
		<view class='loading' hidden='{{!loading}}'>正在加载...</view>
	</view>
</scroll-view>

/**index.wxss**/


/*top*/
.top{
	padding:10px;
	display: flex;
	font-size: 16px;
}

.top .position{
	margin-right: 20px;
	vertical-align: bottom;
	padding:3px 0;
}
.top .search{
	background-color: #fff;
	padding:3px 0;
	flex:1;
	text-align: center;
	color:#999;
}
.top .search icon{
	position: relative;
	top:-2px;
	left:-2px;
}

/*main*/
.main{
	margin-top:10px;
}
.film {
	padding:10px 0;
	background-color:#fff;
	height:100px;
	
}
.film .image{
	height: 100px;
}
.film image{
	width:70px;
	height:100px;
	margin-right:10px;
}
.film .detail{
	flex:1;
	position: relative;
	padding-right:10px;
}
.film title{
	font-size:15px;
}
.film .threeD{
	background-color:#49d95d;
	border:1px solid #999;
}
.film .imax{
	background-color:transparent;
	border:1px solid #999;
	border-left:none;
}
.film .score,
.film .wish{
	float:right;
	color:orange;
	position: relative;
	top:5px;
}
.film .type,
.film .star,
.film .showInfo{
	font-size:12px;
	color:#999;
	margin:5px 0;
	width:190px;
	overflow: hidden;
	white-space:nowrap; 
	text-overflow: ellipsis;
}
.film .buy{
	float:right;
	position: absolute;
	top:60px;
	right:10px;
}
.loading{
	text-align: center;
	color:#999;
	font-size:16px;
}

//index.js
//获取应用实例
const app = getApp()
Page({
    data: {
        films: [

        ],

        // 控制分页（展示数量）
        offset: 0,
        limit: 10,

        scrollHeight: 0,

        loading: true,
        userInfo: {}
    },
    onLoad: function () {
        console.log('onLoad')
        const that = this
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo){
            //更新数据
            that.setData({
                userInfo:userInfo
            })
        });

        wx.getSystemInfo({
            success(res){
                that.setData({
                    scrollHeight: res.windowHeight
                })
                console.log(res.windowHeight)
            }
        })

        this.loadFilms();
    },

    // 滑动到底部，加载更多
    lower(e){
        this.setData({
            loading: true
        })
        this.loadFilms()
    },
    //滑动到头部
    bindscrolltoupper(e){
        console.log(e)
    },
    //加载电影
    loadFilms(){
        const that = this;
        wx.request({
            url: 'https://m.maoyan.com/movie/list.json',
            data:{
                type: "movies",
                offset: this.data.offset,
                limit: 10
            },
            method: "GET",
            header: {
                'content-type': 'application/json'
            },
            success(res){
                let films = that.data.films;
                films = films.concat( res.data.data.movies );

                that.setData({
                    films: films,
                    offset: that.data.offset + 10,
                    loading: false,
                });
                console.log(that.data.films);
            }
        })
    },
    bindDetail(e){
        const id = e.currentTarget.dataset.id;
        wx.navigateTo({
            url: 'detail/detail?id=' + id
        })
    }
})