<script setup>
  import { useAuthUser } from '@/composables/useAuthUser'

  const { userInfo, tencentUserSig } = useAuthUser()
</script>

<template>
  <view class="code-box">
    <view class="top-img">
      <image
        v-if="userInfo.avatar"
        :src="userInfo.avatar"
        mode="aspectFill"
        class="avatar"
      ></image>
      <uni-icons v-else type="contact-filled" size="60"></uni-icons>
      <view class="right-box">
        <text>{{ userInfo.userName }}</text>
        <text>ID: {{ userInfo.userId }}</text>
      </view>
    </view>
    <view class="code-img">
      <l-qrcode
        :value="`/pages/adduser/details?id=${tencentUserSig.userId}`"
        size="240"
      />
    </view>
    <text class="bottom-text">邀请码：{{ userInfo.invitationCode }}</text>
  </view>
</template>

<style lang="scss" scoped>
  .code-box {
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    .bottom-text {
      font-size: 38rpx;
      color: #333333;
      margin-top: 10rpx;
      font-weight: 600;
    }

    .top-img {
      width: 480rpx;
      display: flex;
      align-items: center;
      margin-bottom: 46rpx;
      .avatar {
        width: 110rpx;
        height: 110rpx;
        border-radius: 110rpx;
      }
      .right-box {
        margin-left: 16rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text {
          font-size: 32rpx;
          font-weight: 600;
          color: #333333;
          &:last-child {
            margin-top: 10rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #acacac;
          }
        }
      }
    }

    .code-img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 480rpx;
      height: 480rpx;
    }
  }
</style>
