<template>
	<view class="currentClient" >
		{{ $t('partner.myClient.currentClient') + (statCustomerData?Object.values(statCustomerData).reduce((a, b) => a + b, 0):0) + $t('common.unit.human') }}
	</view>
	<view class="clientDataWrapper">
		<view class="clientData">
			<view v-for="item in clientDataList" :key="item.dataIndex" class="clientDataItem">
				<view class="title">
					<view class="label">{{ item.title }}</view>
					<view class="value" :style="{ color: item.color }">
						{{ (statCustomerData[item.dataIndex] ?? '-') + $t('common.unit.human') }}
						<image :src="item.bgSrc" mode="aspectFit" class="bgIcon"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view style="width: 100%;margin-bottom: 20upx;">		
		<view class="rebate-setting-btn" @click="goFundSetting">
			<text class="filterText">{{ $t('ib.fundSetting') }}</text>
		</view>
	</view>
	<view>
		<ReportTable url="/app/partners/queryMyAgentList" timeRangeStart="create_time_start" timeRangeEnd="create_time_end" :visible="visible" :showTimeRangeSelector="false">
			<template v-slot="{ showSearchDialog, searchFormData, handleSearch }">
				<view class="searchWrapper">
					<uni-easyinput primaryColor="#29BBE4" v-model="searchFormData.name" :placeholder="$t('ibTree.nameOrEmail')" />
					<view class="filterButton" @click="handleSearch">
						<text class="filterText">{{ $t('form.search') }}</text>
					</view>
					<image src="/static/partner/ibTree.png" mode="aspectFit" style="width: 21px; height: 21px" @click="navigateToIbTree"></image>
				</view>
			</template>
		</ReportTable>
	</view>
</template>

<script>
import ReportTable from '@/pages/components/reportTable/index.vue';
import { getstatCustomerNum } from '@/services/partner/myClient.ts';
export default {
	name: 'MyClient',
	props: {
		visible: {
			type: Boolean,
			required: true,
			default: false
		}
	},
	data() {
		return {
			statCustomerData: {},
			clientDataList: [
				{ title: this.$t('partner.myClient.ibClient'), dataIndex: 'zs_ib_num', color: '#25BAE4', bgSrc: '/static/partner/blueLine.svg' },
				{ title: this.$t('partner.myClient.directClient'), dataIndex: 'zs_kh_num', color: '#0F3675', bgSrc: '/static/partner/darkBlueLine.svg' },
				{ title: this.$t('partner.myClient.indirectCustomer'), dataIndex: 'jj_kh_num', color: '#ABCF37', bgSrc: '/static/partner/greenLine.svg' }
			]
		};
	},
	methods: {
		async getstatCustomerData() {
			const res = await getstatCustomerNum();
			if (res && res.code === 0) {
				this.statCustomerData = res.data;
			}
		},
		navigateToIbTree() {
			uni.navigateTo({
				url: '/pages/partner/ibTree/index'
			});
		},
		goFundSetting() {
			uni.navigateTo({
				url: '/pages/partner/rebateSetting/index'
			})
		}
	},
	created() {
		this.getstatCustomerData();
	},
	components: { ReportTable }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
