<template>
	<view class="treeItemWrapper" v-for="item in formatedValues" :key="item.id">
		<view :class="['treeItem', item.user_code === searchKey ? 'active' : '']">
			<view v-for="i in item.tier" :key="item.user_code + i" style="display: flex; align-items: center">
				<view :class="['line', 'vertical', item.lineConfig[i - 1] ? '' : 'transparent']"></view>
				<view class="line transparent" :style="{ width: '36px' }"></view>
			</view>
			<view class="line vertical"></view>
			<view class="line"></view>
			<image
				:src="`/static/partner/${item.collapse ? 'unfold' : 'collapse'}.png`"
				mode="aspectFill"
				class="collapseBtn"
				v-if="item.children"
				@click="() => toogleItemCollapse(item)"
			></image>
			<view class="labelWrapper">
				<view :class="['label', isIb(item) ? 'ib' : '']">
					<image :src="`/static/partner/${isIb(item) ? 'ib' : 'client'}.png`" mode="aspectFit" style="width: 19px; height: 19px"></image>
					{{ `${item.user_code}(${item.id})` }}
				</view>
			</view>
		</view>
		<TreeItem v-if="item.children && !item.collapse" :values="item.children" :lineConfig="item.lineConfig" :searchKey="searchKey" :isLast="item.isLast" />
	</view>
</template>

<script>
export default {
	name: 'TreeItem',
	props: {
		values: {
			type: Object,
			required: true,
			default: () => ({})
		},
		lineConfig: {
			type: Array,
			required: false,
			default: () => []
		},
		searchKey: {
			type: String,
			required: false,
			default: ''
		},
		isLast: {
			type: Boolean,
			required: false,
			default: false
		}
	},
	methods: {
		isIb(item) {
			return item.user_type === 1;
		},
		toogleItemCollapse(item) {
			item.collapse = !item.collapse;
		}
	},
	computed: {
		formatedValues() {
			const tempValues = [...this.values];
			tempValues?.forEach((item, index, arr) => {
				if (index !== arr.length - 1 && arr.length > 1 && item.tier >= 1) {
					item.lineConfig = [...this.lineConfig, true];
				} else {
					item.lineConfig = [...this.lineConfig, false];
				}
			});
			return tempValues;
		}
	}
};
</script>

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