<!--pages/user/index.wxml-->
<view>
  <!-- top -->
  <view class="bg">
    <view wx:if="{{info}}" >
      <view class="flex flex-center flex-justify-start" style="margin-top:128rpx;">
        <view style="width: 140rpx;height:140rpx;" class="flex flex-center flex-justify-start full-width ">
          <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar" style="background-color: red;">
            <image class="avatar-example" src="{{user.avatar ? user.avatar.url : 'https://res.catter.cn/pub/2025/09/30/20250930143142508.png'}}" />
          </button>
        </view>
        <view class="white ml-16">
          <view class="font-16">
            {{user.name}}
          </view>
          <view class="mt-16 font-12">
            已经加入 {{info.joinDays}} 天
          </view>
        </view>
      </view>
      <view class="white flex flex-center flex-justify-start mt-16">我的徽章 已解锁 23 个</view>
      <view class="mt-32">
        <view class="">🎖️🎖️🎖️🎖️🎖️🎖️🎖️</view>
      </view>

    </view>
  </view>
  <view class="padding">
    <view class="white-bg padding mt-16 row">
      <!-- dash -->
      <view class=" flex flex-center flex-justify-around mt-32">
        <view class="flex flex-center flex-col">
          <view class="font-16 bold" style="font-size: 20px;">{{info.plantCount}}</view>
          <view class="font-12">我的植物</view>
        </view>

        <view class="flex flex-center flex-col">
          <view class="font-16 bold" style="font-size: 20px;">{{info.careCount}}</view>
          <view class="font-12">养护次数</view>
        </view>

        <view class="flex flex-center flex-col">
          <view class="font-16 bold" style="font-size: 20px;">{{info.badgeCount}}</view>
          <view class="font-12">成就徽章</view>
        </view>

      </view>
    </view>
    <view class="white-bg padding mt-32 flex flex-center flex-justify-between" style="border-radius: 16rpx;">
      <view class="flex flex-center flex-col">
        <view class="avatar flex flex-center" style="background-color: #E2B43F3C;">
          <t-icon name="thumb-up" style="color: #E2B43F;" size="24"></t-icon>
        </view>
        <view class="mt-16">我的植物</view>
      </view>

      <view class="flex flex-center flex-col">
        <view class="avatar flex flex-center" style="background-color: #4B84EE3C;">
          <t-icon name="calendar-1" style="color:#4B84EE;" size="24"></t-icon>
        </view>
        <view class="mt-16">养护日志</view>
      </view>

      <view class="flex flex-center flex-col">
        <view class="avatar flex flex-center" style="background-color:#E2B43F3C;">
          <t-icon name="saturation" style="color: #E2B43F;" size="24"></t-icon>
        </view>
        <view class="mt-16">我的成就</view>
      </view>

      <view class="flex flex-center flex-col">
        <view class="avatar flex flex-center" style="background-color: #9D5FEF3C;">
          <t-icon name="verified" style="color: #9D5FEF;" size="24"></t-icon>
        </view>
        <view class="mt-16">我的互动</view>
      </view>
    </view>
  </view>


  <view style="padding: 0 32rpx">
    <view class="row" style="padding-top: 8rpx; padding-bottom: 8rpx;margin-bottom: 32rpx;">
      <t-cell title="免费领取绿植" hover arrow />
      <t-cell title="提醒设置" hover arrow />
      <t-cell title="加入微信群" hover arrow bind:tap="goAbout" />
      <t-cell title="用户协议" hover arrow bind:tap="goPrivate" />
      <t-cell title="邀请好友" hover arrow bordered="{{false}}" description="成功邀请可以获得稀有种子" />
    </view>
  </view>
  <view class="padding"></view>
</view>