<template>
	<view class="vip_equityCard_content">

		<!-- <mescroll-uni @init="mescrollInit" @up="upCallback"  :down="down"> -->
			<view class="equityCardSty">
				<view class="vipCard_total">我的权益卡：{{ total }}</view>
				<view @click="toList">转赠记录</view>
			</view>
			<view class="detail_list_vipCard" v-show='vipCardList.length'>
				<view class="vipCard_item" v-for="(item,index) in vipCardList">
					<view style="display:flex">
						<image :src="item.file" class="vipCard_img"> </image>
						<view class="vipCard_item_right">
							<view class="vipCard_item_right_card">
								<text>持卡人：</text>
								<view>{{item.nickname}}</view>
							</view>
							<view class="vipCard_item_right_card">
								<text>唯一凭证：</text>
								<view>{{item.code}}/10000</view>
							</view>
						</view>
					</view>

					<view class="rechargeBtn" @click="toRechare(item)">转赠</view>
				</view>

			</view>
			<view>
			<u-loadmore :status="status" />
		</view>
		<!-- </mescroll-uni> -->

	</view>

</template>

<script>
	import {
		getVipCardNo,
	} from "@/request/recharge/index.js";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				vipCardList: [],
				down:{
					isLock:true
				},
				total:0,
				limit:10,
		   page:1,
		   init_num:0,
		   num:0,
		 
		   last_page:1,
		   id:"",
		   status: 'loading'
				
			};
		},
		//返回刷新数据
		onShow() {
			this.getVipCardNo()
			// this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
			// this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
			// this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
		},
		methods: {
		 
			getVipCardNo(mescroll) {
				const params = {
					limit: 20,
					page: this.page,
				}
				getVipCardNo({
					...params
				}).then((res) => {
					if (res) {
						const {
							code,
							data,
							
						} = res

						if (code == 200) {
		 
							// const curPageData = data?.data || [] // 当前页数据
							// if (mescroll.num == 1) this.vipCardList = [];
							// this.vipCardList = this.vipCardList.concat(curPageData); //追加新数据
							// this.total=data.total||0
							// mescroll.endSuccess(curPageData.length);
					 
					 
					 
					   this.last_page=data?.last_page
					   this.total=data.total||0
					//    console.log(this.last_page,"this.last_page")
						  if(this.page==1){
							this.vipCardList =data?.data || [] 
						
						  }else{
							var listArr=this.vipCardList
							this.vipCardList = listArr.concat(data?.data || []  )
						  
						  }
						  
						  this.status = '';
						}
					}
				}).catch((error) => {
					this.status = 'nomore';
					// mescroll.endErr(); //
				})
			},


			toList() {
				uni.navigateTo({
					url: '/pages/pages-recharge/subgiftTotalCard/index'
				});
			},
			toRechare(item) {
				uni.navigateTo({
					url: `/pages/pages-recharge/rechargeSubgiftCard/index?id=${item.id}`
				});
			},
			onReachBottom() {
				this.page=this.page+=1
				console.log(this.page,this.last_page,this.page<this.last_page,"this.last_page214214")
		    if (this.page>this.last_page){
		 		this.status='nomore'
				return;
			}
			this.status = 'loading';
			
			this.getVipCardNo()
	}
		},
		onHide(){
			this.page=1
			this.vipCardList=[]
			this.total=0
			this.last_page=1
			this.status='loading'
		}
		 

	}
</script>

<style lang="scss" scoped>
	page {
		background: #F5F5F5;
	}

	.vip_equityCard_content {
		padding: 20rpx;

		/deep/.mescroll-uni {
			padding: 20rpx 24rpx !important;
		}

		.equityCardSty {
			display: flex;
			justify-content: space-between;

			.vipCard_total {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				padding-bottom: 20rpx;
			}

			view:nth-child(2) {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #47A2F2;
			}

		}

		.detail_list_vipCard {
			.vipCard_item {
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				border-radius: 20rpx;
				background: #fff;
				margin-bottom: 20rpx;

				.vipCard_img {
					border-radius: 20rpx;
					height: 168rpx;
					margin-right: 20rpx;
					width: 224rpx;
				}

				.vipCard_item_right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.vipCard_item_right_card {
						margin-top: -6rpx;
						text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}

						view {
							font-size: 28rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #333333;
							word-break: break-all;
							overflow: hidden;
							width: 300rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							// display: inline-block;
						}
					}
				}
			}

			.rechargeBtn {
				width: 122rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 10rpx;
				border: 2rpx solid #DEDEDE;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>
