<script setup lang='ts'>
import { computed } from 'vue'
import Cookies from 'js-cookie'
import { countStore, useUserStore } from '@/store'

const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo)

const info = countStore()
const nickName = Cookies.get('nickName')
</script>

<template>
  <div class="flex items-center overflow-hidden">
    <div class="w-10 h-10 overflow-hidden rounded-full shrink-0">
      <!-- <template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
        <NAvatar
          size="large"
          round
          :src="userInfo.avatar"
          :fallback-src="defaultAvatar"
        />
      </template> -->
      <img sizes="large" src="../../../assets/avatar.jpg" style="width: 40px;height: 40px;" alt="">
    </div>
    <div class="flex-1 min-w-0 ml-2">
      <h2 class="overflow-hidden font-bold text-md text-ellipsis whitespace-nowrap">
        {{ nickName }}
      </h2>
      <p class="overflow-hidden text-xs text-gray-500 text-ellipsis whitespace-nowrap">
        <!-- <span
          v-if="isString(userInfo.description) && userInfo.description !== ''"
          v-html="userInfo.description"
        /> -->
        今日剩余次数{{ info.count1 }}/10
      </p>
    </div>
  </div>
</template>
