<template>
  <view class="train-template-page">
    <!-- 头部 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <uni-icons class="back-icon" type="left" size="28" color="#fff"></uni-icons>
      </view>
      <text class="title">{{ TemplateDetail.templateName }}</text>
    </view>
    <!-- 统计信息 -->
    <view class="stats">
      <text class="stat-item">
        <text class="icon">📊</text> {{ TemplateDetail.exerciseCount }}个动作 · {{ TemplateDetail.totalSets }}组 ·
        {{ TemplateDetail.totalWeight }}kg
      </text>
      <text class="stat-item"> <text class="icon">⚙️</text> {{ TemplateDetail.equipmentsUsed }} </text>
    </view>

    <!-- 肌肉图 -->
    <view class="muscle-map">
      <image src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260424/muscle_back_1777018976173.png"
        mode="aspectFill" class="muscle-img" />
    </view>
    <!-- 显示主要和次要训练部位 -->
    <view>
      <view class="primary-muscle">
        <!-- 主要训练部位 -->
        <text class="section-title">主要训练部位: </text>
        <text class="description">
          {{ TemplateDetail.primaryMuscleNames.join(', ') || '暂无数据' }}
        </text>
        <!-- 换行 -->
        <view class="divider"></view>
        <!-- 次要训练部位 -->
        <text class="section-title">次要训练部位: </text>
        <text class="description">
          {{ TemplateDetail.secondaryMuscleNames.join(', ') || '暂无数据' }}
        </text>
      </view>
    </view>
    <!-- 模板介绍 -->
    <view class="section">
      <text class="section-title">模板介绍: </text>
      <text class="description">
        {{ TemplateDetail.introduction }}
      </text>
    </view>
    <!-- 动作列表 -->
    <view class="section">
      <text class="section-title">动作列表</text>
      <!-- 这里一个卡片一个unit层，点击可以进入动作层或者超级组 -->
      <view v-if="TemplateUnits.length > 0">
        <!-- 循环 unit，每个 unit 一个卡片 -->
        <view v-for="(unit, unitIndex) in TemplateUnits" :key="unitIndex" class="exercise-item"
          @click="handleUnitClick(unit)">
          <!-- 训练单元名称：使用 flex 布局，强制图片和文字在同一行 -->
          <view class="unit-header">
            <text class="exercise-number">{{ unitIndex + 1 }}</text>
            <text class="unit-title">{{ unit.unitName || `超级组 ${unitIndex + 1}` }}</text>
            <!-- <image :src=lostImage mode="aspectFill" class="unit-icon" /> -->
          </view>
          <!-- 循环该单元下的所有动作 -->
          <view v-for="(item, index) in unit.exercises" :key="index" class="exercise-item-inner">
            <view class="exercise-header">
              <view class="exercise-info">
                <!-- 动作组(1)显示图片，超级组(2)显示动作名称 -->
                <template v-if="unit.unitType === 1">
                  <image :src="item.urlImage || lostImage" mode="aspectFill" class="unit-icon" />
                </template>
                <template v-else>
                  <text class="super-exercise-name">{{ item.exerciseName }}</text>
                </template>
              </view>
            </view>
            <!-- 每组详情 -->
            <view v-if="item.sets && item.sets.length > 0" class="exercise-details">
              <!-- 下面的set共有多少组 -->
              <view>
                <text class="detail-label">共{{ item.sets.length }}组</text>
              </view>
              <view v-for="(detail, i) in item.sets" :key="i" class="detail-row">
                <view class="detail-label">第{{ detail.setIndex }}组</view>
                <!-- 这里有不同的组数需要判断 -->
                <view v-show="detail.weight > 0" class="detail-value">{{ detail.weight }}kg × {{ detail.reps }}次</view>
              </view>
            </view>
            <!-- 超级组：给非最后一个动作加分隔线 -->
            <view v-if="unit.unitType === 2 && index !== unit.exercises.length - 1" class="divider-line"></view>
          </view>
        </view>
      </view>
      <view v-else class="empty-tip">
        <text>暂无动作数据</text>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="bottom-actions">
      <button class="start-btn" :class="{ loading: isStarting }" :disabled="isStarting" @click="startTraining">
        {{ isStarting ? '训练中...' : '开始计时' }}
      </button>
      <view class="action-group">
        <image :src=lostImage mode="widthFix" class="calendar-icon" />
        <text class="action-text">日历颜色</text>
      </view>
      <view class="action-group">
        <image :src=lostImage mode="widthFix" class="add-icon" />
        <text class="action-text">加入日程</text>
      </view>
    </view>
  </view>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import TemplatesApi from '@/sheep/api/Template/Templates';
const lostImage = "https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
// 响应式变量
const isStarting = ref(false);
const temid = ref('');
const TemplateDetail = ref({});
const TemplateUnits = ref([]);
// 获取模板大类id获得模板详情
const loadtemplatedetail = async () => {
  try {
    const res = await TemplatesApi.getTemplateDetail(temid.value);
    TemplateDetail.value = res.data;
    TemplateUnits.value = res.data.units || [];
    console.log('✅ 模板详情：', TemplateDetail.value);
    console.log('✅ 单元数据：', TemplateUnits.value);
  } catch (err) {
    console.log('❌ 请求失败：', err);
  }
};
// 返回
const goBack = () => {
  uni.navigateBack();
};
const handleUnitClick = (unit) => {
  // 取当前unit的id（动作组/超级组都用这个）
  const id = unit.exercises?.[0]?.exerciseId;
  if (unit.unitType === 1) {
    uni.navigateTo({
      url: `/pages4/pages/xunji/xunji-dongzuo-xiangqing?id=${id}`
    });
    console.log('点击了动作，id=', id);
  } else if (unit.unitType === 2) {
    uni.navigateTo({
      url: `/pages4/pages/xunji/xunji-dongzuo-xiangqing-chaojizu?id=${unit.supersetId}`
    });
    console.log('点击了超级组，id=', unit.unitId);
  }
};
// 开始训练（没有做）
const startTraining = () => {
  isStarting.value = true;
  setTimeout(() => {
    isStarting.value = false;
    uni.showToast({ title: '训练已开始', icon: 'success' });
  }, 1500);
};

// 生命周期
onLoad((options) => {
  temid.value = options.id;
});

onMounted(() => {
  loadtemplatedetail();
});
</script>

<style scoped lang="scss">
.train-template-page {
  background-color: #121212;
  color: #ffffff;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
  padding-bottom: 160rpx;
}

.header {
  display: flex;
  align-items: center;
  padding: calc(var(--status-bar-height, 0px) + 20rpx) 30rpx 20rpx;
  background-color: #000;
  position: relative;
  z-index: 10;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  flex: 0.9;
  text-align: center;
}

.stats {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #333;
}

.stat-item {
  margin-bottom: 10rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 10rpx;
}

.muscle-map {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  width: 100%;
}

.muscle-img {
  width: 100%;
  object-fit: contain;
  /* 关键：完整显示不裁切 */
  border-radius: 10rpx;
}

.right {
  transform: rotateY(180deg);
}

/* 新增：主要/次要训练部位容器样式，强制左对齐 */
.primary-muscle {
  padding: 30rpx;
  // margin-top: 20rpx;
  border-bottom: 1px solid #333;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 关键：所有内容左对齐 */
  gap: 15rpx;
  /* 两行之间的间距，可按需调整 */
}

.section {
  padding: 30rpx;
  // margin-top: 20rpx;
  border-bottom: 1px solid #333;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  // margin-bottom: 20rpx;
}

.description {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.empty-tip {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
}

/* --- 修复核心：unit 卡片布局 --- */
.exercise-item {
  background-color: #1e1e1e;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border: 1px solid #333;
}

/* 超级组内动作项容器：给分隔线留空间 */
.exercise-item-inner {
  padding: 10rpx 0;
}

/* 超级组动作名称样式：匹配你现有字体/颜色风格 */
.super-exercise-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #fff;
  line-height: 80rpx;
  /* 和图片高度对齐，保持视觉一致 */
}

/* 超级组动作分隔线：和你现有分割线风格统一 */
.divider-line {
  width: 100%;
  height: 1rpx;
  background-color: #333;
  margin: 15rpx 0;
}

/* 核心修复：让单元标题和图标在同一行 */
.unit-header {
  display: flex;
  justify-content: flex-start; // 文字靠左，图片靠右
  align-items: center; // 垂直居中
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #333;

  /* 新增：超级组标题加粗高亮（可选） */
  .unit-title {
    font-weight: bold;
    color: #fff;
  }
}

.unit-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
  // 去掉绝对宽度，让它自然占据空间
}

.unit-icon {
  width: 80rpx; // 匹配你截图的橙色方块大小
  height: 80rpx;
  border-radius: 10rpx;
  object-fit: cover;
}

/* --- 动作头部样式 --- */
.exercise-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.exercise-number {
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
  width: 30rpx;
  text-align: center;
  margin-right: 20rpx;
}

.exercise-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
  object-fit: cover;
}

.exercise-info {
  flex: 1; // 关键：让信息区域占据剩余空间，防止挤压
}

/* 你注释掉的 exercise-name/exercise-desc 不需要样式 */

.exercise-details {
  margin-bottom: 20rpx;
}

.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.detail-label {
  width: 80rpx; // 加宽以适应“第X组”
  color: #ccc;
  font-size: 24rpx;
  flex-shrink: 0; // 强制不换行
}

.detail-value {
  flex: 1;
  font-size: 24rpx;
}

/* --- 底部按钮 --- */
.bottom-actions {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  background-color: #000;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #333;
}

.start-btn {
  width: 300rpx;
  height: 80rpx;
  background-color: #ffd700;
  color: #000;
  font-size: 30rpx;
  font-weight: bold;
  border-radius: 40rpx;
  border: none;
  outline: none;
}

.start-btn.loading {
  opacity: 0.7;
  pointer-events: none;
}

.action-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.calendar-icon,
.add-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 10rpx;
}

.action-text {
  font-size: 24rpx;
  color: #aaa;
}
</style>