<template>
	<!-- 相框 -->
	<view class="content" style="width: 100%; height: 100%; position: relative;">
		<refresh @interrupt="interrupt" @pushToInterrupt="pushToInterrupt" @finished="finished" @scrolltolower="g" :scrollHeight="windowHeight">
			<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(90% - 160upx); overflow: hidden;">
					<view style="float: left; width: calc(100% / 3); margin: 40upx 0 0;" v-for="(item, index) in datalist" :key="index" @click="Worksdetail(item)">
						<view style="width: 148.5upx; height: 204.6upx;margin: auto; position: relative;">
							<view v-if="item.name == '清除'">
								<image style="width: 148.5upx; height: 148.5upx;margin: auto;" 
								src="../../../static/icon/diy_icon_remove_normal.png" mode=""></image>
							</view>
							<view v-else :style="{'mask-image':' url(' + item.image + '?x-oss-process=image/resize,lfit,w_112)','-webkit-mask-image':' url(' + item.image + '?x-oss-process=image/resize,lfit,w_112)',}"
							style="width: 100%; height: 100%; overflow: hidden; mask-size: 80%; -webkit-mask-size: 80%;mask-repeat:no-repeat;-webkit-mask-repeat: no-repeat;">
								<image style="width: 148.5upx; height: 204.6upx; margin: auto;" :src="item.compose_image  + '?x-oss-process=image/resize,lfit,w_112'"
								 mode="aspectFill"></image>
							</view>
							<!-- <view v-if="Number(item.sales_price) > 0" style="min-width: 39upx; position: absolute; top: 0; right: 0; 
							background: #EF5354; border-radius: 8upx 0upx 11upx 8upx; text-align: center; padding: 2upx 8upx;
							font-size: 18upx; font-weight: bold; color: #FFFFFF;">￥{{item.sales_price}}</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
			}
		},
		components: {
			refresh
		},
		data() {
			return {
				queryPage: {
					s: 'Material.getShapeList',
					page: 1,
					per_page: 50,
					shape_category_id: null, //分类
					goods_category_id:null,//星形接口列表增加，产品分类参数
					total: 0,
					machine_id: null, //设备id
				},
				datalist: [], //作品、贴图列表
				Material_category:[] ,//贴图分类
				currentId: 0,/* 控制被选中 */
				currentIndex:null,/* 控制位置 */
				tip: ''
			};
		},
		mounted() {
			// this.getShapeList()
		},
		/**
		 * 组件的公有方法列表
		 */
		methods: {
			Worksdetail(item){
				console.log(item)
				this.$emit('Worksdetail',item)
			},
			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(queryPage) {
				this.queryPage = {
					page:queryPage.page,
					per_page:queryPage.per_page,
					s:queryPage.s,
					shape_category_id:queryPage.shape_category_id,
					goods_category_id:queryPage.goods_category_id,
					machine_id: queryPage.machine_id, //设备id
				}
				this.getShapeList()
			},
			// 模板形状列表
			getShapeList(){
				console.log(this.windowHeight)
				this.datalist = []
				uni.showLoading({title: '正在加载中...'})
				homeservice.WorksList(this.queryPage).then(result => {
					this.datalist = result.data
					// this.datalist.unshift(
					// 	{
					// 		compose_image: "../../static/icon/diy_icon_remove_normal.png",
					// 		id: null,
					// 		image: "",
					// 		name: "清除",
					// 		sales_price: null,
					// 		shape_category_id: null,
					// 	}
					// )
					this.queryPage.page += 1;
					uni.hideLoading();
					this.tip = '';
				}).catch(err => {
					uni.showToast({title: err.msg,icon: 'none'})
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style lang="scss">
	
</style>
