<template>
  <view class="faq-page">


    <!-- FAQ 列表 -->
    <view class="faq-container">
      <view v-for="category in faqCategories" :key="category.id" class="category-block">
        <!-- 分类标题 -->
        <view class="category-header">
          <text class="category-dot"></text>
          <text class="category-title">{{ category.title }}</text>
        </view>

        <!-- 问题列表 -->
        <view class="faq-list">
          <view
            v-for="(item, index) in category.items"
            :key="item.id"
            class="faq-item"
            :class="{ 'faq-item-last': index === category.items.length - 1 }"
          >
            <view class="faq-question" @click="toggleItem(category.id, item.id)">
              <text class="question-text">{{ item.question }}</text>
              <text class="arrow-icon" :class="{ expanded: isExpanded(category.id, item.id) }">&#9660;</text>
            </view>
            <view class="faq-answer" :class="{ show: isExpanded(category.id, item.id) }">
              <view class="answer-divider"></view>
              <text class="answer-text">{{ item.answer }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      expandedItems: {},
      faqCategories: [
        {
          id: 1,
          title: '训练相关',
          items: [
            {
              id: 11,
              question: '新手应该怎么制定训练计划？',
              answer: '建议从每周3-4次训练开始，每次45-60分钟。前两周以熟悉动作为主，选择较轻的重量，每个动作做3组，每组12-15次。优先选择复合动作（如深蹲、卧推、硬拉），逐步建立动作模式后再提升强度。'
            },
            {
              id: 12,
              question: '一周训练几次比较合适？',
              answer: '初学者建议每周3-4次，中级训练者每周4-5次，高级训练者每周5-6次。关键是保证训练质量而非数量，确保每组有足够的恢复时间。建议采用"练一休一"或"练二休一"的节奏。'
            },
            {
              id: 13,
              question: '每组应该做几个，做几组？',
              answer: '增肌目标：每组8-12次，每个动作3-4组；力量增长：每组3-6次，每个动作4-5组；耐力训练：每组15-20次，每个动作2-3组。组间休息时间：增肌60-90秒，力量训练2-3分钟。'
            },
            {
              id: 14,
              question: '有氧运动和力量训练怎么安排？',
              answer: '如果目标是增肌，建议力量训练后进行20-30分钟低强度有氧，或将有氧安排在休息日。如果目标是减脂，可以在力量训练后做30-45分钟中等强度有氧。不建议在力量训练前做长时间有氧，以免影响训练表现。'
            },
            {
              id: 15,
              question: '训练后肌肉酸痛怎么办？',
              answer: '延迟性肌肉酸痛（DOMS）是正常现象，通常在训练后24-72小时内出现。可以通过充分拉伸、轻度活动、热敷、充足睡眠和补充蛋白质来缓解。如果疼痛异常剧烈或持续时间超过5天，建议就医检查。'
            }
          ]
        },
        {
          id: 2,
          title: '饮食营养',
          items: [
            {
              id: 21,
              question: '健身期间应该怎么吃？',
              answer: '遵循"高蛋白、适量碳水、低脂肪"原则。每餐应有优质蛋白（鸡胸肉、鱼、蛋、豆制品），搭配复合碳水（糙米、红薯、全麦面包）和蔬菜。每日蛋白质摄入建议为体重（kg）x 1.6-2.2克。'
            },
            {
              id: 22,
              question: '要不要喝蛋白粉？',
              answer: '蛋白粉是方便的蛋白质补充方式，但不是必需品。优先通过食物摄取蛋白质，如果日常饮食难以满足蛋白质需求（尤其是训练后30分钟内），可以使用蛋白粉作为补充。建议选择乳清蛋白或植物蛋白粉。'
            },
            {
              id: 23,
              question: '训练前需要吃东西吗？',
              answer: '建议训练前1-2小时摄入一顿含碳水和蛋白质的轻餐，例如：全麦面包+鸡蛋、香蕉+酸奶。训练前30分钟可以补充一根香蕉或一小把坚果。避免在训练前立即进食大量食物，以免引起胃部不适。'
            }
          ]
        },
        {
          id: 3,
          title: '功能使用',
          items: [
            {
              id: 31,
              question: '如何添加自定义训练动作？',
              answer: '进入"动作管理"页面，点击"新增动作"，填写动作名称、选择目标肌群、设置动作类型后保存即可。添加后的动作会出现在您的动作库中，可在创建训练模板时选择使用。'
            },
            {
              id: 32,
              question: '怎么创建训练模板？',
              answer: '进入"我的模板"页面，点击"新建模板"，为模板命名后添加训练动作。可以设置每个动作的组数、次数和组间休息时间。创建完成后，每次训练可以直接使用模板，快速开始训练。'
            },
            {
              id: 33,
              question: '训练数据会自动保存吗？',
              answer: '训练过程中数据会实时暂存，完成训练后请点击"结束训练"按钮以确保数据被完整保存到服务器。如果中途意外退出，系统会尝试恢复未完成的训练记录。'
            },
            {
              id: 34,
              question: '如何查看历史训练记录？',
              answer: '在首页或训练日历中，可以按日期查看历史训练记录。点击具体日期可查看当天的训练详情，包括完成的动作、组数、重量和训练时长等信息。'
            }
          ]
        },
        {
          id: 4,
          title: '其他问题',
          items: [
            {
              id: 41,
              question: '训练多久能看到效果？',
              answer: '每个人情况不同，一般在坚持规律训练和合理饮食的前提下：4-6周开始感觉力量提升，8-12周可以看到体型变化，3-6个月出现较为明显的变化。请保持耐心，健身是一场长期旅程。'
            },
            {
              id: 42,
              question: '经期/生病期间可以训练吗？',
              answer: '经期可以进行低强度训练（如散步、瑜伽），但应避免高强度力量训练和高冲击动作。生病期间建议充分休息，待身体完全康复后再逐步恢复训练，尤其是发烧时绝对不要训练。'
            },
            {
              id: 43,
              question: '遇到问题如何联系我们？',
              answer: '如有任何问题或建议，可通过"我的-意见反馈"提交，或发送邮件至客服邮箱。我们会在1-3个工作日内回复处理，感谢您的支持与理解。'
            }
          ]
        }
      ]
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    toggleItem(categoryId, itemId) {
      const key = `${categoryId}_${itemId}`;
      if (this.expandedItems[key]) {
        this.$delete(this.expandedItems, key);
      } else {
        this.$set(this.expandedItems, key, true);
      }
    },
    isExpanded(categoryId, itemId) {
      const key = `${categoryId}_${itemId}`;
      return !!this.expandedItems[key];
    }
  }
};
</script>

<style scoped>
.faq-page {
  width: 100%;
  min-height: 100vh;
  background-color: #1a1a1a;
  color: #ffffff;
  padding-bottom: 40rpx;
}

/* 分类区块 */
.faq-container {
  padding: 20rpx;
}

.category-block {
  margin-bottom: 30rpx;
}

/* 分类标题 */
.category-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
}

.category-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #007aff;
  flex-shrink: 0;
}

.category-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
}

/* FAQ 列表 */
.faq-list {
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 16rpx;
  overflow: hidden;
}

.faq-item {
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
}

.faq-item-last {
  border-bottom: none;
}

/* 问题行 */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 24rpx;
  cursor: pointer;
}

.question-text {
  flex: 1;
  font-size: 28rpx;
  color: #e0e0e0;
  line-height: 1.5;
  padding-right: 20rpx;
}

/* 展开/收起箭头 */
.arrow-icon {
  font-size: 22rpx;
  color: #999;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.arrow-icon.expanded {
  transform: rotate(180deg);
  color: #007aff;
}

/* 答案区域 */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-answer.show {
  max-height: 1200rpx;
}

.answer-divider {
  height: 1rpx;
  background-color: rgba(255, 255, 255, 0.06);
  margin: 0 24rpx;
}

.answer-text {
  display: block;
  padding: 24rpx 24rpx 32rpx 24rpx;
  font-size: 26rpx;
  color: #b0b0b0;
  line-height: 1.8;
}
</style>