<template>
	<z-paging :refresher-enabled="false" :show-loading-more-when-reload="true" loading-more-default-text=""
		loading-more-loading-text="" loading-more-fail-text="" :empty-view-text="t('common.noData')"
		:show-loading-more-no-more-view="false" ref="paging" v-model="dataList" @query="queryList"
		class="max-w-[750px]">
		<h-dark :title="t('team.titleRecord')"></h-dark>
		<view class="bg-[#4E55AF] pb-[30rpx]">
			<u-tabs show-bar="false" bg-color="#4E55AF" active-color="#A1DBF5" inactive-color="#FFFFFF"
				:is-scroll="false" :list="tabList" v-model="level" @change="changeType"></u-tabs>
		</view>
		<view class="mx-[30rpx]">
			<view class="team-item px-[30rpx]  py-[30rpx] mt-[20rpx] rounded-lg bg-[#2C326B]"
				v-for="(item, index) in dataList" :key="index">
				<view class="flex justify-start items-center mb-[20rpx]">
					<view class="">
						<view class="mb-[15rpx] font-bold">
							{{item.mobile}}
						</view>
					</view>
				</view>
				<view class="">
					<view class="flex justify-between mb-[15rpx]">
						<view class="">
							{{t('team.recordTotalRecharge')}}
						</view>
						<view class="">
							{{item.total_recharge}}
						</view>
					</view>
					<view class="flex justify-between mb-[15rpx]">
						<view class="">
							{{t('team.recordTotalWithdraw')}}
						</view>
						<view class="">
							{{item.total_withdraw}}
						</view>
					</view>
					<view class="flex justify-between mb-[15rpx]">
						<view class="">
							{{t('team.recordItemIncome')}}
						</view>
						<view class="">
							{{item.total_income_invest}}
						</view>
					</view>
					<view class="flex justify-between mb-[15rpx]">
						<view class="">
							{{t('team.teamNum')}}
						</view>
						<view class="">
							{{item.team_num}}
						</view>
					</view>
					<view class="flex justify-between mb-[15rpx]">
						<view class="">
							{{t('team.recordCreateTime')}}
						</view>
						<view class="">
							{{item.create_time}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script lang="ts" setup>
	import { ref, shallowRef } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { teamLists } from '@/api/team'
	import { getCurrency,getCurrency2, formatDate, formatMoney, isEmpty, replaceStr } from '@/utils/util'
	import { t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('team.titleRecord') })
	const tabList = ref([
		{
			name: replaceStr(t('team.level'), '{level}', 1),
		},
		{
			name: replaceStr(t('team.level'), '{level}', 2),
		},
		{
			name: replaceStr(t('team.level'), '{level}', 3),
		},
		{
			name: replaceStr(t('team.level'), '{level}', 4),
		},
		{
			name: replaceStr(t('team.level'), '{level}', 5),
		}
	])
	const paging = shallowRef()
	const dataList = ref<any[]>([])
	const level = ref(0)

	const changeType = (index : number) => {
		level.value = index
		paging.value.reload()
	}
	const queryList = async (pageNo : number, pageSize : number) => {
		try {
			const data = await teamLists({
				page_no: pageNo,
				page_size: pageSize,
				level: level.value + 1,
				date: formatDate(Math.round(Date.now() / 1000))
			})
			Object.keys(data.lists).forEach(key => {
				data.lists[key]['total_recharge'] = getCurrency() + formatMoney(data.lists[key]['total_recharge']) + ' ' +  getCurrency2()
				data.lists[key]['total_withdraw'] = getCurrency() + formatMoney(data.lists[key]['total_withdraw']) + ' ' +  getCurrency2()
				data.lists[key]['total_income_invest'] = getCurrency() + formatMoney(data.lists[key]['total_income_invest']) + ' ' +  getCurrency2()
			})
			paging.value.complete(data.lists)
		} catch (error) {
			paging.value.complete(false)
		}
	}
	onLoad((options : any) => {
		if (!isEmpty(options.level)) level.value = options.level
	})
</script>

<style lang="scss">
</style>