<template>
  <view
    class="me_user_info"
    @click="handleToPageMe('/INDEX/me/index')"
    :style="`padding-top:${capsuleRect.top + capsuleRect.height}px;`"
  >
    <view v-if="userData?.user" class="user_info_avatar">
      <view>
        <up-avatar size="60" :src="userData?.user?.avatar && userData?.user?.avatar[0]?.url" />
      </view>
      <view class="user_info_name_phone">
        <view class="name" v-if="userData?.user?.name">
          {{ userData?.user?.name || '比较懒还没设置名字' }}
        </view>
        <view class="name placeholder_name" v-else> 比较懒还没设置名字 </view>
        <view class="phone"> {{ userData?.user?.phone }} </view>
      </view>
    </view>
    <view v-else class="user_info_avatar">
      <view><up-avatar size="60" /></view>
      <view class="user_info_name_phone">
        <view class="name"> 请先登录 </view>
        <view class="me_des"> 登录后体验更多功能 </view>
      </view>
    </view>
    <uni-icons type="right" size="17" color="#969799" />
  </view>
</template>

<script setup lang="ts">
import { useWeAppAuthStore } from '@/common'
import { onShow } from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue'
const userData = ref<any>({})
const auth = useWeAppAuthStore()
const capsuleRect = ref<any>({})
const handleToPageMe = (url: string) => {
  uni.navigateTo({
    url: userData?.value?.user ? url : '/pages/login'
  })
}
onShow(e => {
  userData.value = auth?.data
})

onMounted(() => {
  capsuleRect.value = uni.getMenuButtonBoundingClientRect()
  console.log(capsuleRect.value, 'capsuleRect')
})
</script>

<style lang="scss" scoped>
.me_user_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  .user_info_avatar {
    display: flex;
    align-items: center;
  }
  .user_info_name_phone {
    padding-left: 20rpx;
    color: #3d3d3d;
    font-weight: 500;
    font-size: 28rpx;
    .phone {
      padding-top: 8rpx;
    }
    .me_des {
      color: #999;
      padding-top: 8rpx;
      font-size: 23rpx;
      font-weight: 400;
    }
    .placeholder_name {
      color: #999;
    }
  }
}
</style>
