<script setup lang="ts">
import { computed } from 'vue'
import type { ResourceKey } from '../UserHead/index.vue'

const props = withDefaults(
  defineProps<{
    personalList: any
    sex: any
    nickname: any
    resourceKey?: ResourceKey
  }>(),
  {
    resourceKey: 'resourceUrl',
  },
)

defineOptions({ name: 'UserFigure' })

const nicknameBg = computed(() => {
  const obj = props.personalList?.find((i: anyObj) => i.remark === 4) as any
  return obj ? obj.personalInfoResourceUrl : ''
})
</script>

<template>
  <div class="user-figure">
    <UserHead size="58" :personalList="personalList" :resourceKey="resourceKey" />
    <Icon class="sex" :name="sex === 1 ? 'boy_icon' : 'girl_icon'" size="24"></Icon>
    <div
      class="nickname"
      :style="{
        'background-image': `url(${nicknameBg})`,
      }"
    >
      <LineFont class="name" :text="nickname" size="18" border="4" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.user-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  // padding-left: 2rem;
  height: 100%;
  gap: 10px;
  .sex {
    margin: 0 $space-2;
  }
  .nickname {
    width: 20.88vh;
    // flex: 1;
    height: 7vh;
    display: flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 12px;
    position: relative;
    @include single_ellipsis;
    margin-top: -1.67vh;

    .x-line-font {
      position: absolute;
      bottom: 1.17vh;
      left: 50%;
      transform: translateX(-50%);
      font-size: 1.83vh;
    }
  }
}
</style>
