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

const LEVEL_ICON_BASE_URL = "https://static.shelingxingqiu.com/levelicon";

const rankRows = [
  {
    name: "倔强青铜",
    levels: ["倔强青铜1", "倔强青铜2", "倔强青铜3"],
    picNames: ["青铜1", "青铜2", "青铜3"],
    score: "每个小段位需要满3颗星才能晋升到下一个段位，共9颗星。",
  },
  {
    name: "秩序白银",
    levels: ["秩序白银1", "秩序白银2", "秩序白银3"],
    picNames: ["白银1", "白银2", "白银3"],
    score: "每个小段位需要满3颗星才能晋升到下一个段位，共9颗星。",
  },
  {
    name: "荣耀黄金",
    levels: ["荣耀黄金1", "荣耀黄金2", "荣耀黄金3", "荣耀黄金4"],
    picNames: ["黄金1", "黄金2", "黄金3", "黄金4"],
    score: "每个小段位需要满4颗星才能晋升到下一个段位，共16颗星。",
  },
  {
    name: "永恒钻石",
    levels: ["永恒钻石1", "永恒钻石2", "永恒钻石3", "永恒钻石4", "永恒钻石5"],
    picNames: ["钻石1", "钻石2", "钻石3", "钻石4", "钻石5"],
    score: "每个小段位需要满5颗星才能晋升到下一个段位，共25颗星。",
  },
];

const kingRankRows = [
  { name: "最强王者", score: "0-9" },
  { name: "非凡王者", score: "10-19" },
  { name: "无双王者", score: "20-29" },
  { name: "绝世王者", score: "30-39" },
  { name: "至圣王者", score: "40-49" },
  { name: "荣耀王者", score: "50-99" },
  { name: "传奇王者", score: "100+" },
];

const meleeScoreTables = [
  {
    title: "5人大乱斗",
    rankings: [1, 2, 3, 4, 5],
    scores: [150, 75, 0, -100, -100],
  },
  {
    title: "10人大乱斗",
    rankings: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    scores: [200, 125, 75, 0, 0, 0, -50, -100, -100, -100],
  },
];

// 图片文件名与段位名称一致，统一在这里拼接远程地址。
const getLevelIcon = (levelName) =>
  `${LEVEL_ICON_BASE_URL}/${levelName}.png`;
</script>

<template>
  <Container title="段位介绍">
    <view class="container">
      <view class="content">
        <view class="intro-text">
          在射灵世界的对战体系内，段位是衡量您竞赛技术水平的重要指标，它不仅代表了玩家的排位段位，还体现了玩家在对战中的综合表现。通过不断对抗和积累积分，玩家可以逐步提升自己的段位，以下是关于段位的详细说明。
        </view>

        <view class="section">
          <view class="title">一、段位体系概述</view>
          <view class="text">
            我们的段位体系分为多个等级，从低到高依次为：倔强青铜、秩序白银、荣耀黄金、永恒钻石、最强王者、非凡王者、无双王者、绝世王者、至圣王者、荣耀王者和传奇王者。每个大段位下又分为若干小段位，玩家需要通过积累积分来提升段位。
          </view>
        </view>

        <view class="section">
          <view class="title">二、积分获取规则</view>

          <view class="sub-section">
            <view class="sub-title">（一）基本规则</view>
            <view class="rule-mode">
              <view class="rule-mode-title">1V1、2V2、3V3对抗模式：</view>
              <view class="rule-item">
                <text class="rule-bullet">●</text>
                <text class="rule-content"
                  >每胜一局，胜方每人+100积分；每负一局，负方每人-100积分</text
                >
              </view>
              <view class="rule-item">
                <text class="rule-bullet">●</text>
                <text class="rule-content"
                  >2V2模式：胜方队伍中，总成绩最高且箭均成绩≥7环者，为本局MVP，额外获得40积分。</text
                >
              </view>
              <view class="rule-item">
                <text class="rule-bullet">●</text>
                <text class="rule-content"
                  >3V3模式：胜方队伍中，总成绩最高且箭均成绩≥7环者，为本局MVP，额外获得60积分。</text
                >
              </view>
              <view class="rule-item">
                <text class="rule-bullet">●</text>
                <text class="rule-content"
                  >在1V1/2V2/3V3三种模式中，连续获得五连胜（三类模式一起算），则从第五场开始，每场胜利可额外再加15分，直至结束连胜。（仅限对抗模式，不含大乱斗模式。）</text
                >
              </view>
            </view>

            <view class="rule-mode">
              <view class="rule-mode-title">5人、10人大乱斗模式：</view>
              <view class="rule-paragraph">
                5人大乱斗和10人大乱斗按个人总环数成绩排序，排名从高到低依次设置系统默认奖励/扣除积分，默认初始排名和积分规则具体如下：
              </view>

              <view class="melee-score-table">
                <view
                  v-for="table in meleeScoreTables"
                  :key="table.title"
                  class="melee-table-section"
                >
                  <view class="melee-table-title">{{ table.title }}</view>
                  <scroll-view
                    class="melee-table-scroll"
                    scroll-x
                    :enhanced="true"
                    :show-scrollbar="false"
                  >
                    <view
                      :class="[
                        'melee-table-body',
                        table.rankings.length > 5
                          ? 'melee-table-body--wide'
                          : '',
                      ]"
                    >
                      <view class="melee-table-row">
                        <text class="melee-table-cell melee-table-label"
                          >排名</text
                        >
                        <text
                          v-for="ranking in table.rankings"
                          :key="ranking"
                          class="melee-table-cell"
                        >
                          {{ ranking }}
                        </text>
                      </view>
                      <view class="melee-table-row">
                        <text class="melee-table-cell melee-table-label"
                          >积分</text
                        >
                        <text
                          v-for="(score, index) in table.scores"
                          :key="index"
                          class="melee-table-cell"
                        >
                          {{ score }}
                        </text>
                      </view>
                    </view>
                  </scroll-view>
                </view>
              </view>
            </view>
          </view>

          <view class="sub-section">
            <view class="sub-title">（二）大段位规则</view>
            <view class="text"
              >大段位升级中，每个玩家将根据不同的规则得到相应不同的积分，具体的规则如下</view
            >
          </view>
        </view>

        <view class="section">
          <view class="title">三、（表格）</view>
          <view class="rank-table">
            <view class="table-row table-header">
              <text class="table-cell major-column">大段位</text>
              <text class="table-cell minor-column">小段位</text>
              <text class="table-cell score-column">积分（100积分=1星）</text>
            </view>

            <view
              v-for="rank in rankRows"
              :key="rank.name"
              class="table-row rank-group-row"
            >
              <view class="table-cell major-column major-rank-cell">
                <image
                  class="rank-icon"
                  :src="getLevelIcon(rank.picNames[0])"
                  mode="aspectFit"
                  lazy-load
                />
                <text class="major-rank-name">{{ rank.name }}</text>
              </view>

              <view class="minor-column minor-rank-cell">
                <text
                  v-for="level in rank.levels"
                  :key="level"
                  class="table-cell minor-rank-item"
                >
                  {{ level }}
                </text>
              </view>

              <text class="table-cell score-column score-text">
                {{ rank.score }}
              </text>
            </view>

            <view
              v-for="rank in kingRankRows"
              :key="rank.name"
              class="table-row king-rank-row"
            >
              <view class="table-cell king-rank-cell">
                <image
                  class="rank-icon"
                  :src="getLevelIcon(rank.name)"
                  mode="aspectFit"
                  lazy-load
                />
                <text class="major-rank-name">{{ rank.name }}</text>
              </view>
              <text class="table-cell king-score-cell">{{ rank.score }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </Container>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
}

.content {
  background-color: #ffffff;
  padding: 10px;
}

.intro-text {
  font-size: 14px;
  color: #333333;
  line-height: 1.6;
  margin-bottom: 20px;
}

.section {
  margin-bottom: 20px;
}

.title {
  font-size: 16px;
  color: #333333;
  margin-bottom: 15px;
}

.text {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 10px;
}

.sub-section {
  margin-bottom: 15px;
}

.sub-title {
  font-size: 15px;
  color: #333333;
  margin-bottom: 10px;
}

.rule-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
  font-size: 28rpx;
  color: #666666;
  line-height: 1.7;
}

.rule-mode {
  margin-bottom: 24rpx;
}

.rule-mode:last-child {
  margin-bottom: 0;
}

.rule-mode-title {
  margin-bottom: 12rpx;
  font-size: 28rpx;
  color: #333333;
  font-weight: 600;
  line-height: 1.6;
}

.rule-bullet {
  flex-shrink: 0;
  margin-right: 10rpx;
  font-size: 20rpx;
  line-height: 2.38;
}

.rule-content {
  flex: 1;
}

.rule-paragraph {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.7;
}

.melee-score-table {
  margin-top: 20rpx;
  border: $uni-border;
  color: #333333;
  font-size: 26rpx;
}

.melee-table-section + .melee-table-section {
  border-top: $uni-border;
}

.melee-table-title {
  padding: 14rpx 16rpx;
  background-color: #f5f6f7;
  color: #e53935;
  font-weight: 600;
  border-bottom: $uni-border;
}

.melee-table-scroll {
  width: 100%;
  white-space: nowrap;
}

.melee-table-body {
  width: 100%;
}

.melee-table-body--wide {
  width: 900rpx;
}

.melee-table-row {
  display: flex;
}

.melee-table-row + .melee-table-row {
  border-top: $uni-border;
}

.melee-table-cell {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  min-height: 72rpx;
  padding: 10rpx 12rpx;
  box-sizing: border-box;
  border-left: $uni-border;
}

.melee-table-cell:first-child {
  border-left: 0;
}

.melee-table-label {
  flex: 0 0 86rpx;
}

.rank-table {
  border-radius: 4px;
  font-size: 14px;
  color: #000;
  width: calc(100vw - 20px);
}

.table-row {
  display: flex;
}

.table-cell {
  padding: 10rpx 20rpx;
  border: $uni-border;
  box-sizing: border-box;
  margin-top: -1rpx;
  margin-left: -1rpx;
}

.major-column,
.minor-column {
  width: 25%;
}

.score-column {
  width: 50%;
}

.table-header .table-cell {
  display: flex;
  align-items: center;
}

.major-rank-cell,
.minor-rank-cell {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.minor-rank-item {
  min-height: 70rpx;
  box-sizing: border-box;
}

.major-rank-cell {
  align-items: center;
  justify-content: center;
  padding: 12rpx 8rpx;
}

.rank-icon {
  width: 120rpx;
  height: 120rpx;
  flex-shrink: 0;
}

.major-rank-name {
  margin-top: 8rpx;
  font-size: 24rpx;
  line-height: 1.4;
  text-align: center;
}

.minor-rank-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-left: 0;
  padding: 10rpx;
  border-right: 0;
}

.score-text {
  display: flex;
  align-items: center;
  line-height: 1.6;
}

.king-rank-cell,
.king-score-cell {
  width: 50%;
}

.king-rank-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 210rpx;
}

.king-score-cell {
  display: flex;
  align-items: center;
}
</style>
