<template>
	<view class="content" style="width: 100%; height: 100%; position: relative;" :style="{height: (windowHeight - classificationHeight) +'px'}">
		<refresh @interrupt="interrupt" @pushToInterrupt="pushToInterrupt" @finished="finished" @scrolltolower="g" 
		:scrollHeight="(windowHeight - classificationHeight)">
			<template slot="top">
				<view style="color: #FFFFFF;position: absolute;  top: 0;width: 100%; text-align: center;" 
				:style="'height:' + 40 + 'px; line-height:' + 40 + 'px;'">{{tip}}</view>
			</template>
			<template slot="content">
				<view style="width:100%; margin: auto; height:calc(100% - 40upx); overflow: hidden;">
					<view style="float: left; width: calc(100% / 3); margin: 20upx 0 0;" 
						v-for="(item, index) in datalist" :key="index" @click="bgColorAssembly(item)">
						<view style="width: 139upx; height: 139upx; margin: auto; position: relative;">
							<view style="width: 139upx; height: 139upx; margin: auto; border-radius: 5upx; overflow: hidden;" 
							:style="'background:' + item.color"></view>
						</view>
					</view>
					<view class="align-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
					 v-if="datalist.length == 0">
						<span class="iconfont icon-wushuju" style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span>
						<view style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 24upx;">啊嘞，还是一片荒漠</view>
					</view>
				</view>
			</template>
			<template slot="bottom">
				<view>
				没有更多数据了
				</view>
			</template>
		</refresh>
	</view>
</template>

<script>
	import homeservice from '@/service/homeservice.js';
	import refresh from '@/components/xing-refresh/xing-refresh.vue';
	export default {
		props: {
			windowHeight: {
				type: Number,
				default: 563
			},
			classificationHeight: {
				type: Number,
				default: 0
			},
		},
		components: {
			refresh
		},
		data() {
			return {
				queryPage: {
					s: 'Material.colorList',
					page:1,
					per_page:20,
				},
				datalist: [], //作品、贴图列表
				tip: ''
			};
		},
		mounted() {
			
		},
		methods: {
			bgColorAssembly(item){
				this.$emit('bgColorAssembly',item.color)
			},
			g(e){
				uni.showLoading({
					title: '正在加载中...'
				})
				homeservice.WorksList(this.queryPage).then(result => {
					this.datalist = this.datalist.concat(result.data)
					this.queryPage.page += 1;
					if (Math.ceil(result.total / result.per_page) <= this.queryPage.page) {
						return setTimeout(() => {
							uni.showToast({title: '没有更多数据了！',icon: 'none'});
						}, 500);
					}
					uni.hideLoading();
				}).catch(err => {
					uni.showToast({title: err.msg,icon: 'none'})
					uni.hideLoading();
				});
			},
			interrupt(e) {
				this.tip = '刷新中'
				//模拟发送请求
				setTimeout(e, 500);
				this.tip = '刷新成功';
				this.queryPage.page = 1
				this.getShapeList()
			},
			pushToInterrupt() {
				this.tip = '释放刷新';
			},
			finished() {
				this.tip = '下拉刷新';
			},
			open() {
				this.queryPage.page = 1
				this.getShapeList()
			},
			getShapeList(){
				this.datalist = []
				uni.showLoading({title: '正在加载中...'})
				//查询颜色列表
				homeservice.WorksList(this.queryPage).then(result => {
					this.datalist = result.data
					this.queryPage.page += 1;
					uni.hideLoading();
					this.tip = '';
				}).catch(err => {
					uni.showToast({title: err.msg,icon: 'none'})
					uni.hideLoading();
				});
			}
		}
	}
</script>
<style lang="scss">
</style>