<!-- 
 训练动作详情页（xunji-dongzuo-xiangqing.vue）
 核心用于展示单个体能训练动作的完整信息，并提供动作管理、训练启动、收藏分享等操作，适配移动端多端（微信小程序 / APP/H5 等）。
 备注这个字段，没有接口，没有交互，只是前端渲染
 -->
<template>
  <view class="container">
    <!-- 页面头部编辑/分享/收藏三个按钮 -->
    <view class="page-header">
      <text class="title">{{ exercisedetail.name }}</text>
      <view class="header-icons">
        <uni-icons type="more" size="24" color="#fff" @click="edit"></uni-icons>
        <!-- 分享按钮 -->
        <button class="share-btn" open-type="share">
          <uni-icons type="paperplane" size="24" color="#fff"></uni-icons>
        </button>
        <uni-icons :type="islove ? 'heart-filled' : 'heart'" size="24" color="#fff" @click="toggleCollect"></uni-icons>
      </view>
    </view>
    <!--标签栏（可切换的 3 个页面）要点，历史，平替动作-->
    <view class="tab-bar">
      <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
        @click="switchTab(index)">
        <text class="tab-text">{{ tab }}</text>
      </view>
    </view>
    <!-- 主体内容区域 -->
    <view class="content">
      <!-- 1. 要点标签 -->
      <view v-if="activeTab === 0">
        <!-- 1.1.视频讲解 -->
        <view class="video-section">
          <text class="section-title">视频讲解</text>
          <view class="video-container">
            <!-- 有视频 → 显示视频 -->
            <video v-if="hasVideo"
              :src="exercisedetail.urlTutorial || exercisedetail.urlRealPerson || exercisedetail.url3dAnimation"
              :poster="exercisedetail.urlImage" class="video-player" controls show-center-play-btn
              @error="handleVideoError">
            </video>
            <!-- 没有视频 → 显示图片 -->
            <view v-else>
              <image
                :src="exercisedetail.urlImage || 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png'"
                :key="exercisedetail.urlImage" class="video-img">
              </image>
            </view>
          </view>
        </view>

        <!-- 1.2. 备注框 -->
        <view class="note-section" @click="openNotePopup">
          <view class="note-header">
            <text class="note-title">备注</text>
            <u-icon name="edit" size="20" color="#FFD700"></u-icon>
          </view>
          <text class="note-text">{{ exercisedetail.note || '点击此处填写训练备注' }}</text>
        </view>

        <!-- 1.3. 步骤框 -->
        <view class="steps-section">
          <text class="section-title">步骤</text>
          <view class="steps-content">
            <rich-text :nodes="exercisedetail.stepDescription"></rich-text>
          </view>
        </view>

        <!-- 1.4. 训练部位显示框 -->
        <view class="muscle-section">
          <text class="section-title">训练部位</text>
          <view class="muscle-container">
            <image
              src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260424/muscle_back_1777018976173.png">
            </image>
            <view class="legend">
              <view class="legend-item">
                <view class="legend-color primary"></view>
                <text class="legend-text">主要部位：{{ exercisedetail.primaryMuscleNames.join(', ') || '无' }}</text>
              </view>
              <view class="legend-item">
                <view class="legend-color secondary"></view>
                <text class="legend-text">次要部位：{{ exercisedetail.secondaryMuscleNames.join(', ') || '无' }}</text>
              </view>
            </view>
          </view>
        </view>

      </view>

      <!--2.  历史标签内容 -->
      <view v-else-if="activeTab === 1">
        <view class="history-section">
          <!-- 关键修改：去掉 content 类的居中布局，改为正常流布局 -->
          <view v-if="historyList.length > 0" class="history-list">
            <view v-for="(item, index) in historyList" :key="index" class="history-card">
              <!-- 1. 日期置顶 -->
              <view class="card-date">
                <text class="date-text">{{ item.date ? `${item.date[0]}/${item.date[1]}/${item.date[2]}` : '未知日期'
                }}</text>
              </view>
              <!-- 2. 主体信息区域 -->
              <view class="card-body">
                <view class="card-header">
                  <text class="history-name">{{ item.name }}</text>
                  <text class="history-set">{{ item.setCount }}组</text>
                </view>
                <view class="card-config">
                  <text class="config-text">配置数: {{ item.setConfigList?.length || 0 }}</text>
                </view>
              </view>
            </view>
          </view>

          <view v-else class="empty-container">
            <image :src="lostImage" class="empty-img"></image>
            <text class="empty-text">暂无历史数据</text>
          </view>
        </view>
      </view>

      <!-- 3. 平替动作标签内容 -->
      <view v-else-if="activeTab === 2">
        <!-- 内容区域 -->
        <view class="content">
          <view class="alternative-list">
            <view v-for="(item, index) in alternativeActions" :key="index" class="action-item"
              @click="goToDetail(item)">
              <image class="action-img" :src="item.urlImage || lostImage" mode="aspectFill"></image>
              <view class="action-bottom">
                <view class="action-info">
                  <view class="action-name">{{ item.name }}</view>
                  <!-- 练过多少次，这个数据库没有字段 -->
                  <!-- <view class="action-desc">练过{{ item.times }}次</view> -->
                </view>
                <u-icon name="arrow-right" size="24" color="#999"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 底部固定按钮：点击这里会跳转到动作训练页面 -->
      <view class="bottom-btn">
        <button type="primary" shape="circle" size="large" class="start-btn" @click="start">立即开始</button>
      </view>
    </view>

    <!-- 底部隐藏的编辑控制弹窗 -->
    <uni-popup ref="editPopup" type="bottom">
      <view class="popup-content">
        <text class="popup-title">动作管理</text>
        <view class="popup-options">
          <!-- 编辑名称 -->
          <view class="popup-option" @click="confirmEditName">
            <u-icon name="edit-pen" size="32" color="#FFD700"></u-icon>
            <text class="option-text">编辑名称</text>
          </view>
          <!-- 删除动作 -->
          <view class="popup-option delete-option" @click="confirmDelete">
            <u-icon name="trash" size="32" color="#ff4d4f"></u-icon>
            <text class="option-text delete-text" @click="deleteexercise">删除动作</text>
          </view>
        </view>
        <button class="popup-cancel-btn" @click="closeEditPopup">取消</button>
      </view>
    </uni-popup>
  </view>
  <!-- 自定义分类编辑底部弹窗 -->
  <u-popup ref="editCategoryPopup" mode="bottom" :mask-click="false" :safe-area-inset-bottom="true">
    <view class="popup-wrap">
      <!-- 弹窗头部 -->
      <view class="popup-header">
        <u-icon name="close" size="24" color="#333" @click="closeEditPopup"></u-icon>
        <text class="popup-title">自定义分类名称修改</text>
        <view></view>
      </view>
      <view class="popup-tip">仅可修改自定义添加的分类名称</view>

      <!-- 分类列表区 -->
      <scroll-view class="popup-list" scroll-y>
        <view class="popup-item" v-for="(item, index) in customCategories" :key="item.id" @click="openEditModal(item)">
          <text class="item-name">{{ item.name }}</text>
          <u-icon name="edit-pen" size="20" color="#333"></u-icon>
        </view>
      </scroll-view>
    </view>
  </u-popup>

  <uni-popup ref="notePopup" type="bottom" :mask-click="true">
    <view class="note-popup-wrap">
      <view class="popup-header">
        <uni-icons name="close" size="24" color="#fff" @click="closeNotePopup"></uni-icons>
        <text class="popup-title">编辑训练备注</text>
        <view></view>
      </view>
      <view class="note-input-wrap">
        <textarea v-model="tempNoteContent" class="note-textarea" placeholder="请输入你的训练备注，比如动作要点、注意事项..." auto-height
          maxlength="500"></textarea>
      </view>
      <view class="popup-footer">
        <button class="save-btn" @click="saveNoteContent">保存</button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';
// import { onLoad } from '@dcloudio/uni-app';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import ExercisesApi from '@/sheep/api/motion/exercises';
import TrainingApi from '@/sheep/api/Training/traininghistory'

const lostImage = "https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
// 这个id接收上一个页面的动作id，这个是必要的，因为需要动作id查找动作的详情，在onLoad中接收
const id = ref();
// 当前激活的标签，切换动作详情标签栏，eg，0要点，1历史，2平替动作
const activeTab = ref(0);
//控制删除动作或者编辑动作弹窗显现
const editPopup = ref(null);
// 标签列表
const tabs = ['要点', '历史', '平替动作'];
//收藏状态(在项目初期已经引入)
const islove = ref(false);
// const noteContent = ref('点击此处填写训练备注'); 
// 接口数据接收字段
const alternativeActions = ref([]); // 平替动作列表接口数据
const exercisedetail = ref({});     //单动作详情接口数据
const historyList = ref([]); // 训练历史列表接口数据
// 备注弹窗相关
const notePopup = ref(null);
const tempNoteContent = ref(''); // 临时编辑的备注内容
const customCategories = ref([]);

// =================================接口数据加载==============================================
// 加载训练历史
const loadTrainHistoryDetail = async (id) => {
  try {
    console.log("即将查询的历史ID =", id);
    const res = await TrainingApi.getTrainHistoryList(id)
    historyList.value = res.data
    console.log('训练历史列表接口返回结果historyList.value', historyList.value);
  } catch (error) {
    console.error('加载训练历史失败:', error);
  }
}
// 2. 加载平替动作的函数
const loadAlternativeActions = async (id) => {
  if (!id || isNaN(Number(id))) {
    console.warn('平替动作id非法，跳过请求:', id);
    alternativeActions.value = [];
    return;
  }
  try {
    const res = await ExercisesApi.getalternatives(id);
    console.log('平替动作列表：', res)
    // 增强：兼容后端不同返回结构
    if (res.code === 0 && res.data) {
      alternativeActions.value = Array.isArray(res.data) ? res.data : [];
    } else {
      alternativeActions.value = [];
      // 新增：后端返回错误时的友好提示
      uni.showToast({
        title: res.msg || '暂无平替动作',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('加载平替动作失败:', error);
    alternativeActions.value = [];
    // 新增：网络错误时的友好提示
    uni.showToast({
      title: '加载平替动作失败',
      icon: 'none'
    });
  }
};
// 加载单个动作详情
const loadexercisedetail = async (id) => {
  const response = await ExercisesApi.getExerciseById(id);
  exercisedetail.value = response.data;
  console.log('单动作详情接口返回动作详情exercisedetail：', exercisedetail.value)
};
// =================================顶部功能栏==============================
// 切换标签函数
const switchTab = (index) => {
  activeTab.value = index;
};
// 切换收藏/取消收藏（对接你正确的接口）
const toggleCollect = async () => {
  if (!id.value) {
    uni.showToast({ title: '动作ID不存在', icon: 'none' });
    return;
  }

  const originalStatus = islove.value;
  // 乐观更新UI（点了立刻变颜色，体验更好）
  islove.value = !originalStatus;

  try {
    // 收藏状态：传 1，取消收藏：传 0
    const status = islove.value ? 1 : 0;

    // 调用收藏接口
    await ExercisesApi.toggleFavorite(id.value, status);

    if (status === 1) {
      uni.showToast({ title: '收藏成功' });
    } else {
      uni.showToast({ title: '已取消收藏' });
    }
  } catch (err) {
    // 接口失败，回滚状态
    islove.value = originalStatus;
    console.error('收藏操作失败：', err);
    uni.showToast({ title: '操作失败', icon: 'none' });
  }
};
// 检查当前动作是否已收藏
const checkCollectStatus = async () => {
  if (!id.value) return;
  try {
    const res = await ExercisesApi.checkExerciseFavorited(id.value);
    // 接口返回 true = 已收藏
    if (res.data === true) {
      // 后端说已收藏
      islove.value = true; // 实心爱心
    } else {
      // 后端说没收藏
      islove.value = false; // 空心爱心
    }
    // 打印
    console.log('检查收藏状态接口返回：', res);
  } catch (err) {
    console.error('检查收藏状态失败：', err);
    islove.value = false;
  }
};
// ============================备注===============
const openNotePopup = () => {
  console.log('备注区域被点击了！', exercisedetail.value.note);
  tempNoteContent.value = exercisedetail.value.note || '';

  // 内置 popup 用 .open()
  notePopup.value.open();
}
// 关闭备注编辑弹窗
const closeNotePopup = () => {
  notePopup.value.close();
}
// 保存备注
const saveNoteContent = async () => {
  const content = tempNoteContent.value.trim();

  // 关闭弹窗
  closeNotePopup();

  // 如果内容为空，直接返回，不提交
  if (!content) {
    uni.showToast({ title: '备注不能为空', icon: 'none' });
    return;
  }

  try {
    // 调用接口提交备注
    const res = await ExercisesApi.addNotes(id.value, content);
    if (res.code === 0) {
      // 更新页面上的备注
      exercisedetail.value.note = content;
      uni.showToast({ title: '备注保存成功', icon: 'success' });
    } else {
      uni.showToast({ title: res.msg || '保存失败', icon: 'none' });
    }
  } catch (error) {
    console.error('保存备注失败：', error);
    uni.showToast({ title: '网络错误，保存失败', icon: 'none' });
  }
}
// ==================================动作详情底部弹窗=================
//底部删除动作/编辑动作名称弹窗开关
const edit = () => {
  editPopup.value.open();
};
const closeEditPopup = () => {
  editPopup.value.close();
};

//删除动作功能
const deleteexercise = async () => {
  const res = await ExercisesApi.deleteexercises(exercisedetail.value.id);
  if (res.data == true) {
    uni.showToast({ title: '删除成功' });
    editPopup.value.close();
  } else {
    uni.showToast({ title: '禁止删除官方动作' });
  }
};
// 编辑名称功能
const confirmEditName = () => {
  // 关闭底部管理弹窗
  editPopup.value.close();
  // 弹出输入框
  uni.showModal({
    title: '编辑动作名称',
    editable: true,
    placeholderText: '请输入新名称',
    content: exercisedetail.value.name || '', // 默认填入当前名称
    success: async (res) => {
      if (res.confirm && res.content.trim()) {
        const newName = res.content.trim();
        if (newName === exercisedetail.value.name) {
          return;
        }
        try {
          // 新动作内容赋值
          const updateData = {
            id: exercisedetail.value.id,
            name: newName,
            primaryMuscles: exercisedetail.value.primaryMuscles,
            secondaryMuscles: JSON.stringify(exercisedetail.value.secondaryMuscles),
          };
          // 调用更新动作接口
          const resUpdate = await ExercisesApi.updateexercises(updateData);
          if (resUpdate.code === 0 || resUpdate.success) {
            // 根据你实际返回结构调整
            uni.showToast({ title: '修改成功', icon: 'success' });
            // 更新本地数据，避免重新请求
            exercisedetail.value.name = newName;
          } else {
            uni.showToast({ title: '修改失败', icon: 'none' });
          }
        } catch (error) {
          console.error('更新动作名称失败:', error);
          uni.showToast({ title: '网络错误', icon: 'none' });
        }
      }
    },
  });
};

// 判断是否有视频，要点标签的视频讲解功能
const hasVideo = computed(() => {
  // 只要存在一个即可（动作那边有三个视频字段）
  return !!(exercisedetail.value.urlTutorial || exercisedetail.value.urlRealPerson || exercisedetail.value.url3dAnimation)
})
// 加载视频失败
const handleVideoError = () => {
  console.log('视频加载失败')
  uni.showToast({
    title: '视频加载失败/没有视频',
    icon: 'none'
  });
}
//跳转到训记动作详情，传递动作的id，动作详情页面要接收动作id，渲染单动作详情
const goToDetail = (item) => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-dongzuo-xiangqing?id=${item.id}`,
  });
};
// 跳转到训记动作练习，传递动作类型为动作（unitType=1），以及动作的id，动作练习那边接收（动作id）
const start = () => {
  const exerciseId = exercisedetail.value.id;
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-dongzuo-lianxi?id=${exerciseId}&unitType=1`,
  });
};
// 定义分享内容
onShareAppMessage((res) => {
  // res.from 可区分触发来源：'button'（按钮触发）或 'menu'（右上角菜单触发）[reference:3]
  console.log('分享触发来源:', res.from);
  return {
    title: exercisedetail.value.name || '健身动作分享',          // 分享标题
    path: `/pages4/pages/xunji/xunji-dongzuo-xiangqing?id=${id.value}`, // 分享路径
    imageUrl: exercisedetail.value.urlImage || lostImage,       // 分享图片
  };
});
// 这里接收动作的id，加载动作详情，加载平替动作，加载训练历史
onLoad((options) => {
  id.value = options.id;
  // 启用分享菜单
  // #ifdef MP-WEIXIN
  wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  });
  // #endif
  loadexercisedetail(id.value);
  loadAlternativeActions(id.value);
  loadTrainHistoryDetail(id.value);
  checkCollectStatus(); // 检查收藏状态
});
onMounted(() => {
  console.log('notePopup 实例：', notePopup.value);
});
</script>

<style scoped lang="scss">
.container {
  position: relative;
  min-height: 100vh; // 把固定高度改成最小高度，解决滚动割裂
  background-color: #1a1a1a;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #1a1a1a;
  border-bottom: 1rpx solid #333;
}

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

.header-icons {
  display: flex;
  gap: 20rpx;
}

.tab-bar {
  display: flex;
  background-color: #1a1a1a;
  border-bottom: 1rpx solid #333;
}

.tab-item {
  padding: 20rpx 30rpx;
  text-align: center;
  border-bottom: 4rpx solid transparent;
}

.tab-item.active {
  border-bottom: 4rpx solid #ffd700;
  color: #ffd700;
}

.tab-text {
  font-size: 28rpx;
  color: #ccc;
}

.share-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.share-btn::after {
  border: none;
}

.content {
  flex: 1;
  padding: 30rpx;
  overflow-y: auto;
  min-height: calc(100vh - 200rpx); // 保证内容区域高度，背景不割裂
  background-color: #1a1a1a;
}

.video-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 20rpx;
}

.video-container {
  position: relative;
  width: 320rpx;
  height: 240rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.video-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.note-section {
  margin-bottom: 30rpx;
  background-color: #252525;
  padding: 20rpx;
  border-radius: 12rpx;
}

.note-header {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.note-title {
  font-size: 28rpx;
  color: #fff;
  margin-right: 10rpx;
}

.note-text {
  font-size: 24rpx;
  color: #999;
}

.steps-section {
  margin-bottom: 30rpx;
}

.steps-content {
  margin-top: 20rpx;
  color: #fff
}

.step-item {
  font-size: 28rpx;
  color: #fff;
  line-height: 40rpx;
  margin-bottom: 10rpx;
}

.step-item:nth-child(1),
.step-item:nth-child(2),
.step-item:nth-child(3),
.step-item:nth-child(4) {
  color: #ffd700;
}

.muscle-section {
  margin-bottom: 30rpx;
}

.muscle-container {
  margin-top: 20rpx;
  position: relative;
}

.muscle-img {
  width: 100%;
  height: 300rpx;
  object-fit: contain;
}

.legend {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20rpx;
  margin-top: 20rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.legend-color {
  width: 16rpx;
  height: 16rpx;
  border-radius: 4rpx;
}

.legend-color.primary {
  background-color: #ffd700;
}

.legend-color.secondary {
  background-color: #999;
}

.legend-text {
  font-size: 24rpx;
  color: #fff;
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 100rpx 0;
}

.empty-img {
  width: 200rpx;
  height: 200rpx;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 20rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.bottom-btn {
  padding: 30rpx;
  background-color: #1a1a1a;
}

.start-btn {
  width: 100%;
  height: 80rpx;
  background-color: #ffd700;
  color: #000;
  font-size: 32rpx;
  border-radius: 40rpx;
  line-height: 80rpx;
  text-align: center;
}

/* 平替动作标签样式 */
.alternative-section {
  margin-bottom: 30rpx;
}

.alternative-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-top: 20rpx;
  width: 100%;
}

.alternative-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #252525;
  border-radius: 12rpx;
  padding: 20rpx;
}

.alternative-img {
  width: 120rpx;
  height: 120rpx;
  object-fit: cover;
  border-radius: 8rpx;
  margin-bottom: 15rpx;
}

.alternative-name {
  font-size: 26rpx;
  color: #fff;
  text-align: center;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background: #252525;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  border: none;
}

.action-img {
  width: 100%;
  height: 180rpx;
  border-radius: 12rpx;
  object-fit: cover;
  margin-bottom: 12rpx;
}

.action-info {
  color: #fff;
}

.action-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-name {
  font-size: 30rpx;
}

/* 编辑弹窗样式 */
.popup-content {
  background-color: #252525;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding: 40rpx 30rpx 60rpx;
  min-height: 300rpx;
}

.popup-title {
  font-size: 32rpx;
  color: #fff;
  text-align: center;
  margin-bottom: 40rpx;
  font-weight: bold;
}

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

.popup-option {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #333;
  border-radius: 16rpx;
  transition: background-color 0.2s;
}

.popup-option:hover {
  background-color: #444;
}

.option-text {
  font-size: 28rpx;
  color: #fff;
  margin-left: 20rpx;
}

.delete-option {
  background-color: #444;
}

.delete-text {
  color: #ff4d4f;
}

.popup-cancel-btn {
  width: 100%;
  height: 80rpx;
  background-color: #333;
  color: #ccc;
  font-size: 30rpx;
  border-radius: 40rpx;
  margin-top: 40rpx;
  border: none;
}

.popup-cancel-btn::after {
  border: none;
}

/* ===================== 历史记录样式（最终修复版） ===================== */
.history-section {
  width: 100%;
  margin-top: 0;
}

.history-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.history-card {
  width: 100%;
  box-sizing: border-box;
  background: #2a2a2a;
  border-radius: 16rpx;
  padding: 30rpx;
  border: 1rpx solid #383838;
}

.card-date {
  margin-bottom: 16rpx;
}

.date-text {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 500;
}

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

.history-name {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
}

.history-set {
  font-size: 26rpx;
  color: #ffd700;
  background: rgba(255, 215, 0, 0.15);
  padding: 6rpx 14rpx;
  border-radius: 8rpx;
}

.card-config .config-text {
  font-size: 26rpx;
  color: #cccccc;
}

/* 备注弹窗样式 - 深色主题适配 */
.note-popup-wrap {
  background-color: #252525;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding: 30rpx;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  /* 加上这两行，确保弹窗在页面最上层 */
  position: relative;
  z-index: 9999;
}

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

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

.note-input-wrap {
  flex: 1;
}

.note-textarea {
  width: 100%;
  min-height: 300rpx;
  border: 1rpx solid #444;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #fff;
  background-color: #333;
}

.popup-footer {
  margin-top: 30rpx;
}

.save-btn {
  width: 100%;
  height: 80rpx;
  background-color: #ffd700;
  color: #000;
  font-size: 30rpx;
  border-radius: 40rpx;
  border: none;
}
</style>