<template>
	<view  class="footStyle"  :style="{'height':contentHeight}">
	<!-- 	<view class="footTop">
			<view class="footTop_c" >
				<view class="footTop_item" :style="{'background':mainColor}" >
					<Text style='color: #fff;'>浏览记录</Text>
				</view>
				<view class="footTop_item" @click="billsummary">
					<Text :style="{'color':mainColor}">账单总结</Text>
				</view>
			</view>
			
		</view> -->
		<view class="footTop_content">
			<view style="width: 94%;margin-left: 3%;">
				<u-tabs 
				:list="timelist"
				:is-scroll="false" 
				:current="current"
				bar-height="6"
				:active-color=mainColor
				@change="change"></u-tabs>
			</view>
		</view>
	
		<u-empty v-if="g.length==0" text="暂无任何浏览记录~" mode="favor"></u-empty>
		<view v-if="g.length==0" style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;">
			<u-button  shape="circle" type="error" size="medium" @click='goshoping'>去商城逛逛</u-button>
		</view>
		<view  v-if="g.length > 0"
		  style="
				height: calc(100vh - 50px);
				width: calc(100vw);
				overflow: hidden;
				padding-top: 10px;
		  ">
			<scroll-view
				:scroll-y="true"
				:enable-back-to-top="true"
				:enable-flex="true"
				@scrolltolower="lower"
				:style="{ height: '100%' }">
				<view style="display: flex;flex-direction: column;align-items: center;width: 100%;">
					<!-- <view v-for="(cx, ci) in g" :key="ci" style="width: 100%;margin-bottom: 10rpx;"> -->
						
						<view class="contentBox">
							<view class="cBox_item" v-for="(cx, ci) in g" :key="ci" >
								<view class="good-img" @click="clickHandler(cx.GoodsId)">
								  <image :src="cx.GoodsImgPath" style="width: 100%; height: 100%;" />
								  <!-- 如果此商品售完 -->
								  <!-- <image src="../../../static/images/icon/plugins-out.png" v-if="item.goods_num==0"
								  style="width: 100%; height: 100%;position: absolute;left:0;top:0;background: #000;opacity: 0.6;" /> -->
								</view>
								<view class="good-info">
									<Text class='good-name' @click="clickHandler(cx.GoodsId)">{{cx.GoodsName}}</Text>
									<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
										<Text :style="{'color':mainColor}">￥{{cx.Price}}</Text>
										<u-icon name="ellipsis" color="#c8c9cc" size="40" @click.stop='operation(cx.GoodsId,cx.Id,ci)'></u-icon>
									</view>
								</view>
							</view>
						</view>
					<!-- </view> -->
					
				</view>
				
				<u-loadmore
				  :status="status"
				  :load-text="loadText"
				  :font-size="24"
				  :margin-top="20"
				  :margin-bottom="20"
				  bg-color="#f3f4f6"
				/>
			</scroll-view>
			
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
		<view class="loading" v-show="loading">
			<u-loading mode="flower" size="48"></u-loading>
			<Text style='color: #fff;margin-top: 10rpx;'>加载中...</Text>
		</view>
		<w-picker
			mode="range" 
			startYear="2017" 
			endYear="2030"
			:value="rangeVal"
			:current="true"
			@confirm="onConfirm($event,'range')"
			@cancel="onCancel"
			ref="range" 
		></w-picker>
		<!-- 自定义弹窗 -->
		<view class="Popup" v-show='Popup' @click="Popup=false"></view>
		<view class="PopupBox" v-show='Popup'>
			<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;height: 120px;">
				<view class="Popupicon">
					<view style="display: flex;flex-direction: column;align-items: center;" @click="Collection">
						<view class="icon">
							<u-icon name="like-o" color="#c8c9cc" size="40" ></u-icon>
						</view>
						<Text  style='margin-top: 10rpx;'>收藏</Text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;" @click="Pdelete">
						<view class="icon">
							<u-icon name="delete" color="#c8c9cc" size="40" ></u-icon>
						</view>
						<Text style='margin-top: 10rpx;'>删除</Text>
					</view>
					
				</view>
			</view>
			<view style="display: flex;align-items: center;justify-content: center;width: 100%;height: 50px;border-top: 1px solid #c8c9cc;" @click="Popup=false">
				<Text>取消</Text>
			</view>
		</view>
		
		<u-modal
		  v-model="showModal"
		  content="是否删除该足迹？"
		  :show-cancel-button="true"
		  :show-title="false"
		  @confirm="confirm"
		></u-modal>
		
		<u-toast ref="uToast" />
	</view>
	
</template>

<script>
	import auth from "../../../components/auth/index.vue";
	import wPicker from "../w-picker/w-picker.vue"
	
	export default {
		data() {
			return {
				pageTitle:"我的足迹",
				loading:false,
				showAuth:false,
				contentHeight:0,
				mainColor: "",
				timelist:[
					{name: '今日'},
					{name: '昨日'},
					{name: '近7日'},
					{name: '近30日'},
					{name: '自定义时间'},
				],
				start_time:'',
				end_time:'',
				current:0,
				page:1,
				g:[],
				page_count:1,
				isover: false,
				Popup:false,
				GoodsId:'',
				detailId:'',
				showModal:false,
				index:0,
				ci:0,
				u:{},
				msg:{
					pageIndex:1,
					pageSize:18,
					StartTime:'',
					EndTime:'',
				},
				status: "loadmore",
				loadText: {
				  loadmore: "轻轻上拉，加载更多",
				  loading: "努力加载中",
				  nomore: "没有更多了",
				},
			}
		},
		components:{
			auth,
			wPicker
		},
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			  this.mainColor = this.$uiConfig.mainColor;
			  
			 
		},
		mounted() {
			let currentPages = getCurrentPages();
			 let u = "/" + currentPages[currentPages.length-1].route;
			 let pages = uni.getStorageSync("basedata")
			   ? uni.getStorageSync("basedata").bar_title
			   : [];
			 pages.forEach((x) => {
			   if (x.value == u) {
			     this.pageTitle = x.new_name ? x.new_name : x.name;
			   }
			 });
			 uni.setNavigationBarTitle({
			   title: this.pageTitle,
			 });
		},
		onLoad(){
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
			  this.u = {
				nickName: "未登录",
				avatarUrl: ""
			  };
			  this.showAuth = true;
			}	else{
				this.fun_date(0)
			}
		},
		methods: {
			init(){
				
				uni.showLoading({
					title: '加载中'
				});
				this.msg.StartTime=this.start_time;
				this.msg.EndTime=this.end_time;
				
				this.request2(
					{
						url: '/api/AppletUser/GetUserFootMarkPageList',
						data: this.msg
					},
					res => {
						uni.hideLoading();
						if(res.resultCode==1){
							this.g = this.g.concat(res.data.pageData);
							 this.page_count = res.data.pageCount;
							 if (this.page_count == 1) {
							   this.status = "nomore";
							 }
						}
					}
				);
			
			},
			lower(e) {
				
				 if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				 } else {
					this.status = "nomore";
				 }
			},
			reloadUserinfo() {
				
			  this.u = uni.getStorageSync("mall_UserInfo");
			  this.showAuth=false;
				  this.init(); //成功之后调取接口
			},
			//关闭登录窗口
			gbAuth(){
				uni.navigateBack()
			},
			change(index) {
				this.current = index;
				if(index==0){//今天
					this.fun_date(0)
				}else if(index==1){//昨天
					this.fun_date(1)
				}else if(index==2){
					this.fun_date(7)
				}else if(index==3){
					this.fun_date(30)
				}else if(index== 4){
					
					this.$refs['range'].show();
				}
			},
			billsummary(){
				console.log('跳转菜单总结')
			},
			operation(e,dId,index){
				
				this.GoodsId = e;
				this.detailId = dId
				this.index = index;
				this.Popup= true
				
			},
			onConfirm(res){
				let start = res.obj.fyear + "-" + res.obj.fmonth + "-" + res.obj.fday+' '+ '00:00:00';
				let end = res.obj.tyear + "-" + res.obj.tmonth + "-" + res.obj.tday	+' '+ '23:59:59';
				this.start_time= start;
				this.end_time=end;
				this.msg.pageIndex = 1
				this.g =[]
				this.init()
			},
			onCancel(){
				
			},
			 fun_date(num){
			  let that= this
			  let date1 = new Date();
			  //今天时间
			  let time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate()+' '+ '23:59:59'
			  let date2 = new Date(date1);
			  date2.setDate(date1.getDate() - num);
			  //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
			  let time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate()+' '+ '00:00:00';
			  let time3 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate()+' '+ '23:59:59';
				that.start_time= time2;
				if(num== 1){ //只限于昨天的时候使用
					that.end_time=time3;
				}else{
					that.end_time=time1;
				}
				this.msg.pageIndex = 1
				this.g =[]
				this.init()
				
			},
			goshoping(){
				uni.reLaunch({ url: "/pages/index/index" });
			},
			clickHandler(GoodsId) {
			  uni.navigateTo({
			    url: '/pages/goods/goods?GoodsId='+GoodsId,
			  });
			},
			Collection(){
			
				this.Popup= false;
				this.request2(
					{
						url: '/api/AppletUser/SetUserCollectionInfo',
						data: {
							GoodsId:this.GoodsId
						}
					},
					res => {
						
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				);
			},
			Pdelete(){
				this.showModal = true;
			},
			confirm(){
				
				this.showModal = false
				this.Popup= false;
				uni.showLoading({
					title: '删除中'
				})
				this.request2(
					{
						url: '/api/AppletUser/DelUserFootMarkInfo',
						data: {
							FootMarkId:this.detailId
						}
					},
					res => {
						uni.hideLoading();
						this.g.splice(this.index,1)
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				);
				
				
			}
				
		}
	}
</script>

<style>
	.footStyle{
		background: #f3f4f6;
	}
	.footStyle .footTop{
		width: 100%;
		padding: 20rpx 10%;
		background: #fff;
	}
	.footStyle .footTop_c{
		width: 100%;
		height: 70rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 35rpx;
		border: 1px solid #EA554D;
	}
	.footStyle .footTop_item{
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 35rpx;
	}
	.loading{
		width: 200rpx;
		height: 200rpx;
		background: #000000;
		opacity: 0.7;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 50%;
		top:30%;
		margin-left: -100rpx;
		z-index: 999;
	}
	.footStyle .footTop_content{
		width: 100%;
		background-color: #fff;
	}
	.footStyle .contentBox{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
	}
	.footStyle .cBox_item{
		width: 30%;
		border-radius: 10rpx;
		margin-top: 5px;
		background: #fff;
		margin-left: 2.5%;
		overflow: hidden;
		
	}
	.footStyle .good-img {
		position: relative;
	  width: 100%;
	  height: 200rpx;
	}
	.footStyle .good-info{
		width: 100%;;
		height:150rpx ;
		padding: 0 10rpx;
	}
	.footStyle .good-name {
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	  margin-bottom: 6rpx;
	  font-size: 26rpx;
	  margin: 14rpx 0;
	}
	.footStyle .Popup{
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top:0;
		z-index: 99;
		background: rgba(0,0,0,0.3);
	}
	.footStyle .PopupBox{
		width: 100%;
		height: 170px;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		background: #fff;
		
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 100;
		
	}
	.footStyle .Popupicon{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	.footStyle .Popupicon .icon{
		width: 50px;
		height: 50px;
		border-radius: 6rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1px solid #c8c9cc;
		margin: 0  20rpx;
	}
</style>
