<template>
	<Header :title="'Cashback Record'"></Header>
	<view class="cashback-record-body" :style="{ height: `calc(100vh - ${appStore.headerStyle.height}px)` }">
		<view class="cashback-record-search">
			<view class="cashback-record-search-item">
				<text :class="active == 0 ? 'active' : ''" @click="changeActive(0)">Today</text>
			</view>
			<view class="cashback-record-search-item">
				<text :class="active == 1 ? 'active' : ''" @click="changeActive(1)">7 Days</text>
			</view>
			<view class="cashback-record-search-item">
				<text :class="active == 2 ? 'active' : ''" @click="changeActive(2)">30 Days</text>
			</view>
		</view>
		<view class="cashback-record-total">
			<text>2023-09-20</text>
			<text>Total :12,800</text>
		</view>
		<view class="cashback-record-list" v-if="list.length > 0">
			<scroll-view
				class="scroll-view"
				scroll-y="true"
				:show-scrollbar="false"
				:refresher-enabled="true"
				:refresher-triggered="isRefreshing"
				@refresherrefresh="onRefresherPull"
				@scrolltolower="onScrollToLower"
				:refresher-background="'#630606'"
			>
				<view class="cashback-record-item" v-for="(item, index) in 20">
					<theme-image class="status-icon" src="@/static/promo/success.png"></theme-image>
					<view class="cashback-record-item-right">
						<view class="cashback-record-item-right-item1">
							<view>2023-09-20 11:23:10</view>
							<view class="text-color">Deposit：999,999,999</view>
						</view>
						<view class="cashback-record-item-right-item2">
							<view class="text-color">Bouns</view>
							<view>+999</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="nodata-body" v-else>
			<NoData :text="'No data available'"></NoData>
		</view>
	</view>
</template>

<script setup>
import Header from '@/pages/account/components/Header/Header.vue';
import NoData from '@/pages/promo/components/NoData.vue';
import { ref } from 'vue';
import { useAppStore } from '@/store/useAppStore';
const appStore = useAppStore();
let active = ref(0);
let list = ref([]);
const changeActive = (value) => {
	active.value = value;
};

// 上拉加载 下拉刷新
let isRefreshing = ref(false);
let hasMore = ref(true);
const onRefresherPull = () => {
	isRefreshing.value = true;
	hasMore.value = true;
	
	setTimeout(() => {
		isRefreshing.value = false;
	}, 2000);
};
const onRefresherRestore = () => {
	isRefreshing.value = false;
};
const onScrollToLower = () => {
	if (hasMore.value) {
		
	}
};
</script>

<style lang="scss" scoped>
.cashback-record-body {
	width: 100vw;
	background: #2c0303;
	overflow: hidden;
	.cashback-record-search {
		width: 100%;
		height: 112rpx;
		display: flex;
		justify-content: space-between;
		background: #610606;
		.cashback-record-search-item {
			width: 33.33%;
			height: 100%;
			text-align: center;
			font-size: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			position: relative;
			.active {
				font-size: 36rpx;
				color: #ffdf3f;
			}
			.active::after {
				content: '';
				display: block;
				width: 130rpx;
				height: 4rpx;
				background: #ffdf3f;
				border-radius: 2rpx;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	.cashback-record-total {
		width: 100%;
		height: 90rpx;
		box-sizing: border-box;
		padding-left: 28rpx;
		padding-right: 37rpx;
		display: flex;
		line-height: 90rpx;
		background: #610606;
		justify-content: space-between;
		font-size: 24rpx;
		color: #ffffff;
	}
	.cashback-record-list {
		width: 100%;
		height: calc(100% - 225rpx);
		box-sizing: border-box;
		padding: 0 30rpx;
		padding-bottom: 20rpx;
		background: #610606;
		overflow-y: hidden;
		.scroll-view {
			height: 100%;
		}
		.cashback-record-item {
			width: 100%;
			height: 120rpx;
			background: #922222;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			box-sizing: border-box;
			padding-left: 28rpx;
			padding-right: 32rpx;
			.status-icon {
				width: 52rpx;
				height: 50rpx;
			}
			.cashback-record-item-right {
				width: calc(100% - 90rpx);
				height: 120rpx;
				margin-left: 38rpx;
				display: flex;
				justify-content: space-between;
				.cashback-record-item-right-item1 {
					width: 70%;
					box-sizing: border-box;
					padding-top: 30rpx;
					padding-bottom: 22rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 28rpx;
					color: #ffffff;
					.text-color {
						font-size: 20rpx;
						color: #f96969;
					}
				}
				.cashback-record-item-right-item2 {
					width: 30%;
					box-sizing: border-box;
					padding-top: 28rpx;
					padding-bottom: 29rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					font-size: 30rpx;
					text-align: right;
					color: #fff;
					.text-color {
						font-size: 34rpx;
						color: #ffdf3f;
					}
				}
			}
		}
	}
	.nodata-body {
		width: 100%;
		height: calc(100% - 202rpx);
		background: #610606;
	}
}
</style>
