<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>地址</label>
                <view class="text">{{infoObj.address}}</view>
            </view>
        </view>
        <!-- 二维码 -->
        <view class="info-code">
            <uqrcode class="info-code-src" :size="198" :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) {
            this.qrContent += e.targetId
            getUserInfo(e.targetId).then(res => {
                this.infoObj = res
            })
        },
        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>
