<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)" :scrollTop="scrollViewTop" @scroll="scroll">
			<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: 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;">
							<image style="width: 148.5upx; height: 148.5upx; margin: auto;"
								:src="(item.image ? item.image:item.url) + '?x-oss-process=image/resize,lfit,w_112'"
								mode="aspectFit"></image>
							<view v-if="Number(item.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.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';
	import http from '@/util/http.js';
	export default {
		props: {
			windowHeight: {
				type: Number,
				default: 563
			},
			classificationHeight: {
				type: Number,
				default: 0
			},
		},
		components: {
			refresh
		},
		data() {
			return {
				queryPage: {
					s: 'Material.list',
					page: 1,
					per_page: 50,
					is_revise: 1, //可调整
					is_edit: 1, //模板属性
					total: 0,
					is_new: null, //最新
					is_hot: null, //热门
					machine_id: null, //设备id
				},
				Material_categorydatalist: [], //作品、贴图列表
				datalist: [], //作品、贴图列表
				Material_category: [], //贴图分类
				currentId: 0,
				/* 控制被选中 */
				currentIndex: null,
				/* 控制位置 */
				tip: '',
				scrollViewTop: 0, //滑动高度
				e: 0, //   弹窗类型
			};
		},
		mounted() {
			// this.getShapeList()
		},
		/**
		 * 组件的公有方法列表
		 */
		methods: {

			//作品详情
			Worksdetail(item) {
				//console.log(item)
				this.$emit('Worksdetail', item)
			},

			g(e) {
				if (this.type == 99) {
					this.getExcellentMaterialMore(this.item.queryPage)
				} else {
					homeservice.WorksList(this.queryPage).then(result => {
						this.Material_categorydatalist = this.Material_categorydatalist.concat(result.data)
						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 = '';
			},

			scroll(e) {
				if (e.detail.scrollTop > 1) {
					this.oldScrollViewTop = e.detail.scrollTop - 0.01
				}
			},

			open(item) {
				if (this.e != item.e) {
					this.datalist = [];
				}
				this.type = 0;
				this.e = item.e;
				this.scrollViewTop = 0;
				/* let loadData = false;
				 if (this.queryPage.material_category_id != null && this.queryPage.material_category_id != ""  ) {
					if (this.queryPage.material_category_id == item.queryPage.material_category_id) {
						if (this.queryPage.material_series_id != item.queryPage.material_series_id) {
							loadData = true;
						}
					} else {
						loadData = true;
					}
				}else{
					if(this.datalist.length <= 0 ){
					   loadData =true;
					}
				} */
				let loadData = true;
				/* if (item.e == 23 || item.e == 2) {
					if (this.queryPage.material_category_id != null && this.queryPage.material_category_id != "" && this
						.queryPage.material_category_id != "null") {
						if (this.queryPage.material_category_id == item.queryPage.material_category_id) {
							if (this.queryPage.material_series_id != item.queryPage.material_series_id) {
								loadData = true;
							}
						} else {
							loadData = true;
						}
					} else {
						if (this.datalist ==null ||  this.datalist.length <= 0) {
							loadData = true;
						}
					}
				} else if (item.e == 99) {
					if (this.currentId != item.queryPage.currentId || this.currentId == -1) {
						loadData = true;
					}
					if (this.datalist ==null || this.datalist.length <= 0) {
						loadData = true;
					}
				} */
			    /*if (this.datalist ==null || this.datalist.length <= 0) {
					loadData = true;
				} */

				this.queryPage = {
					s: item.queryPage.s,
					page: item.queryPage.page, //分页
					per_page: item.queryPage.per_page, //分页
					is_revise: item.queryPage.is_revise, //可调整
					is_edit: item.queryPage.is_edit, //模板属性
					machine_id: item.queryPage.machine_id, //设备id
					goods_category_id: item.queryPage.goods_category_id, //星形接口列表增加，产品分类参数
					material_category_id: item.queryPage.material_category_id, //贴图壁纸选择值一级分类
					material_series_id: item.queryPage.material_series_id, //贴图壁纸选择值二级分类
					is_new: item.queryPage.is_new, //最新
					is_hot: item.queryPage.is_hot, //热门
					goods_id: "", //商品id
					is_under: item.queryPage.is_under, //贴图是否为背景图
					partner_id: item.queryPage.partner_id //代理
				}
				if (item.e == 2) {
					if (loadData) {
						this.queryPage.is_under = '0' //贴纸标识
						this.getShapeList()
					} else {
						this.scrollViewTop = this.oldScrollViewTop
						this.showState = true;
					}
				} else if (item.e == 23) {
					if (loadData) {
						this.queryPage.is_under = '1' //壁纸标识
						this.getShapeList()
					} else {
						this.scrollViewTop = this.oldScrollViewTop
						this.showState = true;
					}
				} else if (item.e == 99) { //点赞贴图
					if (loadData) {
						this.scrollViewTop = 0;
						this.oldScrollViewTop = 0;
						this.type = 99;
						this.queryCollectionPage = {
							page: 1,
							limit: 25
						}
						this.item = item;
						this.getExcellentMaterial(item.queryPage)
					} else {
						this.scrollViewTop = this.oldScrollViewTop
						this.showState = true;
					}
				}
			},

			// 贴图列表
			getShapeList() {
				this.datalist = []
				uni.showLoading({
					title: '正在加载中...',
					mask: true
				})
				homeservice.WorksList(this.queryPage).then(result => {
					this.Material_categorydatalist = result.data
					this.datalist = result.data
					this.queryPage.page += 1;
					uni.hideLoading();
					this.tip = '';
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
					uni.hideLoading();
				});
			},

			//获取条件
			getExcellentMaterial(e) {
				this.datalist = []
				uni.showLoading({
					title: '正在加载中...'
				})
				let url = ''
				this.currentId = e.currentId;
				if (e.currentId == 0) url = '/douyin/Material/getMeMaterial'
				else if (e.currentId == 1) url = '/douyin/Material/getMeCollection'
				else if (e.currentId == 2) url = '/douyin/Material/getFollowMaterials'
				this.$http.post(url, this.queryCollectionPage).then(result => {
					this.showState = true
					this.Material_categorydatalist = result.data.data
					this.datalist = result.data.data;
					this.queryPage.page += 1;
					uni.hideLoading();
					this.tip = '';
				}).catch(err => {
					this.showState = true
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
					uni.hideLoading();
				});
			},

		},
	}
</script>

<style lang="scss">

</style>
