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

		</view>
		<view class="secondBright-header">
			<view class="header-left" :class="{headerActive:headerindex==1}" @click="remo">
				次卡明细
			</view>
			<view class="header-right" :class="{headerActive:headerindex==2}" @click="add">
				次卡变动明细
			</view>
		</view>
		<scroll-view class="secondBright-auto" scroll-y="true">
			<view class="auto-box" v-for="(item,index) in cards" :key="item.id" v-if="headerindex==1">
				<view class="auto-box-title">
					<text class="left-txt">{{item.date}}</text>
					<text class="right-txt" v-show="headerindex===1">
						<text class="blues">获得次数：{{item.amount}} &nbsp;</text>
						<text class="reds">剩余次数：{{item.amount}}</text>
					</text>
					<!-- <text class="right-txt" v-show="headerindex===2">
						<text class="blues">获得次数：{{item.sumPrice*3}} &nbsp;</text>
						<text class="reds">剩余次数：{{item.sumNum}}</text>
					</text> -->
				</view>
				<view class="auto-box-flex" v-for="(items,indexs) in item.cards" :key="items.id">
					<view class="flex-tops" v-show="headerindex===1">
						<img class="flex-tops-img" src="https://www.jiubaotongxue.love/image/demo49.png" alt=""><text
							class="flex-tops-txt">{{items.cardName}}</text>
					</view>
					<view class="flex-centers">
						<text class="flex-centers-txt" v-show="headerindex===1">订单编号：{{items.orderId}}</text>
						<!-- <text class="flex-centers-txt" v-show="headerindex===2">订单编号：{{items.orderId}}</text> -->
						<!-- <text class="flex-reds" v-show="headerindex===2 &&items.expenditure===1"><text
								class="color-r">-{{items.price}}</text> </text> -->
						<!-- <text class="flex-reds" v-show="headerindex===2 &&items.expenditure===0">￥{{items.price}}
						</text> -->
						<text v-show="headerindex===1"> <text class="flex-reds">￥{{items.amount}}</text> </text>
					</view>
					<view class="flex-bottoms">
						<text>下单时间：{{items.startTime}}</text><!-- <text>有效期{{items.newDate}}</text> -->
					</view>
					<view class="flex-bottomsa">
						<text>有效期间：{{items.endTime}}</text><!-- <text>有效期{{items.newDate}}</text> -->
					</view>
					<view class="lines" v-if="indexs<item.cards.length-1">

					</view>
				</view>

			</view>
			<view class="auto-box" v-for="(item,index) in cardXi" :key="item.id" v-if="headerindex==2">
				<view class="auto-box-title">
					<text class="left-txt">{{item.date}}</text>
					<text class="right-txt" v-show="headerindex===2">
						<text class="blues">获得次数：{{item.getNumber}} &nbsp;</text>
						<text class="reds">剩余次数：{{item.getNumber-item.useNumber}}</text>
					</text>
				</view>
				<view class="auto-box-flex" v-for="(items,indexs) in item.cards" :key="items.id">
					<view class="flex-tops" v-show="headerindex===2">
						<img class="flex-tops-img" src="https://www.jiubaotongxue.love/image/demo49.png" alt=""><text
							class="flex-tops-txt">{{items.cardName}}</text>
					</view>
					<view class="flex-centers">
						<text class="flex-centers-txt" v-show="headerindex===2">订单编号：{{items.orderId}}</text>
						<text class="flex-reds" v-if="headerindex===2&&items.useNumber>0"><text
								class="color-r">-{{items.useNumber}}</text> </text>
						<text class="flex-reds" v-if="headerindex===2&&items.useNumber===0">{{items.getNumber}}
						</text>
					</view>
					<view class="flex-bottoms">
						<text>下单时间：{{items.startTime}}</text><!-- <text>有效期{{items.newDate}}</text> -->
					</view>
					<!-- <view class="flex-bottomsa">
						<text>有效期间：{{items.endTime}}</text>
					</view> -->
					<view class="ding" style="width: 100%;height: 30rpx;position: relative;">
						
					</view>
					<view class="lines" v-if="indexs<item.cards.length-1">
			
					</view>
				</view>
			
			</view>
			<view class="ding">

			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia';
	import {
		balances
	} from '../../stor/balances/balances.js'
	const b = balances()
	const {
		cards,cardXi
	} = storeToRefs(b)
	b.getCard()
	b.getCardXiApi()
	const titles = ref('次卡明细')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const headerindex = ref(0)
	const demos = ref([])
	const remo = () => {
		headerindex.value = 1
		if (headerindex.value === 1) {
			demos.value = []
			demos.value = [{
					id: 1,
					title: "本月",
					sumPrice: 30,
					sumNum: 15,
					arrys: [{
						id: 1,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 300,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 2,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 300,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 3,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}]
				}, {
					id: 2,
					title: "2024年4月",
					sumPrice: 30,
					sumNum: 15,
					arrys: [{
						id: 1,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 2,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 3,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}]
				},
				{
					id: 3,
					title: "2024年3月",
					sumPrice: 30,
					sumNum: 15,
					arrys: [{
						id: 1,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 2,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 3,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}]
				}
			]
		} else {
			uni.showToast({
				icon: "none",
				title: "网络错误,请重新进入"
			})
		}

	}
	remo();
	const add = () => {
		headerindex.value = 2
		if (headerindex.value === 2) {
			demos.value = []
			demos.value = [{
					id: 1,
					title: "本月",
					sumPrice: 3,
					sumNum: 15,
					arrys: [{
						id: 1,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						//为0的时候就是支出 1就是收入
						expenditure: 0,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 2,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						expenditure: 1,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 3,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						expenditure: 0,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}]
				}, {
					id: 2,
					title: "2024年4月",
					sumPrice: 3,
					sumNum: 15,
					arrys: [{
						id: 1,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						expenditure: 1,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 2,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						expenditure: 1,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 3,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09",
						expenditure: 0,
					}]
				},
				{
					id: 3,
					title: "2024年3月",
					sumPrice: 3,
					sumNum: 15,
					arrys: [{
						id: 1,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						expenditure: 0,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 2,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						expenditure: 0,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 3,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "4次卡套餐",
						price: 30,
						expenditure: 1,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}]
				}
			]
		}
	}
</script>

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

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

		.color-r {
			color: #d9001b;
		}

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

			.header-left {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
			}

			.header-right {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
			}

			.headerActive {
				border-bottom: 8rpx solid #1378F7;
				color: #1378F7;
			}
		}

		.secondBright-auto {
			width: 100%;
			height: 95%;
			position: relative;

			.auto-box {
				width: 100%;
				position: relative;

				.auto-box-title {
					width: 100%;
					height: 80rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding-left: 30rpx;
					padding-right: 30rpx;
					font-size: 32rpx;
					margin-top: 30rpx;

					.right-txt {
						font-size: 26rpx;

						.reds {
							color: #FF7733;
						}

						.blues {
							color: #1378F7;
						}
					}

				}

				.auto-box-flex {
					width: 96%;
					margin-left: 50%;
					transform: translateX(-50%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					// height: 100rpx;
					background-color: #fff;
					margin-top: 20rpx;

					.flex-tops {
						width: 100%;
						height: 50rpx;
						line-height: 50rpx;
						box-sizing: border-box;
						// padding-left: 40rpx;
						font-size: 30rpx;
						display: flex;
						align-items: center;

						.flex-tops-txt {
							display: block;
							margin-left: 12rpx;
							margin-top: 30rpx;
						}

						.flex-tops-img {
							display: block;
							width: 48rpx;
							height: 48rpx;
							margin-left: 30rpx;
							margin-top: 30rpx;
						}
					}

					.flex-topss {
						width: 100%;
						height: 50rpx;
						text-align: right;
						line-height: 50rpx;
						box-sizing: border-box;
						padding-right: 40rpx;
						font-size: 24rpx;
						color: #ccc;
					}

					.flex-centers {
						width: 100%;
						height: 50rpx;
						display: flex;
						justify-content: space-between;
						box-sizing: border-box;
						align-items: center;
						font-size: 24rpx;
						padding-left: 40rpx;
						padding-right: 40rpx;
						margin-top: 26rpx;
						color: #222222;

						.flex-centers-txt {}

						.flex-reds {
							color: #1378F7;
							font-size: 45rpx;
						}
					}

					.flex-bottoms {
						width: 100%;
						// height: 80rpx;
						display: flex;
						justify-content: space-between;
						box-sizing: border-box;
						align-items: center;
						font-size: 24rpx;
						padding-left: 40rpx;
						padding-right: 40rpx;
						color: #222222;
						margin-top: 16rpx;
					}

					.flex-bottomsa {
						width: 100%;
						height: 80rpx;
						display: flex;
						justify-content: space-between;
						box-sizing: border-box;
						align-items: center;
						font-size: 24rpx;
						padding-left: 40rpx;
						padding-right: 40rpx;
						color: #222222;
						// margin-top: 16rpx;
					}
				}

				// .lines {
				// 	width: 100%;
				// 	height: 1rpx;
				// 	border-top: 2rpx dashed #ccc;
				// }
			}

		}

		.ding {
			width: 100%;
			height: 400rpx;
		}
	}
</style>