<template>
	<view class="my-rewards-body">
		<view class="my-rewards-body-top">
			<view class="my-rewards-body-top-item top-bg1" :style="{ 'background-image': themeStore.imageCssUrl.rewardsTop1 }">
				<text>{{ $t('earn.myRewards.rewardToday') }}</text>
				<text>{{ pageArg.todayRebate }}</text>
			</view>
			<view class="my-rewards-body-top-item top-bg2" :style="{ 'background-image': themeStore.imageCssUrl.rewardsTop2 }">
				<text>{{ $t('earn.myRewards.totalRewards') }}</text>
				<text>{{ pageArg.totalRebate }}</text>
			</view>
		</view>
		<view style="height: 8rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
		<view class="my-rewards-body-center">
			<view class="my-rewards-body-center-item" :style="{ 'background': themeStore.theme.lightBgColor }">
				<text class="my-rewards-body-center-item-label" :style="{ 'color': themeStore.theme.text.subtitle }">{{ $t('earn.myRewards.numberOfInviters') }}:</text>
				<text class="my-rewards-body-center-item-value" :style="{ 'color': themeStore.theme.text.normal }">{{ pageArg.inviteCount }}</text>
			</view>
			<view class="my-rewards-body-center-item" :style="{ 'background': themeStore.theme.lightBgColor }">
				<text class="my-rewards-body-center-item-label" :style="{ 'color': themeStore.theme.text.subtitle }">{{ $t('earn.myRewards.amountAvailable') }}:</text>
				<text class="tex-color" :style="{ 'color': themeStore.theme.text.theme }">{{ pageArg.availableRebate }}</text>
				<view class="calim-btn" :style="{ 'background': themeStore.theme.earn.gradientBtn }" @click.stop="claimClick">{{ $t('earn.myRewards.claim') }}</view>
			</view>
		</view>
		<view style="height: 8rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
		<view class="my-rewards-table">
			<view class="my-rewards-table-header flex-acenter plr30" :style="{ 'background': themeStore.theme.lightBgColor }">
				<view class="my-rewards-table-header-column">{{ $t('earn.myRewards.data') }}</view>
				<view v-if="appStore.appId === 306" class="gmt-view flex-acenter" :style="{ 'background': themeStore.theme.themeDarkBgColor }">
					<theme-image src="@/static/wallet/icon-gmt.png" mode="aspectFit" style="width: 25rpx; height: 25rpx;"></theme-image>
					<view class="ml8 ft11">
						{{ appStore.timeZone }}
					</view>
				</view>
				<view class="my-rewards-table-header-column">{{ $t('earn.myRewards.rewards') }}</view>
			</view>
			<view class="my-rewards-table-tbody" :style="{ 'background': themeStore.theme.lightBgColor }">
				<view class="my-rewards-table-list">
					<view class="my-rewards-table-row" v-for="(item, index) in rewardList" :key="index">
						<view class="my-rewards-table-row-left" :style="{ 'color': themeStore.theme.text.subtitle }">{{ item.day }}</view>
						<view class="my-rewards-table-row-right" :style="{ 'color': themeStore.theme.text.theme }">{{ item.rebate }}</view>
					</view>
				</view>
				<view class="my-rewards-table-pagination" v-if="total">
					<Pageable
						:current="page"
						:total="total"
						@change="handlePageChange"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getAgentInfoApi, receiveRebateApi } from '@/api/earn.js';
import Toast from '@/module/toast/toast.js';
import { useI18n } from 'vue-i18n';
import { useThemeStore } from '@/store/useThemeStore';
import { useAppStore } from '@/store/useAppStore';
import Pageable from '@/components/pageable/Pageable.vue';

const themeStore = useThemeStore()
const appStore = useAppStore()
const { t } = useI18n();
let page = ref(1);
let total = ref(0);
let pageArg = reactive({
	inviteCount: 0,
	availableRebate: 0,
	todayRebate: 0,
	totalRebate: 0
});
let rewardList = ref([]);

const getAgentInfo = async (page) => {
	Toast.showLoading(t('earn.toast.loading'));
	const { code, data } = await getAgentInfoApi({
		page: page,
		pageSize: 7
	});
	console.log(data);
	if (code == 200) {
		total.value = Math.ceil(data.totalCount / 7);
		rewardList.value = data.records;
		pageArg.inviteCount = data.inviteCount == null ? 0 : data.inviteCount;
		pageArg.availableRebate = data.baseInfo.availableRebate == null ? 0 : data.baseInfo.availableRebate;
		pageArg.todayRebate = data.baseInfo.todayRebate == null ? 0 : data.baseInfo.todayRebate;
		pageArg.totalRebate = data.baseInfo.totalRebate == null ? 0 : data.baseInfo.totalRebate;
		Toast.hideLoading();
	}
};

const handlePageChange = (pageNum) => {
	page.value = pageNum
	getAgentInfo(page.value)
}

/**
 * 领取返利
 */
const claimClick = async () => {
	if (pageArg.availableRebate <= 0) return;
	const { code, data } = await receiveRebateApi();
	if (code == 200) {
		Toast.show('success');
		page.value = 1;
		getAgentInfo(page.value);
	}
};
onMounted(() => {
	getAgentInfo(page.value);
});
</script>

<style lang="scss" scoped>
.my-rewards-body {
	width: 100%;
	height: 100%;
	
	.gmt-view {
		height: 40rpx;
		border-radius: 20rpx;
		padding: 0rpx 16rpx;
	}

	.my-rewards-body-top {
		width: 100%;
		height: 180rpx;
		box-sizing: border-box;
		padding: 0 33rpx;

		display: flex;
		justify-content: space-between;
		align-items: center;
		.top-bg1 {
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.top-bg2 {
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.my-rewards-body-top-item {
			width: 330rpx;
			height: 120rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: column;
			font-size: 30rpx;
			color: #fff;
		}
	}
	.my-rewards-body-center {
		width: 100%;
		height: 228rpx;
		margin-top: 11rpx;
		box-sizing: border-box;
		padding: 26rpx 32rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		.my-rewards-body-center-item {
			width: 100%;
			height: 80rpx;
			background: #922222;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding-left: 25rpx;
			padding-right: 21rpx;
			position: relative;
			display: flex;
			align-items: center;

			.my-rewards-body-center-item-label {
				font-size: 24rpx;
				color: #fa8484;
			}
			.my-rewards-body-center-item-value {
				font-size: 26rpx;
				color: #fff;
				margin-left: 19rpx;
			}
			.tex-color {
				font-size: 26rpx;
				margin-left: 23rpx;
				color: #ffdf3f;
			}
			.calim-btn {
				position: absolute;
				top: 13rpx;
				right: 21rpx;
				width: 138rpx;
				height: 46rpx;
				line-height: 46rpx;
				color: #fff;
				border-radius: 23rpx;
				text-align: center;
				font-size: 24rpx;
			}
		}
	}
	.my-rewards-table {
		width: 100%;
		min-height: calc(100% - 457rpx);
		margin-top: 11rpx;
		box-sizing: border-box;
		padding: 0 32rpx;
		padding-top: 22rpx;
		padding-bottom: 28rpx;
		.my-rewards-table-header {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			
			.my-rewards-table-header-column {
				width: 40%;
				text-align: center;
			}
		}
		
		.my-rewards-table-tbody {
			width: 100%;
			min-height: 540rpx;
			border-radius: 20rpx;
			margin-top: 20rpx;
			box-sizing: border-box;
			padding-bottom: 28rpx;
			.my-rewards-table-list {
				width: 100%;
				height: calc(100% - 70rpx);
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				.my-rewards-table-row {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					height: 65rpx;
					line-height: 65rpx;
					.my-rewards-table-row-left {
						width: 50%;
						text-align: center;
						color: #fa8484;
						font-size: 24rpx;
					}
					.my-rewards-table-row-right {
						width: 50%;
						text-align: center;
						color: #ffdf3f;
						font-size: 24rpx;
					}
				}
			}
			.my-rewards-table-pagination {
				width: 100%;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.pagination-icon {
					width: 47rpx;
					height: 47rpx;
				}
				.page-number {
					line-height: 70rpx;
					font-size: 24rpx;
					width: 100rpx;
					text-align: center;
				}
			}
		}
	}
}
</style>
