<template>
	<view class="container" :style="{color: themeStore.theme.text.normal}">
		<view class="item-card flex-wrap" :style="{ background: themeStore.theme.promo.invitationRanks.teamCardBg }">
			<view class="item-view flex-acenter flex-column">
				<view class="item-title ft14">
					{{ $t('earn.home.myTeam') }}({{ $t('earn.home.today') }})
				</view>
				<view class="flex-acenter mt14">
					<theme-image src="@/static/icon-people.png" style="width: 32rpx; height: 32rpx;" />
					<view class="ft16 ml8" :style="{ color: themeStore.theme.text.highlight }">
						{{ pageData.agentInfo.myTeam || 0 }}(+{{ pageData.agentInfo.myTeamToday || 0 }})
					</view>
				</view>
			</view>
			<view class="item-view flex-acenter flex-column">
				<view class="item-title ft14">
					{{ $t('earn.home.myDirect') }}({{ $t('earn.home.today') }})
				</view>
				<view class="flex-acenter mt14">
					<theme-image src="@/static/icon-people.png" style="width: 32rpx; height: 32rpx;" />
					<view class="ft16 ml8" :style="{ color: themeStore.theme.text.highlight }">
						{{ pageData.agentInfo.myDirect || 0 }}(+{{ pageData.agentInfo.myDirectToday || 0 }})
					</view>
				</view>
			</view>
			<view class="item-view flex-acenter flex-column">
				<view class="item-title ft14">
					{{ $t('earn.home.item1Des') }}
				</view>
				<view class="ft18 mt14" :style="{ color: themeStore.theme.text.highlight }">
					{{ appStore.currencySign }} {{ $formatThousandDot(pageData.agentInfo.todayTeamPerformance, 2) }}
				</view>
			</view>
			<view class="item-view flex-acenter flex-column">
				<view class="item-title ft14">
					{{ $t('earn.home.item2Des') }}
				</view>
				<view class="ft18 mt14" :style="{ color: themeStore.theme.text.highlight }">
					{{ appStore.currencySign }} {{ $formatThousandDot(pageData.agentInfo.todayDirectPerformance, 2) }}
				</view>
			</view>
		</view>
		<view class="pt30 flex-acenter">
			<view class="ft14 flex-shrink-0">
				{{ $t('earn.home.allDirect') }}
			</view>
			<view class="flex-1 pl30">
				<SearchInput
					v-model="pageData.searchKey"
					:placeholder="$t('earn.home.placeholder1')"
					@search="getList"
				/>
			</view>
		</view>
		<view class="list-container ptb30">
			<view class="list-item" :style="{ 'background': themeStore.theme.list.headerBgColor }">
				<view class="list-value" style="width: 120rpx;">
					{{ $t('earn.home.userId') }}
				</view>
				<view class="list-value" style="width: 240rpx;">
					{{ $t('earn.home.team') }}({{ $t('earn.home.today') }})
				</view>
				<view class="list-value" style="width: 240rpx;">
					{{ $t('earn.home.direct') }}({{ $t('earn.home.today') }})
				</view>
				<view class="list-value" style="width: 400rpx;">
					{{ $t('earn.home.teamPerformance') }}({{ $t('earn.home.today') }})
				</view>
				<view class="list-value" style="width: 400rpx;">
					{{ $t('earn.home.directPerformance') }}({{ $t('earn.home.today') }})
				</view>
			</view>
			<view class="list-scroll">
				<view
					class="list-item"
					v-for="(item, index) in pageData.list"
					:style="{ 'background': themeStore.theme.list.listBgColor }"
				>
					<view class="list-value" style="width: 120rpx;">
						{{ item.userId }}
					</view>
					<view class="list-value" style="width: 240rpx;">
						{{ item.myTeam }}({{ item.myTeamToday }})
					</view>
					<view class="list-value" style="width: 240rpx;">
						{{ item.myDirect }}({{ item.myDirectToday }})
					</view>
					<view class="list-value" style="width: 400rpx;">
						{{ item.teamPerformance }}({{ item.todayTeamPerformance }})
					</view>
					<view class="list-value" style="width: 400rpx;">
						{{ item.directPerformance }}({{ item.todayDirectPerformance }})
					</view>
				</view>
			</view>
		</view>

		<NoDataSearch
			style="width: 100%"
			v-if="pageData.list.length === 0"
		/>
	</view>
</template>

<script setup>
	import { useAppStore } from '@/store/useAppStore'
	import { useUserStore } from '@/store/useUserStore'
	import { useThemeStore } from '@/store/useThemeStore.js'
	import { reactive, onMounted, ref } from 'vue'
	import { formatThousandDot } from '@/module/formatter/data-formatter'
	import { useI18n } from 'vue-i18n'
	import Toast from '@/module/toast/toast.js'
	import NoDataSearch from "@/components/nodata/NoDataSearch.vue";
	import SearchInput from '@/components/input/SearchInput.vue'
	import { getAgentV2Home, getAgentV2MyTeamsList } from '@/api/earn.js'
	
	const { t } = useI18n()
	const appStore = useAppStore()
	const userStore = useUserStore()
	const themeStore = useThemeStore()
	
	const pageData = reactive({
		agentInfo: {},
		list: [],
		searchKey: '',
	})
	
	onMounted(() => {
		getAgentBaseInfo()
		getList()
	})

	const getAgentBaseInfo = async () => {
		const { code, data } = await getAgentV2Home()
		if (code == 200) {
			pageData.agentInfo = data || {}
		}
	}

	const getList = async () => {
		const { code, data } = await getAgentV2MyTeamsList({
			page: 1,
			pageSize: 50,
			userId: pageData.searchKey
		})
		if (code == 200) {
			pageData.list = data || []
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		padding: 0 30rpx 45rpx 30rpx;
	}
	
	.item-card {
		padding: 0rpx 16rpx;
		padding-top: 45rpx;
		border-radius: 20rpx;
		
		.item-view {
			width: 49%;
			margin-bottom: 45rpx;
		}

		.item-title {
			text-align: center;
			line-height: 34rpx;
		}
	}
	
	.list-container {
	  // width: 100%;
	  box-sizing: border-box;
		overflow-x: scroll;
		
		.list-scroll {
			// overflow-y: scroll;
		}
		
	  .list-item {
	    width: 1400rpx;
	    margin-bottom: 10rpx;
	    border-radius: 20rpx;
	    display: flex;
	    height: 62rpx;
	    text-align: center;
	    line-height: 62rpx;
			
	    .list-value {
	      font-size: 24rpx;
				width: 180rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				white-space: nowrap;
	    }
	  }
	}

	.list-container::-webkit-scrollbar {
		display: none; /* 对于WebKit浏览器，如Chrome和Safari */
	}
</style>