<script setup lang="ts">
import { userStore } from '@/stores'
import { px2vh } from '@/utils'
import { storeToRefs } from 'pinia'
export type ResourceKey = 'personalInfoResourceUrl' | 'homePageResourceUrl' | 'resourceUrl'
const props = withDefaults(
  defineProps<{
    personalList?: anyObj[] | null
    size?: string | number // 头像大小
    border?: string // 头像框
    head?: string // 头像
    resourceKey?: ResourceKey
  }>(),
  {
    size: 100,
    personalList: null,
    resourceKey: 'personalInfoResourceUrl',
  },
)
const emits = defineEmits(['click'])

const { userInfo } = storeToRefs(userStore())
const heightAndWidth = computed(() => px2vh(props.size))
const avatarUrl = computed(() => getUrl(1))
const avatarBorderUrl = computed(() => getUrl(2))

function getUrl(type: number): string {
  if (props.personalList) {
    return props.personalList.find((item: anyObj) => item.remark === type)?.[props.resourceKey]
  } else {
    return userInfo.value.personInUsePersonalities?.find((i: anyObj) => i.remark === type)?.[
      props.resourceKey
    ] as any
  }
}
function clickImage() {
  emits('click')
}
</script>

<template>
  <div class="x-user-head" @click="clickImage">
    <img class="border" :src="border || avatarBorderUrl" />
    <img class="avatar" :src="head || avatarUrl" />
  </div>
</template>

<style lang="scss" scoped>
.x-user-head {
  width: v-bind(heightAndWidth);
  height: v-bind(heightAndWidth);
  position: relative;
  .border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 166%;
    height: 166%;
  }

  .avatar {
    width: v-bind(heightAndWidth);
    height: v-bind(heightAndWidth);
    border-radius: 50%;
    overflow: hidden;
    background: #fffef0;
  }
}
</style>
