<template>
    <view class="content">
        <view class="all">
            <image class="all-back" src="@/static/imgs/friend_back.png" mode="widthFix"></image>
            <view class="all-text">
                <text>我的推荐(总)</text>
                <view class="number">{{count.all}}<text>人</text></view>
            </view>
        </view>
        <view class="tab">
            <!-- <view class="item" :class="{'active': larerType == 1}" @click="onTabs(1)"><image src="@/static/icons/friendIcon_00.png" mode="widthFix"></image>直接推荐</view> -->
            <!-- <view class="item" :class="{'active': larerType == 2}" @click="onTabs(2)"><image src="@/static/icons/friendIcon_01.png" mode="widthFix"></image>间接推荐</view> -->
        </view>
        <block v-if="relationArr.length > 0">
            <view class="list">
                <view class="item" v-for="(item, index) in relationArr" :key="index">
                    <image class="list-cover" :src="item.avatar || '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
                    <view class="list-text">
                        <view class="list-nick nowrap">
                            <view class="name">{{ item.nickname }}</view>
                            <image class="user-sex" src="@/static/icons/userIcon_00.png" mode="widthFix"></image>
                        </view>
                        <view class="identity">
                            <image v-if="item.identity.order == '1'" class="user-identity" src="@/static/icons/member_01.png" mode="widthFix"></image>
                            <image v-else-if="item.identity.order == '2'" class="user-identity" src="@/static/icons/member_02.png" mode="widthFix"></image>
                            <image v-else-if="item.identity.order == '3'" class="user-identity" src="@/static/icons/member_03.png" mode="widthFix"></image>
                            <image v-else-if="item.identity.order == '4'" class="user-identity" src="@/static/icons/member_04.png" mode="widthFix"></image>
                            <image v-else-if="item.identity.order == '5'" class="user-identity" src="@/static/icons/member_05.png" mode="widthFix"></image>
                            <image v-else src="@/static/icons/member_06.png" class="user-identity" mode="widthFix"></image>
                        </view>
                        <view class="list-user" @click="telClick(item.username)">
                            <image src="@/static/icons/orderTel.png" mode="widthFix"></image>
                        </view>
                    </view>
                </view>
            </view>
        </block>
        <view class="pack-center pages-hint" v-else>
            <image src="/static/imgs/coupon_null.png"></image>
            <view>暂无数据</view>
        </view>
    </view>
</template>

<script>
    import { relations } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                larerType  : 1,    //默认列表 1 直接 2 间接
                count      : '',    //数量
                identity   : '',    //身份
                relationArr: [],    //我的伙伴列表
    		};
    	},
        onLoad() {
            // 获取商品详情数据
            this.relationsInfo();
        },
        methods: {
            // 商品详情数据
            relationsInfo() {
            	relations({
                    larer: this.larerType
                }).then(res => {
                    this.count       = res.count
                    this.relationArr = res.users
                    // if(res.users != '')this.identity    = res.users[0].identity
                    
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            // 状态筛选
            onTabs(val){
            	if(this.larerType === val) return
            	this.larerType = val
                
            	// 获取商品详情数据
            	this.relationsInfo();
            },
            
            //拨打电话
            telClick(e){
                uni.makePhoneCall({
                	phoneNumber: e
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content{
    	overflow: hidden;
    	background: #f3f4f6;
    }
    
    .all {
        background-color: #FFFFFF;
        position: relative;
        height: 220rpx;
        .all-back {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        .all-text {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            padding: $padding;
            box-sizing: border-box;
            color: #FFFFFF;
            font-size: $title-size + 2;
            font-weight: 600;
            .number {
                font-size: $title-size + 30;
                font-weight: 600;
                margin-top: 10rpx;
                text {
                    font-size: $title-size-sm;
                }
            }
        }
    }
    
    .tab {
        height: 60rpx;
        line-height: 60rpx;
        position: relative;
        display: flex;
        margin-top: -20rpx;
        .item {
            flex: 2;
            text-align: center;
            border-radius: $radius $radius 0 0;
            font-weight: 600;
            background-color: #1e50f1;
            color: #b4c8ff;
            &.active {
                background-color: #FFFFFF;
                color: #000000;
            }
            image {
                width: 34rpx;
                height: 34rpx;
                vertical-align: -7rpx;
                margin-right: 10rpx;
            }
        }
    }
    
    .list {
        background-color: #FFFFFF;
        padding: $padding;
        box-sizing: border-box;
        .item {
            margin-bottom: $margin;
            display: flex;
            border-bottom: 2rpx solid #f3f3f3;
            padding-bottom: $padding;
            position: relative;
            .list-cover {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
            }
            .list-text {
                width: calc(100% - 120rpx);
                margin-left: 20rpx;
                margin-top: 5rpx;
                .list-nick {
                    display: flex;
                    .name {
                        font-weight: 600;
                    }
                    .user-sex {
                        width: 40rpx;
                        margin-left: 10rpx;
                    }
                }
                .identity {
                    margin-top: 10rpx;
                    .user-identity {
                        width: 130rpx;
                    }
                }
                .list-user {
                    background-color: #f2f5fd;
                    width: 70rpx;
                    height: 70rpx;
                    border-radius: 50%;
                    text-align: center;
                    padding: 18rpx;
                    box-sizing: border-box;
                    position: absolute;
                    right: 0;
                    top: 20rpx;
                    image {
                        width: 100%;
                    }
                }
            }
        }
    }
</style>
