<template>
	<view class="container">
		<view class="conters">
			<view class="header">
				<view class="shopName">
					<u-dropdown :active-color="colors" title-size='34' style="position: absolute;width: 93%;">
						<u-dropdown-item v-model="value1" height='600rpx' :title="title" :options="options1"
							@change="changes">
						</u-dropdown-item>
					</u-dropdown>
				</view>
				<view style="height: 120rpx;">
					<view class="header_Left">
						<view class="left_top">
							<image class="logo" :src="merchantLogo"></image>
						</view>
						<view class="left_down">
							<image class="icons1" src="../../static/img/home/calendar.png"></image>
							<view class="times"><span @tap="times(1)" >{{startTime}}
								</span>至<span @tap="times(2)" >{{endTime}}</span>
							</view>
							<u-picker mode="time" v-model="show1" title="开始时间" @confirm="times1()" :params="params">
							</u-picker>
							<u-picker mode="time" v-model="show2" title="截止时间" @confirm="times2()" :params="params">
							</u-picker>
						</view>
					</view>
				</view>
			</view>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view style="margin-top: 20rpx;">
				<view class="card-box" v-if="goodsHomeList.length > 0">
					<task-home-list class="task-home" splitLine @click="clickItem" :btnType="btnType"
						:list="goodsHomeList">
					</task-home-list>
				</view>
			</view>
		</view>
		<empty v-if="goodsHomeList.length == 0" des="暂无商品信息" show="true"></empty>
		<!-- 加载更多提示 -->
		<view v-if="goodsHomeList.length > 0">
			<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
		</view>
	</view>
</template>

<script>
	import taskHomeList from "@/components/mask/task-home-list2.vue"
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker,
			RenDropdownFilter,
			taskHomeList
		},
		data() {
			return {
				colors: '#FF4701',
				merchantLogo: 'https://download.cyjyyjy.com/fq-logo.jpg',
				merchantId: 0,
				startDate: 0,
				endDate: 0,
				title: '暂无店铺',
				startTime: new Date().toISOString().slice(0, 10),
				endTime: new Date().toISOString().slice(0, 10),
				list: [{
					name: '全部'
				}, {
					name: '进行中'
				}, {
					name: '已结束'
				}],
				options1: [],
				show1: false,
				show2: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				btnType: true,
				current: 0,
				merchantId: 0,
				goodsHomeList: [],
				page: 1,
				limit: 15,
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad(e) {
			this.startDate = parseInt(new Date().toISOString().slice(0, 10).replace(/-/g, ""));
			let startTime = this.$queue.getData('startTime');
			let endTime = this.$queue.getData('endTime');
			if(startTime){
				this.startTime = startTime;
			}
			if(endTime){
				this.endTime = endTime;
			}
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getShopList(userId);
			}
			uni.$on('update', this.callback)
		},
		onUnload() {
			//移除所有的事件监听器
			uni.$off();
		},
		methods: {
			getShopList(userId) {
				this.$Request.getT('/goodsMerchant/selectGoodsMerchantPage?page=' + this.page + '&limit=' + this.limit +
					'&userId=' + userId + '&status=2').then(res => {
					if (res.code == 0) {
						if (res.data.records.length > 0) {
							if (this.options1.length == 0) {
								this.title = res.data.records[0].merchantName;
								this.merchantLogo = res.data.records[0].merchantLogo;
								this.merchantId = res.data.records[0].merchantId;
							}
							this.page = 1;
							this.getList();
							this.options1 = [];
							this.options1 = res.data.records;
						}
					}
				});
			},
			changes(item) {
				console.log(item)
				this.title = item.merchantName;
				this.merchantLogo = item.merchantLogo;
				this.merchantId = item.merchantId;
				this.page = 1;
				this.getList();
				// this.value1 = index
				// for (var i in this.options1) {
				// 	if (index == this.options1[i].value) {
				// 		this.title = this.options1[i].label
				// 	}
				// }
			},
			times(index) {
				if (index == 1) {
					this.show1 = true
				}
				if (index == 2) {
					this.show2 = true
				}

			},
			times1(e) {
				this.startTime = e.year + '-' + e.month + '-' + e.day
				this.$queue.setData('startTime', this.startTime);
				this.startDate = parseInt(e.year + e.month + e.day);
				console.log('shijian', e, this.startTime);
				let userId = this.$queue.getData('userId');
				if (userId) {
					this.page = 1;
					this.getList();
				}
			},
			times2(e) {
				if (this.startDate == 0) {
					this.$queue.showToast('请先选择开始时间！')
					return;
				}

				this.endDate = parseInt(e.year + e.month + e.day);
				console.log(this.endDate - this.startDate)
				if ((this.endDate - this.startDate) < 0) {
					this.$queue.showToast('结束时间不能小于开始时间！')
					return;
				}

				this.endTime = e.year + '-' + e.month + '-' + e.day
				this.$queue.setData('endTime', this.endTime);
				console.log('shijian', e, this.endTime);
				let userId = this.$queue.getData('userId');
				if (userId) {
					this.page = 1;
					this.getList();
				}
			},
			callback(e) {
				this.page = 1;
				this.getList();
			},
			getList() {
				this.loadingType = 1;
				this.$queue.showLoading('加载中...');
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/goodsMerchant/selectAuditGoodsList?page=' + this.page + '&limit=' + this.limit +
					'&merchantId=' + this.merchantId + '&status=' + this.current +
					'&startTime=' + this.startTime + '&endTime=' + this.endTime).then(res => {
					if (res.code == 0 && res.data) {
						if (this.page == 1) {
							this.goodsHomeList = [];
						}

						if (res.data && res.data.records.length > 0) {
							res.data.records.forEach(d => {
								this.goodsHomeList.push(d);
							});
						}

						if (res.data.records.length === this.limit) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
				});

			},
			change(index) {
				this.current = index;
				this.page = 1;
				this.getList();
			},
			clickItem: function(options) {
				// let token = this.$queue.getData('token');
				// let userId = this.$queue.getData('userId');
				// if (token) {
				uni.navigateTo({
					url: '/pages/index/taskDetail1?goodsId=' + options.item.goodsId + '&latitude=' + this
						.latitude + '&longitude=' + this.longitude
				})
				// } else {
				// 	this.goLogin();
				// }
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getList();
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background: #F7F7F7;
	}

	.header {
		width: 100%;
		background: #FFFFFF;

		.header_Left {
			height: 120rpx;
			width: 70%;
			float: left;

			.left_top {

				.logo {
					width: 60rpx;
					height: 60rpx;
					border-radius: 10rpx;
					// float: left;
					margin-right: 20rpx;
				}

				.shopName {
					position: relative;
					line-height: 60rpx;
					font-size: 36rpx;
					font-weight: 600;

					.icons {
						width: 30rpx;
						margin-left: 10rpx;
						padding-left: 10rpx;
					}
				}
			}

			.left_down {
				clear: both;
				display: flex;
				align-items: center;
				height: 40rpx;
				color: #999;
				font-size: 32rpx;

				.icons1 {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}

				.times {
					font-size: 28rpx;
					color: #777777;
				}
			}
		}

		.header_Right {
			// float: right;
			width: 20%;
			text-align: center;
			font-size: 26rpx;
			height: 120rpx;
			padding: 20rpx 0;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 999999;

			.showaddImg {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.header_cont {
			clear: both;
			background-color: #FFF6F2;
			width: 100%;
			border-radius: 20rpx 20rpx 0 0;
			height: 100rpx;
			margin-top: 20rpx;
			color: #333333;

			.header_datas {
				display: inline-block;
				width: 50%;
				text-align: center;
				padding: 10rpx 0;

				.numbers {
					font-size: 40rpx;
				}
			}
		}
	}

	.container {
		.conters {
			width: 100%;
			background: #FFFFFF;
			padding: 30rpx;

		}
	}

	.u-dropdown__menu__item.data-v-4e830e53 {
		position: absolute !important;
		left: 70rpx !important;
	}

	.u-dropdown__menu__item {
		position: absolute !important;
		left: 70rpx !important;
		bottom: 30rpx !important;
	}
</style>
