<script setup>
import Container from "@/components/Container.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
</script>

<template>
  <Container title="等级介绍">
    <view class="container">
      <!-- 等级进度条 -->
      <view class="level-progress">
        <view v-for="(_, index) in 10" :key="index" class="progress-dot">
          <view
            :style="{
              backgroundColor:
                index + 1 < user.lvl
                  ? '#fff9'
                  : index + 1 === user.lvl
                  ? '#fed847'
                  : 'transparent',
              borderColor: index + 1 === user.lvl ? '#fed847' : '#fff9',
            }"
          />
          <view />
        </view>
      </view>

      <!-- 说明文本 -->
      <view class="content">
        <view class="intro-text">
          在射灵世界中，等级是衡量您射箭技能的重要指标，而点数则是您提升等级的关键。具体的要求如下：
        </view>

        <view class="section">
          <view class="title">一、点数的获取规则</view>
          <view class="text">
            每射出一支箭并上靶，无论您射出的箭命中哪个环数，只要箭成功上靶，您将获得1点基础点数。这是您积累点数的基本方式，每一次射击都是您向更高目标迈进的一步。
          </view>
          <view class="text">
            射出的箭中7-9环：当您的箭中7环、8环或9环时，除了获得1点基础点数外，还将额外获得0.5点基础点数；
          </view>
          <view class="text">
            射出的箭中10环：命中10环是射箭中的最高成就，因此，当您的箭中10环时，除了获得1点基础点数外，还将额外获得1点基础点数。即每次命中10环将总共获得2点基础点数。
          </view>
        </view>

        <view class="section">
          <view class="title">二、解锁特权与玩法</view>
          <view class="text">
            当您等级达到9级时，将解锁"约战模式"。在这个模式中，您可以邀请您的好友进行切磋，与他们展开一场精彩的射箭对决。通过与好友的对抗，您不仅可以收获友谊和欢乐，还能在交流中学习到更多的技巧和经验。
          </view>
          <view class="text">
            当您等级达到16级时，将解锁对战模式，每次对战都是一次难得的学习机会。您可以借此机会提升自己的水平，同时也为您的好友提供帮助和建议。此外，约战模式还为您提供了展示自己技艺的平台，让您在与好友的互动中感受到射箭的乐趣和成就感。
          </view>
          <view class="text">
            当您等级达到22级时，将解锁"押豆模式"。在这个模式中，您可以与相同段位的玩家进行对抗，赢家将收获所有的灵豆。这不仅增加了游戏的趣味性和挑战性，还为您提供了赢取更多灵豆的机会。通过与更多玩家的对战，您可以不断提升自己的技术水平。
          </view>
        </view>
      </view>
    </view>
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}

.level-progress {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

.progress-dot {
  display: flex;
  align-items: center;
}
.progress-dot > view:first-child {
  width: 3.8vw;
  height: 3.8vw;
  border-radius: 50%;
  border: 1px solid #fff9;
}
.progress-dot > view:last-child {
  width: 3.8vw;
  height: 1px;
  margin: 0 2px;
  background-color: #fff9;
}

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

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

.section {
  margin-bottom: 20px;
}

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

.text {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 10px;
  text-align: justify;
}
</style>
