<script setup>
import { computed } from "vue";

const props = defineProps({
  arrows: {
    type: Array,
    default: () => [],
  },
  total: {
    type: Number,
    default: 0,
  },
});

const getDisplayText = (arrow = {}) => {
  if (!arrow) return "";
  if (!arrow.ring) return "0";
  return arrow.ringX ? "X" : String(arrow.ring);
};

const isLowScore = (arrow = {}) => {
  if (!arrow || arrow.ringX) return false;
  return Number(arrow.ring) < 6;
};

const displayArrows = computed(() => {
  const list = [...props.arrows];
  // total 是达标箭数，不是实际射箭上限；训练中始终预留下一箭空框。
  list.push(null);
  return list;
});
</script>

<template>
  <view v-if="displayArrows.length" class="score-panel">
    <view class="score-grid">
      <view
        v-for="(arrow, index) in displayArrows"
        :key="index"
        class="score-card"
      >
        <image class="score-card-bg" :src="isLowScore(arrow)?'https://static.shelingxingqiu.com/shootmini/static/training-difficulty-design/block-gray.png':'https://static.shelingxingqiu.com/shootmini/static/training-difficulty-design/block-gold.png'"></image>
        <text
          class="score-value"
          :class="{ 'score-value--low': isLowScore(arrow) }"
        >
          {{ getDisplayText(arrow) }}
        </text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.score-panel {
  width: 100%;
  padding: 30rpx 40rpx 0 40rpx;
  box-sizing: border-box;
}

.score-grid {
  display: flex;
  flex-wrap: wrap;
}

.score-card {
  position: relative;
  width: 100rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-right: 14rpx;
  margin-bottom: 14rpx;
}

.score-card:nth-child(6n) {
  margin-right: 0;
}

.score-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100rpx;
  height: 56rpx;
}

.score-value {
  position: relative;
  z-index: 1;
  min-width: 28rpx;
  text-align: center;
  font-size: 34rpx;
  line-height: 1;
  font-weight: 700;
  font-style: italic;
  color: #f6e3b2;
  text-shadow: 0 2rpx 0 rgba(36, 36, 48, 0.5);
  margin-left: -10rpx;
}

.score-value--low {
  color: #cfcfcf;
  text-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.5);
}
</style>
