<script setup>
const props = defineProps({
  total: {
    type: Number,
    default: 10,
  },
  players: {
    type: Array,
    default: () => [],
  },
});
const seats = new Array(props.total).fill(1);
</script>

<template>
  <view class="players">
    <view v-for="(_, index) in seats" :key="index">
      <image src="../static/player-bg.png" mode="widthFix" />
      <image
        v-if="players[index]"
        :src="players[index].avatar"
        mode="widthFix"
      />
      <view v-else class="player-unknow">
        <image src="../static/question-mark.png" mode="widthFix" />
      </view>
      <text v-if="players[index]">{{ players[index].name }}</text>
      <text v-else :style="{ color: '#fff9' }">虚位以待</text>
      <view v-if="index === 0" class="founder">创建者</view>
      <image
        :src="`../static/player-${index + 1}.png`"
        mode="widthFix"
        class="player-bg"
      />
    </view>
  </view>
</template>

<style scoped>
.players {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  -moz-column-gap: 20px;
  column-gap: 14px;
  margin-bottom: 20px;
  font-size: 14px;
  padding: 0 14px;
}
.players > view {
  width: calc(50% - 7px);
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
  height: 100px;
  overflow: hidden;
}
.players > view > image:first-child {
  width: 100%;
  position: absolute;
  z-index: -1;
}
.players > view > image:nth-child(2) {
  width: 40px;
  height: 40px;
  margin: 0 10px;
  border: 1px solid #fff;
  border-radius: 50%;
}
.players > view > text:nth-child(3) {
  width: 20vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.founder {
  position: absolute;
  background-color: #fed847;
  top: 6px;
  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: 40px;
  height: 40px;
  margin: 0 10px;
  border: 1px solid #fff3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #69686866;
}
.player-unknow > image {
  width: 40%;
}
</style>
