<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">{{infoObj.gender === 0 ? '男': '女'}}</view>
            </view>
            <view class="item">
                <label>地址二维码</label>
                <u-icon name="arrow-right" color="#999" size="14"></u-icon>
            </view>
        </view>
        <!-- footer -->
        <view class="footer">
            <view class="footer-item">
                <view class="icon">
                    <u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
                </view>
                <view class="text">发消息</view>
            </view>
            <view class="footer-item">
                <view class="icon">
                    <u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
                </view>
                <view class="text">发消息</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        : ''
                }
			}
		},
        onLoad(e){
            console.log(e)
        },
		mounted() {
			getUserInfo(this.$Route.query.targetId).then(res => {
                this.infoObj = res
                console.log(this.infoObj)
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
    .content{
        background: $window-color;
        min-height: 100vh;
        // 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;
                }
            }
        }
        // 用户信息
        .info-flex{
            padding: $padding;
            display: flex;
            .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;
                }
                .address{
                    line-height: 20px;
                    font-size: $title-size-lg;
                    color: $text-gray;
                    @extend .nowrap;
                }
            }
        }
        // 用户信息
        .info-btns{
            background: white;
            margin: 0 $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;
                }
                .text{
                    color: $text-gray-m;
                }
            }
        }
    }
</style>
