<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="view">
		<div class="tab">
			<u-tabs :list="tabList" @change="tabChange" :scrollable="false" :activeStyle="{color: 'var(--base-color)'}" lineColor="var(--base-color)"></u-tabs>
		</div>
		
		<div class="content">
			<div v-if="currentTab==0">
				<div class="coupon" v-for="(item,index) in data" :key="index">
					<div class="left">
						<div class="quantity">
							<span class="unit">￥</span>
							<span class="number">{{item.number}}</span>
						</div>
						<div class="desc">{{item.desc}}</div>
					</div>
					<div class="lineImg">
						<image src="@/static/line.png" mode=""></image>
					</div>
					<div class="right">
						<div class="btn" @click="showToast">
							去使用
						</div>
						<div class="type">{{item.type}}</div>
						<div class="validity">有效期：{{item.validity}}</div>
					</div>
				</div>
			</div>
			<div v-if="currentTab==1">
				<div class="un_coupon" v-for="(item,index) in unableData" :key="index">
					<div class="top">
						<div class="left">
							<div class="quantity">
								<span class="unit">￥</span>
								<span class="number">{{item.number}}</span>
							</div>
							<div class="desc">{{item.desc}}</div>
						</div>
						<div class="lineImg">
							<image src="@/static/line.png" mode=""></image>
						</div>
						<div class="right">
							<div class="type">{{item.type}}</div>
							<div class="validity">有效期：{{item.validity}}</div>
						</div>
					</div>
					<div class="bottom">·{{item.reason}}</div>
				</div>
			</div>
		</div>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 1,
				tabList: [{
					name: '可用优惠券'
				},{
					name: '不可用优惠券'
				}],
				data:[{
					number:200,
					desc: '免费抵用券',
					type: '满减劵',
					validity: '2022.12.12-2022.12.22',
				},{
					number:1.5,
					desc: '无使用门槛',
					type: '满减劵',
					validity: '2022.12.12-2022.12.22'
				},{
					number:200,
					desc: '免费抵用券',
					type: '满减劵',
					validity: '2022.12.12-2022.12.22'
				},{
					number:1.5,
					desc: '满100可使用',
					type: '满减劵',
					validity: '2022.12.12-2022.12.22'
				},{
					number:200,
					desc: '免费抵用券',
					type: '满减劵213213123123123123123122312',
					validity: '2022.12.12-2022.12.22'
				},{
					number:1.5,
					desc: '无使用门槛',
					type: '满减劵',
					validity: '2022.12.12-2022.12.22'
				},{
					number:1.5,
					desc: '无使用门槛',
					type: '满减劵',
					validity: '2022.12.12-2022.12.22'
				},{
					number:1.5,
					desc: '无使用门槛',
					type: '满减劵',
					validity: '2022.12.12-2022.12.22'
				},{
					number:1.5,
					desc: '无使用门槛',
					type: '满减劵',
					validity: '2022.12.12-2022.12.22'
				}],
				unableData:[{
					number:1.5,
					desc: '无使用门槛',
					type: '满减劵',
					validity: '2022.12.12-2022.12.22',
					reason: '这里是不可用的原因'
				},{
					number:1.5,
					desc: '无使用门槛',
					type: '满减劵',
					validity: '2022.12.12-2022.12.22',
					reason: '这里是不可用的原因'
				},{
					number:1.5,
					desc: '无使用门槛',
					type: '满减劵',
					validity: '2022.12.12-2022.12.22',
					reason: '这里是不可用的原因'
				}]
			}
		},
		methods: {
			tabChange ({index}) {
				this.currentTab = index
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.view {
		min-height: 100vh;
		background-color: #FFFFFF;
		.tab {
			
		}
		.content {
			padding: 32rpx;
			.coupon {
				margin-bottom:32rpx;
				height: 176rpx;
				background: url("@/static/coupon.png");
				background-size: cover;
				display: flex;
				.left{
					width: 226rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-direction: column;
					padding-top: 30rpx;
					padding-bottom: 48rpx;
					.quantity {
						box-sizing: border-box;
						.unit{
							font-size: 32rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #E5831E;
						}
						.number {
							font-size: 64rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #F08433;
							line-height: 62rpx;
						}
					}
					.desc {
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(240,132,51,0.78);
						
						
					}
				}
				.lineImg {
					position: relative;
					top: 30rpx;
					left: 1rpx;
					width: 20rpx;
					image {
						width: 2rpx;
						height: 114rpx;
					}
				}
				.right {
					padding: 35rpx 0 35rpx 25rpx;
					position: relative;
					flex-grow: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.btn {
						position: absolute;
						right: 38rpx;
						
						width: 144rpx;
						height: 48rpx;
						background: linear-gradient(133deg, #FB6677 0%, #F33B50 100%);
						border-radius: 28rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						
						transform: translate(0,10%);
					}
					.type {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space:nowrap;
						word-break: break-all;
						max-width: 230rpx;
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #F08433;
					}
					.validity {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(240,132,51,0.78);
					}
				}
			}
			.un_coupon {
				margin-bottom:32rpx;
				height: 250rpx;
				background: url("@/static/un_coupon.png");
				background-size: cover;
				display: flex;
				flex-direction: column;
				.top {
					display: flex;
					.left{
						width: 226rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-direction: column;
						padding-top: 30rpx;
						padding-bottom: 38rpx;
						.quantity {
							box-sizing: border-box;
							.unit{
								font-size: 32rpx;
								font-family: DINAlternate-Bold, DINAlternate;
								font-weight: bold;
								color: #999999;
							}
							.number {
								font-size: 64rpx;
								font-family: DINAlternate-Bold, DINAlternate;
								font-weight: bold;
								color: #999999;
								line-height: 62rpx;
							}
						}
						.desc {
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							opacity: 0.78;
							
							
						}
					}
					.lineImg {
						position: relative;
						top: 30rpx;
						left: 1rpx;
						width: 20rpx;
						image {
							width: 2rpx;
							height: 114rpx;
						}
					}
					.right {
						padding: 35rpx 0 35rpx 25rpx;
						position: relative;
						flex-grow: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.type {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space:nowrap;
							word-break: break-all;
							max-width: 230rpx;
							font-size: 36rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #999999;
						}
						.validity {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							opacity: 0.78;
						}
					}
				}
				.bottom {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					padding-left: 52rpx;
					padding-top: 15rpx;
				}
			}
		}
	}
</style>