<template>
  <view class="fitness-plan-page">
    <!-- 导航栏 -->
    <uni-nav-bar :title="plandetail.name" left-icon="left" @click-left="goBack" :fixed="true" :status-bar="true" />
    <!-- Banner 区域 -->
    <view class="banner-section">
      <image :src="plandetail.urlCover" class="banner-img">
        <!-- 收藏 -->
        <uni-icons :type="isPlanAdded ? 'heart-filled' : 'heart'" size="24" color="#fff" class="collect-btn"
          @click="toggleAddPlan">
        </uni-icons>
        <!-- 分享按钮 -->
        <button class="share-btn" open-type="share">
          <uni-icons type="paperplane" size="24" color="#fff"></uni-icons>
        </button>
      </image>
      <!-- <view class="hot-tag">火爆</view> -->
    </view>
    <!-- 计划信息卡片 -->
    <view class="info-cards">
      <view class="info-card">
        <view class="number-unit">
          <text class="number">{{ plandetail.durationWeeks }}</text>
          <text class="unit">周</text>
        </view>

        <text class="desc">计划周期</text>
      </view>
      <view class="info-card">
        <view class="number-unit">
          <text class="number">{{ plandetail.frequencyPerWeek }}</text>
          <text class="unit">练/周</text>
        </view>

        <text class="desc">计划频率</text>
      </view>
      <view class="info-card">
        <view class="number-unit">
          <text class="number">{{ difficultyText[plandetail.difficultyLevel] }}</text>
        </view>

        <text class="desc">计划难度</text>
      </view>
    </view>

    <!-- 器械标签 -->
    <view class="equipment-tags">
      <up-icon name="file-text" color="#999" size="25"></up-icon>
      <text>器械</text>
      <view v-for="items in plandetail.equipmentsSummaryNames" :key="items">
        <view class="tag-item">
          <text>{{ items }}</text>
        </view>
      </view>
    </view>

    <!-- ==========新增：未来7天训练日日历模块 start========== -->
    <view class="calendar-section" v-if="isMyPlan === true">
      <view class="cal-header">
        <text class="cal-title">训练日</text>
        <button class="cal-set-btn" @click="openArrageClass">排课设置</button>
      </view>
      <!-- 星期日期头部 -->
      <view class="cal-week-row">
        <view v-for="(item, idx) in calWeekList" :key="idx" class="cal-day-item">
          <text class="day-top">{{ item.topText }}</text>
          <text class="day-num">{{ item.num }}</text>
        </view>
      </view>
      <!-- 下方课程/休息 -->
      <view class="cal-content-row">
        <view v-for="(item, idx) in calWeekList" :key="idx" class="cal-day-item">
          <!-- 有训练就展示黄色课程，没有就是休 -->
          <view v-if="item.trainName" class="train-tag" @click="openTemplateDatil(item.dailytemplateId, item.date)">
            <text class="tag-text">{{ item.trainName }}</text>
          </view>
          <view v-else class="rest-tag">休</view>
        </view>
      </view>
    </view>
    <!-- ==========新增：未来7天训练日日历模块 end========== -->

    <!-- 计划课程 -->
    <view class="course-section">
      <text class="section-title">计划课程</text>
      <view class="course-card" v-for="item in plandetail.templates" :key="item.id"
        @click="goToTemplateDetail(item.id)">
        <image :src="item.urlCover" mode="aspectFill" class="course-img"></image>
        <view class="course-content">
          <text class="course-name">{{ item.name }}</text>
          <view class="course-meta">
            <view class="item">
              <!-- <text class="meta-item">模板id：{{ item.id }}</text> -->
              <text class="meta-item">{{ item.exerciseCount }} 动作</text>
              <text class="meta-item">{{ item.totalSets }} 组</text>
              <text class="meta-item">{{ item.totalWeight }}kg</text>
            </view>
            <uni-icons uni-icons type="right" size="10" color="#fff"></uni-icons>
          </view>
          <text v-for="(items, index) in item.primaryMuscleNames" :key="index">
            <text class="course-parts">{{ items }}</text>
          </text>

          <view class="course-actions">
            <button type="default" size="mini" class="btn"
              style="background-color: #333; color: white; border-radius: 20rpx"
              @click.stop="openCalendarPopup(plandetail.id, item.id)">添加到日历</button>

            <button type="primary" size="mini" class="btn"
              style="background-color: #ffd700; color: black; border-radius: 20rpx"
              @click.stop="startTraining(item.id)">
              <text>去训练</text>
              <view class="go-text">GO</view>
            </button>

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

    <!-- 计划介绍 -->
    <view class="plan-container">
      <label class="section-title">计划介绍</label>
      <rich-text :nodes="plandetail.introduction"></rich-text>
    </view>

    <!-- 按钮区域 -->
    <view class="button-group">
      <template v-if="!plandetail.isAdded && !isMyPlan">
        <button type="default" @click="showPlanPopup = true" class="btn" size="large"
          style="background-color: white; flex: 1">
          单节课程训练
        </button>
        <button type="default" @click="openChooseWeekPopup" class="btn" size="large"
          style="background-color: #ffd700; flex: 1.5">
          加入计划
        </button>
      </template>
      <template v-else-if="plandetail.isAdded && !isMyPlan">
        <button type="default" @click.stop="confirmDelete(plandetail.id)" class="btn end" size="large"
          style="background-color: white; flex: 1">
          结束计划
        </button>
        <button type="default" @click="showPlanPopup = true" class="btn ones" size="large"
          style="background-color: #ffd700; flex: 1.5">
          马上开练
        </button>
      </template>
      <template v-else>
        <button type="default" class="btn end" @click="showPlanPopup = true" size="large"
          style="background-color: white; flex: 1">
          马上开练
        </button>
        <button type="default" @click="openArrageClass" class="btn ones" size="large"
          style="background-color: #ffd700; flex: 1.5">
          更改排课
        </button>
        <view class="Icon" @click="showMorePopup = true">
          <uni-icons type="more-filled" size="22" color="#fff" />
          更多
        </view>
        <!-- 更多弹窗（原生 view 实现，精准定位） -->
        <view class="more-overlay" v-if="showMorePopup" @click="showMorePopup = false">
          <!-- 弹窗本体：精准定位在「更多」按钮上方 -->
          <view class="more-popup" @click.stop>
            <view class="more-item" @click="restartPlan">
              <uni-icons type="refresh" size="22" color="#fff"></uni-icons>
              <text class="item-text">重新开始计划</text>
            </view>
            <!-- 注意这里结束整个计划，用的每日模板的删除个人计划接口，传递的是官方计划planId -->
            <view class="more-item" @click.stop="confirmDelete(plandetail.planId)">
              <uni-icons type="close" size="22" color="#fff"></uni-icons>
              <text class="item-text">结束整个计划</text>
            </view>
          </view>
        </view>
      </template>
    </view>
    <!-- 加入计划的弹窗 -->
    <WeekSelectPopup v-model:visible="showWeekPopup" :max-count="plandetail.frequencyPerWeek" :plan-detail="plandetail"
      @success="loadDetail" :is-update="isUpdate" />

    <!-- 添加到日历弹窗子组件 -->
    <AddToCalendarPopup ref="calendarPopupRef" :plan-id="plandetail.id" :template-id="currentTemplateId"
      @success="handleCalendarSuccess" />

    <!-- 去训练弹窗，显示当前计划的所有模板，可以直接跳转到训练页面 -->
    <template v-if="plandetail?.id">
      <WodeJihuaTianjiaTancuang v-if="showPlanPopup" v-model:visible="showPlanPopup" :isAdd="false"
        :plan-title="'选择课程立即开始训练'" :plan-id="plandetail.id" :is-my-plan="false"/>
    </template>

  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getBottomSafeArea } from '@/utils/safeArea.js';
import QueryPlanApi from '@/sheep/api/plan/queryplan';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import AddToCalendarPopup from '@/pages/xunji/components/tianjia-dao-rili.vue';
import WodeJihuaTianjiaTancuang from '@/pages/xunji/components/wode-jihua-tianjia-tancuang.vue'
import WeekSelectPopup from '@/pages4/components/week-select-popup.vue'
import { useTrainingStore } from '@/sheep/store/trainingStore'

const trainingStore = useTrainingStore()

// 获取页面参数
const route = defineProps(['planid']); // Vue 3 + uni-app 支持
// 或者使用 getCurrentPages()（兼容性更好）
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const planIdFromUrl = currentPage.options?.planid;
// 计划是否已添加（收藏）
const isPlanAdded = ref(false);
// const plandetail = ref([]);
const plandetail = ref({});
//传参
const id = ref();
const difficultyText = { 1: '初阶', 2: '中阶', 3: '高阶' };
// 控制选择星期弹窗显示/隐藏
const showWeekPopup = ref(false)
// 用户选择的星期：[1,3] 代表周一、周三
// const selectedWeekList = ref([])
// 星期列表（用于弹窗显示）
// 星期列表（匹配例图：周一/二/三 + 下方“休”字）
const weekOptions = [
  { shortName: '一', fullName: '周一', value: 1 },
  { shortName: '二', fullName: '周二', value: 2 },
  { shortName: '三', fullName: '周三', value: 3 },
  { shortName: '四', fullName: '周四', value: 4 },
  { shortName: '五', fullName: '周五', value: 5 },
  { shortName: '六', fullName: '周六', value: 6 },
  { shortName: '日', fullName: '周日', value: 7 },
]

const isUpdate = ref(false)

const calWeekList = ref([])

// 「添加到日历」弹窗实例
const calendarPopupRef = ref(null);
// 当前要添加到日历的课程模板ID
const currentTemplateId = ref(null);

const showPlanPopup = ref(false)

// 更多弹窗显隐
const showMorePopup = ref(false)


// 接口weeklySchedule转日历渲染数据
// const formatWeekData = (weekArr) => {
//   const weekMap = { 1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六', 7: '日' }
//   return weekArr.map((item, index) => {
//     const dayNum = item.date[2]
//     let topStr = index === 0 ? '今' : weekMap[item.dayIndex]
//     const trainStr = item.scheduled ? item.templateName : ''
//     return {
//       topText: topStr,
//       num: String(dayNum),
//       trainName: trainStr,
//       templateId: item.templateId,
//       dailytemplateId: item.dailytemplateId,
//     }
//   })
// }
// 接口weeklySchedule转日历渲染数据（修复版：星期根据真实日期计算，100%对齐num）
const formatWeekData = (weekArr) => {
  // JS星期：0=日,1=一,2=二,3=三,4=四,5=五,6=六
  const weekMap = ['日', '一', '二', '三', '四', '五', '六'];

  return weekArr.map((item, index) => {
    // 日期数字
    const dayNum = item.date[2];
    // 核心修复：用真实日期计算星期几，不再用dayIndex！
    const [y, m, d] = item.date;
    const realDate = new Date(y, m - 1, d);
    const realWeekText = weekMap[realDate.getDay()];

    // 第一天显示「今」，其他显示真实星期
    let topStr = index === 0 ? '今' : realWeekText;

    // 训练名称
    const trainStr = item.scheduled ? item.templateName : '';

    return {
      topText: topStr,
      num: String(dayNum),
      trainName: trainStr,
      templateId: item.templateId,
      dailytemplateId: item.dailytemplateId,
      date: item.date,
    };
  });
};

/** 重新开始计划 */
const restartPlan = () => {
  isUpdate.value = true;
  showMorePopup.value = false // 关闭弹窗
  // 开启选择训练日期弹窗
  showWeekPopup.value = true
  console.log('重新开始计划，planId：', plandetail.value.id)
  uni.showToast({ title: '已重新开始计划', icon: 'success' })
}

// 跳转到排课页面
const openArrageClass = () => {
  console.log('跳转到排课设置传递的id', plandetail.value.id);
  uni.navigateTo({
    url: `/pages4/pages/xunji/wode-jihua-paike?planid=${plandetail.value.id}`
  })
}

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

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

};

//查看模板详情
const openTemplateDatil = (templateId, dateArr) => {
  console.log('templateId=', templateId);
  console.log('dateArr=', dateArr);
  if (!templateId) return

  const [y, m, d] = dateArr;
  const dateStr = `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
  console.log('日期：', dateStr);
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban-xiangqing?id=${templateId}&date=${dateStr}&isOffice=false&isMyPlan=true&isDailytemplateId=true`,
  });
};

// 直接声明方法，无需包裹在 methods 中，默认暴露给模板
const goBack = () => {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    uni.navigateBack();
  } else {
    uni.navigateTo({
      url: '/pages/xunji/xunji',
    });
  }
};

// 点击弹窗的「结束计划」按钮
const confirmDelete = async (id) => {
  uni.showModal({
    title: '确认结束计划',
    content: '确定要结束这个计划吗？结束后将无法恢复。',
    success: async (res) => {
      // 用户点了确认
      if (res.confirm) {
        try {
          console.log('打印计划个人id：', id);
          const res = await QueryPlanApi.deletePlan(id);
          console.log('删除结果：', res);

          if (res.code === 0 && res.data) {
            uni.showToast({ title: '计划已结束', icon: 'success' });

            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          } else {
            uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
          }
        } catch (err) {
          console.error('删除计划失败：', err);
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        } finally {
          loadDetail();
        }
      }
      // 用户点取消 → 什么都不做
      else if (res.cancel) {
        console.log('用户取消结束计划');
      }
    }
  });
};

// 1. 打开选择星期弹窗
const openChooseWeekPopup = () => {
  console.log('点击了加入计划');

  showWeekPopup.value = true

  console.log('showWeekPopup.value=', showWeekPopup.value);
}
// 跳转到模板详情页
const goToTemplateDetail = (id) => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban-xiangqing?id=${id}`
  });
};
const handleRightClick = (index) => {
  if (index === 0) {
    // 收藏功能（保留原提示逻辑）
    uni.showToast({ title: '已收藏', icon: 'success' });
  } else if (index === 1) {
    // 分享功能（保留原 showShareMenu 配置）
    uni.showShareMenu({
      withCredentials: true,
    });
  }
};

//获取计划详情
const loadDetail = async () => {
  if (isMyPlan.value === true) {
    const response = await QueryPlanApi.getMyPlanDetail(id.value);
    plandetail.value = response.data;
    console.log('加载个人计划详情plandetail.value：', plandetail.value);
  } else {
    const response = await QueryPlanApi.getPlanDetail(id.value);
    plandetail.value = response.data;
    console.log('加载官方计划详情plandetail.value：', plandetail.value);
  }

  // 新增：把后端排班数据转为日历数据
  if (plandetail.value.weeklySchedule?.length) {
    calWeekList.value = formatWeekData(plandetail.value.weeklySchedule)
    console.log('排课设置格式化后的：calWeekList.value', calWeekList.value);

  }
};

// ====================== 计划收藏/添加功能 ======================

// 检查当前计划是否已经添加
const checkPlanAddedStatus = async () => {
  if (!id.value) return;
  try {
    const res = await QueryPlanApi.isAddPlan(id.value);
    // 接口返回 true = 已添加
    isPlanAdded.value = res.data === true;
    console.log("计划是否已添加：", isPlanAdded.value);
  } catch (err) {
    console.error("检查计划添加状态失败：", err);
    isPlanAdded.value = false;
  }
};

// 切换添加/取消收藏计划
const toggleAddPlan = async () => {
  if (!id.value) {
    uni.showToast({ title: "计划ID不存在", icon: "none" });
    return;
  }

  const originalStatus = isPlanAdded.value;
  // 乐观更新UI（点了立刻变爱心）
  isPlanAdded.value = !originalStatus;

  try {
    // 调用添加计划接口
    await QueryPlanApi.addPlan(id.value);

    if (!originalStatus) {
      uni.showToast({ title: "收藏计划成功" });
    } else {
      uni.showToast({ title: "已取消收藏" });
    }
  } catch (err) {
    // 失败回滚
    isPlanAdded.value = originalStatus;
    console.error("操作失败：", err);
    uni.showToast({ title: "操作失败", icon: "none" });
  }
};

// 打开「添加到日历」弹窗
const openCalendarPopup = (planId, templateId) => {
  console.log('点击了添加到日历按钮', planId, templateId); // 新增日志
  console.log('子组件实例', calendarPopupRef.value); // 新增日志
  // 把当前课程的ID存起来，传给子组件
  currentTemplateId.value = templateId;
  // 测试是否有open方法
  if (calendarPopupRef.value && typeof calendarPopupRef.value.open === 'function') {
    calendarPopupRef.value.open();
  } else {
    console.error('子组件没有open方法！', calendarPopupRef.value);
  }
};

// 日历添加成功的回调（可选，可做刷新/提示）
const handleCalendarSuccess = () => {
  console.log('课程已成功添加到日历');
  loadDetail()
};
// 定义分享内容
onShareAppMessage((res) => {
  // res.from 可区分触发来源：'button'（按钮触发）或 'menu'（右上角菜单触发）[reference:3]
  console.log('分享触发来源:', res.from);
  return {
    title: plandetail.value.name || '健身计划分享',          // 分享标题
    path: `/pages4/pages/xunji/xunji-xunlian-jihua?id=${id.value}`, // 分享路径
    imageUrl: plandetail.value.urlCover,       // 分享图片
  };
});
const isMyPlan = ref(false)
onLoad((options) => {

  console.log("计划详情接收的参数：", options);
  id.value = options.planid;
  isMyPlan.value = options.isMyPlan === "true";
  checkPlanAddedStatus(); // 检查计划是否已添加
  // #ifdef MP-WEIXIN
  wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  });
  // #endif
});
onMounted(() => {
  loadDetail();
});
</script>

<style scoped lang="scss">
$base-font: 22rpx;

.fitness-plan-page {
  width: 100%;
  min-height: 100vh;
  background-color: #121212;
  color: white;
  padding-bottom: 70rpx;
}

/* 收藏按钮 */
.collect-btn {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  display: flex;
  top: 20rpx;
  right: 90rpx;
  z-index: 11;
  align-items: center;
  justify-content: center;
}

.share-btn {
  position: absolute;
  display: flex;
  top: 20rpx;
  /* 距离顶部距离，可按需调整 */
  right: 20rpx;
  /* 距离右侧距离 */
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  z-index: 10;
  /* 确保按钮可点击区域足够 */
  width: 60rpx;
  height: 60rpx;
  align-items: center;
  justify-content: center;
}

/* Banner 区域 */
.banner-section {
  width: 100%;
  height: 400rpx;
  position: relative;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
}

.hot-tag {
  position: absolute;
  left: 20rpx;
  top: 20rpx;
  background-color: #ff4d4d;
  color: white;
  padding: 4rpx 10rpx;
  font-size: 20rpx;
  border-radius: 4rpx;
  z-index: 10;
}

.title {
  font-size: 40rpx;
  color: white;
  font-weight: bold;
}

/* 计划信息卡片 */
.info-cards {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 20rpx;
  gap: 10rpx;
}

.info-card {
  flex: 1;
  padding: 20rpx;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.info-card .number {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.info-card .unit {
  font-size: 24rpx;
  color: #ccc;
  margin-bottom: 10rpx;
}

.info-card .icon-clock,
.info-card .icon-wave,
.info-card .icon-up {
  width: 32rpx;
  height: 32rpx;
  margin: 0 auto 10rpx;
  opacity: 0.8;
}

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

/* 器械标签 */
.equipment-tags {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  // gap: 6rpx;
}


.tag-item {
  padding: 6rpx 12rpx;
  border-radius: 4rpx;
  font-size: 28rpx;
  color: #ccc;
}

// 训练日日历模块样式 1:1还原截图
.calendar-section {
  margin: 40rpx 20rpx;
  padding: 0;
  border-top: 1rpx solid rgba(255, 255, 255, 0.15);
  padding-top: 32rpx;

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

    .cal-title {
      font-size: 32rpx;
      color: #ffffff;
      font-weight: 500;
    }

    .cal-set-btn {
      color: #fff;
      background: transparent;
      font-size: 22rpx;
      padding: 3rpx 13rpx;
      border-radius: 999rpx;
      border: 1rpx solid #fff;
    }
  }

  /* 顶部 今/六/日 星期+数字 */
  .cal-week-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12rpx;

    .cal-day-item {
      width: 14.28%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .day-top {
        font-size: 30rpx;
        color: #cccccc;
      }

      .day-num {
        font-size: 32rpx;
        color: #fff;
        margin-top: 6rpx;
      }
    }
  }

  /* 下方黄色标签/休 */
  // .cal-content-row {
  //   display: flex;
  //   justify-content: space-between;

  //   .cal-day-item {
  //     display: flex;
  //     height: 80rpx;
  //     align-items: center;
  //     justify-content: center;
  //     width: 12.5%;
  //     text-align: center;

  //     // .train-tag {
  //     //   background: #e9ee50;
  //     //   color: #000000;
  //     //   font-size: 22rpx;
  //     //   padding: 10rpx 3rpx;
  //     //   border-radius: 6rpx;
  //     //   line-height: 1.3;
  //     // }

  //     // .rest-tag {
  //     //   background: rgba(255, 255, 255, 0.08);
  //     //   color: #999999;
  //     //   font-size: 28rpx;
  //     //   padding: 12rpx 0;
  //     //   border-radius: 6rpx;
  //     // }
  //     /* 统一：训练标签 + 休息标签 样式 */
  //     .train-tag,
  //     .rest-tag {
  //       width: 90% !important;
  //       /* 固定宽度 */
  //       height: 60rpx !important;
  //       /* 固定高度 */
  //       line-height: 60rpx !important;
  //       /* 文字垂直居中 */
  //       font-size: 22rpx !important;
  //       /* 固定文字大小 */
  //       border-radius: 6rpx !important;
  //       display: flex !important;
  //       align-items: center !important;
  //       justify-content: center !important;
  //       box-sizing: border-box !important;
  //       overflow: hidden;
  //       /* 文字超长隐藏，不撑开盒子 */
  //       white-space: nowrap;
  //       /* 不换行 */
  //     }

  //     .train-tag {
  //       background: #e9ee50 !important;
  //       color: #000000 !important;
  //     }

  //     /* 休息标签颜色 */
  //     .rest-tag {
  //       background: rgba(255, 255, 255, 0.08) !important;
  //       color: #999999 !important;
  //     }

  //   }
  // }
  /* 下方黄色标签/休整行 */
  .cal-content-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0rpx;

    /* 单日容器：7等分宽度，垂直居中放标签 */
    .cal-day-item {
      width: 14.28% !important;
      /* 100/7=14.28%，精准7列均分，代替12.5%，之前宽度错导致不齐！！重点 */
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 72rpx;
      /* 固定容器高度 */
      padding: 0 4rpx;

      /* 两个标签统一尺寸 */
      .train-tag,
      .rest-tag {
        width: 100%;
        height: 62rpx;
        border-radius: 6rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22rpx;
        box-sizing: border-box;
      }

      .tag-text {
        width: 100%;
        font-size: 22rpx;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }

      .train-tag {
        background: #e9ee50;
        color: #000;
      }

      .rest-tag {
        background: rgba(255, 255, 255, 0.08);
        color: #999;
      }
    }
  }



  padding-bottom:32rpx;
  border-bottom:1rpx solid rgba(255, 255, 255, 0.15);
}

/* 计划课程 */
.course-section {
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: white;
  margin-bottom: 20rpx;
}

.course-card {
  margin-top: 10rpx;
  display: flex;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  padding: 15rpx;
  box-sizing: border-box;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.course-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  object-fit: cover;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.course-content {
  flex: 1;
  padding-right: 20rpx;
}

.course-name {
  font-size: 32rpx;
  color: white;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
  margin-bottom: 10rpx;

  .meta-item {
    font-size: 24rpx;
    color: #ccc;
    padding: 0 10rpx;
  }
}

.course-parts {
  font-size: 22rpx;
  margin-left: 10rpx;
  color: #ccc;
  margin-bottom: 20rpx;
}

.course-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10rpx;
  margin-top: 10rpx;

  .btn {

    margin: 0;
    font-size: 22rpx;

    .go-text {
      display: inline-block;
      background-color: #121212;
      color: #ffd700;
      border-radius: 50%;
      padding: 2rpx 8rpx;
      font-size: 18rpx;
      font-weight: bold;
      margin-left: 8rpx;
    }
  }
}

.arrow-right {
  width: 24rpx;
  height: 24rpx;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.course-card:hover .arrow-right {
  opacity: 1;
}

/* 按钮区域 */
.button-group {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 99;
  justify-content: space-between;
  gap: 20rpx;
  padding: 20rpx;
  background-color: #242424;

  .btn {
    line-height: 1;
    color: #333;
    padding: 24rpx 48rpx;
    border-radius: 50rpx;
    font-size: 24rpx;
    font-weight: bold;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
    text-align: center;
  }

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

// 更多弹窗遮罩
.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;
  }
}

.plan-container {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #121212; // 匹配原图深色背景
  color: #fff;
  font-size: $base-font;
  font-size: 24rpx;
  padding-bottom: 100rpx;
}

// 标题样式
.plan-title {
  width: 100%;
  text-align: start;
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

// 计划描述
.plan-desc {
  margin-bottom: 5vw;
  opacity: 0.9;
}

// 分块区域
.plan-section {
  margin-bottom: 5vw;

  // 分块标题
  .section-title {
    font-size: 5.333vw;
    font-weight: 600;
    margin-bottom: 2vw;
    color: #f0f0f0;
  }

  // 列表项
  .section-list {
    .list-item {
      margin-bottom: 1.5vw;
      opacity: 0.85;
    }
  }

  // 内容块
  .section-content {
    opacity: 0.85;
  }
}

/* 底部弹窗遮罩 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  /* 关键：底部对齐 */
}

/* 底部弹窗主体 */
.popup-bottom {
  width: 100%;
  background: #1e1e1e;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;
  box-sizing: border-box;
}

/* 顶部拖动条 */
.popup-indicator {
  width: 80rpx;
  height: 8rpx;
  background: #444;
  border-radius: 4rpx;
  margin: 0 auto 30rpx;
}

/* 弹窗标题 */
.popup-title {
  font-size: 34rpx;
  color: #fff;
  text-align: center;
  font-weight: bold;
  display: block;
  margin-bottom: 30rpx;
}

/* 顶部说明 + 计数 */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;

  .tip-left {
    font-size: 28rpx;
    color: #fff;
  }

  .tip-right {
    font-size: 28rpx;
    color: #ffd700;
  }
}

/* 星期选择网格（7列） */
.week-grid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.week-day {
  width: 80rpx;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #333;
  border-radius: 12rpx;
  color: #fff;
  font-size: 28rpx;

  .rest-text {
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
  }
}

/* 选中状态样式（和例图一致） */
.week-day.selected {
  background: #ffd700;
  color: #000;

  .rest-text {
    color: #000;
  }
}

/* 底部提示文案 */
.popup-desc {
  font-size: 26rpx;
  color: #999;
  line-height: 1.6;
  margin-bottom: 40rpx;
}

/* 确认按钮 */
.confirm-btn {
  width: 100%;
  height: 80rpx;
  background: #ffd700;
  color: #000;
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: bold;
  border: none;
}

/* 按钮禁用状态（和例图一致：灰色、不可点） */
.confirm-btn.disabled {
  background: #444;
  color: #666;
  pointer-events: none;
}
</style>