<template>
	<view>
		<view class="group-box">
			<view class="flex" style="padding: 20rpx;" @click="goFansInfo">
				<u-avatar size="127rpx" :src="detail.user_thumbnail"></u-avatar>
				<view style="width: 100%;padding-left: 20rpx;">
					<view class="flex flex-space-between">
						<view class="flex" style="padding-top: 20rpx;">
							<view class="big-333 bold">
								{{detail.u_nickname}}
							</view>
							<view style="margin-left: 10rpx;padding-top: 4rpx;">
								<u-image width="100rpx" height="36rpx" :src="'/static/icon/level/v'+(detail.u_level+1)+'.png'"></u-image>
							</view>
						</view>
						<view class="lit-666" style="padding-top: 20rpx;">
							{{detail.createtime?detail.createtime.substr(0,10):''}}
						</view>
					</view>
					<u-gap height="20rpx"></u-gap>
					<view class="flex flex-space-between">
						<view class="tab-box">
							<text v-if="isHideScan == 0">{{detail.is_scan}}</text>
							<text v-if="showTj == false" @click="showTjx">推荐人</text>
						</view>
						<view class="">
							<text class="lit-333">邀请码：</text>
							<text class="lit-666">{{detail.invite_code}}</text>
							<text class="iconfont icon-copy" @click.stop="copyThis(detail.invite_code)"
								style="  margin-left: 19rpx; color: #666; font-size:24rpx;"></text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="showTj" class="flex flex-space-between" style="margin: 0 60rpx;">
				<view class="box-nr">
					<view class="t-tt">
						订单量
					</view>
					<view class="t-vl">
						{{detail.order_count}}
					</view>
				</view>
				<view class="box-nr">
					<view class="t-tt">
						下级粉丝
					</view>
					<view class="t-vl">
						{{detail.fans_count}}
					</view>
				</view>
				<view class="box-nr">
					<view class="t-tt">
						累计收益
					</view>
					<view class="t-vl">
						{{detail.total_amount/100}}
					</view>
				</view>
			</view>
		</view>
		<u-popup bgColor="transparent" :show="showPopup" @close="showPopup = false" mode="center">
			<view class="alt-box">
				<view class="big-333 bold">
					推荐人信息
				</view>
				<view class="tx">
					<u-image radius="50%" width="125rpx" height="125rpx" :src="u_p1Data.user_thumbnail"></u-image>
				</view>
				<view class="big-333 bold">
					{{u_p1Data.u_nickname}}
				</view>
				<view class="lit-666" style="margin-top: 20rpx;">
					邀请码：{{u_p1Data.invite_code}}
				</view>
				<view class="lit-666" style="margin-top: 20rpx;">
					微信号：{{u_p1Data.u_wx_id}}
				</view>
				<view  class="btn-class">
					<u-button @click="copyThis(u_p1Data.u_wx_id)" color="linear-gradient(45deg,#FFAD02,#FD8F3B)" text="复制微信号"></u-button>
				</view>
				<view class="btn-class">
					<u-button @click="showPopup = false" color="#999999" text="取消"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "teamGroup",
		props: {
			showTj: {
				type: Boolean,
				default: true
			},
			isHideScan:{
				type:Number,
				default:0
			},
			canClick: {
				type: Boolean,
				default: false
			},
			detail:{
				type:Object,
				default:null
			},
			userMember:{
				typeof:Number,
				default:0
			}
		},
		data() {
			return {
				u_p1Data:{},
				showPopup:false,
				
			};
		},
		methods:{
			copyThis(str) {
				console.log(str)
				uni.setClipboardData({
					data: str, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: "复制成功"
						})
					},
					fail(e) {
						console.log(e)
					}
				});
			},
			goFansInfo(){
				if(!this.canClick){
					return ;
				}
				// console.log(this.userMember);return
				if(this.userMember == 1){
					uni.navigateTo({
						url:'/b_client/member/fansInfo?u_id='+this.detail.u_id+'&is_scan=其他&isUserCenter=1'
						// url: '/pages/Myteam/fansdetails?u_id='+u_id +'&orderNum='+ on+'&fans_count='+fc+'&sy='+sy
					})
					return
				}
				
				uni.navigateTo({
					url:'/b_client/member/fansInfo?u_id='+this.detail.u_id+'&is_scan='+this.detail.is_scan
				})
			},
			showTjx(){
				// 这里ajax搞一下
				//this.$emit('getTjx',{u_p1:this.detail.u_p1})
				// return
				this.$store.dispatch('api/recommender',{
					u_p1 :this.detail.u_p1
				}).then(res => {
					this.u_p1Data = res
					this.showPopup = true;
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.alt-box{
		background-color: #F8F8F8;
		border-radius: 20rpx;
		min-width: 470rpx;
		text-align: center;
		padding: 20rpx;
		.tx{
			width: 125rpx;
			height: 125rpx;
			margin: 20rpx auto;
			border: 10rpx solid #fff;
			border-radius: 50%;
		}
	}
	.btn-class{
		width: 242rpx;
		margin: 20rpx auto;
	}
	.box-nr {
		.t-tt {
			color: #666666;
			font-size: 24rpx;
			text-align: center;
			margin-top: 20rpx;
		}

		.t-vl {
			margin-top: 10rpx;
			color: #666666;
			font-size: 24rpx;
			text-align: center;
			font-weight: bold;
		}
	}

	.tab-box {
		text {
			border: 2rpx solid #999999;
			border-radius: 20rpx;
			font-size: 24rpx;
			color: #999;
			padding: 0 10rpx 5rpx 10rpx;
			margin-right: 20rpx;
		}
	}
</style>
