<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="secondaryCard">
		<view class="tops">

		</view>
		<view class="secondBright-header">
			<view class="header-left" :class="{headerActive:headerindex===1}" @click="remo">
				可用次卡
				<view class="act" v-if="headerindex===1">
					
				</view>
				<view class="icons">
					{{cardDataValidCards.length}}
				</view>
			</view>
			<view class="header-right" :class="{headerActive:headerindex==2}" @click="add">
				失效次卡
				<view class="act" v-if="headerindex===2">
					
				</view>
				<view class="icons">
					{{cardDataInvalidCards.length}}
				</view>
			</view>
		</view>
		<scroll-view class="secondaryCard-auto" scroll-y="true">
			<view class="card" v-for="(item,index) in cardDataValidCards" :key="item.id" v-if="headerindex===1">
				<text class="reds">剩余<text class="color-r">{{item.useNumber}}</text>次</text>
				<img class="card-l" src="https://www.jiubaotongxue.love/image/demo73.png" alt="" />
				<view class="card-c">
					<view class="t">
						<text class="w"><text class="blacks">{{item.goodsName}}</text></text>
					</view>
					<view class="c">
						<!-- <text class="color-r">20</text>分钟 -->
						每次上限使用{{item.minute}}分钟
					</view>
					<view class="d">
						生效中,有效期至 {{item.endTime}}
					</view>
				</view>
				<view class="card-r" v-if="headerindex===1">
					使用
				</view>
				<view class="card-r1" v-if="headerindex===2">

				</view>
				<!-- <view class="card-r1" v-if="headerindex===2">
					
				</view> -->
			</view>
			<view class="card" v-for="(item,index) in cardDataInvalidCards" :key="item.id" v-if="headerindex===2">
				<text class="reds">剩余<text class="color-r">{{item.useNumber}}</text>次</text>
				<img class="card-l" src="https://www.jiubaotongxue.love/image/demo73.png" alt="" />
				<view class="card-c">
					<view class="t">
						<text class="w"><text class="blacks">{{item.goodsName}}</text></text>
					</view>
					<view class="c">
						<!-- <text class="color-r">20</text>分钟 -->
						每次上限使用{{item.minute}}分钟
					</view>
					<view class="d">
						已失效,有效期至 {{item.endTime}}
					</view>
				</view>
				<view class="card-r" v-if="headerindex===1">
					使用
				</view>
				<view class="card-r1" v-if="headerindex===2">
			
				</view>
				<!-- <view class="card-r1" v-if="headerindex===2">
					
				</view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {getCard} from '../../stor/getCard/getCard.js'
	import { storeToRefs } from 'pinia';
	const c = getCard()
	const {cardDataValidCards,cardDataInvalidCards} = storeToRefs(c)
	c.getCards()
	const headerindex = ref(1)
	const titles = ref('洗车次卡')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const remo = () => {
		headerindex.value = 1
	}
	const add = () => {
		headerindex.value = 2
	}
	const demo = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
</script>

<style lang="scss">
	.secondaryCard {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		position: absolute;
		overflow: hidden;

		.tops {
			width: 100%;
			height: 11%;
		}

		.secondBright-header {
			width: 100%;
			height: 80rpx;
			display: flex;
			font-size: 30rpx;
			color: black;
			background-color: #fff;

			.header-left {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				position: relative;
				.act{
					width: 88rpx;
					height: 8rpx;
					background: #1378F7;
					border-radius: 10rpx;
					position: absolute;
					left: 50%;
					bottom: 1rpx;
					transform: translate(-50%,0);
					z-index: 20;
				}
				.icons{
					font-size: 24rpx;
					position: absolute;
					top: -14rpx;
					left: 250rpx;
				}
			}

			.header-right {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				position: relative;
				.act{
					width: 88rpx;
					height: 8rpx;
					background: #1378F7;
					border-radius: 10rpx;
					position: absolute;
					left: 50%;
					bottom: 1rpx;
					transform: translate(-50%,0);
					z-index: 20;
				}
				.icons{
					font-size: 24rpx;
					position: absolute;
					top: -14rpx;
					left: 250rpx;
				}
			}

			.headerActive {
				// border-bottom: 6rpx solid #009dd9;
				color: #009dd9;
			}
		}

		.secondaryCard-auto {
			width: 100%;
			height: 95%;
			position: relative;
			margin-top: 20rpx;

			.card {
				width: 88%;
				height: 200rpx;
				background-color: white;
				position: relative;
				margin-left: 50%;
				transform: translateX(-50%);
				margin-top: 45rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.reds {
					width: 120rpx;
					height: 40rpx;
					display: block;
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					text-align: center;
					line-height: 40rpx;
					background: linear-gradient(99deg, #FFE8A2 0%, #FBD269 100%);
					color: #A45417;
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					font-size: 20rpx;
					// .color-r{
					// 	color: #da0722;
					// 	font-size: 35rpx;
					// }
				}

				.card-l {
					width: 152rpx;
					height: 128rpx;
					// border-radius: 50%;
					// border: 1rpx solid #666;
					margin-left: 30rpx;

				}

				.card-c {
					width: 50%;
					height: 200rpx;
					font-size: 28rpx;
					box-sizing: border-box;
					padding-left: 20rpx;

					.t {
						width: 100%;
						display: flex;
						margin-top: 36rpx;
						justify-content: space-between;
						font-size: 30rpx;
						color: black;
						// .w{
						// 	font-weight: 700;
						// 	letter-spacing: 5rpx;
						// 	.blacks{
						// 		font-size: 35rpx;
						// 	}

						// }


					}

					.c {
						width: 100%;

						font-size: 26rpx;
						color: black;
						margin-top: 15rpx;

						.color-r {
							color: #da0722;
							font-size: 35rpx;
						}
					}

					.d {

						width: 100%;
						margin-top: 15rpx;
						box-sizing: border-box;
						font-size: 20rpx;
						color: #777;
					}
				}

				.card-r {
					width: 120rpx;
					height: 60rpx;
					background-color: white;
					text-align: center;
					line-height: 60rpx;
					margin-right: 20rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					color: #1a97f7;
					border-radius: 30rpx;
					font-size: 26rpx;
					border: 1rpx solid #1275F7;
				}

				.card-r1 {
					width: 88rpx;
					height: 88rpx;
					background-image: url("https://www.jiubaotongxue.love/image/demo74.png");
					background-size: 100% 100%;
					text-align: center;
					line-height: 50rpx;
					margin-left: 20rpx;
					margin-right: 40rpx;
					border-radius: 50%;
					color: #1a97f7;
				}
			}

			.cardActive {
				border: 1rpx solid #1a97f7;
			}
		}
	}
</style>