<template>
  <div class="team-title-row">
    <span class="team-name-strong">{{ title }}</span>
    <span v-if="teamHandicap" class="team-hc">팀 핸디캡: {{ teamHandicap }}</span>
  </div>
  <div class="member-list">
    <div v-for="member in members" :key="member.participantId" class="member-row">
      <div class="member-info-block">
        <div class="member-header-row">
          <span class="member-name">{{ member.name }}</span>
          <Tag v-if="member.isGuest" value="G" severity="warning" class="ml-2" />
        </div>
        <div class="info-under-name">
          {{ member.gender || '-' }}
          <span v-if="member.status" :class="{
            'status-cancel': member.status === '취소',
            'status-pending': member.status === '참가예정'
          }">
            · {{ member.status }}
          </span>
          <span v-if="member.paymentStatus" :class="{
            'payment-unpaid': member.paymentStatus === '미납'
          }">
            · {{ member.paymentStatus }}
          </span>
        </div>
        <div class="member-meta">핸디캡: {{ member.handicap ?? '-' }} / 에버리지: {{ member.average ?? '-' }}</div>
        <div class="member-meta">{{ member.comment }}</div>
      </div>
      <div class="score-inputs-vertical">
        <template v-for="n in gameCount" :key="n">
          <div class="score-input-hc-wrap">
            <div class="score-input-status-wrap">
              <InputText
                v-if="canInputScore"
                v-model.number="scoresProxy[member.participantId + '-' + n]"
                type="number"
                class="score-input"
                :placeholder="n + 'G'"
                maxlength="3"
                @input="onScoreInput(member, n, teamNumber)"
                @blur="onScoreBlur(member, n, teamNumber)"
                @keydown.enter="onScoreEnter(member, n, teamNumber)"
              />
              <span v-else>{{ member.scores?.[n - 1] ?? '-' }}</span>
              <span :class="scoreColorClass(scoreStates[member.participantId + '-' + n], scoresProxy[member.participantId + '-' + n], member.handicap)"
                    class="score-hc-value score-status-text"
                    :key="scoreStates[member.participantId + '-' + n] + '-' + scoresProxy[member.participantId + '-' + n]">
                {{ (scoresProxy[member.participantId + '-' + n] !== undefined && scoresProxy[member.participantId + '-' + n] !== '') ?
                  Number(scoresProxy[member.participantId + '-' + n]) + (Number(member.handicap) || 0) : ''
                }}
                <i v-if="scoreStates[member.participantId + '-' + n] === 'saving'" class="pi pi-spin pi-spinner score-status-icon" />
                <i v-else-if="scoreStates[member.participantId + '-' + n] === 'saved'" class="pi pi-check score-status-icon" />
                <i v-else-if="scoreStates[member.participantId + '-' + n] === 'error'" class="pi pi-times score-status-icon" />
              </span>
            </div>
          </div>
        </template>
        <div class="member-score-summary">
          <span>총점: {{ getMemberTotalScore(member) }}</span>
          <span class="member-score-avg">/ 에버리지: {{ getMemberAverageScore(member) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { toRefs } from 'vue'
const props = defineProps({
  title: String,
  members: Array,
  teamHandicap: [Number, String],
  teamNumber: [Number, String, null],
  gameCount: Number,
  canInputScore: Boolean,
  scoresProxy: Object,
  scoreStates: Object,
  onScoreInput: Function,
  onScoreBlur: Function,
  onScoreEnter: Function,
  getMemberTotalScore: Function,
  getMemberAverageScore: Function,
  scoreColorClass: Function
})
</script>
