<template>
  <view class="container">
    <!-- #ifdef MP-WEIXIN -->
    <up-navbar placeholder bgColor="transparent">
      <template #left>
        <view></view>
      </template>
    </up-navbar>
    <!-- #endif -->
    <view class="status-header">
      <view class="timer-box" @click="show = true">
        <text class="time">{{ formattedTime.substring(3) }}</text>
        <view class="triangle-icon"></view>
      </view>
      <view class="finish-btn" @click="save">完成</view>
    </view>

    <view class="action-list">
      <view class="header">
        <view class="title-left" @click="openTrainingNamePopup">
          <up-icon name="edit-pen" color="#8e8e93" size="22"></up-icon>
          <text class="title-name">{{ trainingName }}</text>
        </view>
        <text class="title-stats">
          {{ (trainingStore.actionDetail?.units || []).length }} 个动作· {{ totalSets }}组 · {{ totalCheckedWeight }}/{{
            allTotalWeight }}kg
        </text>
      </view>
      <!-- 3. 模板训练 type=3 循环 -->
      <template v-if="trainingStore.actionDetail?.units?.length">
        <view v-for="(unit, index) in trainingStore.actionDetail?.units" :key="unit.unitId">
          <dongzuo :id="unit.unitId" :type="unit.unitType" :actionDetail="trainingStore.convertUnitToActionDetail(unit)"
            :ref="el => setActionRef(el, index)" :unitIndex="index" :is-daily-templates="false" />
        </view>
      </template>

      <!-- 没有动作时的空状态提示 -->
      <view v-else class="empty-state">
        <text class="empty-text">尚未添加任何动作</text>
        <text class="empty-subtext">点击最下方 + 开始添加动作</text>
      </view>

      <!-- 完成按钮 -->
      <view class="finish-btn" @click="save">完成</view>
    </view>

    <view v-if="!trainingStore.actionDetail?.units?.length" class="tip-bubble">
      <text>挑选想要的动作开始训练吧</text>
    </view>

    <view class="footer-bar">
      <view class="footer-item" @click="openActionSort">
        <text class="count">{{ trainingStore.actionDetail?.units?.length || 0 }}</text>
        <text class="label">动作排序</text>
      </view>
      <view class="footer-item" @click="openSummaryPopup">
        <up-icon name="edit-pen" color="#fff" size="24"></up-icon>
        <text class="label">写总结</text>
      </view>
      <view class="add-btn-wrapper">
        <view class="add-btn" @click="addActionsPopup">
          <up-icon name="plus" color="#000" size="20" bold></up-icon>
        </view>
      </view>
      <view class="footer-item" @click="openMin">
        <up-icon name="minus-square-fill" color="#fff" size="24"></up-icon>
        <text class="label">最小化</text>
      </view>
      <view class="footer-item" @click="deleteTraining">
        <up-icon name="trash" color="#fff" size="24"></up-icon>
        <text class="label">删除</text>
      </view>
    </view>

    <!-- 设置训练时间弹窗 -->
    <up-popup :show="show" mode="top" @close="show = false" :safeAreaInsetBottom="false" safeAreaInsetTop
      bgColor="#2c2c2e">
      <view class="time-pop-container">
        <view class="pop-content">
          <view class="pop-title">设置训练时间</view>

          <view class="setting-grid">
            <view class="grid-item flex-2" @click="datePickerShow = true">
              <text class="group-label">训练日期</text>
              <view class="dark-input-card">
                <text>{{ trainingDateText }}</text>
              </view>
            </view>
            <view class="grid-item flex-1" @click="timePickerShow = true">
              <text class="group-label">起始时间</text>
              <view class="dark-input-card">
                <text>{{ trainingTimeText }}</text>
              </view>
            </view>
          </view>

          <view class="sub-tips">可点击输入框修改训练日期和起始时间</view>

          <view class="section-title">训练时长计时</view>

          <view class="dark-input-card timer-card">
            <view class="timer-left" @click="handleTimerClick">
              <text class="timer-num" :class="{ active: !isPause }">{{ formattedTime }}</text>
              <text class="timer-status" :class="{ active: !isPause }">
                {{ isPause ? '已暂停 (点击修改数值)' : '自动计时中' }}
              </text>
            </view>
            <view class="timer-right">
              <view class="action-btn gray-btn" v-if="isPause" @click="resetTimer">重置</view>
              <view class="action-btn green-btn" :class="{ active: !isPause, bgactve: !isPause }" @click="toggleTimer">
                {{ isPause ? '继续计时' : '暂停计时' }}
              </view>
            </view>
          </view>
          <view class="sub-tips">可暂停计时后手动修改实际训练时长</view>

          <view class="pull-handle" @click="show = false"></view>
        </view>
      </view>
    </up-popup>

    <!-- 设置训练日期 -->
    <up-datetime-picker :show="datePickerShow" v-model="dateValue" mode="date" closeOnClickOverlay
      @confirm="confirmDate" @cancel="datePickerShow = false" @close="datePickerShow = false">
    </up-datetime-picker>

    <!-- 设置起始时间 -->
    <up-datetime-picker :show="timePickerShow" v-model="timeValue" mode="time" closeOnClickOverlay
      @confirm="confirmTime" @cancel="timePickerShow = false" @close="timePickerShow = false">
    </up-datetime-picker>

    <!-- 设置训练时长计时 -->
    <up-picker :show="showPicker" :columns="timeColumns" :defaultIndex="defaultTimeIndex" title="修改训练时长"
      @confirm="onTimeConfirm" @cancel="showPicker = false" closeOnClickOverlay>
    </up-picker>


    <action-sort ref="actionSortRef" @open-add-actions="addActionsShow = true" />

    <!-- 写总结弹窗 -->
    <up-popup :show="summaryShow" @close="summaryShow = false" mode="bottom" :safeAreaInsetBottom="false">
      <view class="summaryPopup">
        <view class="popup-header">
          <text class="popup-title">本次训练总结</text>
          <view class="save-btn" @click="saveSummary">保存</view>
        </view>
        <textarea class="summary-textarea" v-model="summaryContent" placeholder="记录本次训练感悟" />
      </view>
    </up-popup>
    <!-- 命名弹窗 -->
    <up-popup :show="inputNameShow" @close="inputNameShow = false" mode="bottom" :safeAreaInsetBottom="false">
      <view class="namePopup">
        <view class="popup-header">
          <text class="popup-title">训练名称</text>
          <view class="save-btn" @click="saveTrainingName">保存</view>
        </view>
        <textarea v-model="trainingStore.trainingName" class="name-input" placeholder="请输入训练名称"
          placeholder-color="#8e8e93" color="#fff" />
      </view>
    </up-popup>
    <!-- 动作新增组件 -->
    <addActions :show="addActionsShow" @close="addActionsShow = false" />

  </view>
</template>

<script setup>
import { ref, reactive, computed, onBeforeUnmount, onMounted, nextTick, onUnmounted, watch } from 'vue';
import dongzuo from '@/pages/xunji/components/dongzuo-lianxi/dongzuo.vue';
import { onLoad } from "@dcloudio/uni-app"
import TrainingApi from '@/sheep/api/Training/traininghistory'
import dailytemplateApi from '@/sheep/api/Template/Dailytemplate';
import { useTrainingStore } from '@/sheep/store/trainingStore'
import addActions from '@/pages/xunji/components/dongzuo-lianxi/add-actions.vue'
import ActionSort from '@/pages/xunji/components/dongzuo-lianxi/dongzuo-paixu.vue'

const trainingStore = useTrainingStore()
const hasConverted = ref(false);
const addActionsShow = ref(false)
const ActionRef = ref(null)
// --- 计时核心逻辑 ---
const totalSeconds = computed(() => trainingStore.totalSeconds);
const isPause = computed(() => trainingStore.isPause);
const showPicker = computed(() => trainingStore.showPicker);
const defaultTimeIndex = computed(() => trainingStore.defaultTimeIndex);


const groupCount = ref(0)
const summaryShow = ref(false)
const summaryContent = ref('')
// 训练名称
const inputNameShow = ref(false)
const trainingName = computed(() => trainingStore.trainingName)

const actionSortRef = ref(null)

watch(
  () => trainingStore.isTraining,
  (newVal, oldVal) => {
    console.log('训练状态变化：', oldVal, '→', newVal)
    if (newVal) {
      // 正在训练逻辑
    } else {
      // 结束训练逻辑
    }
  },
  { immediate: true } // 页面初始化立即执行一次
)

// 动作排序弹窗
const openActionSort = () => {
  console.log('调用前,ref 的值：', actionSortRef.value)
  actionSortRef.value.openActionSort()
}

onLoad(async (options) => {

  console.log('✅ 动作练习页面 onLoad 中的 options：', options);


  const id = Number(options.id);
  const type = Number(options.type);
  const isTraining = options.isTraining === 'true';
  trainingStore.isTraining = isTraining;

  console.log('✅动作练习页面 onLoad 中的 options：', options);


  const dailyTemplateId = options.dailyTemplateId ? Number(options.dailyTemplateId) : null;
  trainingStore.dailyTemplateId = dailyTemplateId;
  console.log('接收到的 dailyTemplateId：', dailyTemplateId);
  // 直接让 store 去请求 + 保存数据
  if (!dailyTemplateId) {
    await trainingStore.loadTrainingDetail(id, type);
  }

  if (type === 3) {
    dongzuoRefs.value = [];
  }
  if (!hasConverted.value) {
    trainingStore.convertToTemplate();
    hasConverted.value = true;
    console.log('✅ 已完成模板转换（仅执行一次）', trainingStore.actionDetail);
  }
  console.log('在主页面转换为模板架构后的全局数据', trainingStore.type, trainingStore.actionDetail)
  initTrainingName();

  //动态初始化训练日期为当天
  const today = new Date();
  const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][today.getDay()];
  if (!trainingStore.trainingTimeText) {
    const now = new Date();
    const timeStr = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
    trainingStore.setTrainingTimeText(timeStr);
  }

  console.log('✅ 动态初始化训练日期：', trainingStore.trainingTimeText);
});



const initTrainingName = () => {
  const name = trainingStore.actionDetail?.templateName || '训练';
  trainingStore.setTrainingName(name); // 存进 Pinia
};
// 全部的组数
const totalSets = computed(() => {
  let count = 0
  dongzuoRefs.value.forEach(ref => {
    if (ref?.totalSetCount) count += ref.totalSetCount
  })
  return count
})

// 已勾选的总重量
const totalCheckedWeight = computed(() => {
  let sum = 0
  dongzuoRefs.value.forEach(ref => {
    if (ref?.checkedWeight) sum += ref.checkedWeight
  })
  return sum
})

// 所有组的总重量
const allTotalWeight = computed(() => {
  let sum = 0
  dongzuoRefs.value.forEach(ref => {
    if (ref?.totalWeight) sum += ref.totalWeight
  })
  return sum
})

// 获得子组件模板的数据
const dongzuoRefs = ref([])
const setActionRef = (el, index) => {
  if (el) {
    dongzuoRefs.value[index] = el
  }
  // console.log('✅ 成功收集子组件实例：', dongzuoRefs.value)
}



// 打开/关闭总结弹窗
const openSummaryPopup = () => {
  summaryShow.value = true
  summaryContent.value = '' // 打开时清空内容
}

// 保存总结
const saveSummary = () => {
  console.log('保存的训练总结：', summaryContent.value)
  summaryShow.value = false
  summaryContent.value = ''
}

// 打开命名弹窗
const openTrainingNamePopup = () => {
  inputNameShow.value = true;
};

// 保存训练名称
const saveTrainingName = () => {
  trainingStore.setTrainingName(trainingStore.trainingName);
  if (trainingStore.actionDetail) {
    trainingStore.actionDetail.templateName = trainingStore.trainingName;
  }
  inputNameShow.value = false;
};

// 格式化时间
const formattedTime = computed(() => {
  const h = Math.floor(totalSeconds.value / 3600)
    .toString()
    .padStart(2, '0');
  const m = Math.floor((totalSeconds.value % 3600) / 60)
    .toString()
    .padStart(2, '0');
  const s = (totalSeconds.value % 60).toString().padStart(2, '0');
  return `${h}:${m}:${s}`;
});
// 继续或者暂停计时
const toggleTimer = () => trainingStore.toggleTimer();
// 重置时间
const resetTimer = () => trainingStore.resetTimer();

// --- Picker 修改时间 ---


const timeColumns = reactive([
  Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0') + '时'),
  Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0') + '分'),
  Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0') + '秒'),
]);

const handleTimerClick = () => {
  if (isPause.value) {
    trainingStore.openTimePicker();
  }
};

const onTimeConfirm = (e) => {
  const rawValues = e.value.map((val) => parseInt(String(val).replace(/[时分秒]/g, '')));
  const seconds = rawValues[0] * 3600 + rawValues[1] * 60 + rawValues[2];
  trainingStore.setTotalSeconds(seconds);
  trainingStore.closeTimePicker();
};
// --- 基础弹窗 ---
const show = ref(false);
const datePickerShow = ref(false);
const timePickerShow = ref(false);

const dateValue = ref(Number(new Date()));
const timeValue = ref('14:13');
const trainingDateText = ref('2026-04-26 周日');
// const trainingTimeText = ref('14:13');
// const trainingTimeText = ref(new Date().getHours().toString().padStart(2, '0') + ':' + new Date().getMinutes().toString().padStart(2, '0'));
const trainingTimeText = computed(() => trainingStore.trainingTimeText);

const confirmDate = (e) => {
  const date = new Date(e.value);
  const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()];
  trainingDateText.value = `${date.getFullYear()}-${(date.getMonth() + 1)
    .toString()
    .padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${week}`;
  datePickerShow.value = false;
};

const confirmTime = (e) => {
  trainingStore.setTrainingTimeText(e.value);
  timePickerShow.value = false;
};

const save = async () => {
  await nextTick()
  let units = []

  const unitList = trainingStore.actionDetail.units || []
  console.log('✅ 最终要提交的 unitList：', unitList)
  console.log('✅ 子组件实例 tempList：', dongzuoRefs.value)

  for (let i = 0; i < unitList.length; i++) {
    const unit = unitList[i]
    const child = dongzuoRefs.value[i]

    if (!child) {
      console.warn(`第 ${i} 个动作组件未获取到！`)
      continue
    }

    // ==========================
    // 1. 单个动作
    // ==========================
    if (unit.unitType === 1) {
      if (!child.recordList) continue

      const exerciseType = unit.exercises[0].exerciseType
      console.log(`\n🔹 第 ${i} 个动作 - 运动类型 =`, exerciseType) // 👈 打印运动类型

      const exercises = [{
        exerciseId: unit.exercises[0].exerciseId,
        exerciseType: exerciseType,
        sets: child.recordList.map((item, index) => {
          let duration = 0
          let restTime = 0

          // ==============================================
          // 判断是不是间歇运动
          // ==============================================
          if (exerciseType === 6) {
            // ✅ 间歇运动：取你输入的 duration、restTime
            duration = Number(item.duration) || 0
            restTime = Number(item.restTime) || 0
            console.log(`✅ 组 ${index + 1}【间歇运动】输入的值：`, {
              duration: item.duration,
              restTime: item.restTime,
              reps: item.reps
            }) // 控制台打印
          } else {
            // ✅ 普通运动：保持原来逻辑
            duration = Number(item.h) * 3600 + Number(item.m) * 60 + Number(item.s) || 0
            restTime = parseInt(item.quickTimeDisplay) || 0
          }

          return {
            weight: Number(item.weight) || 0,
            reps: Number(item.reps) || 0,
            distance: Number(item.distance) || 0,
            duration: duration,
            restTime: restTime,
            setIndex: index + 1
          }
        })
      }]
      units.push({
        name: i === 0 ? trainingName.value : unit.unitName,
        unitType: 1,
        exercises
      })
    }

    // ==========================
    // 2. 超级组
    // ==========================
    else if (unit.unitType === 2) {
      if (!child.superRecordMap) continue

      const exercises = unit.exercises.map((sub, idx) => {
        const setList = child.superRecordMap[sub.exerciseId] || []
        const subExerciseType = sub.exerciseType

        console.log(`超级组子动作 ${idx + 1} - 运动类型 =`, subExerciseType)

        return {
          exerciseId: sub.exerciseId,
          exerciseType: subExerciseType,
          innerOrder: idx + 1,
          sets: setList.map((item, index) => {
            let duration = 0
            let restTime = 0

            // ==============================================
            // 超级组里的间歇运动
            // ==============================================
            if (subExerciseType === 6) {
              duration = Number(item.duration) || 0
              restTime = Number(item.restTime) || 0
              console.log(`组 ${index + 1}【超级组间歇运动】输入的值：`, {
                duration: item.duration,
                restTime: item.restTime,
                reps: item.reps
              }) // 控制台打印
            } else {
              duration = Number(item.h) * 3600 + Number(item.m) * 60 + Number(item.s) || 0
              restTime = parseInt(item.quickTimeDisplay) || 0
            }

            return {
              weight: Number(item.weight) || 0,
              reps: Number(item.reps) || 0,
              distance: Number(item.distance) || 0,
              duration: duration,    // 修复后
              restTime: restTime,    // 修复后
              setIndex: index + 1
            }
          })
        }
      })
      units.push({
        name: i === 0 ? trainingName.value : unit.unitName,
        unitType: 2,
        exercises
      })
    }
  }

  console.log('\n最终提交后台的完整数据：', JSON.stringify(units, null, 2))

  if (units.length === 0) {
    uni.showToast({ title: '未获取到训练数据', icon: 'none' })
    return
  }

  console.log('trainingStore.isTraining=', trainingStore.isTraining);

  try {
    // ✅ 情况1：【去训练】→ 保存历史
    if (trainingStore.isTraining) {
      await TrainingApi.createTrainHistory({ units });
      uni.showToast({ title: '训练提交成功', icon: 'success' });
    }
    // ✅ 情况2：【编辑模板】→ 更新模板
    else if (trainingStore.type === 3 && trainingStore.dailyTemplateId) {
      await dailytemplateApi.updateDailyTemplate({
        dailyTemplateId: trainingStore.dailyTemplateId,
        units: units
      });
      uni.showToast({ title: '模板修改成功', icon: 'success' });
    }
    // ✅ 情况3：普通训练
    else {
      await TrainingApi.createTrainHistory({ units });
      uni.showToast({ title: '训练提交成功', icon: 'success' });
    }

    setTimeout(() => {
      uni.navigateBack();
      trainingStore.clearTrainingStore();
    }, 1500)
    trainingStore.clearTrainingStore()
  } catch (err) {
    console.error('❌ 保存失败：', err)
    uni.showToast({ title: '保存失败', icon: 'none' })
  }
}
// 删除训练
const deleteTraining = () => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除本次训练记录吗？删除后无法恢复',
    confirmText: '确认删除',
    confirmColor: '#FF3B30', // 红色强调删除
    cancelText: '取消',
    success: (res) => {
      // 用户点击确认
      if (res.confirm) {
        uni.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 1500
        });
        setTimeout(async () => {
          uni.navigateBack();
          await nextTick();
          trainingStore.clearTrainingStore()
        }, 1500);
      }
      else if (res.cancel) {
        console.log('用户取消删除');
      }
    }
  });
};
// 动作新增组件
const addActionsPopup = () => {
  console.log('打开新增弹窗');
  addActionsShow.value = true  // 打开弹窗

}

// 最小化
const openMin = () => {
  console.log('最小化跳转前trainingStore.isTraining', trainingStore.isTraining);
  console.log('trainingStore.min+++++++++++++', trainingStore.min);

  console.log('最小化跳转后trainingStore.isTraining', trainingStore.isTraining);
  trainingStore.min = true;
  // uni.navigateTo({
  //   url: '/pages/xunji/components/xunji-dongzuo', // 改成你训练页面的实际路径
  // });
  console.log('++++++++++++++最小化开始trainingStore.min+++++++++++++', trainingStore.min);

  uni.navigateBack();
}

onUnmounted(() => {
  // trainingStore.clearTrainingStore()
})

</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #1c1c1e;
  padding-bottom: 120rpx;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;

  .timer-box {
    display: flex;
    align-items: center;
    background-color: #2c2c2e;
    padding: 10rpx 24rpx;
    width: 120rpx;
    border-radius: 40rpx;
    position: relative;

    .time {
      color: #fff;
      font-weight: bold;
      font-size: 32rpx;
      margin-right: 8rpx;
    }

    .triangle-icon {
      position: absolute;
      right: 20rpx;
      bottom: 15rpx;
      transform: rotate(-50deg);
      width: 0;
      height: 0;
      border-left: 10rpx solid transparent;
      border-right: 10rpx solid transparent;
      border-top: 12rpx solid #fbdf09;
    }
  }

  .finish-btn {
    background-color: #fbdf09;
    color: #000;
    padding: 10rpx 40rpx;
    border-radius: 30rpx;
    font-weight: bold;
    font-size: 28rpx;
  }
}

.action-list {
  padding: 20rpx;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title-left {
      display: flex;
      align-items: center;

      .title-name {
        color: #fff;
        font-size: 36rpx;
        font-weight: bold;
        margin-left: 10rpx;
      }
    }

    .title-stats {
      color: #8e8e93;
      font-size: 24rpx;
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
  color: #8e8e93;
  text-align: center;

  .empty-text {
    font-size: 32rpx;
    margin-bottom: 16rpx;
  }

  .empty-subtext {
    font-size: 28rpx;
  }
}

/* 👇 底部气泡提示样式 */
.tip-bubble {
  position: fixed;
  bottom: 230rpx; // 刚好在底部导航上方
  left: 52%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  z-index: 9999;

  // 小三角
  &::after {
    content: '';
    position: absolute;
    bottom: -10rpx;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10rpx solid transparent;
    border-right: 10rpx solid transparent;
    border-top: 10rpx solid #000;
  }
}

.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110rpx;
  background-color: #2c2c2e;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99;

  .footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .count {
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
    }

    .label {
      color: #8e8e93;
      font-size: 20rpx;
      margin-top: 4rpx;
    }
  }

  .add-btn-wrapper {
    margin-top: -60rpx;
    width: 120rpx !important;
    /* 必须加 */
    height: 120rpx !important;
    /* 必须加 */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 9999 !important;
    /* 必须加 */
  }

  .add-btn {
    width: 100rpx;
    height: 100rpx;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 99999 !important;
    /* 必须加 */
  }

  // 
}

.time-pop-container {
  padding: 40rpx 30rpx;
  color: #fff;

  .pop-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
  }

  .setting-grid {
    display: flex;
    gap: 20rpx;

    .flex-2 {
      flex: 2;
    }

    .flex-1 {
      flex: 1;
    }

    .group-label {
      font-size: 24rpx;
      color: #8e8e93;
      margin-bottom: 12rpx;
      display: block;
    }
  }

  .dark-input-card {
    background-color: #1c1c1e;
    padding: 24rpx;
    border-radius: 12rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sub-tips {
    font-size: 22rpx;
    color: #636366;
    margin-top: 16rpx;
    margin-bottom: 40rpx;
  }

  .section-title {
    font-size: 26rpx;
    color: #8e8e93;
    margin-bottom: 12rpx;
  }

  .timer-card {
    justify-content: space-between;
    padding: 20rpx 15rpx;
    height: 80rpx;
    box-sizing: border-box;

    .timer-left {
      display: flex;
      align-items: center;
      gap: 20rpx;
      padding-left: 30rpx;

      .timer-num {
        font-size: 30rpx;
        font-family: monospace;
      }

      .timer-status {
        font-size: 22rpx;
      }
    }

    .timer-right {
      display: flex;
      gap: 16rpx;

      .action-btn {
        height: 60rpx;
        padding: 0 20rpx;
        line-height: 60rpx;
        border-radius: 8rpx;
        font-size: 22rpx;
        font-weight: bold;
      }

      .gray-btn {
        background-color: #454545;
        color: #fff;
      }

      .green-btn {
        background-color: #213929;
        color: #2f9f3f;
      }

      .bgactve {
        background-color: #4c4d3b;
      }

      .active {
        color: #fbdf09;
      }
    }
  }

  .pull-handle {
    width: 80rpx;
    height: 8rpx;
    background-color: #48484a;
    border-radius: 4rpx;
    margin: 40rpx auto 0;
  }
}


// 写总结弹窗样式
.summaryPopup {
  width: 100vw;
  height: 75vh;
  background-color: #2c2c2e;
  border-radius: 24rpx;
  overflow: hidden;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    box-sizing: border-box;

    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #ffffff;
    }

    .save-btn {
      background-color: #f8d714;
      color: #000000;
      font-size: 28rpx;
      font-weight: 500;
      padding: 12rpx 30rpx;
      border-radius: 30rpx;
    }
  }

  .summary-textarea {
    width: calc(100% - 60rpx);
    margin: 0 30rpx 30rpx;
    min-height: 300rpx;
    background-color: #1f1f1f;
    border-radius: 12rpx;
    padding: 20rpx;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 28rpx;
    line-height: 1.5;

    &::placeholder {
      color: #8e8e93;
    }
  }
}

// 训练命名弹窗样式（与总结弹窗风格完全统一）
.namePopup {
  width: 100%;
  height: 75vh;
  background-color: #2c2c2e;
  border-radius: 24rpx;
  overflow: hidden;
  padding: 30rpx;
  box-sizing: border-box;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #ffffff;
    }

    .save-btn {
      background-color: #f8d714;
      color: #000000;
      font-size: 28rpx;
      font-weight: 500;
      padding: 12rpx 30rpx;
      border-radius: 30rpx;
    }
  }

  .name-input {
    width: calc(100% - 60rpx); // 关键：设置宽度，让它左右留空，不贴边
    margin: 0 auto; // 关键：水平居中
    background-color: #1f1f1f;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #fff;
    min-height: 220rpx; // 可选：增加一点高度，和例图更像

    &::placeholder {
      color: #8e8e93;
    }
  }
}
</style>