<script setup>
const props = defineProps({
  arrows: {
    type: Array,
    default: () => [],
  },
});
const getSum = (...arrows) => {
  const recordedArrows = arrows.filter(Boolean);
  if (!recordedArrows.length) return "-";
  const sum = recordedArrows.reduce(
    (total, arrow) => total + (Number(arrow.ring) || 0),
    0
  );
  return `${sum}环`;
};
const roundsName = ["第一轮", "第二轮", "第三轮", "第四轮"];
const getShowText = (arrow) => {
  if (!arrow) return "-";
  return arrow.ringX ? "X" : `${Number(arrow.ring) || 0}环`;
};
</script>
<template>
  <view class="container">
    <view>
      <text :style="{ transform: 'translateX(-10%)' }">总成绩</text>
      <text>{{ arrows.reduce((last, next) => last + next.ring, 0) }}环</text>
    </view>
    <view
      v-for="(_, index) in new Array(
        Math.min(
          Math.ceil(arrows.length / 3) + (arrows.length % 3 === 0 ? 1 : 0),
          4
        )
      ).fill(1)"
      :key="index"
    >
      <text>{{ roundsName[index] }}</text>
      <text>{{ getShowText(arrows[index * 3 + 0]) }}</text>
      <text>{{ getShowText(arrows[index * 3 + 1]) }}</text>
      <text>{{ getShowText(arrows[index * 3 + 2]) }}</text>
      <text :style="{ width: '40%', transform: 'translateX(20%)' }">{{
        getSum(
          arrows[index * 3 + 0],
          arrows[index * 3 + 1],
          arrows[index * 3 + 2]
        )
      }}</text>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.container > view {
  width: calc(100% - 30px);
  color: aliceblue;
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid #ffffff66;
  font-size: 14px;
  color: #fffc;
}
.container > view:first-child {
  color: #fed847;
  background-color: #ffffff33;
}
.container text {
  display: block;
  width: 20%;
  text-align: center;
}
</style>
