<template>
	<view class="container">
		<v-navigation-bar title-color="#333" background-color="#fff" title="卡卷包">
		</v-navigation-bar>
		<view class="tabbar">
			<view v-for="item in tabList" :key="item.value" class="tabItem" :class="{active: activeKey === item.value}">
				{{item.title}}
				<view v-if="activeKey === item.value" class="activeLine">

				</view>
			</view>
		</view>
		<view class="body">
			<view class="cardItem">
				<view class="cardItemTop">
					<image class="cardImg" src="" mode="aspectFill"></image>
					<view class="cardInfo">
						<view class="cardName">车辆保养卡</view>
						<view class="cardEndDate">2024-09-20</view>
					</view>
					<view class="cardInfoRight">
						<view class="cardNum">
							<text class="cardNumValue">4</text>次
						</view>
						<view class="cardLabel">可用次数</view>
					</view>
				</view>
				<view class="cardItemBottom">
					<view class="useSm">使用说明</view>
					<view class="useBtn">去使用</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'

	export default {
		components: {
			VNavigationBar,
		},
		data() {
			return {
				tabList: [{
						value: 0,
						title: '优惠卷'
					},
					{
						value: 1,
						title: '卡包'
					}
				],
				activeKey: 0
			};
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		background-color: #F0F1F5;

		display: flex;
		flex-direction: column;

		.body {
			flex: 1;
			height: 0;
			box-sizing: border-box;
			padding: 30rpx 0;
			margin: 0 32rpx;

			display: flex;
			flex-direction: column;
			row-gap: 20rpx;

			overflow: auto;


			.cardItem {
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 30rpx;
			}

			.cardItemTop {
				display: flex;
				align-items: center;
				column-gap: 16rpx;
				padding-bottom: 32rpx;
				border-bottom: 1px solid #ddd;
			}

			.cardImg {
				width: 136rpx;
				height: 100rpx;
				background-color: #efefef;
			}

			.cardInfo {
				flex: 1;
				width: 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				padding: 6rpx 0;

				.cardName {
					font-size: 32rpx;
					color: #333333;
				}

				.cardEndDate {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.cardInfoRight {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #FC4D4A;

				.cardNumValue {
					font-size: 64rpx;
				}

				.cardLabel {
					color: #999999;
				}
			}
		}

		.cardItemBottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0 0;

			.useSm {
				font-size: 24rpx;
				color: #999999;
			}

			.useBtn {
				width: 144rpx;
				height: 60rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				border: 1rpx solid #FC4D4A;
				font-size: 28rpx;
				color: #FC4D4A;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.tabbar {
		background-color: #fff;
		display: flex;
		align-items: center;

		.tabItem {
			flex: 1;
			width: 0;

			display: flex;
			justify-content: center;
			padding: 30rpx 0;

			position: relative;
		}

		.activeLine {
			width: 52rpx;
			height: 8rpx;
			background: #009EDA;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			
			position: absolute;
			left: 50%;
			bottom: 2rpx;
			transform: translate(-50%, 0);
		}
	}
</style>