<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" />
      <!-- 收藏 -->
      <view
        class="banner-btn collect-btn"
        :class="{ 'is-fav': isFavorite }"
        @click="toggleAddPlan"
      >
        <up-icon
          :name="isFavorite ? 'heart-fill' : 'heart'"
          size="22"
          :color="isFavorite ? '#ffd700' : '#fff'"
        />
      </view>
      <!-- 分享按钮：微信端用 open-type="share"，H5 端用普通按钮 -->
      <!-- #ifdef MP-WEIXIN -->
      <button class="banner-btn share-btn" open-type="share">
        <up-icon name="share" size="22" color="#fff" />
      </button>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <view class="banner-btn share-btn" @click="handleShare">
        <up-icon name="share" size="22" color="#fff" />
      </view>
      <!-- #endif -->

    </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">
      <view class="equipment-label">
        <up-icon name="tags" color="#999" size="22"></up-icon>
        <text>器械</text>
      </view>
      <view class="tag-item" v-for="items in plandetail.equipmentsSummaryNames" :key="items">
        <text>{{ items }}</text>
      </view>
    </view>

    <!-- 未来7天训练日日历模块 -->
    <view class="calendar-section" v-if="isMyPlan === true">
      <view class="cal-header">
        <view class="cal-title-row">
          <up-icon name="calendar" size="22" color="#e9ee50" />
          <text class="cal-title">训练日</text>
        </view>
        <view class="cal-set-btn" @click="openArrageClass">排课设置</view>
      </view>
      <!-- 7天日历 -->
      <view class="cal-grid">
        <view v-for="(item, idx) in calWeekList" :key="idx" class="cal-col" :class="{ 'is-today': idx === 0 }">
          <!-- 星期 + 日期 -->
          <view class="cal-date">
            <text class="day-week">{{ item.topText }}</text>
            <text class="day-num">{{ item.num }}</text>
          </view>
          <!-- 课程/休息标签 -->
          <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>

    <!-- 计划课程(模板) -->
    <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>
            <up-icon name="arrow-right" size="10" color="#fff"></up-icon>
          </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 btn-dark"
              @click.stop="openCalendarPopup(plandetail.id, item.id)">添加到日历</button>

            <button type="primary" size="mini" class="btn btn-gold" @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="!isPlanAdded && !isMyPlan">
        <!-- 官方计划的底部按钮（未添加） -->
        <button type="default" @click="openTrainingPopup" class="btn end" size="large">
          单节课程训练
        </button>
        <button type="default" @click="openChooseWeekPopup" class="btn ones" size="large">
          加入计划
        </button>
      </template>
      <!-- 官方计划已添加 -->
      <template v-else-if="isPlanAdded && !isMyPlan">
        <button type="default" @click.stop="confirmDelete(plandetail.id)" class="btn end" size="large">
          结束计划
        </button>
        <button type="default" @click="openTrainingPopup" class="btn ones" size="large">
          马上开练
        </button>
      </template>
      <!-- 个人计划 -->
      <template v-else>
        <button type="default" class="btn end" @click="openTrainingPopup" size="large">
          马上开练
        </button>
        <button type="default" @click="openArrageClass" class="btn ones" size="large">
          更改排课
        </button>
        <view class="Icon" @click="showMorePopup = true">
          <up-icon name="more-dot-fill" 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">
              <up-icon name="reload" size="22" color="#fff"></up-icon>
              <text class="item-text">重新开始计划</text>
            </view>
            <!-- 注意这里结束整个计划，用的每日模板的删除个人计划接口，传递的是官方计划planId -->
            <view class="more-item" @click.stop="confirmDelete(plandetail.planId)">
              <up-icon name="close" size="22" color="#fff"></up-icon>
              <text class="item-text">结束整个计划</text>
            </view>
          </view>
        </view>
      </template>
    </view>
    <!-- 加入计划/重新开始计划的弹窗 -->
    <WeekSelectPopup v-model:visible="showWeekPopup" :max-count="plandetail.frequencyPerWeek || 7" :plan-detail="plandetail"
      @success="loadDetailUpdate" :is-update="isUpdate" />

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

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

  </view>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
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'
import dayjs from 'dayjs';

const trainingStore = useTrainingStore()

// 获取页面参数

// const plandetail = ref([]);
const plandetail = ref({});
//传参
const id = ref();
const difficultyText = { 1: '初阶', 2: '中阶', 3: '高阶' };
// 控制选择星期弹窗显示/隐藏
const showWeekPopup = ref(false)
// 用户选择的星期：[1,3] 代表周一、周三
// const selectedWeekList = ref([])
// 星期映射（dayjs day() → 中文星期）
const WEEK_DAY_MAP = ['日', '一', '二', '三', '四', '五', '六'];

const isUpdate = ref(false)

const calWeekList = ref([])

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

const showPlanPopup = ref(false)

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

/** 接口 weeklySchedule 转日历渲染数据（使用 dayjs 计算星期） */
const formatWeekData = (weekArr) => {
  return weekArr.map((item, index) => {
    const [y, m, d] = item.date;
    const dateObj = dayjs(`${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`);
    const realWeekText = WEEK_DAY_MAP[dateObj.day()];

    return {
      topText: index === 0 ? '今' : realWeekText,
      num: String(d),
      trainName: item.scheduled ? item.templateName : '',
      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 trainingPlanId = ref(0)
const openTrainingPopup = () => {
  showPlanPopup.value = true;
  if (isMyPlan.value) {
    trainingPlanId.value = plandetail.value.planId

  } else {
    trainingPlanId.value = plandetail.value.id
  }
  console.log('trainingPlanId=', trainingPlanId.value);
}

// 跳转到排课页面
const openArrageClass = () => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/wode-jihua-paike?planid=${plandetail.value.id}`
  })
}

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

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

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

};

/** 查看每日模板详情 */
const openTemplateDatil = (templateId, dateArr) => {
  if (!templateId) return;

  const [y, m, d] = dateArr;
  const dateStr = dayjs(`${y}-${m}-${d}`).format('YYYY-MM-DD');
  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' });
            if (isMyPlan.value) {
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }
          } else {
            uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
          }
        } catch (err) {
          console.error('删除计划失败：', err);
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        } finally {
          if (!isMyPlan.value) {
            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}`
  });
};
/** H5 端分享（兼容微信端外浏览器） */
const handleShare = () => {
  // #ifdef H5
  const url = window.location.href;
  const title = plandetail.value?.name || '健身计划分享';
  if (navigator.share) {
    navigator.share({
      title,
      url,
    }).catch(() => {});
  } else {
    // 兜底：复制链接
    uni.setClipboardData({
      data: url,
      success: () => {
        uni.showToast({ title: '链接已复制', icon: 'success' });
      },
    });
  }
  // #endif
};



//获取计划详情
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 loadDetailUpdate = () => {
  loadDetail();
  isAddToMyPlanList();
}

// // 检查当前计划是否已经添加到我的计划列表
// 计划是否已添加
const isPlanAdded = ref(false);
const isAddToMyPlanList = async () => {
  if (!id.value) return;
  try {
    const res = await QueryPlanApi.isAddPlan(Number(id.value));
    // 后端返回布尔值，赋值状态
    isPlanAdded.value = res.data === true;
    console.log("当前计划是否已加入我的计划：", isPlanAdded.value);
  } catch (err) {
    console.error("查询是否加入计划失败：", err);
    isPlanAdded.value = false;
  }
};

const isFavorite = ref(false)
// 检查当前计划是否已经收藏
const checkPlanAddedStatus = async () => {
  if (!id.value) return;
  try {
    const res = await QueryPlanApi.checkFavorite(id.value);
    console.log('计划是否已经收藏：', res);
    isFavorite.value = res.data === true;
    console.log("计划是否已经收藏：", isFavorite.value);
  } catch (err) {
    console.error("检查计划收藏状态失败：", err);
    isFavorite.value = false;
  }
};

// 切换添加/取消收藏计划
const toggleAddPlan = async () => {
  if (!id.value) {
    uni.showToast({ title: "计划ID不存在", icon: "none" });
    return;
  }
  const originalStatus = isFavorite.value;
  // 点了立刻变爱心）
  isFavorite.value = !originalStatus;
  try {
    // 调用添加计划接口
    const params = isFavorite.value ? 1 : 0;
    await QueryPlanApi.toggleFavorite(Number(id.value), params);
    if (!originalStatus) {
      uni.showToast({ title: "收藏计划成功" });
    } else {
      uni.showToast({ title: "已取消收藏" });
    }
  } catch (err) {
    // 失败回滚
    isFavorite.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(); // 检查计划是否已收藏
  isAddToMyPlanList(); // 新增：查询是否加入我的计划
  // #ifdef MP-WEIXIN
  wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  });
  // #endif
});
onMounted(() => {
  loadDetail();
  uni.$on('calendarDataRefresh', loadDetail);
});
onUnmounted(() => {
  uni.$off('calendarDataRefresh', loadDetail);
});
</script>

<style scoped lang="scss">
.fitness-plan-page {
  width: 100%;
  min-height: 100vh;
  background-color: #121212;
  color: white;
  padding-bottom: 70rpx;
}

/* Banner 悬浮按钮通用样式 */
.banner-btn {
  position: absolute;
  top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8rpx);
  z-index: 11;
  transition: transform 0.2s, background 0.2s;
}

.banner-btn:active {
  transform: scale(0.88);
}

/* 收藏按钮 */
.collect-btn {
  right: 100rpx;
}

.collect-btn.is-fav {
  background: rgba(255, 215, 0, 0.15);
  border: 2rpx solid rgba(255, 215, 0, 0.5);
  animation: favPop 0.35s ease;
}

@keyframes favPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* 分享按钮 */
.share-btn {
  right: 20rpx;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1;
  box-sizing: border-box;
}

/* 清除 button 默认样式（微信端 open-type=share 的 button） */
.share-btn::after {
  border: none;
}

/* 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 .desc {
  font-size: 24rpx;
  color: #999;
}

.number-unit {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4rpx;
  margin-bottom: 10rpx;
}

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

.equipment-label {
  display: flex;
  align-items: center;
  gap: 6rpx;
  color: #999;
  font-size: 26rpx;
  margin-right: 4rpx;
}

.tag-item {
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #ccc;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1rpx solid rgba(255, 255, 255, 0.1);
}

// ==================== 训练日日历模块 ====================
.calendar-section {
  margin: 20rpx 24rpx;
  padding: 28rpx 24rpx;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.2);

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

    .cal-title-row {
      display: flex;
      align-items: center;
      gap: 10rpx;

      .cal-title {
        font-size: 30rpx;
        color: #fff;
        font-weight: 600;
      }
    }

    .cal-set-btn {
      color: #fff;
      background: transparent;
      font-size: 22rpx;
      padding: 6rpx 18rpx;
      border-radius: 999rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.3);
      line-height: 1.4;
    }
  }

  // 7 列日历网格
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8rpx;
  }

  .cal-col {
    display: flex;
    flex-direction: column;
    align-items: center;

    .cal-date {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 10rpx;

      .day-week {
        font-size: 22rpx;
        color: #999;
        margin-bottom: 4rpx;
      }

      .day-num {
        font-size: 30rpx;
        color: #fff;
        font-weight: 500;
      }
    }

    // 今日高亮
    &.is-today {
      .day-week {
        color: #e9ee50;
        font-weight: 600;
      }
      .day-num {
        color: #e9ee50;
        font-weight: 700;
      }
    }
  }

  // 训练 / 休息标签统一尺寸
  .train-tag,
  .rest-tag {
    width: 100%;
    height: 58rpx;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    box-sizing: border-box;
    line-height: 1.2;
  }

  .train-tag {
    background: #e9ee50;
    color: #000;
    font-weight: 600;
    box-shadow: 0 2rpx 6rpx rgba(233, 238, 80, 0.25);

    &:active {
      transform: scale(0.94);
      transition: transform 0.12s;
    }

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

  .rest-tag {
    background: rgba(255, 255, 255, 0.05);
    color: #666;
    font-size: 20rpx;
  }
}

/* 计划课程 */
.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;
    }
  }

  .btn-dark {
    background-color: #333;
    color: white;
    border-radius: 20rpx;
    margin: 0;
    font-size: 22rpx;
  }

  .btn-gold {
    background-color: #ffd700;
    color: black;
    border-radius: 20rpx;
    margin: 0;
    font-size: 22rpx;

    .go-text {
      background-color: #121212;
      color: #ffd700;
    }
  }
}

/* 按钮区域 */
.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;
  }

  .end {
    background-color: white;
    flex: 1;
  }

  .ones {
    background-color: #ffd700;
    flex: 1.5;
  }

  .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: 24rpx;
  padding-bottom: 100rpx;
}
</style>