<template>
	<view class="balanceStyle" :style="{'height':contentHeight}" > 
		<view :style="{'backgroundImage':'url('+(g.setting.bj_pic_url.url?g.setting.bj_pic_url.url:'')+')',backgroundSize: 'cover'}" class="balance_top" >
			<Text style='margin-top:50rpx ;color: #fff;;font-size: 24rpx;'>账户余额(元)</Text>
			<Text style='margin-top:50rpx ;color: #fff;;font-size: 36px;'>{{g.balance}}</Text>
			<view class="recharge" @click="goUrl('/pages/balance/recharge')">
				<Text style='color: #fff;;font-size: 28rpx;'>充值</Text>
			</view>
			<!-- TODO 暂无余额说明 -->
			<u-icon name="question-o" color="#fff" class='explain' size="36" @click="goUrl('/pages/balance/rules')"></u-icon>
		</view>
		<view class="timechoice">
			<view style="width: 50%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
				<u-icon name="arrow-left" color="#909399"  size="36" @click='fun_date(-1)'></u-icon>
				<Text>{{date}}</Text>
				<u-icon name="arrow" color="#909399"  size="36" @click='fun_date(1)'></u-icon>
			</view>
		</view>
		<view  v-if="logsList.length > 0"
		  style="
				height: calc(100vh - 265px);
				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;">
					<view v-for="(item, index) in logsList" :key="index" class='logsList' @click="godetail(item)">
						<view class="logsList_l">
							<Text class='l_name'>{{item.Description}}</Text>
							<Text style='font-size: 13px;color: #666;'>{{item.CreateDate}}</Text>
						</view>
						<view class="logsList_r">
							<Text  :style="{color:item.Type==1 ? mainColor:'#6ABE60'}">{{item.Type==1 ? '+':'-'}}{{item.Balance}}</Text>
						</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= 'goback'></auth>
		
	</view>
</template>

<script>
	import auth from "../../components/auth/index.vue";
	export default {
		data() {
			return {
				pageTitle:"余额记录",
				
				showAuth:false,
				contentHeight:0,
				mainColor: "",
				u:{},
				g:{},
				date:'',
				date2:'',
				logsList:[],
				msg:{
					pageIndex: 1,
					pageSize:10,
					CreateDate:''
				},
				page_count:1,
				status: "loadmore",
				loadText: {
				  loadmore: "轻轻上拉，加载更多",
				  loading: "努力加载中",
				  nomore: "没有更多了",
				},
			}
		},
		components:{
			auth
		},
		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.getData()
			}
			
		},
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			  this.mainColor = this.$uiConfig.mainColor;
			  
		},
		methods: {
			getData(){
				let date1 = new Date();
				 let time1 = date1.getFullYear() + "年" + (date1.getMonth() + 1) +'月'
				 let time2 = date1.getFullYear() + "-" + (date1.getMonth() + 1)
				 
				 this.date = time1
				 this.msg.CreateDate = time2
				this.balancedata()
				this.getlogs()
			},
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  this.showAuth=false;
			  this.getData()
			},
			goback(){
				uni.navigateBack()
			},
			balancedata(){
				uni.showNavigationBarLoading();
				let h=this.apiheader()
				this.request(
				  {
				    url: "",
					header:h,
				    data: {
				      r: "api/balance/index",
				    }
				  },
				  res => {
					uni.hideNavigationBarLoading()
				   this.g  = res.data;
				   
				  }
				);
			},
				
			getlogs(){
				
				
				uni.showLoading({
				    title: '加载中'
				});
				this.request2(
				  {
				  	url: '/api/AppletUser/GetMemberBalancePageList',
				  	data: this.msg
				  },
				  res => {
					  
					  
					 uni.hideLoading();
					 if(res.resultCode==1){
					 	this.logsList = this.logsList.concat(res.data.pageData);
					 	 this.page_count = res.data.pageCount;
					 	 if (this.page_count == 1) {
					 	   this.status = "nomore";
					 	 }
					 }
					  
				  }
				);
			},
			fun_date(num){
				let date = this.date;
				let date2 = this.msg.CreateDate;
				let currentDate = new Date(date2); 
				this.msg.pageIndex=1;
				this.logsList=[];
				if(num==-1){
					
					let lastDate = currentDate.setMonth(currentDate.getMonth() - 1); // 输出日期格式为毫秒形式1551398400000
					 
					lastDate = new Date(lastDate);
					let lastYear = lastDate.getFullYear();
					let lastMonth = this.checkMonth(lastDate.getMonth() + 1); // 因日期中的月份表示为0-11，所以要显示正确的月份，需要 + 1
					 
					lastDate = lastYear + '年' + lastMonth +'月'; 
					let	lastDate2 = lastYear + '-' + lastMonth; 
					this.date = lastDate;
					this.msg.CreateDate = lastDate2;
					this.getlogs()
				}else if(num==1){
					
					let nextDate = currentDate.setMonth(currentDate.getMonth() + 1); // 输出日期格式为毫秒形式1556668800000
					 
					nextDate = new Date(nextDate);
					let nextYear = nextDate.getFullYear();
					let nextMonth = this.checkMonth(nextDate.getMonth() + 1); // 因日期中的月份表示为0-11，所以要显示正确的月份，需要 + 1
					
					nextDate = nextYear + '年' + nextMonth+'月';
					let nextDate2 = nextYear + '-' + nextMonth;
					this.date = nextDate;
					this.msg.CreateDate = nextDate2;
					this.getlogs()
				}
				
			},
			checkMonth (i) {
			    if (i<10){
			        i="0" + i;
			    }
			    return i;
			},
			goUrl(url){
				console.log(url	)
				uni.navigateTo({
					url: url
				})
			},
			godetail(item){
				uni.navigateTo({
					url: '/pages/balance/detail?item='+ encodeURIComponent(JSON.stringify(item))
				})
			},
			lower(e) {
			  if (this.msg.pageIndex < this.page_count) {
				this.msg.pageIndex++;
				this.status = "loading";
				this.getlogs();
			  } else {
				this.status = "nomore";
			  }
			},
		}
	}
</script>

<style>
	.balanceStyle{
		background: #f3f4f6;
		width: 100%;
	}
	.balanceStyle .balance_top{
		width: 100%;
		height: 215px;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	.balanceStyle .recharge{
		width: 90px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 15px;
		border: 1px solid #FFFFFF;
		margin-top: 60rpx;
	}
	.balanceStyle .explain{
		position: absolute;
		right: 20rpx;
		top:20rpx
	}
	.balanceStyle .timechoice{
		width: 100%;
		height: 50px;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.balanceStyle .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;
	}
	.balanceStyle .logsList{
		width: 100%;
		height: 75px;
		background: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		border-top: 1px solid #f5f5f5;
	}
	.balanceStyle .logsList_l{
		width: calc(100vw - 20px - 150px);
		height: 55px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.balanceStyle .logsList_r{
		width: 150px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		font-size: 26px;
	}
	.balanceStyle .logsList_l .l_name{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 14px;
	}
</style>
