<template>
	<view class="pointBalance">
		<view class="balancetop">
			<view class="topbox">
				<span style='font-size: 12px;color: #1B1D1E;'>账户余额（点数）</span>
				<span style='font-size: 25px;color: #111111;'>{{PointNum}}</span>
				<view class="recharge" v-if="IsShowRecharge == 1" @click="gopointRecharge">
					充值
				</view>
			</view>
		</view>
		<u-tabs
		  :list="list"
		  :is-scroll="false"
		  :current="current"
		  @change="change"
		  :active-color="mainColor"
		></u-tabs>
		 <u-empty v-if="g.length == 0" text="暂无相关记录" mode="list"></u-empty>
		<view
		  v-if="g.length > 0"
		  style="
		    height: calc(100vh - 205px);
		    width: calc(100vw);
		    overflow: hidden;
			padding-bottom: 10px;
		  "
		>
			  <scroll-view
				:scroll-y="true"
				:enable-back-to-top="true"
				:enable-flex="true"
				@scrolltolower="lower"
				:style="{ height: '100%' }"
			  >
				<view class="DetailList">
				  <view class="item" v-for="(x, i) in g" :key="i" >
				   <view style="flex: 1;width: 1px;">
					   <div v-if='current==0'>{{x.Description}}</div>
					   <div v-if='current==1'>充值金额：{{x.Income}}元({{x.PaymentWayName}})</div>
					   <div style="font-size: 11px;color: #999999;margin-top: 10px;">{{x.CreateDate}}</div>
				   </view>
				   <view  class="item-r" :style="{color: x.Type==1?mainColor:'#111111'}" v-if='current==0'>
					   {{x.Type==1?'+'+x.PonitNum:'-'+x.PonitNum}}
				   </view>
				   <view class="item-r" v-if='current==1' :style="{color: mainColor}">
					   点数+{{x.PonitNum}}
				   </view>
				  </view>
				</view>
			 
				<u-loadmore
				  :status="status"
				  :load-text="loadText"
				  :font-size="24"
				  :margin-top="20"
				  :margin-bottom="20"
				  bg-color="#FFFFFF"
				/>
			  </scroll-view>
		  </view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'goback'></auth>
	</view>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	export default{
		components:{
			auth
		},
		data(){
			return{
				mainColor: '',
				secondary: '',
				IsShowRecharge:1,
				showAuth:false,
				u:{},
				list: [
				  { name: "消费记录" },
				  { name: "充值记录" },
				  
				],
				current:0,
				msg:{
					pageIndex:1,
					pageSize:10,
					Type:0
				},
				msg2:{
					pageIndex:1,
					pageSize:10,
					OrderNo:0
				},
				g:[],
				PointNum:0,
				page_count: 1,
				status: "loadmore",
				loadText: {
				  loadmore: "轻轻上拉，加载更多",
				  loading: "努力加载中",
				  nomore: "没有更多了",
				},
			}
		},
		onLoad() {
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
			  this.u = {
				nickName: "未登录",
				avatarUrl: ""
			  };
			  this.showAuth = true;
			}else{
				this.init()
			}
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			uni.setNavigationBarTitle({
				title: '余额点数'
			});
			// this.IsShowRecharge = uni.getStorageSync("basedata") ? uni.getStorageSync("basedata").mall.setting.IsShowRecharge:0//完成时打开
			
		},
		methods:{
			init(){
				let url = ''
				let msg = {}
				if(this.current==0){
					url = '/api/AppletPoint/GetAppletUserPointDetailPageList'
					msg= this.msg
				}else{
					url = '/api/AppletPoint/GetAppletUserPointOrderPageList'
					msg= this.msg2
				}
				this.request2({
						url:url ,
						data: msg
					},
					res => {
						if(this.current==0){
							this.PointNum = res.data.pageData.PointNum
							this.page_count = res.data.pageCount
							this.g= this.g.concat(res.data.pageData.List) 
							
						}else{
							this.g= this.g.concat(res.data.pageData) 
							this.page_count = res.data.pageCount
						}
						if (this.page_count == 1) {
						   this.status = "nomore";
						}
					}
				);
			},
			change(index) {
				this.current = index
				if(this.current==0){
					this.msg.pageIndex = 1;
					this.g = [];
					this.init();
				}else{
					this.msg2.pageIndex = 1;
					this.g = [];
					this.init();
				}
			  
			},
			lower(e) {
				if(this.current==0){
					if (this.msg.pageIndex < this.page_count) {
					  this.msg.pageIndex++;
					  this.status = "loading";
					  this.init();
					} else {
						this.status = "nomore";
					}
				}else{
					if (this.msg2.pageIndex < this.page_count) {
					  this.msg2.pageIndex++;
					  this.status = "loading";
					  this.init();
					} else {
						this.status = "nomore";
					}
				}
			  
			},
			gopointRecharge(){
				uni.navigateTo({
					url: '/pages/appointment/personal/pointRecharge'
				});
			},
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  
			  this.init()
			},
			goback(){
				uni.navigateBack()
			},	
		}
	}
</script>

<style>
	.pointBalance{
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
	}
	.pointBalance .balancetop{
		width: 100%;
		padding: 5px 15px;
	}
	.pointBalance .topbox{
		width: 100%;
		height: 150px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 10px  0 ;
		box-shadow:0 0px 10px 6px #F2F2F2;
	}
	.pointBalance .recharge{
		width: 100px;
		height: 30px;
		border-radius: 4px;
		background-color: #40766E;
		font-size: 13px;
		color: #FFF;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.pointBalance .DetailList{
		
	}
	.pointBalance .item{
		padding: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		color: #111111;
		border-bottom: 1px solid #E2E2E2;
	}
	.pointBalance .item-r{
		width: 100px;text-align: right;
	}
</style>
