<script setup lang="ts" name="UserCard">
import { ref, reactive, computed, onMounted } from 'vue'
// import { storeToRefs } from 'pinia'
import { useUserStore } from '../store/modules/user'

const props = defineProps<{
  isLink?: boolean
}>()
const userStore = useUserStore()

</script>

<template>
  <div class="user-card">
    <!-- {{ String(userStore) }} -->
    <!-- <image
      v-if="userStore.userInfo.avatar"
      class=""
      :src="String(userStore.userInfo.avatar)">
    </image> -->
     <div style="width: 84rpx;width:84rpx;"  class="user-card__default">{{ String(userStore.userInfo.nickName).substring(0, 1) }}</div>
    <!-- <van-image
      width="4.2rem"
      height="4.2rem"
      fit="cover"
      :src="String(userStore.userInfo.avatar)"
      style="border-radius:0.8rem;overflow: hidden;"
    >
      <template #error>
        <div class="user-card__default">{{ String(userStore.userInfo.nickname).substring(0, 1) }}</div>
      </template>
    </van-image> -->
    <div class="user-card__content">
      <div class="user-card__content-uesrname">{{ userStore.userInfo.nickName }}</div>
      <div class="user-card__content-dept">{{ userStore.userInfo.dept?.deptName }} - {{ userStore.userInfo.postName }}</div>
    </div>
    <van-icon v-if="props.isLink" class="is-link van-cell__right-icon" name="arrow" />
  </div>
</template>

<style lang="less" scoped>
.user-card {
  display: flex;
  align-items: center;
  position: relative;
  padding: 28rpx 32rpx 30rpx;
  background-color: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
  &__default {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 32rpx;
    color: #fff;
    background-color: #4773fc;
    border-radius: 12rpx;
  }
  &__content {
    flex: 1;
    margin-left: 26rpx;
    overflow: hidden;
    line-height: 1;
    &-username {
      font-size: 32rpx;
      color: rgba(37, 37, 37, 1);
    }
    &-dept {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: rgba(37, 37, 37, 1);
    }
  }
}
.user-card__default {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 84rpx;
  height: 84rpx;
  font-size: 32rpx;
  color: #fff;
  background-color: #4773fc;
  border-radius: 0.6rem;
}



</style>
