<script setup>
defineProps({
  src: {
    type: String,
    default: "",
  },
  frameSrc: {
    type: String,
    default: "",
  },
  onClick: {
    type: Function,
    default: () => {},
  },
  frame: {
    type: Boolean,
    default: false,
  },
  rank: {
    type: Number,
    default: 0,
  },
  size: {
    type: Number,
    default: 45,
  },
  borderColor: {
    type: String,
    default: "",
  },
});
</script>

<template>
  <view class="avatar" @click="onClick">
    <image
      v-if="frameSrc || frame"
      :src="frameSrc || '../static/avatar-frame.png'"
      mode="widthFix"
      :style="{
        width: Number(size) + 10 + 'px',
        height: Number(size) + 10 + 'px',
      }"
      class="avatar-frame"
    />
    <image
      v-if="rank === 1"
      src="../static/champ1.png"
      mode="widthFix"
      class="avatar-rank"
    />
    <image
      v-if="rank === 2"
      src="../static/champ2.png"
      mode="widthFix"
      class="avatar-rank"
    />
    <image
      v-if="rank === 3"
      src="../static/champ3.png"
      mode="widthFix"
      class="avatar-rank"
    />
    <view v-if="rank > 3" class="rank-view">{{ rank }}</view>
    <image
      :src="src"
      mode="widthFix"
      :style="{
        width: size + 'px',
        height: size + 'px',
        minHeight: size + 'px',
        borderColor: borderColor || '#fff',
      }"
      class="avatar-image"
    />
  </view>
</template>

<style scoped>
.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-frame {
  position: absolute;
}
.avatar-rank,
.rank-view {
  position: absolute;
  width: 20px;
  height: 15px;
  top: -6px;
  right: -4px;
}
.rank-view {
  background-color: #6d6d6d;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.avatar-image {
  border-radius: 50%;
  border: 1px solid #fff;
}
</style>
