<template>
	<view :class="[AppTheme]" class="page_box">
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-sticky offset-top="0" style="z-index: 10;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offset-top="-44" style="z-index: 10;">
				<!-- #endif -->
				<view class="uTabs_list">
					<u-tabs ref="uTabs" :list="couponsState" :activeStyle="{
				    color: primary,
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				    color: '#606266',
				    transform: 'scale(1)'
				}" lineWidth="40"  :lineColor="primary" :current="stateCurrent" @click="casesort">
					</u-tabs>
				</view>
			</u-sticky>
			
			<view class="content_box" >
				<view v-if="couponList.length==0" class="nodata-empty">
					<u-empty text="暂无优惠券" mode="coupon" iconSize="90">	 
					</u-empty>
				</view>
				<nx-coupon v-for="(item, index) in couponList" :key="index" v-bind:isover="false" v-bind:item="item"
				v-bind:site="site"	theme="#ff0000" />
			</view>
			
			<view v-if="couponList.length>0">
				<u-loadmore :status="dloading" :icon-type="iconType" :load-text="loadText" margin-bottom="0"
					margin-top="20" />
			</view>
			
	</view>  
</template>
<script>
	import mineApi from '@/api/mine/index.js';
	export default {
		components: {},
		data() {
			return {
				primary: this.$theme.primary,
				stateCurrent: 0,
				couponsState: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '未使用'
					},
					{
						id: 3,
						name: '已使用'
					},
					{
						id: 4,
						name: '已过期'
					}
					
				],
				p1: 1,
				couponList: [],
				nocouponList: [],
				site:{},
					dloading: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '没有更多了'
					},
					pageindex: 1, //当前页
					totalpage: 0, //总页数
					total: 0, //总条数
			}
		},
		onLoad() {
			this.pageindex = 1
			this.totalpage = 0
			 
			this.getdata();
		},
		onReachBottom() {
			
			 this.pageindex++
			 this.getdata()
			 
		},
		//下拉刷新
		onPullDownRefresh() {
			
			 this.pageindex = 1
			 this.totalpage = 0
			  
			 this.getdata(
			 	setTimeout(function() {
			 		uni.stopPullDownRefresh()
			 	}, 1000)
			 )
		 
		},
		methods: {
			casesort(e) {
					this.stateCurrent = e.index
					 
				     this.getdata(this.stateCurrent,this.p1)
			},
			getdata() {
			 
				let that = this;
				let data = {
					p: this.pageindex,
					pagesize: 10,
					status: this.stateCurrent
				};
				that.dloading = 'loading'
				if (that.pageindex == 1 || that.pageindex <= that.totalpage) {
					uni.showLoading({
						title: '加载中……'
					})
				mineApi.mycard(data).then(res => {
					if (res.status == 200){ 
						if (that.pageindex == 1) {
							that.couponList = []
						}
									// res.data.data.data.forEach((item, index) => {
									// 	that.couponList.push(item)
									// }) 
									// console.log('resres',res)
									that.couponList = that.couponList.concat(res.data.data.data)
									that.totalpage = res.data.data.last_page	 
								that.site=res.data.site;
						if (that.pageindex >= that.totalpage) {
							that.dloading = 'nomore'
						}
						uni.hideLoading()
					}
					
					
				});
				} else {
				
					that.dloading = 'nomore'
					uni.hideLoading()
				}
			},
			gotoHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			 
		}
	}
</script>


<style lang="scss" scoped>
	page {
		background-color:  #F5F5F7;
		// background-color: burlywood;
	}

	.page_box {
		//  background: #fff;
		.uTabs_list {
			background-color: #fff;
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
			width: 100%;
			z-index: 99;
		
			.uTabs_item {
				padding: 20rpx 0;
				flex: auto;
				text-align: center;
			}
		}
	}

	.coupon-nav {
		background: #fff;
		height: 100rpx;
		width: 100%;
		z-index: 99;
		.nav-item {
			flex: 1;

			.item-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 76rpx;
			}

			.nav-line {
				width: 120rpx;
				height: 4rpx;
			}
		}
	}

	.content_box {
		
		justify-content: center;
		// padding: 20rpx;
		 width: 95%;
		 margin-left: 2.5%;
		// border-radius: 10rpx;
		.nodata-empty {
			margin-top: 50%;

			/deep/ button {
				&::after {
					border: none;
				}
			}
		}
	}
</style>
