<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">
					<view class="coupon-item" v-for="(coupon, c_index) in test" :key="c_index">
						<Coupon :couponInfo="coupon" :status='index' :type="1" @use="useCoupon($event)"></Coupon>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import Coupon from "@/components/mine/coupon/index" 
export default {
	data() {
		return {
			list: [{
				name: '未使用'
			}, {
				name: '已使用'
			}, {
				name: '已过期'
			}],
			current: 0,
			swiperCurrent: 0,
			swiperHeight: '',
			test: [
				{
					index: 0
				},
				{
					index: 1
				},
				{
					index: 2
				},
				{
					index: 3
				},
				{
					index: 4
				},
				{
					index: 5
				},
				{
					index: 6
				},
				{
					index: 7
				}
			]
		}
	},
	components: {
		Coupon
	},
	onLoad() {
		this.setViewHeight();
	},
	methods: {
		useCoupon(id) {
			console.log(id);
		},
		setViewHeight() {
			const res = uni.getSystemInfoSync();
			this.swiperHeight = res.windowHeight - (88 / 2 + 11 / 2) + '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>