<template>
	<view class="my-reward-body">
		<view class="my-reward-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="themeStore.bgColor"
				:refresher-default-style="'none'"
			>
				<view class="my-reward-item" :style="{ backgroundColor: themeStore.bgItemColor, color: themeStore.textColor }" v-for="(item, index) in list">
					<view class="my-reward-item1">
						<text>{{ item.type }}</text>
						<text>{{ $t('promo.public.rank') }}</text>
					</view>
					<view class="my-reward-item2">
						<text class="tex-color">{{ item.rank }}</text>
					</view>
					<view class="my-reward-item3">
						<text>{{ item.date }}</text>
						<!-- <text>2023-12-30</text> -->
						<text class="tex-color-bet" :style="{ color: themeStore.betColor }">{{ $t('promo.public.bet') }}:{{ item.bet }}</text>
					</view>
					<view class="my-reward-item1">
						<text>{{ $t('promo.public.bonus') }}</text>
						<text class="tex-color" :style="{ color: themeStore.texColor }">{{ item.bonus }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<NoData v-else :text="$t('promo.noData.myRewardText')"></NoData>
	</view>
</template>

<script setup>
import { getBetRankDataApi } from '@/api/promo.js';
import NoData from '@/pages/promo/components/NoData.vue';
import { ref, onMounted } from 'vue';
import { useThemeStore } from '@/store/useThemeStore';
const themeStore = useThemeStore().theme.promo.reward;
let list = ref([]);
// 上拉加载 下拉刷新
let isRefreshing = ref(false);
let hasMore = ref(true);
const onRefresherPull = () => {
	isRefreshing.value = true;
	hasMore.value = true;
	
	setTimeout(() => {
		isRefreshing.value = false;
	}, 10);
};
const onRefresherRestore = () => {
	isRefreshing.value = false;
};
const onScrollToLower = () => {
	if (hasMore.value) {
		
	}
};

const getBetRankData = async () => {
	const { code, data } = await getBetRankDataApi({
		rankOption: 0
	});

	let arr = [];
	data.myAwardRec.forEach((item) => {
		let i = item.split('|');
		
		let listItem = {
			type: i[0],
			rank: i[1],
			date: i[2],
			bet: i[3],
			bonus: i[4]
		};
		arr.push(listItem);
	});
	
	list.value = arr;
};
onMounted(() => {
	getBetRankData();
});
</script>

<style lang="scss" scoped>
.my-reward-body {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-top: 37rpx;
	.my-reward-list {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		padding-bottom: 30rpx;
		.scroll-view {
			height: 100%;
		}
		.my-reward-item {
			width: 100%;
			height: 120rpx;
			background: #922222;
			border-radius: 20rpx;
			display: flex;
			justify-content: flex-start;
			box-sizing: border-box;
			padding-left: 28rpx;
			// color: #fff;
			margin-bottom: 20rpx;
			.my-reward-item1 {
				width: 20%;
				box-sizing: border-box;
				padding: 30rpx 0;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				font-size: 24rpx;
			}
			.my-reward-item2 {
				width: 20%;
				line-height: 120rpx;
				font-size: 30rpx;
			}
			.my-reward-item3 {
				width: 40%;
				box-sizing: border-box;
				padding: 16rpx 0 12rpx 0;
				display: flex;
				justify-content: space-around;
				// justify-content: space-between;
				flex-direction: column;
				font-size: 24rpx;
			}
			.tex-color-bet {
				font-size: 18rpx;
				// color: #f96969;
			}
			.tex-color {
				// color: #ffdf3f;
			}
		}
	}
}
</style>
