<template>
  <up-popup :show="show" mode="bottom" round="16" @close="show = false" :safeAreaInsetBottom="false">
    <view class="container">
      <!-- 顶部日期栏 -->
      <view class="header-bar">
        <view class="close-btn" @click="closeCellPopup">
          <uni-icons type="down" size="24" color="#333"></uni-icons>
        </view>
        <view class="date-wrapper">
          <text class="date-text">{{ displayDate }}</text>
        </view>
        <button class="date-note-btn" @click.stop="handleDateNote">日期备注</button>
        <button class="go-train-btn" @click.stop="startTraining">
          <text class="go-train-text">去训练</text>
          <text class="go-train-tag">GO</text>
        </button>
      </view>


      <!-- 日常备注 -->
      <view class="noteContent" v-if="noteList.length > 0">
        <text class="noteTitle">日程备注：</text>
        <view class="noteTags">
          <view class="noteTag" v-for="(item, idx) in noteList" :key="item.id"
            :style="{ backgroundColor: item.backgroundColor }" @click="handleEditNote(item)">
            {{ item.content }}
          </view>
        </view>
      </view>

      <template v-if="resdailyData.length > 0">
        <scroll-view class="plan-tabs" scroll-x v-if="resdailyData.length > 1">
          <button class="tab-btn" :class="{ active: currentPlanIndex === index }" v-for="(item, index) in resdailyData"
            :key="index" @click.stop="switchPlan(index)">
            训记{{ index + 1 }}
          </button>
        </scroll-view>
        <!-- 接口获取当天的多个训练计划 → 放进 resdailyData，currentPlan 自动变成 resdailyData[0] 一个模板-->
        <!-- 训练内容区域 -->
        <view v-if="resdailyData.length > 0 && currentPlan" class="training-container">
          <view class="unitCart">
            <!-- 训练计划头部卡片 -->
            <view class="plan-header-card">
              <image class="plan-header-img" :src="currentPlan?.urlCover" mode="aspectFill"></image>
              <view class="plan-header-info">
                <view class="plan-header-top">
                  <text class="plan-title">{{ currentPlan?.name || '训练模板' }}</text>
                  <view class="editButton" @click.stop="templateEdit(currentPlan)">
                    编辑
                    <u-icon name="arrow-right" size="14" color="#fff"></u-icon>
                  </view>
                </view>
                <text class="plan-meta">{{ currentPlan?.exerciseCount }}个动作 · {{ currentPlan?.totalSets }}组 ·
                  {{ currentPlan?.totalWeight }}kg</text>
              </view>
              <view class="plan-header-btns">
                <button class="plan-btn more-btn" @click.stop="handlePlanMore">更多</button>
                <button class="plan-btn copy-btn" @click.stop="openCalendarPopup(currentPlan?.templateId)">复制到</button>
                <button class="plan-btn go-train-btn-small" @click.stop="handleTrainAgain">
                  <text class="go-train-text-sm">今日再练</text>
                  <!-- <text class="go-train-tag-sm">GO</text> -->
                </button>
              </view>
            </view>

            <!-- 训练动作列表 → 循环 units -->
            <view class="action-list">
              <!-- 循环 unit（动作/超级组） -->
              <view class="unit-wrapper" v-for="(unit, unitIdx) in currentPlan.units" :key="unit.unitId">
                <!-- 情况1：普通动作 unitType=1 -->
                <view v-if="unit.unitType === 1 && unit.exercises && unit.exercises.length" class="action-item">
                  <!-- 左侧：序号 + 图片 -->
                  <view class="action-left">
                    <text class="action-index">{{ unitIdx + 1 }}</text>
                    <image class="action-img"
                      :src="unit.exercises[0]?.url3dAnimation || 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260513/7083811_204153238103_2_1778663658195.jpg'"
                      mode="aspectFill"></image>
                  </view>
                  <!-- 中间：名称 + 重量 + 组次行 -->
                  <view class="action-middle">
                    <!-- 上半部分：名称、重量 → 左对齐 -->
                    <view class="action-top">
                      <text class="action-name">{{ unit.exercises[0]?.exerciseName || '动作名称' }}</text>
                      <text class="action-totalWeight">{{ unit.totalWeight
                        }}kg</text>
                    </view>

                    <!-- 下半部分：组次行 → 向左对齐图片 ✅核心-->
                    <view class="action-bottom">
                      <view class="action-sets">
                        <view class="set-item" v-for="(set, setIdx) in unit.exercises[0]?.sets || []" :key="setIdx">
                          <!-- 新增：把左边所有内容包起来 -->
                          <view class="set-left" :style="{ color: set.isCompleted === 1 ? '#333' : '#a2a2a2' }">
                            <!-- <text class="indexData">{{ setIdx + 1 }}</text> -->
                            <text class="set-content" v-if="unit.exercises[0].exerciseType === 0">
                              {{ set.weight }}kg × {{ set.reps }}次
                            </text>
                            <text class="set-content" v-if="unit.exercises[0].exerciseType === 1">
                              {{ formatSecondsToHms(set.duration) }} × {{ set.distance }}km
                            </text>
                            <text class="set-content" v-if="unit.exercises[0].exerciseType === 2">
                              {{ set.reps }}次
                            </text>
                            <text class="set-content" v-if="unit.exercises[0].exerciseType === 3">
                              {{ formatSecondsToHms(set.duration) }}
                            </text>
                            <text class="set-content" v-if="[4, 5].includes(unit.exercises[0].exerciseType)">
                              {{ set.weight }}kg x {{ set.duration }}s x {{ set.restTime }}
                            </text>
                            <text class="set-content" v-if="unit.exercises[0].exerciseType === 6">
                              {{ set.reps }}次 x {{ formatSecondsToHms(set.duration) }}
                            </text>
                            <text class="rest-time" v-if="set.restTime && unit.exercises[0].exerciseType != 6">
                              {{ set.restTime || 0 }}s
                            </text>
                          </view>
                          <text class="check" v-if="set.isCompleted === 1">✓</text>
                        </view>
                      </view>
                    </view>
                  </view>

                  <!-- 右侧：修改按钮 + 完成对勾 -->
                  <view class="action-right" @click="openXiuGai(unit, unitIdx)">
                    <button class="modify-btn">修改</button>
                    <!-- <view class="check-icon">✓</view> -->
                  </view>
                </view>
                <!-- 情况2：超级组 unitType=2 -->
                <view v-else-if="unit.unitType === 2" class="superset-wrapper">
                  <view class="super-head">
                    <text class="action-index">{{ unitIdx + 1 }}</text>
                    <image class="super-image"
                      src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260507/超级组_1778117889451.png"
                      mode="aspectFill">
                    </image>
                    <view class="super-title-wrap">
                      <text class="super-title">{{ unit.unitName || '超级组' }}</text>
                      <text class="super-totalWeight" v-if="unit.totalWeight > 0">
                        {{ unit.totalWeight }}kg
                      </text>
                    </view>
                    <button class="modify-btn" @click="openXiuGai(unit, unitIdx)">修改</button>
                  </view>
                  <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>
                  <!-- 超级组的组列表：按「组号」循环 -->
                  <view class="super-set-list">
                    <!-- 取第一个动作的组数作为总组数 -->
                    <view class="super-set-item" v-for="(setIdx, idx) in (unit.exercises[0]?.sets || [])" :key="idx">
                      <text class="set-number">{{ idx + 1 }}</text>
                      <view class="set-column">
                        <view class="action-in-set" v-for="(ex, exIdx) in unit.exercises" :key="ex.exerciseId">
                          <!-- 处理当前组是否存在，避免渲染不存在的组 -->
                          <template v-if="ex.sets[idx]">
                            <view class="action-letter"
                              :style="{ color: ex.sets[idx].isCompleted === 1 ? '#999' : '#a2a2a2' }">
                              {{ idx + 1 }}{{ String.fromCharCode(65 + exIdx) }}
                            </view>

                            <view class="set-content"
                              :style="{ color: ex.sets[idx].isCompleted === 1 ? '#333' : '#a2a2a2' }">
                              <!-- 适配不同动作类型的显示文本 -->
                              <text v-if="ex.exerciseType === 0">
                                {{ ex.sets[idx].weight }}kg × {{ ex.sets[idx].reps }}次
                              </text>
                              <text v-if="ex.exerciseType === 1">
                                {{ formatSecondsToHms(ex.sets[idx].duration) }} × {{
                                  ex.sets[idx].distance
                                }}km
                              </text>
                              <text v-if="ex.exerciseType === 2">
                                {{ ex.sets[idx].reps }}次
                              </text>
                              <text v-if="ex.exerciseType === 3">
                                {{ formatSecondsToHms(ex.sets[idx].duration) }}
                              </text>
                              <text v-if="[4, 5].includes(ex.exerciseType)">
                                {{ ex.sets[idx].weight }}kg × {{ ex.sets[idx].reps }}次
                              </text>
                              <text v-if="ex.exerciseType === 6">
                                {{ formatSecondsToHms(ex.sets[idx].duration) }}
                              </text>
                            </view>
                            <view class="rest-time" v-if="ex.sets[idx]?.restTime && ex.exerciseType !== 6"
                              :style="{ color: ex.sets[idx].isCompleted === 1 ? '#999 !important' : '#a2a2a2 !important' }">
                              {{ ex.sets[idx].restTime }}s
                            </view>
                            <text class="check" v-if="ex.sets[idx].isCompleted === 1">✓</text>
                          </template>
                        </view>
                      </view>

                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

      </template>

      <!-- 空状态区域 -->
      <view v-else class="empty-section">
        <image class="empty-img"
          src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
          mode="aspectFit">
        </image>
        <text class="empty-tip">今天没有安排</text>
        <button class="add-train-btn" @click="openAddTrainPopup">+ 添加自助训练</button>

        <!-- 底部课程类型卡片 -->
        <!-- <view class="course-section">
          <view class="course-item" v-for="(item, index) in courseList" :key="index"
            @click="handleCourseClick(item.type)">
            <image class="course-icon" :src="item.icon" mode="aspectFill"></image>
            <text class="course-title">{{ item.title }}</text>
            <text class="course-desc">{{ item.desc }}</text>
          </view>
        </view> -->
      </view>

      <AddTrainPopup v-model:visible="showAddTrainPopup" />

      <!-- 日期备注弹窗 -->
      <RiliRiqibeizhu v-model:visible="showRiqibeizhu" :date="date" :note-id="currentEditId"
        :history-list="noteHistoryList" @save="loaddailytemplate" @close="handleCloseNotePopup"
        @refreshMain="handleRefreshMain" />

      <!-- 更多弹窗 -->
      <up-popup :show="moreShow" mode="bottom" mask-click @close="closeMorePopup" :safe-area-inset-bottom="true">
        <!-- 标题栏 -->
        <view class="popup-header">
          <text class="popup-title">{{ currentPlan?.name || '训练计划' }}</text>
        </view>
        <view class="popup-list">
          <view class="popup-item" @click="openColorPopup">
            <up-icon name="star" color="#ffc107" size="15"></up-icon>
            <text class="item-text">设置日历颜色</text>
          </view>
          <view class="popup-item" @click.stop="handleCompleteCheck">
            <up-icon name="checkmark" color="#333" size="15"></up-icon>
            <text class="item-text">一键打勾</text>
          </view>
          <view class="popup-item" @click="openSaveTemplateDialog(currentPlan)">
            <up-icon name="download" color="#333" size="15"></up-icon>
            <text class="item-text">存到我的模板</text>
          </view>
          <view class="popup-item" @click="handleMoveTo">
            <up-icon name="arrow-right" color="#333" size="15"></up-icon>
            <text class="item-text">移动到</text>
          </view>
        </view>

        <!-- 分隔线 + 删除项 -->
        <view class="popup-divider"></view>
        <view class="popup-item delete-item" @click="handleDeleteTemplate">
          <up-icon name="trash" color="#ff4d4f" size="22"></up-icon>
          <text class="item-text delete-text">删除训练</text>
        </view>
        <view v-if="currentPlan?.isFromPlan" class="popup-item delete-item" @click="confirmDelete(currentPlan.planId)">
          <up-icon name="trash" color="#ff4d4f" size="22"></up-icon>
          <text class="item-text delete-text">删除整个计划</text>
        </view>
      </up-popup>
      <!-- 复制到弹窗 -->
      <AddToCalendarPopup ref="calendarPopupRef" :template-id="currentPlan?.templateId ?? 0"
        @success="handleCalendarSuccess" :mask-click="true" @click.stop />
      <!-- 设置日历颜色弹窗 -->
      <CalendarColorPicker v-model:visible="showColorPopup" :daily-template-id="selectedPlanId"
        :current-color="currentPlan?.templateBackgroundColor || '#ffffff'" @success="loaddailytemplate" />

      <MeiRiMoBanXiuGai ref="meirimobanRef" @saveSuccess="loaddailytemplate(selectedDate)" />
    </view>
  </up-popup>
</template>

<script setup>
import { ref, onMounted, watch, computed, nextTick } from 'vue';
import dailytemplateApi from '@/sheep/api/Template/Dailytemplate';
import TemplatesApi from '@/sheep/api/Template/Templates';
import RiliRiqibeizhu from '@/pages/xunji/components/rili-components/rili-riqibeizhu.vue'
import AddToCalendarPopup from '@/pages/xunji/components/tianjia-dao-rili.vue';
import QueryPlanApi from '@/sheep/api/plan/queryplan';
import AddTrainPopup from '@/pages/xunji/components/rili-components/add-train-popup.vue'
import CalendarColorPicker from '@/pages/xunji/components/rili-components/CalendarColorPicker.vue'
import { useTrainingStore } from '@/sheep/store/trainingStore'
import MeiRiMoBanXiuGai from '../rili-components/meiri-moban-xiugai.vue'

const props = defineProps({
  date: { type: String, default: '' },
  // noteList: {
  //   type: Array,
  //   default: () => []
  // }
})

const show = ref(false);
const emit = defineEmits(['close', 'refreshCalendar']);
const noteList = ref([]);
const showAddTrainPopup = ref(false);
const selectedDate = ref('');
const displayDate = ref('');
const resdailyData = ref([]);
// const noteList = ref([])
const currentPlanIndex = ref(0);

const isMoveMode = ref(false);
const showRiqibeizhu = ref(false)
const moreShow = ref(false)
const calendarPopupRef = ref(null);
const currentEditId = ref(null); // 新增这一行
const noteHistoryList = ref([]);

const showColorPopup = ref(false)
const selectedPlanId = ref(null)

const trainingStore = useTrainingStore()

const meirimobanRef = ref(null)
// 没有训练模板时推荐课程
const courseList = ref([
  {
    type: 'group',
    title: '团课',
    desc: '大家一起练',
    icon: 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/group-course.png'
  },
  {
    type: 'private',
    title: '私教',
    desc: '1对1专人指导',
    icon: 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/private-course.png'
  },
  {
    type: 'smallClass',
    title: '小班课',
    desc: '28天极速瘦身',
    icon: 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/small-class.png'
  }
]);

// 打开弹窗
const openPopup = async () => {
  show.value = true;
  await loaddailytemplate(selectedDate.value)
};

// 关闭弹窗
const closeCellPopup = () => {
  show.value = false;
  emit('close');
};

// 重点：暴露方法给父组件
defineExpose({
  openPopup,
  closeCellPopup
});

// 修改
// 定义缓存变量，传给弹窗
const editUnitInfo = ref({
  unit: null,
  unitIndex: null,
  dailyTemplate: null // currentPlan（整个每日模板对象，含id、templateId）
})
// 打开弹窗修改单个unit
const openXiuGai = (unit, idx) => {
  editUnitInfo.value = {
    unit: JSON.parse(JSON.stringify(unit)), // 深拷贝防止原数据被实时篡改
    unitIndex: idx,
    dailyTemplate: { ...currentPlan.value }
  }
  // 调用子组件弹窗open方法
  nextTick(() => {
    meirimobanRef.value.open(editUnitInfo.value)
  })
}

// 打开日历弹窗
const openColorPopup = () => {
  if (!currentPlan.value) {  // 加这个
    uni.showToast({ title: '空白状态无法操作', icon: 'none' })
    return
  }
  if (!currentPlan.value?.id) {
    uni.showToast({ title: '未找到模板ID', icon: 'none' })
    return
  }
  selectedPlanId.value = currentPlan.value.id
  moreShow.value = false
  showColorPopup.value = true
}

// 当前正在显示的训记
const currentPlan = computed(() => {
  if (!resdailyData.value.length) return null;
  return resdailyData.value[currentPlanIndex.value] || null;
});

const loaddailytemplate = async () => {
  if (!selectedDate.value) return;
  console.log('【子组件】开始加载数据...');
  try {
    const resdaily = await dailytemplateApi.getdailytemplate(String(selectedDate.value));
    console.log('打印每日模板数据：resdaily', resdaily);

    const noteListFromApi = resdaily.data.notes;
    noteList.value = noteListFromApi;
    console.log('打印每日模板详情的备注列表：noteList', noteList);

    const historyFromApi = resdaily.data.noteHistoryList || [];
    console.log('打印历史备注：', historyFromApi);
    noteHistoryList.value = historyFromApi;

    resdailyData.value = resdaily.data.templates || [];

    // 切换回第一个训记
    const oldIndex = currentPlanIndex.value;
    if (resdailyData.value.length > oldIndex) {
      currentPlanIndex.value = oldIndex;
    } else {
      currentPlanIndex.value = 0;
    }
    console.log('+++++【子组件】+++++加载完成，训记列表：', resdailyData.value)
  } catch (error) {
    console.error('加载训练模板失败:', error);
    resdailyData.value = [];
  }
};

const switchPlan = (index) => {
  currentPlanIndex.value = index;
  console.log('【切换标签后 - currentPlan】', currentPlan.value);
};

// 更多弹窗控制
const handlePlanMore = () => {
  if (!currentPlan.value) {  // 加这个
    return
  }
  moreShow.value = true;
}

const closeMorePopup = () => {
  moreShow.value = false
}

// 一键打勾（完成训练）
const handleCompleteCheck = async () => {
  if (!currentPlan.value?.id) {
    uni.showToast({ title: '未找到训练ID', icon: 'none' })
    return
  }

  console.log('进入一键打勾函数训练id=', currentPlan.value.id);

  try {
    // 2. 调用接口
    await dailytemplateApi.completeDailyTemplate(currentPlan.value.id)
    emit('refreshCalendar');
    uni.showToast({ title: '一键打勾成功', icon: 'success' })
    closeMorePopup()

    // 刷新页面数据
    await loaddailytemplate(selectedDate.value)
  } catch (err) {
    console.error('一键打勾失败：', err)
    uni.showToast({ title: '操作失败', icon: 'none' })
  }
}

// 保存到我的模板
// const saveToMyTemplate = (dailyTemplate) => {
//   console.log('dailyTemplate', dailyTemplate);

// }

const openSaveTemplateDialog = async (item) => {
  // uni弹窗输入框：只填模板名称
  uni.showModal({
    title: '确认保存为你的训练模板？',
    content: '',
    editable: true, // 开启输入框
    placeholderText: '请输入模板名称',
    success: async (res) => {
      // 点击确定
      if (res.confirm) {
        const templateName = res.content.trim()
        // 非名校验
        if (!templateName) {
          return uni.showToast({ title: '请填写模板名称', icon: 'none' })
        }
        // 调用封装的数据转换函数，组装后端需要的入参
        const reqData = formatTrainToTemplate(item, templateName)
        // 发起创建接口
        console.log('reqData', reqData);
        await submitCreateTemplate(reqData)
        moreShow.value = false;
      }
    }
  })
}

/**
 */
const formatTrainToTemplate = (item, templateName) => {
  // 初始化基础结构
  const params = {
    templateId: item.templateId,
    // groupId: 0, // 默认存入根目录，后续选文件夹再传对应groupId
    templateName: templateName,
    scene: item.scene || 0,
    templateCover: item.urlCover || '', // 封面取自训练封面
    templateIntroduction: item.templateIntroduction || '', // 简介留空，可后续扩展
    units: []
  }

  // 循环转换 units 结构（训练组→模板unit）
  params.units = item.units.map(unit => {
    return {
      id: unit.unitId,
      name: unit.unitName || '',
      unitType: unit.unitType,
      sortOrder: unit.sortOrder,
      exercises: unit.exercises
    }
  })

  console.log('params', params);


  return params
}

const submitCreateTemplate = async (reqData) => {
  try {
    // 调用创建个人模板接口
    const res = await TemplatesApi.createCustTemplate(reqData)
    if (res.code === 0) {
      uni.showToast({ title: '模板保存成功' })
    } else {
      uni.showToast({ title: res.msg || '保存失败', icon: 'none' })
    }
  } catch (err) {
    uni.showToast({ title: '接口请求异常', icon: 'none' })
    console.error('创建模板报错：', err)
  }
}

// 弹窗控制
const openAddTrainPopup = () => {
  showAddTrainPopup.value = true;
};
const closeAddTrainPopup = () => {
  showAddTrainPopup.value = false;
};

// 弹窗选项点击事件
// const handleAddFromPlan = () => {
//   uni.showToast({ title: '从训练计划添加', icon: 'none' });
//   closeAddTrainPopup();
// };
// const handleAddFromTemplate = () => {
//   uni.navigateTo({ url: '/pages4/pages/xunji/xunji-rili-tianjia-moban' });
//   closeAddTrainPopup();
// };
// const handleFreeTraining = () => {
//   uni.navigateTo({ url: '/pages4/pages/xunji/xunji-dongzuo-lianxi' });
//   closeAddTrainPopup();
// };

const formatSecondsToHms = (seconds) => {
  // 处理空值/非数字
  if (!seconds || isNaN(seconds)) return '00:00:00'
  const total = parseInt(seconds, 10)
  // 计算时分秒
  const h = Math.floor(total / 3600)
  const m = Math.floor((total % 3600) / 60)
  const s = total % 60
  // 补零 + 拼接
  const hour = String(h).padStart(2, '0')
  const min = String(m).padStart(2, '0')
  const sec = String(s).padStart(2, '0')

  return `${hour}:${min}:${sec}`
}

// 返回按钮逻辑
const goBack = () => {
  uni.navigateBack({
    delta: 1,
    fail: () => {
      uni.redirectTo({ url: '/pages/xunji/xunji-rili' });
    },
  });
};

// 日期格式化（兼容iOS）
const formatDateWithWeek = (dateStr) => {
  if (!dateStr) return '';
  const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
  const iosSafeDate = new Date(dateStr.replace(/-/g, '/'));
  const year = iosSafeDate.getFullYear();
  const month = String(iosSafeDate.getMonth() + 1).padStart(2, '0');
  const day = String(iosSafeDate.getDate()).padStart(2, '0');
  const week = weekMap[iosSafeDate.getDay()];
  return `${year}/${month}/${day} 周${week}`;
};

// 打开日期备注组件
const handleDateNote = () => {
  if (noteList.value.length >= 5) {
    uni.showToast({
      title: '最多添加5条，已超出数量无法添加',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  showRiqibeizhu.value = true
}

const handleEditNote = (note) => {
  console.log('准备编辑备注，ID：', note.id);
  currentEditId.value = note.id;
  showRiqibeizhu.value = true;
};

const handleRefreshMain = () => {
  emit('refreshCalendar');
}

const handleCloseNotePopup = () => {
  currentEditId.value = null;
};

// 打开「添加到日历」弹窗
const openCalendarPopup = (templateId) => {
  console.log('点击了添加到日历按钮', templateId); // 新增日志
  console.log('子组件实例', calendarPopupRef.value); // 新增日志
  if (calendarPopupRef.value && typeof calendarPopupRef.value.open === 'function') {
    calendarPopupRef.value.open();
  } else {
    console.error('子组件没有open方法！', calendarPopupRef.value);
  }
};


// 2. 今日再练方法
const handleTrainAgain = async () => {
  if (!currentPlan.value?.templateId) {
    uni.showToast({ title: '未找到训练计划', icon: 'none' });
    return;
  }

  const todayDate = new Date().toISOString().split('T')[0]; // 格式：2026-05-19
  const reqData = {
    id: currentPlan.value.templateId,
    // planId: currentPlan.value.planId || 0,
    trainDateList: [todayDate] // 训练日期列表，这里只传今天
  };

  try {
    const res = await QueryPlanApi.addPlanToCalendar(reqData);
    if (res.code === 0) {
      uni.showToast({ title: '今日再练成功', icon: 'success' });
      loaddailytemplate(props.date);
    } else {
      uni.showToast({ title: res.msg || '添加失败', icon: 'none' });
    }
  } catch (error) {
    console.error('今日再练失败:', error);
    uni.showToast({ title: '网络异常，请重试', icon: 'none' });
  }
};
// 删除训练
const handleDeleteTemplate = async () => {
  // 先判断有没有ID
  if (!currentPlan.value?.id) {
    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(currentPlan.value.id);
        emit('refreshCalendar');
        uni.showToast({ title: '删除成功', icon: 'success' });
        loaddailytemplate(props.date); // 刷新数据
        moreShow.value = false; // 关闭弹窗
      } 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. 删除成功，从列表移除
      uni.showToast({ title: '计划已结束', icon: 'success' });
      emit('refreshCalendar');
    } else {
      uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
    }
  } catch (err) {
    console.error('删除计划失败：', err);
    uni.showToast({ title: '网络请求失败', icon: 'none' });
  } finally {
    moreShow.value = false
    loaddailytemplate()
  }
}

// 移动到：只打开弹窗
const handleMoveTo = async () => {
  console.log('点击了更多弹窗的移动到');

  // 安全判断
  if (!currentPlan.value) {
    uni.showToast({ title: '未找到训练信息', icon: 'none' });
    return;
  }
  isMoveMode.value = true;
  // 关闭更多弹窗
  moreShow.value = false;

  // 只做一件事：打开日期选择
  nextTick(() => {
    openCalendarPopup(currentPlan.value.templateId);
  });
};

const handleCalendarSuccess = () => {
  console.log('✅ 添加日历成功，当前模式：', isMoveMode.value ? '移动' : '复制');
  if (!isMoveMode.value) {
    uni.showToast({
      title: '复制成功',
      icon: 'success'
    });
    return;
  }
  if (!currentPlan.value?.id) {
    return;
  }
  dailytemplateApi.deleteDailyTemplate(currentPlan.value.id)
    .then(() => {
      uni.showToast({ title: '移动成功', icon: 'success' });
      loaddailytemplate(selectedDate.value);
    })
    .catch(err => {
      uni.showToast({ title: '移动失败', icon: 'none' });
    });
  isMoveMode.value = false
};

// 去训练
const startTraining = () => {
  // console.log('++点击了去训练++');
  // uni.navigateTo({
  //   url: `/pages4/pages/xunji/xunji-dongzuo-lianxi?id=${currentPlan.value.templateId}&type=3`,
  // });
  // if (!currentPlan.value) {
  //   uni.showToast({ title: '今日暂无训练', icon: 'none' })
  //   return
  // }
  // v-if="resdailyData.length > 0
  if (resdailyData.value.length > 0) {
    trainingStore.isSystem = currentPlan.value.isSystem || false;
    trainingStore.loadDailyTemplateForEdit(currentPlan.value);
    trainingStore.initDailyTemplateRecords()
    uni.navigateTo({
      url: `/pages4/pages/xunji/xunji-dongzuo-lianxi?id=${currentPlan.value.templateId}&type=3&dailyTemplateId=${currentPlan.value.id}&isTraining=true`,
    });
    console.log('去训练开始进入编辑模板页面，模板ID：', currentPlan.value.templateId, '每日模板ID：', currentPlan.value.id);

    console.log('打印传递给动作训练页面的模板id', currentPlan.value.templateId);
  } else {
    uni.navigateTo({ url: '/pages4/pages/xunji/xunji-dongzuo-lianxi' })
  }



};

// 每日模板编辑
const templateEdit = (plan) => {
  trainingStore.isSystem = plan.isSystem;
  trainingStore.loadDailyTemplateForEdit(plan);
  trainingStore.initDailyTemplateRecords()
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-dongzuo-lianxi?id=${plan.templateId}&type=3&dailyTemplateId=${plan.id}`,
  });
  console.log('开始进入编辑模板页面，模板ID：', plan.templateId, '每日模板ID：', plan.id);
};

// 监听父组件传进来的 date 变化
watch(
  () => props.date,
  (newDate) => {
    if (newDate && newDate.trim()) {
      console.log('子组件监听到日期变化：', newDate);
      selectedDate.value = newDate;
      displayDate.value = formatDateWithWeek(newDate);
      loaddailytemplate(newDate);
      console.log('+++++++currentPlan:+++++++++++++++++', currentPlan.value)
      // console.log('props.noteList=', props.noteList);

    }
  },
  { immediate: true }
);


onMounted(() => {
  console.log('【rilicell子组件】已挂载！！！');
  console.log('【子组件】props.date:', props.date);
  // loaddailytemplate(props.date);

});
</script>

<style lang="scss" scoped>
/* 全局容器 */
.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 85vh;
  background-color: #f2f3f5;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* 顶部日期栏 */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 20rpx;
  background-color: #fff;
  // position: sticky;
  top: 0;
  z-index: 10;
  gap: 16rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.date-wrapper {
  flex-grow: 1;
  text-align: left;
}

.close-btn {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f3f5;
  border-radius: 50%;
  flex-shrink: 0;
}

.date-text {
  font-size: 28rpx;
}

.date-note-btn {
  font-size: 28rpx;
  color: #333;
  background: #e7e7e9;
  border-radius: 40rpx;
  padding: 12rpx 28rpx;
  border: none;
  margin-right: 0;
  flex-shrink: 0;
}

.go-train-btn {
  display: flex;
  align-items: center;
  background: #ffc107;
  border-radius: 40rpx;
  padding: 12rpx 24rpx;
  border: none;
  flex-shrink: 0;
}

.go-train-text {
  font-size: 28rpx;
  color: #000;
  margin-right: 8rpx;
  font-weight: 500;
}

.go-train-tag {
  font-size: 22rpx;
  color: #ffc107;
  background: #000;
  border-radius: 50%;
  padding: 4rpx 8rpx;
  font-weight: bold;
}

/* 训练计划头部卡片 */
.plan-header-card {
  display: flex;
  flex-direction: column;
  background-color: #2a2a2a;
  color: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  margin: 20rpx;
  margin-bottom: 24rpx;
}

.plan-header-img {
  display: none;

}

.plan-header-info {
  flex-grow: 1;
  margin-bottom: 32rpx;
}

.plan-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.plan-heander {
  display: flex;
}

.plan-title {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 12rpx;
  color: #fff;
}

// 卡片头部的编辑按钮
.editButton {
  display: flex;
  align-items: center;
  gap: 4rpx;
  color: #fff;
  font-size: 26rpx;
  opacity: 0.8;
  /* 让文字和图标稍微淡一点，和例图更像 */
  border: 1rpx solid rgba(255, 255, 255, 0.7);
  border-radius: 25rpx;
  padding: 6rpx 12rpx;
}


.plan-meta {
  font-size: 26rpx;
  color: #ccc;
  display: block;
}

.plan-header-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20rpx;
  justify-content: flex-start;
}

.plan-btn {
  font-size: 26rpx;
  border-radius: 40rpx;
  border: none;
  padding: 12rpx 28rpx;
  line-height: 1;
}

.more-btn,
.copy-btn {
  background: #fff;
  color: #000;
  border: none;
}

.go-train-btn-small {
  // background: #ffc107;
  color: #000;
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
}

.go-train-text-sm {
  font-size: 24rpx;
  margin-right: 4rpx;
  font-weight: 500;
}

.go-train-tag-sm {
  font-size: 20rpx;
  background: #000;
  color: #ffc107;
  border-radius: 4rpx;
  padding: 2rpx 6rpx;
  font-weight: bold;
}

/* 训练动作列表 */
.action-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}

.action-sets {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}


.set-index {
  display: none;
}



.set-content {
  flex-grow: 1;
  color: inherit;
}

// 主卡片：横向排列
.action-item {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx 20rpx;
  position: relative;
  gap: 20rpx;
}

// 左侧：序号 + 图片
.action-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex-shrink: 0;
}

// 大序号
.action-index {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  line-height: 1;
}

// 动作图片
.action-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
}

// 中间区域
.action-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
}

// 上半部分：名称 + 重量（左对齐）
.action-top {
  margin-bottom: 8rpx;
}

.action-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #111;
  display: block;
}

.action-totalWeight {
  font-size: 26rpx;
  color: #333;
  margin-top: 6rpx;
  display: block;
}

// 下半部分：组次行 → 向左对齐图片 ✅ 核心
.action-bottom {
  margin-top: 6rpx;
  margin-left: -96rpx;
  /* 往左移动，对齐图片位置 */
}


.set-item {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
  justify-content: space-between;
}

.set-left {
  display: flex;
  align-items: center;
  gap: 8rpx;
  /* 控制 indexData、set-content、rest-time 之间的间距 */
}

// 灰色小圆点序号
.indexData {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background: #f2f3f5;
  font-size: 22rpx;
  color: #999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
  flex-shrink: 0;
}

// .set-content {
//   color: #333;
// }

.rest-time {
  // margin-left: 100rpx;
  font-size: 24rpx;
  // color: inherit;
  margin-left: 40rpx;
  flex-shrink: 0;
}

.check {
  font-size: 26rpx;
  color: #333;
  margin-left: 20rpx;
  /* 这里控制和左边内容的距离，数值你可以自己调 */
  flex-shrink: 0;
  /* 防止被压缩 */
}

// 右侧：修改 + 对勾
// .action-right {
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     justify-content: space-between;
//     height: 100%;
// }
.action-right {
  flex-shrink: 0;
}

.modify-btn {
  font-size: 26rpx;
  color: #333;
  background: #f2f3f5;
  border: none;
  border-radius: 40rpx;
  padding: 8rpx 20rpx;
  line-height: 1;
}

// .check-icon {
//     font-size: 30rpx;
//     color: #333;
//     margin-top: 24rpx;
// }



//=========================

/* 空状态区域 */
.empty-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // width: 500rpx;
  height: 500rpx;
  margin-top: 100rpx;
  padding: 20rpx 20rpx 60rpx;
  box-sizing: border-box;

}

.empty-img {
  width: 280rpx;
  height: 280rpx;
  margin-bottom: 30rpx;
}

.empty-tip {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 60rpx;
}

.add-train-btn {
  font-size: 30rpx;
  color: #000;
  background: #ffc107;
  border-radius: 40rpx;
  padding: 20rpx 80rpx;
  border: none;
  margin-bottom: 60rpx;
}

/* 底部课程类型区域 */
.course-section {
  display: flex;
  justify-content: space-around;
  padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.course-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx 0;
}

.course-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-bottom: 16rpx;
}

.course-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  font-weight: 500;
}

.course-desc {
  font-size: 24rpx;
  color: #999;
}

/* 添加自助训练底部弹窗 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
}

.popup-bottom {
  width: 100wh;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;
  box-sizing: border-box;
}

// .popup-indicator {
//   width: 80rpx;
//   height: 8rpx;
//   background: #ddd;
//   border-radius: 4rpx;
//   margin: 0 auto 30rpx;
// }

.popup-title {
  font-size: 34rpx;
  color: #333;
  text-align: center;
  font-weight: bold;
  display: block;
  margin-bottom: 30rpx;
}

.popup-options {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.popup-option-btn {
  width: 100%;
  height: 80rpx;
  font-size: 30rpx;
  // color: #ffffff;
  // background: #f5f5f5;
  border: none;
  // border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15rpx;

  .small {
    font-size: 18rpx;
  }

}

// 更多弹窗
/* ========== 更多弹窗样式 ========== */
:deep(.up-popup__content) {
  border-radius: 10rpx 10rpx 0 0;
  background: #f5f5f5;
  padding: 30rpx 20rpx;
}

.popup-header {
  text-align: center;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.popup-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #111;
}

.popup-list {
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
}

.popup-item {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  background: transparent;
  gap: 16rpx;
}

.popup-item:not(:last-child) {
  border-bottom: 1rpx solid #eee;
}

.item-text {
  font-size: 30rpx;
  color: #333;
}

.popup-divider {
  height: 16rpx;
  background: #f5f5f5;
  margin: 20rpx 0;
}

.delete-item {
  background: #fff;
}

.delete-text {
  color: #ff4d4f;
}

/* 按钮通用重置 */
button {
  line-height: 1;
}

button::after {
  border: none;
}

/* 训记切换标签 */
.plan-tabs {
  white-space: nowrap;
  padding: 16rpx 20rpx;
  background: #fff;

  // 给内部的标签留出间距，同时让它不换行
  // display: flex;
  gap: 16rpx;
}

.tab-btn {
  display: inline-block;
  padding: 10rpx 24rpx;
  border-radius: 32rpx;
  font-size: 26rpx;
  background: #f2f2f2;
  border: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.tab-btn.active {
  background: #000;
  color: #fff;
}

/* ========== 超级组样式（已修复 无重复 无嵌套错误）========== */
.superset-wrapper {
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.superset-wrapper .super-head {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  position: relative;
  gap: 16rpx;
}

.superset-wrapper .super-image {
  width: 75rpx;
  height: 75rpx;
  flex-shrink: 0;
}

.superset-wrapper .super-title-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.superset-wrapper .super-title {
  font-size: 32rpx;
  color: #111;
  font-weight: 500;
}

.superset-wrapper .super-totalWeight {
  font-size: 24rpx;
  color: #666;
}

.superset-wrapper .super-actionName {
  padding: 0 20rpx 20rpx 70rpx;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.superset-wrapper .name-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.superset-wrapper .letter {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.superset-wrapper .super-actionName .action-name {
  font-size: 28rpx;
  color: #333;
}

.superset-wrapper .super-set-list {
  padding: 0 20rpx 20rpx 20rpx;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.superset-wrapper .super-set-item {
  display: flex;
  // flex-direction: column; // 新增：垂直排列
  align-items: stretch; // 让每个动作占满宽度
  gap: 12rpx; // 垂直间距（可根据需要微调）
  padding: 16rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
}

// 为了让序号独立占一行
.superset-wrapper .super-set-item {
  margin-bottom: 8rpx;
}

.superset-wrapper .set-number {
  font-size: 26rpx;
  background: #e4e4e4;
  color: #282828;
  width: 37rpx;
  height: 37rpx;
  text-align: center;
  flex-shrink: 0; //  /* 不被父容器挤压变形，保持固定大小 */
  border-radius: 50%;
  // line-height: 60rpx;
}

.superset-wrapper .set-column {
  display: flex;
  flex-direction: column;
}

.superset-wrapper .action-in-set {
  // display: flex;
  // flex-direction: column;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.superset-wrapper .action-in-set:last-child {
  margin-bottom: 0;
}

.superset-wrapper .action-letter {
  display: inline-block;
  font-size: 26rpx;
  color: #666;
  // width: 35rpx;
  white-space: nowrap;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.superset-wrapper .set-content {
  font-size: 26rpx;
  color: inherit;
  flex: 1;
}

.superset-wrapper .rest-time {
  font-size: 24rpx;
  // color: inherit;
  margin-left: 10rpx;
  flex-shrink: 0;
}

.superset-wrapper .check {
  font-size: 26rpx;
  color: #333;
  margin-left: 275rpx !important;
  /* 这里控制和左边内容的距离，数值你可以自己调 */
  flex-shrink: 0;
  /* 防止被压缩 */
}

.superset-title {
  font-size: 28rpx;
  font-weight: bold;
  padding: 12rpx 20rpx;
  background: #fff6cc;
  border-radius: 12rpx;
  margin-bottom: 12rpx;
}

// 日程备注
.noteContent {
  display: flex;
  align-items: flex-start;
  /* 改成顶部对齐，而不是居中 */
  gap: 12rpx;
  padding: 20rpx;
  background: #fff;
}

.noteTitle {
  font-size: 26rpx;
  color: #666;
  /* 关键：固定宽度，保证标签容器的左边距稳定 */
  flex-shrink: 0;
  width: 150rpx;
}

.noteTags {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.noteTag {
  font-size: 24rpx;
  color: #fff;
  padding: 6rpx 14rpx;
  border-radius: 10rpx;
  line-height: 1.2;
}
</style>