<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 demos" :key="item.id">
				<view class="auto-box-title">
					<text class="left-txt">{{item.title}}</text>
					<text class="right-txt" v-show="headerindex===1">
						<text class="blues">充值金额：{{item.sumPrice*3}} &nbsp;</text>
						<text class="reds">剩余余额：{{item.sumNum}}</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.arrys" :key="items.id">
					<view class="flex-tops" v-show="headerindex===1">
						订单号：{{items.orderId}}
					</view>
					<view class="flex-topss" v-show="headerindex===2">
						订单号：{{items.orderId}}
					</view>
					<view class="flex-centers">
						<text>{{items.ciKaTitle}}</text>
						<text v-show="headerindex===2 &&items.expenditure===1">￥<text class="color-r">{{items.price}}</text> </text>
						<text v-show="headerindex===2 &&items.expenditure===0">-{{items.price}} </text>
						<text v-show="headerindex===1">￥ <text class="flex-reds">{{items.price}}</text> </text>
					</view>
					<view class="flex-bottoms">
						<text>{{items.oldDate}}</text><text>有效期{{items.newDate}}</text>
					</view>
					<view class="lines" v-if="indexs<item.arrys.length-1">
	
					</view>
				</view>
	
			</view>
			<view class="ding">
	
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	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: "充30送5套餐",
						price: 300,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 2,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "充30送5套餐",
						price: 300,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 3,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "充30送5套餐",
						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: "充30送5套餐",
						price: 30,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 2,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "充30送5套餐",
						price: 30,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 3,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "充30送5套餐",
						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: "充30送5套餐",
						price: 30,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 2,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "充30送5套餐",
						price: 30,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 3,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "充30送5套餐",
						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: "充30送5套餐",
						price: 30,
						//为0的时候就是支出 1就是收入
						expenditure:0,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 2,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "充30送5套餐",
						price: 30,
						expenditure:1,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 3,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "充30送5套餐",
						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: "充30送5套餐",
						price: 30,
						expenditure:1,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 2,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "充30送5套餐",
						price: 30,
						expenditure:1,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 3,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "充30送5套餐",
						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: "充30送5套餐",
						price: 30,
						expenditure:0,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 2,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "充30送5套餐",
						price: 30,
						expenditure:0,
						oldDate: "2024-05-09 11:56:40",
						newDate: "024-05-09"
					}, {
						id: 3,
						orderId: 'xxxxxxxxxxxx',
						ciKaTitle: "充30送5套餐",
						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 {
			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;
			}

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

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

		.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: 26rpx;

					.right-txt {
						.reds {
							color: #d9001b;
						}

						.blues {
							color: #009dd9;
						}
					}

				}

				.auto-box-flex {
					width: 100%;
					// height: 100rpx;
					background-color: #fff;

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

					.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: 28rpx;
						padding-left: 40rpx;
						padding-right: 40rpx;

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

					.flex-bottoms {
						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;
						color: #ccc;
						margin-top: 10rpx;
					}
				}

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

		}

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