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

  const itemList = [
    { title: '我的二维码', key: '1', value: '' },
    { title: 'ID', key: '2', value: 'userId' },
    { title: '昵称', key: '3', value: 'userName' },
    { title: '性别', key: '4', value: '' },
    { title: '手机号码', key: '5', value: 'mobile' },
    { title: '个性签名', key: '6', value: '' }
  ]

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

<template>
  <view class="personal-center">
    <view class="public-card">
      <view class="left-img">
        <image
          src="https://p4.itc.cn/images01/20220619/46660ed163164c14be90e605a73ee5e8.jpeg"
          mode="aspectFill"
          class="avatar"
        ></image>
      </view>
      <view class="right-box">
        <text class="value">换头像</text>
        <uni-icons type="right" size="16" color="#999999"></uni-icons>
      </view>
    </view>

    <view
      v-for="(item, index) in itemList"
      :key="index"
      class="public-card"
    >
      <view class="left-box">
        <text>{{ item.title }}</text>
        <text v-if="item.key === '6'" class="text">
          这个人很懒，什么也没有
        </text>
      </view>
      <view class="right-box">
        <text v-if="!['1', '6'].includes(item.key)" class="value">
          {{ item.value ? userInfo[item.value] : '' }}
        </text>
        <uni-icons type="right" size="16" color="#999999"></uni-icons>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '../styles/index.scss';
  .personal-center {
    padding: 32rpx 24rpx;
  }
</style>
