<template>
    <view class="content">
        <!-- 用户信息 -->
        <view class="info-flex">
            <u-avatar
                :src="infoObj.portraitUrl"
                shape="square"
                size="50"
                bg-color="#fff"
            ></u-avatar>
            <view class="info-text">
                <view class="nickname">{{infoObj.name}}</view>
                <view class="address">地址：{{infoObj.address}}</view>
            </view>
        </view>
        <!-- 用户身份 -->
        <view class="info-btns">
            <view class="item">
                <label>性别</label>
                <view class="text" v-if="infoObj.gender === 0">保密</view>
                <view class="text" v-if="infoObj.gender === 1">男</view>
                <view class="text" v-if="infoObj.gender === 2">女</view>
            </view>
            <view class="item">
                <label>HASH</label>
                <view class="text">{{infoObj.hash}}</view>
            </view>
        </view>
        <!-- 二维码 -->
        <view class="info-code">
            <uqrcode class="info-code-src" :size="198" ref="uQRCode" text="qrContent" />
            <view class="info-code-text">
                <view>ZH-HEALTH扫一扫上面的二维码</view>
                <view>添加我的好友</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        : ''
                },
                qrContent: 'ADDFRIEND|'
			}
		},
        onLoad(e){
            console.log(e)
            
        },
		mounted() {
			getUserInfo(this.$Route.query.targetId).then(res => {
                this.infoObj = res
                this.qrContent += res.userId
                console.log(this.infoObj)
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
    .content{
        background: $window-color;
        min-height: 100vh;
        padding-top: $padding;
        box-sizing: border-box;
        .info-code{
            background: white;
            margin: 0 $margin;
            border-radius: $radius;
            padding: $padding*3 $padding $padding;
            text-align: center;
            &-src{
                display: inline-block;
            }
            &-text{
                text-align: center;
                color: $text-gray;
                font-size: $title-size-sm;
                line-height: 40rpx;
                padding: $padding 0;
            }
        }
        // 用户信息
        .info-flex{
            padding: $padding;
            margin: 0 $margin;
            display: flex;
            background: white;
            border-radius: $radius;
            .info-text{
                width: calc(100% - 50px);
                padding-left: $padding;
                box-sizing: border-box;
                .nickname{
                    line-height: 30px;
                    font-size: $title-size + 6;
                    color: $text-color;
                    text-align: left;
                }
                .address{
                    line-height: 20px;
                    font-size: $title-size-sm;
                    color: $text-gray;
                    text-align: left;
                    @extend .nowrap;
                }
            }
        }
        
        // footer
        .footer{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: $padding*2 $padding;
            display: flex;
            justify-content: space-around;
            .footer-item{
                margin: 0 $margin/2;
                .icon{
                    background: $main-color;
                    width: 88rpx;
                    height: 88rpx;
                    line-height: 88rpx;
                    display: inline-block;
                    border-radius: 50%;
                    .icon-u{
                        margin-top: calc((88rpx/2) - 13px);
                        margin-left: calc((88rpx/2) - 13px);
                    }
                }
                .text{
                    color: $main-color;
                    font-size: $title-size-m;
                    text-align: center;
                    padding-top: 10rpx;
                }
            }
        }
        
        // btns
        .info-btns{
            background: white;
            margin: $margin;
            border-radius: $radius;
            .item{
                line-height: 100rpx;
                border-bottom: solid 1rpx $border-color;
                display: flex;
                padding: 0 $padding;
                justify-content: space-between;
                font-size: $title-size-lg;
                &:last-child{
                    border-bottom: none;
                }
                label{
                    width: 200rpx;
                }
                .text{
                    width: calc(100% - 200rpx);
                    color: $text-gray-m;
                    text-align: right;
                    @extend .nowrap;
                }
            }
        }
    }
</style>
