<template>
	<!-- 贴图 -->
	<view class="content" style="width: 100%; height: 100%; position: relative;"
		:style="{height: (windowHeight - classificationHeight) +'px',background:backColorVal}">
		<refresh ref="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: 139upx; height: 255upx; margin: auto; position: relative;">
							<image
								style="width: 139upx; height: 255upx; margin: auto; border-radius: 14px; overflow: hidden;"
								:src="(item.image ? item.image:item.url) + '?x-oss-process=image/resize,lfit,w_112'"
								mode="aspectFit">
							</image>
						</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.list',
					page: 1,
					per_page: 50,
					is_revise: '1', //可调整
					is_edit: '1', //模板属性
					is_new: null, //最新
					is_hot: null, //热门
					machine_id: null, //设备id
					material_category_id: "", //
					material_series_id: "",
				},
				queryCollectionPage: {

				},
				Material_categorydatalist: [], //作品、贴图列表
				datalist: [], //作品、贴图列表
				Material_category: [], //贴图分类
				currentId: -1,
				/* 控制被选中 */
				currentIndex: null,
				/* 控制位置 */
				tip: '',
				showState: false,
				type: 0, //默认 0
				item: null,
				scrollViewTop: 0, //滚动距离
				oldScrollViewTop: 0, //旧数据到顶部位置
				e: 0, //   弹窗类型	
				isWork: false, //是否作品
				historyQueryPage: {
					goods_id: "", //产品Id
					s: 'Works.myWorksList',
					custom_width: "",
					custom_height: "",
				}, //历史对象
				backColorVal: ""
			};
		},
		mounted() {
			//this.getShapeList()
		},
		/**
		 * 组件的公有方法列表
		 */
		methods: {

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

			Worksdetail(item) {
				item.isWork = this.isWork;
				this.$emit('Worksdetail', item)
			},

			g(e) {
				if (this.type == 99) {
					this.getExcellentMaterialMore(this.item.queryPage)
				} else {
					uni.showLoading({
						title: '正在加载中...'
					})
					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
				if (this.type == 99) {
					this.queryCollectionPage.page = 1;
					this.getExcellentMaterial(this.item.queryPage)
				} else {
					this.getShapeList()
				}
			},

			pushToInterrupt() {
				this.tip = '释放刷新';
			},

			finished() {
				this.tip = '下拉刷新';
			},

			open(item) {
				if (item.val) {
					this.backColorVal = item.val
				} else {
					this.backColorVal = ""
				}
	
				if (this.e != item.e) {
					this.datalist = [];
				}
				this.isWork = false;
				this.e = item.e;
				this.scrollViewTop = 0;
				this.type = 0;
				this.showState = false;
				let loadData = false;
				if (item.e == 23 || item.e == 2) {
					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;
					}

					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;
					}
				}
				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: item.queryPage.goods_id, //商品id
					is_under: item.queryPage.is_under, //贴图是否为背景图
					partner_id: item.queryPage.partner_id, //代理
					goods_feature_id: this.$base.goods_feature_id
				}
				if (item.e == 2) { //贴图
					if (loadData) {
						this.queryPage.is_under = '0' //贴图标识
						this.scrollViewTop = 0;
						this.oldScrollViewTop = 0;
						this.getShapeList()
					} else {
						this.scrollViewTop = this.oldScrollViewTop
						this.$nextTick(() => {
							this.$refs.refresh.scrollTopPostion(this.scrollViewTop);
						});
						this.showState = true;
					}
				} else if (item.e == 23) { //壁纸
					if (loadData) {
						this.queryPage.page = 1;
						this.queryPage.is_under = '1' //壁纸标识
						this.oldScrollViewTop = 0;
						this.scrollViewTop = 0;
						this.getShapeList()
					} else {
						this.scrollViewTop = this.oldScrollViewTop
						this.$nextTick(() => {
							this.$refs.refresh.scrollTopPostion(this.scrollViewTop);
						});
						this.showState = true;
					}
				} else if (item.e == 24) { //背景底色
					this.queryPage.is_under = '1' //壁纸标识
					this.queryPage.surface_color_series_id = this.$base.surfaceData.surface_color_series_id //色系编号
					this.getShapeList()
					this.oldScrollViewTop = 0;
					this.scrollViewTop = 0;
				} else if (item.e == 99) { //点赞贴图
					this.type = 99;
					if (loadData) {
						this.scrollViewTop = 0;
						this.oldScrollViewTop = 0;
						this.queryCollectionPage = {
							page: 1,
							limit: 25
						}
						this.datalist = [];
						this.item = item;
						this.getExcellentMaterial(item.queryPage)
					} else {
						if (item.queryPage.currentId == 0) {
							this.isWork = true;
						}
						this.scrollViewTop = this.oldScrollViewTop
						this.$nextTick(() => {
							this.$refs.refresh.scrollTopPostion(this.scrollViewTop);
						});
						this.showState = true;
					}
				}
			},

			getExcellentMaterial(e) {
				this.datalist = []
				uni.showLoading({
					title: '正在加载中...'
				})

				let url = ''
				this.currentId = e.currentId;
				if (e.currentId == 0) {
					this.isWork = true;
					this.historyQueryPage.goods_id = this.item.goods_id;
					this.historyQueryPage.custom_width = this.item.custom_width;
					this.historyQueryPage.custom_height = this.item.custom_height;
					homeservice.WorksList(this.historyQueryPage).then(result => {
						this.datalist = result.data
						uni.hideLoading();
					}).catch(err => {
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
						uni.hideLoading();
					});
				} else {
					this.isWork = false;
					if (e.currentId == 1) {
						url = '/douyin/Material/getMeMaterial'
					} else if (e.currentId == 2) {
						url = '/douyin/Material/getMeCollection'
					} else if (e.currentId == 3) {
						url = '/douyin/Material/getFollowMaterials'
					}
					this.$http.post(url, this.queryCollectionPage).then(result => {

						uni.hideLoading();
						//this.datalist = [];
						if (result.data != null && result.data != "") {
							this.Material_categorydatalist = result.data.data
							this.datalist = result.data.data;
							this.queryCollectionPage.page += 1;
						}

						// this.Material_categorydatalist = result.data.data
						// this.datalist = result.data.data;
						// this.queryCollectionPage.page += 1;
						// uni.hideLoading();
						this.tip = '';
					}).catch(err => {
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
						uni.hideLoading();
					});
				}
			},


			getExcellentMaterialMore(e) {
				if (e.currentId == 0) {

				} else {
					let url = ''
					uni.showLoading({
						title: '正在加载中...'
					})
					if (e.currentId == 1) {
						url = '/douyin/Material/getMeMaterial'
					} else if (e.currentId == 2) {
						url = '/douyin/Material/getMeCollection'
					} else if (e.currentId == 3) {
						url = '/douyin/Material/getFollowMaterials'
					}
					this.$http.post(url, this.queryCollectionPage).then(result => {
						this.showState = true
						if (result.data == null || result.data == "") {
							uni.showToast({
								title: '没有更多数据了！',
								icon: 'none'
							});
						} else {
							this.Material_categorydatalist = this.Material_categorydatalist.concat(result.data
								.data);
							this.datalist = this.datalist.concat(result.data.data);
							this.queryCollectionPage.page += 1;
							if (Math.ceil(result.total / result.per_page) <= this.queryCollectionPage.page) {
								return setTimeout(() => {
									uni.showToast({
										title: '没有更多数据了！',
										icon: 'none'
									});
								}, 500);
							}
						}
						uni.hideLoading();
					}).catch(err => {
						this.showState = true
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
						uni.hideLoading();
					});
				}
			},

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