<script setup>
import Avatar from "@/components/Avatar.vue";

const props = defineProps({
  total: {
    type: Number,
    default: 10,
  },
  players: {
    type: Array,
    default: () => [],
  },
  removePlayer: {
    type: Function,
    default: () => {},
  },
  /** 当前用户是否为房主；仅房主可见踢人按钮 */
  isOwner: {
    type: Boolean,
    default: false,
  },
});

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

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

const seats = new Array(props.total).fill(1);
</script>

<template>
  <view class="players">
    <view v-for="(_, index) in seats" :key="index">
      <image src="https://static.shelingxingqiu.com/shootmini/static/player-bg.png" mode="widthFix" />
      <view v-if="players[index] && players[index].name" class="avatar">
        <Avatar
          :src="players[index].avatar || '../static/user-icon.png'"
          :size="40"
        />
        <text
          :style="{ opacity: players[index] && !!players[index].state ? 1 : 0 }"
          >已准备</text
        >
      </view>
      <view v-else class="player-unknow">
        <image src="../static/question-mark.png" mode="widthFix" />
      </view>
      <view
        v-if="players[index] && players[index].name && isMember(players[index])"
        :class="['player-seat-name', ...getMemberNicknameClass(players[index])]"
      >
        <text class="member-nickname__text">{{ players[index].name }}</text>
        <text
          v-if="players[index].sVip === true"
          class="member-nickname__shine"
        >
          {{ players[index].name }}
        </text>
      </view>
      <text
        v-else-if="players[index] && players[index].name"
        class="player-seat-name"
      >
        {{ players[index].name }}
      </text>
      <text v-else class="player-seat-name" :style="{ color: '#fff9' }">
        虚位以待
      </text>
      <view v-if="index === 0" class="founder">管理员</view>
      <!-- <image
        :src="`../static/player-${index + 1}.png`"
        mode="widthFix"
        class="player-bg"
      /> -->
      <!-- 仅房主（isOwner=true）且非空座位时展示踢人按钮 -->
      <button
        v-if="index > 0 && players[index] && isOwner"
        hover-class="none"
        class="remove-player"
        @click="() => removePlayer(players[index])"
      >
        <image src="../static/close-white.png" mode="widthFix" />
      </button>
    </view>
  </view>
</template>

<style scoped>
.players {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 20rpx;
  column-gap: 25rpx;
  margin-bottom: 20px;
  font-size: 14px;
  padding: 0 14px;
}
.players > view {
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
  height: 176rpx;
  overflow: hidden;
}
.players > view > image:first-child {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
}
.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24rpx;
  margin-top: 16rpx;
}
.avatar > text {
  background-color: #2c261fb3;
  border: 1rpx solid #a3793f66;
  color: #fed847;
  font-size: 16rpx;
  border-radius: 20rpx;
  width: 70rpx;
  text-align: center;
  margin-top: -16rpx;
  position: relative;
  height: 28rpx;
  line-height: 28rpx;
}
.player-seat-name {
  width: 20vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.founder {
  position: absolute;
  background-color: #fed847;
  top: 0;
  left: 0;
  color: #000;
  font-size: 10px;
  padding: 2px 5px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* .player-bg {
  position: absolute;
  width: 52px;
  right: 0;
} */
.player-unknow {
  width: 84rpx;
  height: 84rpx;
  margin: 0 24rpx;
  border: 1rpx solid #fff3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #69686866;
  box-sizing: border-box;
}
.player-unknow > image {
  width: 40%;
}
.remove-player {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 10rpx;
  right: 0;
}
.remove-player > image {
  width: 100%;
  height: 100%;
  opacity: 0.6;
}
</style>
