<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  isRed: {
    type: Boolean,
    default: true,
  },
  team: {
    type: Array,
    default: () => [],
  },
  currentShooterId: {
    type: [Number, String],
    default: "",
  },
});
const players = ref({});
const currentTeam = ref(false);
const firstName = ref("");
const currentPlayer = ref(null);

// 抽出判断：当前队伍且该玩家排序为 0（队伍首位）
const isFirst = (id) =>
  currentTeam.value && ((players.value[id] || {}).sort || 0) === 0;

const getPos = (id) => {
  const sort = (players.value[id] || {}).sort || 0;
  if (currentTeam.value) {
    return 30 * (sort + Math.ceil(sort / 2));
  }
  return sort * 40;
};

const getMemberNicknameClass = () => [
  "current-shooter-name",
  "member-nickname",
  currentPlayer.value?.vip === true && currentPlayer.value?.sVip !== true
    ? "member-nickname--vip"
    : "",
  currentPlayer.value?.sVip === true ? "member-nickname--svip" : "",
];

const isCurrentPlayerMember = () =>
  currentPlayer.value?.vip === true || currentPlayer.value?.sVip === true;

const syncPlayers = () => {
  const nextPlayers = {};
  const shooterId = props.currentShooterId;
  const shooterIndex = props.team.findIndex(
    (p) => String(p?.id) === String(shooterId)
  );
  const nextTeam = [...props.team];

  currentTeam.value = !!shooterId && shooterIndex >= 0;
  firstName.value = "";
  currentPlayer.value = null;

  if (currentTeam.value) {
    const target = nextTeam.splice(shooterIndex, 1)[0];
    if (target) {
      nextTeam.unshift(target);
      firstName.value = target.name || "";
      currentPlayer.value = target;
    }
  }

  nextTeam.forEach((p, index) => {
    if (p?.id) nextPlayers[p.id] = { sort: index, ...p };
  });
  players.value = nextPlayers;
};

watch(
  [() => props.team, () => props.currentShooterId],
  syncPlayers,
  { immediate: true, deep: true }
);
</script>

<template>
  <view class="container">
    <image
      :src="isRed ? '../../../static/flag-red.png' : '../../../static/flag-blue.png'"
      class="flag"
      :style="{
        [isRed ? 'left' : 'right']: '10rpx',
        top: currentTeam ? '-36rpx' : '-24rpx',
      }"
    />
    <view
      v-for="(item, index) in team"
      :key="item.id || index"
      class="player"
      :style="{
        width: (isFirst(item.id) ? 80 : 60) + 'rpx',
        height: (isFirst(item.id) ? 80 : 60) + 'rpx',
        zIndex: team.length - ((players[item.id] || {}).sort || 0),
        border: isFirst(item.id) ? '3.5rpx solid' : '2rpx solid',
        borderColor: isRed ? '#ff6060' : '#5fadff',
        top: isFirst(item.id) ? '0rpx' : '12rpx',
        [isRed ? 'left' : 'right']: getPos(item.id) + 'rpx',
      }"
    >
      <image :src="item.avatar || '../../../static/user-icon.png'" mode="widthFix" />
      <text
        v-if="isFirst(item.id)"
        :style="{ backgroundColor: isRed ? '#ff6060' : '#5fadff' }"
        >{{ isRed ? "红队" : "蓝队" }}</text
      >
    </view>
    <view
      v-if="currentTeam && isCurrentPlayerMember()"
      :class="getMemberNicknameClass()"
      :style="{
        [isRed ? 'left' : 'right']: '-4rpx',
      }"
    >
      <text class="member-nickname__text">{{ firstName }}</text>
      <text v-if="currentPlayer?.sVip === true" class="member-nickname__shine">
        {{ firstName }}
      </text>
    </view>
    <text
      v-else-if="currentTeam"
      class="truncate"
      :style="{
        color: isRed ? '#ff6060' : '#5fadff',
        [isRed ? 'left' : 'right']: '-4rpx',
      }"
      >{{ firstName }}</text
    >
  </view>
</template>

<style scoped>
.container {
  display: flex;
  align-items: center;
  position: relative;
  width: 20vw;
  height: 10rpx;
  margin: 0 20rpx;
}
.current-shooter-name {
  position: absolute;
  width: 80rpx;
  bottom: -100rpx;
  justify-content: center;
}
.current-shooter-name .member-nickname__text,
.current-shooter-name .member-nickname__shine {
  font-size: 20rpx;
  text-align: center;
}
.container > text {
  position: absolute;
  font-size: 20rpx;
  text-align: center;
  width: 80rpx;
  bottom: -100rpx;
}
.player {
  transition: all 0.3s ease;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}
.player > image {
  width: 100%;
  min-height: 100%;
}
.player > text {
  position: absolute;
  font-size: 15rpx;
  text-align: center;
  width: 76rpx;
  left: 0;
  bottom: 0;
  color: #fff;
}
.flag {
  position: absolute;
  width: 45rpx;
  height: 45rpx;
  transition: all 0.3s ease;
}
</style>
