<script setup>
import Avatar from "@/components/Avatar.vue";
import { meleeAvatarColors } from "@/constants";
defineProps({
  players: {
    type: Array,
    default: () => [],
  },
  blueTeam: {
    type: Array,
    default: () => [],
  },
  redTeam: {
    type: Array,
    default: () => [],
  },
  showRank: {
    type: Boolean,
    default: false,
  },
  winner: {
    type: Number,
    default: 2,
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
});

const getMemberNicknameClass = (player = {}) => [
  "member-nickname",
  player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
  player.sVip === true ? "member-nickname--svip" : "",
];

const isMember = (player = {}) => player.vip === true || player.sVip === true;
</script>

<template>
  <view class="container">
    <image
      v-if="showHeader"
      :src="`https://static.shelingxingqiu.com/shootmini/static/battle-header${players.length ? '-melee' : ''}.png`"
      mode="widthFix"
    />
    <view
      v-if="!players.length && blueTeam.length && redTeam.length"
      class="players"
      :style="{ paddingTop: showHeader ? '48rpx' : '0' }"
    >
      <view>
        <view
          v-for="(player, index) in blueTeam"
          :key="index"
          :style="{
            margin: blueTeam.length === 2 ? '0 -5px' : '0 6px',
            width: `${100 / blueTeam.length - blueTeam.length * 3}%`,
          }"
        >
          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
          <view
            v-if="isMember(player)"
            :class="['player-name', ...getMemberNicknameClass(player)]"
          >
            <text class="member-nickname__text">{{ player.name }}</text>
            <text v-if="player.sVip === true" class="member-nickname__shine">
              {{ player.name }}
            </text>
          </view>
          <text v-else class="player-name">{{ player.name }}</text>
        </view>
        <image
          v-if="winner === 1"
          src="../static/winner-badge.png"
          mode="widthFix"
          class="left-winner-badge"
        />
      </view>
      <view>
        <view
          v-for="(player, index) in redTeam"
          :key="index"
          :style="{
            margin: redTeam.length === 2 ? '0 -5px' : '0 6px',
            width: `${100 / redTeam.length - redTeam.length * 3}%`,
          }"
        >
          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
          <view
            v-if="isMember(player)"
            :class="['player-name', ...getMemberNicknameClass(player)]"
          >
            <text class="member-nickname__text">{{ player.name }}</text>
            <text v-if="player.sVip === true" class="member-nickname__shine">
              {{ player.name }}
            </text>
          </view>
          <text v-else class="player-name">{{ player.name }}</text>
        </view>
        <image
          v-if="winner === 2"
          src="../static/winner-badge.png"
          mode="widthFix"
          class="right-winner-badge"
        />
      </view>
    </view>
    <!-- 大乱斗玩家列表：scroll-view 作为横向滚动容器 -->
    <!-- 小程序中 scroll-view 不支持直接 display:flex，需内部 wrapper view 承载 flex 布局 -->
    <!-- 仅当玩家 >5 人（内容溢出宽度）时才阻止冒泡，防止与外层 swiper 切换 tab 的手势冲突 -->
    <scroll-view
      v-if="players.length"
      class="players-melee"
      scroll-x
      :show-scrollbar="false"
      @touchmove="(e) => players.length > 5 && e.stopPropagation()"
      :style="{ paddingTop: showHeader ? '15px' : '0' }"
    >
      <view class="players-melee-inner">
        <view
          v-for="(player, index) in players"
          :key="index"
          :style="{
            backgroundColor: meleeAvatarColors[index],
            width: `${Math.max(100 / players.length, 18)}vw`,
          }"
        >
          <Avatar
            :src="player.avatar"
            :rankLvl="showRank ? undefined : player.rankLvl"
            :size="40"
            :rank="showRank ? index + 1 : 0"
          />
          <view
            v-if="isMember(player)"
            :class="['player-name', ...getMemberNicknameClass(player)]"
          >
            <text class="member-nickname__text">{{ player.name }}</text>
            <text v-if="player.sVip === true" class="member-nickname__shine">
              {{ player.name }}
            </text>
          </view>
          <text v-else class="player-name">{{ player.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped>
.container {
  width: 100%;
  position: relative;
  z-index: 999;
  margin-bottom: 10px;
}
.container > image:first-child {
  position: absolute;
  width: 100%;
  /* top: -5px; */
  z-index: 1;
  pointer-events: none;
}
.players {
  display: flex;
}
.players > view {
  width: 50%;
  height: 75px;
  color: #fff9;
  font-size: 12px;
  overflow: hidden;
  position: relative;
  padding-top: 5px;
  display: flex;
  justify-content: center;
}
.players > view:first-child {
  background-color: #364469;
}
.players > view:last-child {
  background-color: #692735;
}
.players > view > view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.players-melee {
  height: 80px;
  width: 100%;
  white-space: nowrap;
}
/* 小程序 scroll-view 不支持直接 flex，通过内层 wrapper 承载横向排列 */
.players-melee-inner {
  display: inline-flex;
  min-width: 100%;
  height: 100%;
  flex-wrap: nowrap;
}
.players-melee-inner > view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff9;
  font-size: 12px;
  /* padding-top: 7px; */
  flex: 0 0 auto;
}
.player-name {
  margin-top: 3px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
view.player-name {
  justify-content: center;
}
.player-name .member-nickname__text,
.player-name .member-nickname__shine {
  font-size: 12px;
}
.left-winner-badge {
  position: absolute;
  width: 50px;
  top: -12%;
  left: -5%;
  transform: rotate(-12deg);
}
.right-winner-badge {
  position: absolute;
  width: 50px;
  top: -12%;
  right: -5%;
  transform: rotate(36deg);
}
</style>
