<template>
	<view class="coupon">
		<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="32" :show-bar="false" @change="tabsChange" height="88" ></u-tabs-swiper>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
			<swiper-item class="swiper-item" v-for="(_, index) in list" :key="index">
				<scroll-view scroll-y class="scroll-coupon" @scrolltolower="onreachBottom">
					<view v-if="couponList[index]">
						<view class="coupon-item" v-for="(coupon, c_index) in couponList[index]" :key="c_index">
							<Coupon :couponInfo="coupon" :status='index' @use="useCoupon($event)" :goodsClass="goodsClass"></Coupon>
						</view>
					</view>
					<u-empty text="暂无优惠券" mode="coupon" v-if="!couponList[index] || !couponList[index].length"></u-empty>
					<u-loadmore :status="loadStatus[current]" bgColor="#FFFFFF" font-size="14" margin-top="20" margin-bottom="20" @loadmore="onreachBottom" v-if="!couponList[index] || couponList[index].length>=pageSize"></u-loadmore>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import Coupon from "@/components/mine/coupon/mine" 
export default {
	data() {
		return {
			list: [{
				name: '未使用'
			}, {
				name: '已使用'
			}, {
				name: '已过期'
			}],
			current: Number,
			swiperCurrent: 0,
			swiperHeight: '',
			couponList: [],
			goodsClass: [],
			pageSize: 6,
			page: 0,
			timer: true,
			loadStatus: ['loadmore', 'loadmore', 'loadmore'],
		}
	},
	components: {
		Coupon
	},
	onLoad() {
		this.setViewHeight();
		this.getGoodsClass();
	},
	onShow() {
		this.current = 0;
	},
	watch: {
		current(value) {
			this.getMemberCouponList(value);
		}
	},
	methods: {
		getGoodsClass() {
			this.$u.api.getGoodsClass().then(res => {
				this.goodsClass = res.data;
			})
		},
		async getMemberCouponList({ load = 'reload' }) {
			if(load == 'reload') this.page = 0;
			const res = await this.$u.api.getMemberCouponList({
				status: this.current + 1, // 代金券状态 1:未用 2:已用 3:过期 4:收回
				page: this.page,
			})
			this.timer = true;
			if(load == 'reload') this.couponList[this.current] = res.data;
			else if(load == 'loadmore') this.couponList[this.current].push(...res.data);
			this.$forceUpdate();
			// console.log(this.couponList);
			return res.data.length;
		},
		onreachBottom() {
			if(!this.timer) return false;
			this.timer = false;
			this.loadStatus.splice(this.current, 1, "loading");
			this.page++;
			this.getMemberCouponList({ load: 'loadmore' }).then(length => {
				this.loadStatus.splice(this.current, 1, "nomore");
				if(length == 0) this.page--;
			}).catch(() => {
				this.loadStatus.splice(this.current, 1, "nomore");
				console.log(this.loadStatus[this.current]);
				this.page--;
			})
		},
		useCoupon(coupon) {
			// console.log(coupon);
			// if(coupon.type == 1) {
			// 	this.$u.route({
			// 		type: 'switchTab',
			// 		url: 'pages/shop/index',
			// 	})
			// } else if(coupon.type == 2) {
			// 	this.$u.route('pageC/merchant/index', {
			// 		id: coupon.voucher_store_id,
			// 	});
			// }
			this.$u.route('pageE/useCoupon/index', {
				cid: coupon.vouchertemplate_id,
			});
		},
		setViewHeight() {
			const res = uni.getSystemInfoSync();
			this.swiperHeight = res.windowHeight - (100 * (res.windowWidth / 750)) + 'px';
		},
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.swiperCurrent = current;
			this.current = current;
		},
	},
};
</script>
<style lang="scss" scoped>
.coupon {
	overflow: hidden;
	.u-tabs {
		border: {
			top: 1rpx #ECECEC solid;
			bottom: 10rpx #ECECEC solid;
		};
	}
	.swiper-item {
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		.scroll-coupon {
			height: 100%;
			.coupon-item {
				margin-bottom: 20rpx;
				// position: relative;
				// z-index: 9;
			}
		}
	}
}
</style>