<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>
        <template v-if="isOffice">
          {{ TemplateDetail?.equipmentsUsed }}
        </template>
        <template v-else>
          {{ (TemplateDetail?.equipmentNames || []).join(',') }}
        </template>

      </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>
      <view v-if="TemplateUnits.length > 0">
        <!-- 循环 unit，每个 unit 一个卡片 -->
        <view v-for="(unit, unitIndex) in TemplateUnits" :key="unitIndex" class="exercise-item"
          @click="handleUnitClick(unit)">
          <view class="unit-header">
            <view class="left">
              <text class="exercise-number">{{ unitIndex + 1 }}</text>
              <!-- 图片 -->
              <view v-if="unit.unitType === 1" class="unitImage">
                <!-- 3D字段 -->
                <image :src="unit.exercises[0]?.exerciseCover || lostImage" mode="aspectFill" class="unit-icon" />
              </view>
              <view v-else class="unitImage">
                <image src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260507/超级组_1778117889451.png"
                  mode="aspectFill" class="unit-icon" />
              </view>
              <view class="unit-title">
                <view class="name">{{ unit.unitName || `超级组 ${unitIndex + 1}` }}</view>
                <view class="PartTool">
                  <template v-if="unit.unitType === 1">
                    {{ unit.exercises[0]?.categoryDescription }} {{ unit.exercises[0]?.equipmentDescription }}
                  </template>
                  <template v-else>超级组</template>
                </view>
                <text class="totalSetCount">{{ getUnitSetCount(unit) }}组</text>
              </view>
            </view>
            <view class="right">
              <up-icon name="arrow-left" color="#fff" size="24"></up-icon>
            </view>

          </view>

          <!-- 情况1：普通动作 unitType = 1 -->
          <view v-if="unit.unitType === 1 && unit.exercises && unit.exercises.length" class="normal-action-wrap">
            <!-- 取第一个动作（普通动作unit里永远只有1个exercise） -->
            <view class="action-content">
              <!-- 单动作组次列表 -->
              <view v-for="(detail, i) in unit.exercises[0].sets || []" :key="i" class="detail-row">
                <view class="detail-label">{{ i + 1 }}</view>
                <view class="sets-data">
                  <!-- 保留你原来所有 exerciseType 判断 & 文本渲染逻辑 -->
                  <view class="detail-value" v-if="[0, 4, 5].includes(unit.exercises[0].exerciseType)">
                    {{ detail.weight }}kg × {{ detail.reps }}次
                  </view>
                  <view class="detail-value" v-if="unit.exercises[0].exerciseType === 1">
                    {{ detail.distance }}km x {{ formatSeconds(detail.duration) }}
                  </view>
                  <view class="detail-value" v-if="unit.exercises[0].exerciseType === 2">
                    {{ detail.reps }}次
                  </view>
                  <view class="detail-value" v-if="unit.exercises[0].exerciseType === 3">
                    {{ formatSeconds(detail.duration) }}
                  </view>
                  <view class="detail-value" v-if="unit.exercises[0].exerciseType === 6">
                    {{ detail.duration }}组 x {{ formatSeconds(detail.duration) }}
                  </view>
                  <view class="rest" v-if="detail.restTime">
                    {{ detail.restTime }}s
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 情况2：超级组 unitType = 2 -->
          <view v-else-if="unit.unitType === 2" class="super-action-wrap">
            <!-- 1. 超级组内部所有动作名称列表（A/B/C... + 动作名） -->
            <view class="super-actionName">
              <view class="name-item" v-for="(ex, exIdx) in unit.exercises" :key="ex.exerciseId">
                <text class="letter">{{ String.fromCharCode(65 + exIdx) }} </text>
                <text class="action-name">{{ ex.exerciseName || '动作名称' }}</text>
              </view>
            </view>

            <!-- 2. 超级组：按【组号】循环（取第一个动作的组数作为总组数） -->
            <view class="super-set-list">
              <view v-for="idx in getSuperSetMaxGroupCount(unit.exercises)" :key="idx" class="super-set-item">
                <text class="detail-label">{{ idx }}</text>
                <view class="set-column">
                  <!-- 遍历当前组下的每一个动作 -->
                  <view v-for="(ex, exIdx) in unit.exercises" :key="ex.exerciseId" class="action-in-set">
                    <!-- 容错：当前动作无该组则不渲染 -->
                    <template v-if="ex.sets[idx - 1]">
                      <view class="action-letter">
                        {{ idx }}{{ String.fromCharCode(65 + exIdx) }}
                      </view>
                      <view class="set-content">
                        <!-- 复用你原有的 动作类型 文本逻辑 -->
                        <text v-if="[0, 4, 5].includes(ex.exerciseType)">
                          {{ ex.sets[idx - 1].weight }}kg × {{ ex.sets[idx - 1].reps }}次
                        </text>
                        <text v-if="ex.exerciseType === 1">
                          {{ ex.sets[idx - 1].distance }}km x {{ formatSeconds(ex.sets[idx - 1].duration) }}
                        </text>
                        <text v-if="ex.exerciseType === 2">
                          {{ ex.sets[idx - 1].reps }}次
                        </text>
                        <text v-if="ex.exerciseType === 3">
                          {{ formatSeconds(ex.sets[idx - 1].duration) }}
                        </text>
                        <text v-if="ex.exerciseType === 6">
                          {{ ex.sets[idx - 1].duration }}组 x {{ formatSeconds(ex.sets[idx - 1].duration) }}
                        </text>
                        <view class="rest" v-if="ex.sets[idx - 1].restTime">
                          {{ ex.sets[idx - 1].restTime }}s
                        </view>
                      </view>
                    </template>
                  </view>
                </view>
              </view>
            </view>
          </view>


        </view>
      </view>
      <view v-else class="empty-tip">
        <text>暂无动作数据</text>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="bottom-actions">
      <template v-if="isMyPlan">
        <button class="start-btn" :class="{ 'locked': !isUnlocked }" :disabled="!isUnlocked"
          @click="startDaiTemplateTraining">
          {{ isUnlocked ? '立即开始训练' : '训练在当日解锁' }}
        </button>
        <view class="move-to" @click="openMovePopup">
          移动到
        </view>
        <view class="Icon" @click="showMorePopup = true">
          <uni-icons type="more-filled" size="22" color="#fff" />
          <view class="icon-name">更多</view>
        </view>
        <!-- 更多弹窗（原生 view 实现，精准定位） -->
        <view class="more-overlay" v-if="showMorePopup" @click="showMorePopup = false">
          <!-- 弹窗本体：精准定位在「更多」按钮上方 -->
          <view class="more-popup" @click.stop>
            <view class="more-item" @click="handleDeleteTemplate(TemplateDetail.dailyTemplateId)">
              <!-- 需要每日模板的id -->
              <uni-icons type="refresh" size="22" color="#fff"></uni-icons>
              <text class="item-text">删除此次排课</text>
            </view>
            <view class="more-item" @click.stop="confirmDelete(TemplateDetail.planId)">
              <uni-icons type="close" size="22" color="#fff"></uni-icons>
              <text class="item-text">结束整个计划</text>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <button class="start-btn" @click="startTraining">
          开始训练
        </button>
        <view class="action-group" @click="openColorPopup">
          <view class="color-circle" :style="{ backgroundColor: TemplateDetail?.backgroundcolor || '#ffd60a' }"></view>
          <text class="action-text">日历颜色</text>
        </view>
        <view class="action-group" @click="openCalendarPopup(TemplateDetail.id)">
          <uni-icons type="calendar" size="24" color="#aaa"></uni-icons>
          <text class="action-text">加入日程</text>
        </view>

      </template>
    </view>

    <!-- 设置日历颜色 -->
    <CalendarColorPicker v-model:visible="showColorPopup" :daily-template-id="TemplateDetail?.id"
      @success="handleCalendarSuccess" :is-template="true" :current-color="TemplateDetail?.backgroundcolor" />

    <!-- 添加到/移动到日历弹窗子组件 -->
    <AddToCalendarPopup ref="calendarPopupRef" :template-id="CalendarId" @success="handleCalendarSuccess"
      :is-move="isMove" />

    <!-- 详情弹窗 -->
    <dongzuoXianqing ref="actionDetailRef" />

  </view>
</template>
<script setup>
import { onMounted, ref, computed, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import TemplatesApi from '@/sheep/api/Template/Templates';
import AddToCalendarPopup from '@/pages/xunji/components/tianjia-dao-rili.vue'
import CalendarColorPicker from '@/pages/xunji/components/rili-components/CalendarColorPicker.vue'
import { useTrainingStore } from '@/sheep/store/trainingStore'
import dailytemplateApi from '@/sheep/api/Template/Dailytemplate';
import QueryPlanApi from '@/sheep/api/plan/queryplan';

import dongzuoXianqing from '@/pages/xunji/components/dongzuo-xianqing.vue';

const lostImage = "https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"

const actionDetailRef = ref(null);

const showMorePopup = ref(false)
// 响应式变量
const isStarting = ref(false);
const temid = ref('');
const isOffice = ref(false); // 用来存是否官方模板

const TemplateDetail = ref({});
const TemplateUnits = ref([]);
const calendarPopupRef = ref(null);

const showColorPopup = ref(false)

const trainingStore = useTrainingStore()

// 日历
const isMove = ref(false)
const CalendarId = ref(0)


// 计算 单个 unit 里面所有动作的总组数
const getUnitSetCount = (unit) => {
  if (!unit || !unit.exercises?.length) return 0;

  let count = 0;
  unit.exercises.forEach(item => {
    if (item.sets?.length) {
      count += item.sets.length;
    }
  });
  return count;
};

const formatSeconds = (seconds) => {
  if (!seconds || isNaN(seconds)) return '00:00:00'

  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = Math.floor(seconds % 60)

  // 自动补 0，保证两位数
  const hh = String(h).padStart(2, '0')
  const mm = String(m).padStart(2, '0')
  const ss = String(s).padStart(2, '0')

  return `${hh}:${mm}:${ss}`
}
// 
const loadtemplatedetail = async () => {
  try {
    let res;
    // 官方模板
    if (isOffice.value) {
      res = await TemplatesApi.getTemplateDetail(temid.value);
      console.log('官方模板详情：', res);
    }
    // 每日模板
    else if (isDailytemplateId.value) {
      res = await QueryPlanApi.getDailyTemplateDetail(temid.value);
      console.log('每日模板详情：', res);
      // 个人模板
    } else {
      res = await TemplatesApi.getCustTemplateDetail(temid.value);
      console.log('个人模板详情：', res);
    }
    TemplateDetail.value = res.data;
    TemplateUnits.value = res.data.units || [];
    console.log('✅  TemplateDetail.value模板详情：', TemplateDetail.value);
    console.log('✅ 模板unts详情：', TemplateUnits.value);

  } catch (err) {
    console.log('❌ 请求失败：', err);
  }
};

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 设置日历颜色
const openColorPopup = () => {
  if (!TemplateDetail.value.id) {
    uni.showToast({ title: '未找到模板ID', icon: 'none' })
    return
  }
  showColorPopup.value = true
}

// 获取超级组内所有动作中最大的组数
const getSuperSetMaxGroupCount = (exercises) => {
  if (!Array.isArray(exercises) || exercises.length === 0) return 0
  return exercises.reduce((max, ex) => {
    const len = Array.isArray(ex.sets) ? ex.sets.length : 0
    return Math.max(max, len)
  }, 0)
}


// 
const handleUnitClick = (unit) => {
  // 取当前unit的id（动作组/超级组都用这个）
  console.log('unit', unit);
  if (unit.unitType === 1) {
    const id = unit.exercises[0].exerciseId
    nextTick(() => {
      actionDetailRef.value.open(id, 1);
    });

  } else if (unit.unitType === 2) {
    const id = unit.supersetId;
    nextTick(() => {
      actionDetailRef.value.open(id, 2);
    });
  }
};

// 开始训练
const startTraining = () => {

  if (trainingStore.isTraining) {
    uni.showToast({
      title: '当前已有正在进行的训练',
      icon: 'none'
    });
    return;
  }

  trainingStore.isSystem = 1;
  trainingStore.isTraining = true;
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-dongzuo-lianxi?id=${TemplateDetail.value.id}&type=3&isTraining=true`,
  });
  console.log('打印传递给动作训练页面的模板id', TemplateDetail.id);

};
// startDaiTemplateTraining
const startDaiTemplateTraining = () => {

  if (trainingStore.isTraining) {
    uni.showToast({
      title: '当前已有正在进行的训练',
      icon: 'none'
    });
    return;
  }

  trainingStore.isSystem = TemplateDetail.value.isSystem;
  trainingStore.loadDailyTemplateForEdit(TemplateDetail.value);
  trainingStore.initDailyTemplateRecords()
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-dongzuo-lianxi?id=${TemplateDetail.value.id}&type=3&dailyTemplateId=${TemplateDetail.value.dailyTemplateId}&isTraining=true`,
  });
  console.log('开始进入每日moan训练页面，模板ID：', TemplateDetail.value.id, '每日模板ID：', TemplateDetail.value.dailyTemplateId);

  console.log('打印传递给动作训练页面的模板id', TemplateDetail.value.id);

};


const handleCalendarSuccess = () => {
  // console.log('课程已成功添加到日历');
  // 这里可以加：刷新课程状态、更新按钮文字等逻辑
  loadtemplatedetail();
};

const openCalendarPopup = (planId) => {
  console.log('点击了添加到日历按钮', planId); // 新增日志
  console.log('子组件实例', calendarPopupRef.value); // 新增日志
  CalendarId.value = TemplateDetail.value.id;
  // 测试是否有open方法
  if (calendarPopupRef.value && typeof calendarPopupRef.value.open === 'function') {
    calendarPopupRef.value.open();
  } else {
    console.error('子组件没有open方法！', calendarPopupRef.value);
  }
};
// 传递的是每日模板的id
const openMovePopup = () => {
  console.log('点击了移动到按钮'); // 新增日志
  console.log('子组件实例', calendarPopupRef.value); // 新增日志
  CalendarId.value = TemplateDetail.value.dailyTemplateId;
  console.log();

  isMove.value = true;
  // 测试是否有open方法
  if (calendarPopupRef.value && typeof calendarPopupRef.value.open === 'function') {
    calendarPopupRef.value.open();
  } else {
    console.error('子组件没有open方法！', calendarPopupRef.value);
  }
};

// 我的模板板块处理
// 删除此次排课
const handleDeleteTemplate = async (dailyTemplateId) => {
  // 先判断有没有ID
  if (!dailyTemplateId) {
    uni.showToast({ title: '未找到每日模板ID', icon: 'none' });
    return;
  }
  // 弹出确认框
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条训练记录吗？删除后无法恢复',
    confirmText: '删除',
    confirmColor: '#ff4444',
    cancelText: '取消',
    success: async (res) => {
      if (!res.confirm) return;
      try {
        await dailytemplateApi.deleteDailyTemplate(dailyTemplateId);
        uni.showToast({ title: '删除成功', icon: 'success' });
        // moreShow.value = false; // 关闭弹窗
        // 返回上一页
        setTimeout(() => uni.navigateBack(), 800)
      } catch (err) {
        console.error('删除失败', err);
        uni.showToast({ title: '删除失败，请重试', icon: 'none' });
      }
    }
  });
};
// 删除整个个人计划
const confirmDelete = async (id) => {
  try {
    console.log('打印计划个人id：', id);

    const res = await QueryPlanApi.deletePlan(id);
    console.log('删除结果：', res);

    if (res.code === 0 && res.data) {
      // 2. 删除成功，从列表移除
      // planList.value = planList.value.filter(item => item.id !== id);
      uni.showToast({ title: '计划已结束', icon: 'success' });
    } else {
      uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
    }
  } catch (err) {
    console.error('删除计划失败：', err);
    uni.showToast({ title: '网络请求失败', icon: 'none' });
  } finally {
    {
      setTimeout(() => {
        // 获取页面栈
        const pages = getCurrentPages();
        // 这里返回上上个（我的计划列表页面）
        const backNum = pages.length - 2;
        if (backNum > 0) {
          // 回退对应层数
          uni.navigateBack({
            delta: backNum
          });
        } else {
          // 兜底：页面栈不足时防止报错，直接返回我的计划列表页面
          uni.navigateTo({
            url: '/pages4/pages/xunji/xunji-wode-jihua'
          })
        }
      }, 1500)
    }
  }
};

const isUnlocked = computed(() => {
  if (!TemplateDetail.value?.trainingDate) return false

  const [year, month, day] = TemplateDetail.value.trainingDate

  const unlockDate = new Date(year, month - 1, day)

  const today = new Date()
  today.setHours(0, 0, 0, 0)
  unlockDate.setHours(0, 0, 0, 0)

  return today >= unlockDate
})

// 点击超级组内部的动作 → 打开动作详情（复用同一个组件）
const openActionItem = (item) => {
  open(item.id, 1);
};

const isMyPlan = ref(false)
const isDailytemplateId = ref(false)
const date = ref('')
// 生命周期
onLoad((options) => {

  console.log('收到日期：', options.date) // 2025-04-20
  date.value = options.date;
  temid.value = options.id;
  isOffice.value = options.isOffice === 'true';
  isMyPlan.value = options.isMyPlan === 'true';
  isDailytemplateId.value = options.isDailytemplateId === 'true'

  console.log("✅ onLoad 收到的 options:", options); // 先看整个 options 里有什么
  console.log("模板ID：", temid.value);
  console.log("是否官方：", isOffice);
  console.log("是否是我的模板：", isDailytemplateId.value);


  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: space-between; // 文字靠左，图片靠右
  align-items: center; // 垂直居中
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #333;
  gap: 20rpx;
  // margin: 40rpx;

  .unit-title {
    color: #fff;
    margin-left: 10rpx;


    .PartTool {
      font-size: 20rpx;
    }

    .totalSetCount {
      font-size: 20rpx;
    }

  }
}

.left {
  display: flex;
  gap: 12rpx;
}

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

.unit-icon {
  width: 150rpx; // 匹配你截图的橙色方块大小
  height: 150rpx;
  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;
  left: 5rpx;
}

.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;
  gap: 20rpx;
}

.detail-label {
  background: #4e4e4e;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 24rpx;
  flex-shrink: 0;
}

.sets-data {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .rest {
    font-size: 24rpx;
  }
}


// 超级组列表数据
super-actionName .name-item {
  gap: 10rpx;
}

.letter {
  margin-right: 10rpx;
}

.super-set-item {
  display: flex; // 水平排列
  padding: 16rpx 0;


  .detail-label {
    margin-right: 10rpx;
    margin-top: 4rpx;
  }
}

// .set-column {
//   display: flex;
// }
.set-column {
  flex: 1;
}

.action-in-set {
  display: flex;
  flex: 1;
  gap: 10rpx;
}

.set-content {
  display: flex;
  gap: 10rpx;
  justify-content: space-between;
  flex: 1;
  align-items: center;

  .rest {
    font-size: 24rpx;
  }

}



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

/* --- 底部按钮 --- */
.bottom-actions {
  display: flex;
  justify-content: space-between;
  /* 左右分散 */
  align-items: center;
  /* 垂直居中 */
  padding: 30rpx 40rpx;
  /* 左右内边距加大，让整体更宽松 */
  background-color: #000;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #333;
  gap: 40rpx;
  /* 右侧两个操作项之间的间距（核心） */
}

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

  // 新增：未解锁状态样式（和例图一致）
  &.locked {
    background-color: #333; // 深灰色背景
    color: #666; // 浅灰色文字
    opacity: 0.7; // 整体透明度降低
    pointer-events: none; // 即使没加 disabled，也禁止点击（双重保险）
  }

}

.move-to {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200rpx;
  height: 80rpx;
  background-color: #ffffff;
  color: #000;
  font-size: 30rpx;
  font-weight: bold;
  border-radius: 40rpx;
  border: none;
  outline: none;
}


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


// 更多弹窗遮罩
.more-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

// 更多弹窗本体：精准定位在右下角「更多」按钮上方
.more-popup {
  position: fixed;
  right: 30rpx;
  /* 距离右侧距离 */
  bottom: 130rpx;
  /* 距离底部按钮高度（可微调） */
  width: 300rpx;
  background-color: #333;
  border-radius: 16rpx;
  overflow: hidden;
  z-index: 1000;

  .more-item {
    display: flex;
    align-items: center;
    padding: 24rpx 28rpx;
    gap: 16rpx;

    .item-text {
      font-size: 28rpx;
      color: #fff;
    }
  }

  // 分割线
  .more-item+.more-item {
    border-top: 1rpx solid #444;
  }
}

.action-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* 不需要额外 margin，靠父级 gap 控制间距 */

  .color-circle {
    width: 40rpx;
    height: 40rpx;
    background: rgb(211, 43, 169);
    border-radius: 50%;
    margin-bottom: 10rpx;
    border: 2rpx solid #fff;
  }

  .Icon {
    display: flex;
    flex-direction: column;
  }

  // 更多弹窗本体：精准定位在右下角「更多」按钮上方
  .more-popup {
    position: fixed;
    right: 30rpx;
    /* 距离右侧距离 */
    bottom: 130rpx;
    /* 距离底部按钮高度（可微调） */
    width: 300rpx;
    background-color: #333;
    border-radius: 16rpx;
    overflow: hidden;
    z-index: 1000;

    .more-item {
      display: flex;
      align-items: center;
      padding: 24rpx 28rpx;
      gap: 16rpx;

      .item-text {
        font-size: 28rpx;
        color: #fff;
      }
    }

    // 分割线
    .more-item+.more-item {
      border-top: 1rpx solid #444;
    }
  }
}

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

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