<script setup lang="ts">
import { computed } from 'vue'
import wanIcon from '../../assets/images/flowerClolor/wan.png'
import tongIcon from '../../assets/images/flowerClolor/tong.png'
import tiaoIcon from '../../assets/images/flowerClolor/tiao.png'
import defaultAvatarIcon from '../../assets/images/icons/avatar.svg'
import type { SeatPlayerCardModel } from './seat-player-card'

const props = defineProps<{
  seatClass: string
  player: SeatPlayerCardModel
}>()

const missingSuitIcon = computed(() => {
  if (props.player.missingSuitLabel === '万') {
    return wanIcon
  }
  if (props.player.missingSuitLabel === '筒') {
    return tongIcon
  }
  if (props.player.missingSuitLabel === '条') {
    return tiaoIcon
  }
  return ''
})

const resolvedAvatarUrl = computed(() => {
  return props.player.avatarUrl || defaultAvatarIcon
})
</script>

<template>
  <article
      class="player-badge"
      :class="[seatClass, { 'is-turn': player.isTurn }]"
  >
    <div class="avatar-panel">
      <div class="avatar-card">
        <img :src="resolvedAvatarUrl" :alt="`${player.name}头像`" />
      </div>
      <span v-if="player.dealer" class="dealer-mark">庄</span>
    </div>

    <div class="player-meta">
      <p>{{ player.name }}</p>
    </div>

    <div class="missing-mark">
      <img v-if="missingSuitIcon" :src="missingSuitIcon" alt="" />
      <span v-else>{{ player.missingSuitLabel }}</span>
    </div>
  </article>
</template>
