<template>
    <view class="container">
        <!-- 顶部 -->
        <view class="head">
            <view class="head_info flex_r flex_ac flex_jb">
                <view class="flex_grow flex_r flex_ac">
                    <img class="head_img" :src="higherInfo.head_pic" />
                    <view class="flex_c flex_grow">
                        <view class="userInfo flex_r flex_ac">
                            <view class="user_name">{{ higherInfo.nickname }}</view>
                            <view class="level flex_r flex_ac flex_jc">缘起</view>
                        </view>
                        <view class="flex_r flex_ac mar_t10">
                            <view class="account din">{{ higherInfo.mobile || "" }}</view>
                            <view class="copyBalance" @tap="copyAccount(higherInfo.mobile)">复制</view>
                        </view>
                    </view>
                </view>
                <view class="head_option flex_r flex_ac">
                    <image class="option_phone" src="/static/img/dianhua.png" mode="" @tap="dial(higherInfo.mobile)"></image>
                </view>
            </view>
            <view class="head_time flex_r flex_ac">注册时间：{{ $day(higherInfo.reg_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</view>
        </view>
        <!-- 顶部-end -->
        <!-- 茶友数量 -->
        <view class="tea_con mar_t30">
            <view class="tea_total flex_r flex_ac flex_jc">
                <view class="total_con flex_c flex_ac flex_jc">
                    <view class="total_num dinB">{{ myQuanTeaFriendNum || 0 }}<text>人</text></view>
                    <view class="total_text">社区总数</view>
                </view>
                <div class="total_info dinB">
                    本日新增：{{ myChayoyTotal.day }}<br />
                    本周新增：{{ myChayoyTotal.week }}<br />
                    本月新增：{{ myChayoyTotal.month }}<br />
                </div>
            </view>
            <view class="tea_info flex_r flex_ac">
                <view class="info_list flex_c flex_ac flex_jc borRight" @tap="getToTeaList">
                    <view class="list_num dinB">{{ myTeaFriendNum || 0 }}<text>人</text></view>
                    <view class="list_text">推广用户</view>
                    <div class="untotal_info dinB">
                        <span class="ti_l">今日新增：</span>
                        <span class="ti_r">{{ myChayoyDirect.day }}</span>
                        <span class="ti_l">本周新增：</span>
                        <span class="ti_r">{{ myChayoyDirect.week }}</span>
                        <span class="ti_l">本月新增：</span>
                        <span class="ti_r">{{ myChayoyDirect.month }}</span>
                    </div>
                </view>
                <view class="info_list flex_c flex_ac flex_jc">
                    <view class="list_num dinB">{{ myZhuanTeaFriendNum || 0 }}<text>人</text></view>
                    <view class="list_text">转介绍用户</view>
                    <div class="untotal_info dinB">
                        <span class="ti_l">今日新增：</span>
                        <span class="ti_r">{{ myChayoyIndirect.day }}</span>
                        <span class="ti_l">本周新增：</span>
                        <span class="ti_r">{{ myChayoyIndirect.week }}</span>
                        <span class="ti_l">本月新增：</span>
                        <span class="ti_r">{{ myChayoyIndirect.month }}</span>
                    </div>
                </view>
            </view>
        </view>
        <!-- 茶友数量-end -->
    </view>
</template>
<script>
let app = getApp();
var appEv = app.$vm.$options;
import uniCopy from "@/utils/copy";
import { post } from "@/request/api.js";
export default {
    components: {},
    data() {
        return {
            higherInfo: "",
            myTeaFriendNum: "",
            myZhuanTeaFriendNum: "",
            myQuanTeaFriendNum: "",
            wxcode: "",
            mobile: "",

            myChayoyTotal: {},
            myChayoyDirect: {},
            myChayoyIndirect: {},
        };
    },
    onLoad: function() {
        this.loadData();

        this.getmyChayoyTotal()
        this.getmyChayoyDirect()
        this.getmyChayoyIndirect()
    },
    methods: {
        loadData() {
            post("v1/my/chayou").then((res) => {
                if (res.code === 0) {
                    this.higherInfo = res.data.data.superior;
                    this.myTeaFriendNum = res.data.data.below;
                    this.myZhuanTeaFriendNum = res.data.data.lower_level;
                    this.myQuanTeaFriendNum = res.data.data.below + res.data.data.lower_level;
                }
            });
        },

        getmyChayoyTotal() {
            post("v1/my/myChayoyTotal").then((res) => {
                if (res.code === 0) {
                    this.myChayoyTotal = res.data.data;
                }
            });
        },
        getmyChayoyDirect() {
            post("v1/my/myChayoyDirect").then((res) => {
                if (res.code === 0) {
                    this.myChayoyDirect = res.data.data;
                }
            });
        },
        getmyChayoyIndirect() {
            post("v1/my/myChayoyIndirect").then((res) => {
                if (res.code === 0) {
                    this.myChayoyIndirect = res.data.data;
                }
            });
        },

        // 复制账号
        copyAccount: function(e) {
            uniCopy({
                content: e,
                success: (res) => {},
                error: (e) => {},
            });
        },

        // 跳转到我的茶友列表
        getToTeaList: function() {
            uni.navigateTo({
                url: "/pages/tea-list/index",
            });
        },
        // 拨打电话
        dial: function(e) {
            let that = this;
            if (!e) {
                appEv.errTips("用户暂未设置电话");
                return false;
            }
            uni.makePhoneCall({
                phoneNumber: e, //仅为示例
            });
        },
    },
};
</script>
<style lang="scss" scoped>
page {
    background: #f5f5f5;
}

// 页面配置
.container {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
}

// 页面配置-end

// 顶部
.account {
    font-size: 24rpx;
    color: #7f7f7f;
}

.option_phone {
    width: 36rpx;
    height: 36rpx;
    margin-left: 30rpx;
}

.user_name {
    font-size: 30rpx;
    color: #363638;
    margin-right: 12rpx;
}

.head {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
}

.head_img {
    width: 90rpx;
    height: 90rpx;
    margin-right: 30rpx;
    border-radius: 50%;
}

.copyBalance {
    padding: 0 10rpx;
    background: #1cbe8c;
    color: #fff;
    font-size: 22rpx;
    margin-left: 12rpx;
}

.level {
    width: 74rpx;
    height: 26rpx;
    background: #1cbe8c;
    color: #fff;
    font-size: 20rpx;
    line-height: 1;
}

.head_time {
    width: 100%;
    height: 60rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    font-size: 22rpx;
    color: #606060;
}

.head_info {
    width: 100%;
    overflow: hidden;
    padding: 40rpx 24rpx 20rpx;
    box-sizing: border-box;

}

// 顶部-end

// 茶友数量
.list_num {
    font-size: 36rpx;
    color: #1cbe8c;
}

.total_num {
    font-size: 40rpx;
    color: #232323;
}

.list_text {
    font-size: 26rpx;
    color: #606060;
}

.list_num text {
    font-size: 26rpx;
    color: #1cbe8c;
}

.total_num text {
    font-size: 26rpx;
    color: #232323;
}

.borRight {
    border-right: 3rpx solid rgba(0, 0, 0, 0.12);
}

.info_list {
    height: 100%;
    width: 50%;
    box-sizing: border-box;
}

.total_text {
    font-size: 26rpx;
    color: #606060;
    margin-top: 12rpx;
}

.total_info {
    font-size: 22rpx;
    color: #333;
    margin-left: 32rpx;
}

.untotal_info {
    font-size: 22rpx;
    color: #333;
    margin-top: 20rpx;
    .ti_l,.ti_r{
        display: inline-block;
        width: 56%;
        text-align: right;
    }
    .ti_r{
        width: 44%;
        text-align: left;
    }
}

.tea_con {
    width: 100%;
    overflow: hidden;
    border-radius: 8rpx;
    background: #fff;
}

.tea_info {
    width: 100%;
    padding: 26rpx 0;
    box-sizing: border-box;
}

.tea_total {
    width: 100%;
    height: 260rpx;
    border-bottom: 3rpx solid rgba(0, 0, 0, 0.12);
}

.total_con {
    width: 164rpx;
    height: 164rpx;
    border: 6rpx solid #1cbe8c;
    border-radius: 50%;
}

// 茶友数量-end
</style>