<template>
	<NavBar />
	<view class="container">
		<view class="title">
			<PageTitle :title="$t('menu.partner')" />
		</view>
		<view class="searchWrapper">
			<uni-easyinput primaryColor="#29BBE4" v-model="searchKey" :placeholder="$t('ibTree.nameOrEmail')" />
			<button class="primaryButton searchBtn">{{ $t('form.search') }}</button>
		</view>
		<view class="infoWrapper">
			<view class="ib">
				<image src="/static/partner/ib.png" mode="aspectFit" style="width: 19px; height: 19px"></image>
				<view class="info">
					{{ $t('home.ib') }}:
					<text class="value">{{ ibNum }}</text>
					{{ $t('common.unit.human') }}
				</view>
			</view>
			<view class="client">
				<image src="/static/partner/ib.png" mode="aspectFit" style="width: 19px; height: 19px"></image>
				<view class="info">
					{{ $t('ib.customer') }}:
					<text class="value">{{ clientNum }}</text>
					{{ $t('common.unit.human') }}
				</view>
			</view>
		</view>
	</view>
	<view class="ibTree">
		<TreeItem :values="ibTreeData" :searchKey="searchKey" />
	</view>
</template>

<script>
import TreeItem from './treeItem/index.vue';
import { getIbtree } from '@/services/partner/myClient.ts';
export default {
	data() {
		return {
			searchKey: '',
			ibTreeData: [],
			ibNum: 0,
			clientNum: 0
		};
	},
	methods: {
		formatTreeData(rawData) {
			let treeData = [];
			let tierTemp = 0;
			const formatFn = (arr, tier) => {
				return arr.map((item, index) => {
					if (item.user_type === 1) {
						this.ibNum += 1;
					} else if (item.user_type === 2) {
						this.clientNum += 1;
					}
					if (item.children) {
						return {
							...item,
							tier: tier,
							collapse: false,
							isLast: index === arr.length - 1,
							children: formatFn(item.children, tier + 1)
						};
					} else {
						return {
							...item,
							tier: tier,
							isLast: index === arr.length - 1,
							collapse: false
						};
					}
				});
			};
			treeData = formatFn(rawData, tierTemp, {});
			return treeData;
		},
		async getIbtreeData() {
			const res = await getIbtree();
			if (res && res.code === 0) {
				this.ibTreeData = this.formatTreeData(res.data);
			}
		}
	},
	created() {
		this.getIbtreeData();
	},
	components: {
		TreeItem
	}
};
</script>

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