<template>
	<view>
		<view class="leader-info">
			<image :src="selfObj.headimg || '/static/bed2-bg.png' "></image>
			<view class="leader-column">
				<view>
					<!-- <text>晚霞</text><text class="invite">我</text> -->
					<text>{{ selfObj.name || '-' }}</text>
					<text class="mySelf">{{ selfObj.role || '我' }}</text>
				</view>
				<view>
					<text style="color:#ccc">{{ selfObj.phone || '-' }}</text>
					<!-- <text style="color:#ccc;font-size: 28rpx;">188****2600</text> -->
				</view>
			</view>
		</view>
		<view v-for="(item, index) in teamList" :key="index" @click.stop="showChild(index)">
			<view class="leader-info">
				<image :src="!arrowFlagList[index] ? '/static/arrow-right3.png' : '/static/arrow-down.png'" class="arrow-style"></image>
				<image :src="item.headimg || '/static/bed2-bg.png' "></image>
				<view class="leader-column">
					<view class="teamLevel-box">
						<view style="white-space: nowrap;">{{ item.name || '-'}}</view>
						<view class="invite">一级分销</view>
					</view>
					<view>
						<text style="color:#ccc;font-size: 28rpx;">{{ item.phone || '-' }}</text>
					</view>
				</view>
			</view>
			<view class="leader-info" v-show="arrowFlagList[index]" v-for="childItem in item.child" :key="childItem.id">
				<image src="/static/arrow-right3.png" class="arrow-style" style="visibility: hidden;"></image>
				<image :src="childItem.headimg || '/static/bed2-bg.png' "></image>
				<view class="leader-column">
					<view class="teamLevel-box">
						<view style="white-space: nowrap;">{{ childItem.name || '-'}}</view>
						<view class="invited">二级分销</view>
					</view>
					<view>
						<text style="color:#ccc;font-size: 28rpx;">{{ childItem.phone || '-'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var md5 = require('../../../common/md5.js')
export default {
	data() {
		return {
			title: 'selfCenter',
			arrowFlagList: [],
			selfObj: {},
			teamList: [
				{
					name: '晚霞',
					role: '我',
					phone: '188****2600',
					id: 1
				},
				{
					name: '午霞',
					role: '一级分销',
					phone: '158****2666',
					id: 2,
					child: [
						{
							name: '早霞',
							role: '二级分销',
							phone: '168****2688',
							id: 3
						},
						{
							name: '早霞666',
							role: '二级分销',
							phone: '168****2688',
							id: 656
						}
					]
				},
				{
					name: '午霞2',
					role: '一级分销',
					phone: '158****2666',
					id: 4,
					child: [
						{
							name: '早霞2',
							role: '二级分销',
							phone: '168****2688',
							id: 5
						}
					]
				}
			]
		};
	},
	onLoad() {
		this.getTeamRequest();
	},
	methods: {
		filterSelf(arr) {
			let that = this;
			let obj = arr.filter((item, index) => {
				return item.role === '我';
			});
			that.selfObj = obj[0];
			arr = arr.filter((item, index) => {
				return item.role !== '我';
			});
			for (let i = 0; i < arr.length; i++) {
				that.arrowFlagList.push(false);
			}
			return arr;
		},
		getTeamRequest(){
			  let that = this;
						 uni.request({
							url: getApp().globalData.shareUrl, //需要设置为全局
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							data: {
								method: 'getUserTeamList',
								timestamp: getApp().globalData.globalTimestamp, //Date.now()
								uid:getApp().globalData.user_id,
								sign: md5('getUserTeamList' + getApp().globalData.globalTimestamp)
							},
							success: res => {
								if (res.data.code === 200) {
									console.log(res.data.msg)
									that.teamList = that.filterSelf(res.data.msg)
								}
							}
						 }); 
		},
		showChild(index) {
			this.arrowFlagList.splice(index, 1, !this.arrowFlagList[index]);
		}
	}
};
</script>

<style>
.leader-info {
	display: flex;
	align-items: center;
	background: #fff;
	padding: 20rpx;
	border-bottom: 1px solid #ccc;
}
.leader-column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 90rpx;
	font-size: 30rpx;
}
.leader-info image {
	height: 75rpx;
	width: 75rpx;
	border-radius: 50%;
	border: 1px solid #eee;
	margin-right: 3%;
}
.invite {
	background: red;
	color: #fff;
	font-size: 22rpx;
	padding: 4rpx;
	border-radius: 8rpx;
	margin-left: 5%;
	width: 55px;
	text-align: center;
}

.mySelf {
	background: orange;
	color: #fff;
	font-size: 22rpx;
	padding: 4rpx;
	border-radius: 8rpx;
	margin-left: 5%;
	width: 55px;
}

.invited {
	background: grey;
	color: #fff;
	font-size: 22rpx;
	padding: 4rpx;
	border-radius: 8rpx;
	margin-left: 5%;
	width: 55px;
}

.teamLevel-box {
	display: flex;
	align-items: center;
}
.arrow-style {
	width: 40rpx !important;
	height: 40rpx !important;
	border: none !important;
}
</style>
