<template>
	<view class="container">
		<view class="sizer flex al-item-center" @click="showTimSe = !showTimSe">
			<text class="iconfont icon-xia"></text>
			<text :style="{color: t('color1')}" style="font-size: 24rpx;">{{timeTex}}</text>
		</view>
		<view v-for="(item, index) in datalist" :key="index" class="item">
			<view :data-url="(item.type=='shop'?'/pages/':'/activity/')+ item.type + '/product?id=' + item.proid"
				@tap="goto" class="product-item2">
				<view class="product-pic">
					<image :src="item.product.pic" mode="widthFix"></image>
				</view>
				<view class="product-info" v-if="item.type == 'scoreshop'">
					<view class="p1">{{item.product.name}}</view>
					<view class="p3">
						<text class="t1" v-if="item.product.sales>0">已兑换{{item.product.sales}}件</text>
						<text class="t2" v-else-if="item.product.sellpoint">{{item.product.sellpoint}}</text>
					</view>
					<view class="p2">
						<text class="t1" :style="{color:t('color1')}">{{item.product.score_price}}{{t('积分')}}</text>
						<text class="t2">市场价￥{{item.product.sell_price}}</text>
					</view>
				</view>
				<view class="product-info" v-else>
					<view class="p1">{{item.product.name}}</view>
					<view class="p3">
						<text class="t1" v-if="item.product.sales>0">已售{{item.product.sales}}件</text>
						<text class="t2" v-else-if="item.product.sellpoint">{{item.product.sellpoint}}</text>
					</view>
					<view class="p2">
						<text class="t1" :style="{color:t('color1')}"><text
								style="font-size:24rpx">￥</text>{{item.product.sell_price}}</text>
						<text class="t2"
							v-if="item.product.market_price*1 > item.product.sell_price*1">￥{{item.product.market_price}}</text>
					</view>
				</view>
			</view>
			<view class="foot">
				<text class="flex1">浏览时间：{{item.createtime}}</text>
				<text class="btn" @tap="favoritedel" :data-id="item.proid" :data-type="item.type">删除</text>
			</view>
		</view>
		<view class="selTim-box bg-color-white border-rius-5" v-show="showTimSe">
			<view class="conm-time-slt ">
				<view class="flex flex-w j-between">
					<block v-for="(item, ndx) in timeTexList" :key="ndx">
						<view  :style="timeTexIndx == ndx ? (item.name == '重置'?'':'background: #E2F7EF;color:' + t('color1')) :''" class="tet-l border-rius-5" @click="selcTimTxe(item, ndx)">{{item.name}}</view>
					</block>
				</view>
					<uni-section
							:title="'日期范围用法：' + '[' + range + ']'"
							type="line"
						></uni-section>
					<view class="example-body" style="margin-top: 30rpx;">
							<uni-datetime-picker
							@chang="submit"
								v-model="range"
								type="daterange"
								rangeSeparator="-"
							/>
						</view>
			</view>
		</view>
		

		<nomore v-if="nomore"></nomore>
		<nodata v-if="nodata" text="暂无足迹"></nodata>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
		<!-- 悬浮按钮 -->
		<drag-button></drag-button>
	</view>

</template>

<script>
	var app = getApp();
	// import mrCalendar from '@/components/mr-calendar/mr-calendar';
	export default {
		components: {
			// mrCalendar
		},
		data() {
			return {
				range:'',
                timeTex:'',
				timeTexIndx: 0,
				stime: '',
				etime: '',
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				timeTexList: [],
				datalist: [],
				pagenum: 1,
				nomore: false,
				nodata: false,

				showTimSe: false, // 选项弹框
				timeDate: false,
				drawer: true,
				show: false,
			};
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getdata();
			this.setTime();
			this.timeTex = this.timeTexList[0].stime.substr(0,10) +" 至 "+ this.timeTexList[0].etime.substr(0,10)
			this.stime = this.timeTexList[0].stime.substr(0,10)
			this.etime = this.timeTexList[0].etime.substr(0,10)
			this.range = [this.stime,this.etime]
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		onReachBottom: function() {
			if (!this.nodata && !this.nomore) {
				this.pagenum = this.pagenum + 1;
				this.getdata(true);
			}
		},
			watch: {
					datetimesingle(newval) {
						console.log("单选:", this.datetimesingle);
					},
					range(newval) {
						console.log("范围选1:", this.range);
						this.submit(this.range)
					},
					datetimerange(newval) {
						console.log("范围选:2", this.datetimerange);
					},
				},
		methods: {

			setTime() {
		        let arr = []
				let year = new Date().getFullYear();
				let month = new Date().getMonth() + 1;

				arr.push(this.timeHandle(year,month));
				arr[0].name = "本月";
				
				var pre_month;
				var pre_year;
				if((month-1) == 0) {
					pre_month = 12;
					pre_year = year - 1;
				} else {
					pre_month = month - 1;
					pre_year = year;
				}
				arr.push(this.timeHandle(pre_year,pre_month));
				arr[1].name = "上月";

				arr.push({name:'今年',stime: year + '-01-01',etime: year + '-12-31' });
				arr.push({name:'去年',stime: (year-1) + '-01-01',etime: (year-1) + '-12-31' });
					arr.push({name:'重置',stime:'',etime:'' })
					this.timeTexList = arr
			},
			timeHandle(year,month) {
				let day = new Date(year,month,0).getDate(); // 最后一天
				month = month < 10 ? '0' + month : month;

				let stime = [year,month,'01'].join('-')
				let etime = [year,month,day].join('-')

				let time = {name: '',stime: stime,etime: etime};
				return time;
			},

			reset() {
				this.stime = '';
				this.etime = '';
				this.pagenum = 1;
				this.getdata()
			},
			submit(e) {
				if(e.length < 2 && e.length > 0) {
					uni.showModal({
							title: '提示',
							content: '请选择结束时间',
							showCancel: false
					})
				 setTimeout(()=>{
					 this.timeDate = true
					 this.show = true
				 },100)
					return
				}
				this.timeTex = e[0] + ' 至 ' + e[1]
				this.stime = e[0]+' 00:00:00'
				this.etime = e[1]+' 23:59:59'
				this.showTimSe = false;
				this.pagenum = 1;
				this.getdata()
			},
			calclick(e) {
				console.log(e, 'calclick')
			},

			selcTimTxe(item, num) {
				if(item.name == '重置') {
					this.timeTexIndx = 0
					this.timeTex = this.timeTexList[0].stime.substr(0,10) +" 至 "+ this.timeTexList[0].etime.substr(0,10);
					this.stime = this.timeTexList[0].stime.substr(0,10)
					this.etime = this.timeTexList[0].etime.substr(0,10);
					this.range = [this.timeTexList[0].stime.substr(0,10),this.timeTexList[0].etime.substr(0,10)]
				}else {
					this.timeTexIndx = num
					this.timeTex = item.stime.substr(0,10) +" 至 "+ item.etime.substr(0,10);
					this.stime = item.stime;
					this.etime = item.etime;
					this.range = [item.stime.substr(0,10),item.etime.substr(0,10)]
				}
				this.pagenum = 1;
				this.datalist = [];
				this.showTimSe = false
				this.pagenum = 1;
				// this.getdata()
			},
			disabledDate() {
				return false
			},
			dateShow() {
				this.timeDate = true
				this.show = true
			},
			getdata: function(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.datalist = [];
				}
				var that = this;
				var pagenum = that.pagenum;
				var st = that.st;
				that.nodata = false;
				that.nomore = false;
				that.loading = true;
				app.post('ApiMy/history', {
					st: st,
					endTime: this.etime,
					startTime: this.stime,
					pagenum: pagenum
				}, function(res) {
					that.loading = false;
					var data = res.data;
					if (pagenum == 1) {
						that.datalist = data;
						if (data.length == 0) {
							that.nodata = true;
						}
						that.loaded();
					} else {
						if (data.length == 0) {
							that.nomore = true;
						} else {
							var datalist = that.datalist;
							var newdata = datalist.concat(data);
							that.datalist = newdata;
						}
					}
				});
			},
			favoritedel: function(e) {
				var that = this;
				var proid = e.currentTarget.dataset.id;
				var type = e.currentTarget.dataset.type;
				uni.showActionSheet({
					itemList: ['删除该项', '清空全部'],
					success: function(res) {
						if (res.tapIndex >= 0) {
							if (res.tapIndex == 1) {
								proid = 'all';
							}
							app.post('ApiMy/historydel', {
								proid: proid,
								type: type
							}, function(data) {
								app.success(data.msg);
								setTimeout(function() {
									that.getdata();
								}, 1000);
							});
						}
					}
				});
			}
		}
	};
</script>
<style lang="scss">
.container {
	background: #F5F5F5;
	padding-top: 86rpx;
}
	.btn_box {
		width: 100%;
		margin-top: 20rpx;
		display: flex;

		// flex-direction: row-reverse;
		// justify-content: space-between;
		.btn {
			// display: inline-block;
			background-color: #efbe70;
			color: #ffff;
			height: 50rpx;
			width: 116rpx;
			border-radius: 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// margin: 0;
		}
	}

	.sizer {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		padding: 28rpx 24rpx 24rpx;
		display: flex;
		align-items: center;
		color: #999;
		background: #F5F5F5;
		display: flex;
		flex-direction: row-reverse;
		.icon-xia {
			font-size: 26rpx;
			color: #333333;
			position: static;
		}

	}

	.flex {
		display: flex;
	}

	.flex1 {
		flex: 1;
	}

	.j-center {
		justify-content: center;
	}

	.j-between {
		justify-content: space-between;
	}

	.j-around {
		justify-content: space-around;
	}

	.j-evenly {
		justify-content: space-evenly;
	}

	.flex-colum {
		flex-direction: column;
	}

	.flex-w {
		flex-wrap: wrap;
	}

	.al-item-center {
		align-items: center;
	}

	.font-w {
		font-weight: bold;
	}

	.fs12 {
		font-size: 24rpx;
	}

	.color-gray {
		color: #999;
	}

	.color-white {
		color: #fff;
	}

	.bg-color-white {
		background-color: #fff;
	}

	.border-rius-r {
		border-radius: 800rpx;
	}

	.border-rius-5 {
		border-radius: 10rpx;
	}

	.border-rius-10 {
		border-radius: 20rpx;
	}

	.overflow-hd {
		overflow: hidden;
	}

	.text-overflow-tx {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.text-overflow-line {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-wrap: break-word;
		word-break: break-all;
	}

	.myBalance-contx-h-title {
		height: 80rpx;
		padding: 20rpx 0;

		.my-interest-h-title-tx {
			padding: 0 10rpx;
			position: relative;
		}

		.actives {
			width: 100%;
			height: 6rpx;
			display: block;
			position: absolute;
			border-radius: 2rpx;
			bottom: -10rpx;
			left: 0;
			// background-color: #EFBD6F;
		}
	}

	.myBalance-contx-box {
		padding: 0 20rpx 20rpx;
		width: 100%;
		height: calc(100vh - 80rpx);
		position: relative;

		.myBalance-contx-box-h {
			padding: 20rpx;
			width: 100%;
			height: 170rpx;
			position: fixed;
			left: 0;
			background-color: #f6f6f6;
			z-index: 22;

			.box-h-t:first-child {
				margin-left: 0;
			}

			.box-h-t {
				width: 130rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				margin-left: 26rpx;
			}
		}

		.contx-h-2 {
			height: 80rpx;
		}

		.myBalance-contx-box-t {
			padding: 20rpx;
			box-shadow: 0 0 10rpx 0 #efefef;
			margin-top: 30rpx;
		}

		.myBalance-contx-box-t:first-child {
			margin-top: 0;
		}

		.myBalance-contx-tx {
			padding: 20rpx;
			box-shadow: 0 0 10rpx 0 #efefef;
			margin-top: 30rpx;

			.cosu-img {
				width: 120rpx;
				height: 120rpx;
			}

			.pt-txt {
				padding-top: 6rpx;
			}
		}
	}

	// 弹框
	.conm-time-slt {
		padding: 40rpx 24rpx 32rpx;

		.tet-l {
			width: 158rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			background-color: #F7F7F7;
			margin-bottom: 24rpx;
			color: #666666;
			font-size: 28rpx;
		}

		.cus-time {
			width: 190rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			margin-top: 40rpx;
		}
	}

	.selTim-box {
		position: fixed;
		top: 86rpx;
		left: 0;
		right: 0;
		z-index: 3;
		border-radius: 0 0 12rpx 12rpx;

		.he-t {
			width: 16rpx;
			height: 2rpx;
			margin-top: 30rpx;
			background-color: #ccc;
		}
	}

	.teitDate {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .4);
		z-index: 888;
	}

	.item {
		margin: 0 24rpx 24rpx;
		padding: 0 24rpx;
		background: #fff;
		border-radius: 12rpx;
	}

	.product-item2 {
		display: flex;
		padding: 28rpx 0 36rpx;
		border-bottom: 1px solid #F4F4F4;
	}

	.product-item2 .product-pic {
		width: 168rpx;
		height: 168rpx;
		border-radius: 12rpx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.product-item2 .product-pic image {
		width: 100%;
		height: 100%;
	}

	.product-item2 .product-info {
		flex: 1;
		margin-left: 24rpx;
	}

	.product-item2 .product-info .p1 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* autoprefixer: ignore next */
		-webkit-box-orient: vertical;
		text-align: justify;
		white-space: pre-wrap;
		word-break: break-all;
		height: 72rpx;
		line-height: 36rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.product-item2 .product-info .p2 {
		font-size: 36rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin-top: 4rpx;
	}

	.product-item2 .product-info .p2 .t2 {
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #888;
		text-decoration: line-through;
	}

	.product-item2 .product-info .p3 {
		font-size: 24rpx;
		height: 34rpx;
		line-height: 34rpx;
		margin-top: 10rpx;
	}

	.product-item2 .product-info .p3 .t1 {
		color: #aaa;
		font-size: 24rpx
	}

	.product-item2 .product-info .p3 .t2 {
		color: #888;
		font-size: 24rpx;
	}

	.foot {
		display: flex;
		align-items: center;
		color: #999999;
		font-size: 24rpx;
		line-height: 34rpx;
		padding: 20rpx 0 24rpx;
	}
	.foot .btn {
		min-width: 84rpx;
		box-sizing: border-box;
		color: #FFFFFF;
		text-align: center;
		padding: 0 10rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: #EB5330;
		border-radius: 8rpx;
	}
</style>
