<template>
    <view class="friend-ewm-content">
        <view class="bg"></view>
        <!-- 用户信息 -->
        <view class="info-flex">
            <view class="info-flex-item">
                <u-avatar :src="infoObj.portraitUrl" shape="square" size="210rpx" bg-color="#fff" class="avatar" />
                <view class="nickname">{{infoObj.name}}</view>
                <view class="address">{{infoObj.address}}</view>
                <view class="info-code">
                    <uqrcode class="info-code-src" :size="160" :text="qrContent" />
                    <view class="info-code-text">扫描二维码加我ZH大健康好友</view>
                </view>
                <u-icon class="download" :name="require('@/static/imgs/copy-333.png')" size="14" :bold="true"
                    @click="copy" :label="'应用下载:'+ downUrl" labelPos="left" labelSize="14" space="6"
                    labelColor="#26a377" />
                <view class="copy" @click="copy"> 复制地址 </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getUserInfo
    } from '@/apis/interfaces/im'
    export default {
        data() {
            return {
                infoObj: {
                    userId: '',
                    username: '',
                    name: '',
                    address: '',
                    portraitUrl: '',
                    gender: 0,
                    hash: ''
                },
                downUrl: 'http://www.baidu.com',
                qrContent: 'ADDFRIEND|'
            }
        },
        onLoad(e) {
            this.qrContent += e.targetId
            getUserInfo(e.targetId).then(res => {
                this.infoObj = res
            })
        },
        methods: {
            copy() {
                uni.setClipboardData({
                    data: this.downUrl,
                    success: function() {
                        uni.showToast({
                            title: ` 下载链接已复制到剪贴板 `,
                            icon: 'none',
                            position:'bottom',
                            mask: true,
                            duration: 2000
                        })
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .friend-ewm-content {
        background: #fff;
        min-height: 100vh;
        box-sizing: border-box;

        .bg {
            background-color: red;
            width: 100%;
            height: 340rpx;
            background-color: $main-color;
        }

        // 用户信息
        .info-flex {
            padding: $padding 0;
            // margin: 0 $margin;
            background: white;
            border-radius: 50rpx 50rpx 0 0;
            position: relative;
            top: -100rpx;


            .info-flex-item {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                box-sizing: border-box;
                position: relative;
                top: -160rpx;

                .avatar {
                    // padding: 14rpx; 
                    border-radius: 10rpx;
                    background-color: #fff;
                    border: solid 14rpx rgba($color: #fff, $alpha:1);
                }

                .nickname {
                    line-height: 80rpx;
                    font-size: $title-size + 5;
                    color: $text-color;
                    font-weight: 600;
                }

                .address {
                    line-height: 60rpx;
                    font-size: $title-size-m + 2;
                    color: $text-gray;
                    text-align: left;
                    @extend .nowrap;
                }

                .info-code {
                    background: white;
                    margin: 0 $margin;
                    border-radius: $radius;
                    padding: $padding * 1.4 $padding $padding;
                    text-align: center;

                    &-src {
                        display: inline-block;
                        border-radius: 10rpx;
                        border: solid 20rpx rgba($color: #f9f9f9, $alpha:1);
                        background-color: #fff;
                        padding: 14rpx;
                    }

                    &-text {
                        text-align: center;
                        color: $text-gray;
                        font-size: $title-size-m + 1;
                        line-height: 40rpx;
                        padding: 8rpx 0 $padding 0;
                    }
                }

                .download {
                    background-color: #f9f9fb;
                    padding: 20rpx 30rpx 10rpx 30rpx;
                    border-radius: 10rpx;
                }

                .copy {
                    font-size: $title-size + 4;
                    color: $main-color;
                    background-color: rgba($color: $main-color, $alpha: .1);
                    padding: 20rpx 100rpx;
                    border-radius: 50rpx;
                    margin-top: 40rpx;
                }
            }
        }
    }
</style>
