<template>
	<div class="app-content coupon-list">
		<!-- <div class="tabs-wrap"> -->
			<app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="33.3333%" />
		<!-- </div> -->
		<div class="list-wrap" :class="{'expired' : tabIndex == 2}">
			<div class="list" v-for="(item, index) in 4" :key="index">
				<div class="list-img">
                    <!-- 已过期 -->
                    <template v-if="tabIndex == 2">
					    <img src="../../static/images/coupon/expired.png" alt mode="widthFix" />
                    </template>
                    <template v-else>
					    <img src="../../static/images/coupon/bg.png" alt mode="widthFix" />
                    </template>
				</div>
				<!-- 列表 -->
				<div class="list-det">
					<div class="list-det-left">
						<div class="price-wrap">
							<span>￥</span>
							<span class="price">1000</span>
						</div>
						<div class="full-reduc app-size-28">满100可使用</div>
					</div>
					<div class="list-det-right">
						<div class="coupon-message">
							<div class="app-color-2">优惠券</div>
							<div>适用：全品类</div>
							<div>有效至：2020-10-11</div>
						</div>
                        <!-- 未使用 -->
						<template v-if="tabIndex == 0">
							<button class="button-com red">去使用</button>
						</template>
                        <!-- 已使用 -->
						<template v-else-if="tabIndex == 1">
							<div class="icon-wrap">
								<i class="iconfont iconyishiyong"></i>
							</div>
						</template>
                        <!-- 已过期 -->
						<template v-else>
							<div class="icon-wrap">
								<i class="iconfont iconyiguoqi"></i>
							</div>
						</template>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import appTabs from '@/components/plugin/tabs'
export default {
	name: 'tabs',
	components: {
		appTabs
	},
	data() {
		return {
			tabIndex: 0,
			tabs: [
				{
					name: '未使用'
				},
				{
					name: '使用记录'
				},
				{
					name: '已过期'
				}
			]
		}
	},
	methods: {
		change(e) {
			this.tabIndex = e.index
		}
	}
}
</script>

<style lang="scss" scoped>
	.coupon-list {
		position: relative;
		// .tabs-wrap {
		// 	position: absolute;
		// 	width: 100%;
		// }
		.list-wrap {
			padding: 100px 22px 0;
			.list {
				position: relative;
				margin-bottom: 6px;
				.list-det {
					width: 100%;
					@include disFlex(center, space-between);
					position: absolute;
					top: 0;
					left: 0;
					.list-det-left {
					    padding: 30px 0 30px 36px;
						width: 210px;
						color: #fff;
						.price-wrap {
							margin-bottom: 6px;
							font-size: 26px;
							.price {
								font-size: 60px;
								font-weight: bold;
								line-height: 1;
							}
						}
					}
					.list-det-right {
						width: calc(100% - 280px);
						margin-left: 22px;
                        @include disFlex(center, space-between);
                        padding: 30px 26px 30px 0;
						.coupon-message {
							color: $fontColor3;
							& > div {
								margin: 4px 0;
							}
						}
						.button-com {
							padding-top: 15px;
							padding-bottom: 15px;
						}
						.icon-wrap {
							position: absolute;
							top: 20px;
							right: 20px;
							.iconfont {
								font-size: 128px;
								color: #ffbbcd;
							}
						}
					}
				}
			}
			// 过期
			&.expired {
                .list-det-right {
                    .iconfont {
                        color: #E5E7EC !important;
                    }
                }
			}
		}
	}
</style>
