<template>
  <view class="template-select-page">
    <view class="page-header" hover-class="none">
      <!-- 动态导航栏：高度与胶囊对齐 -->
      <view class="nav-bar" :style="{
        paddingTop: menuButtonInfo.top + 'px',
        height: menuButtonInfo.height + 'px'
      }">
        <view class="nav-left" @click="goBack">
          <uni-icons class="back-icon" type="left" size="28"></uni-icons>
        </view>
        <view class="nav-title">选择模板</view>
        <view class="nav-right"></view>
      </view>

      <!-- 标签页 -->
      <view class="tab-bar">
        <!-- 左边的筛选按钮组 -->
        <view class="filter-group">
          <!-- 部位 -->
          <view class="filter-wrapper">
            <view class="tab-item" :class="{ active: activePartId !== '0' }" @click="togglePartDropdown">
              {{ activePartId === null ? '部位' : activePart }}
              <uni-icons :type="showPartDropdown ? 'up' : 'down'" size="18" color="#333"></uni-icons>
            </view>
            <view class="dropdown-menu" v-if="showPartDropdown">
              <view class="dropdown-item" :class="{ selected: activePartId === item.id }" v-for="item in partList"
                :key="item.id" @click="selectPart(item)">
                {{ item.title }}
              </view>
            </view>
          </view>
          <!-- 场景 -->
          <view class="filter-wrapper">
            <view class="tab-item" :class="{ active: activeSceneId !== '0' }" @click="toggleSceneDropdown">
              {{ activeSceneId === null ? '场景' : activeScene }}
              <uni-icons :type="showSceneDropdown ? 'up' : 'down'" size="18" color="#333"></uni-icons>
            </view>
            <view class="dropdown-menu" v-if="showSceneDropdown">
              <view class="dropdown-item" :class="{ selected: activeSceneId === item.id }" v-for="item in sceneList"
                :key="item.id" @click="selectScene(item)">
                {{ item.title }}
              </view>
            </view>
          </view>
        </view>
        <!-- 右边的加号 -->
        <view class="add-btn" @click="toggleAddMenu">
          <uni-icons type="plus" size="35" color="#333"></uni-icons>
          <view v-if="showAddMenu" class="add-menu-mask" @click.stop="closeAddMenu"></view>
          <!-- 加号菜单弹窗 -->
          <view v-if="showAddMenu" class="add-menu-popup">
            <view class="menu-item" @click="handleAddMenuClick">
              <view class="menu-icon">
                <!-- 新建模板图标，这里用uni-icons代替，也可以自己换图片 -->
                <uni-icons type="compose" size="24" color="#333"></uni-icons>
              </view>
              <text>新建模板</text>
            </view>
            <view class="menu-item" @click.stop="openCreateFolder">
              <view class="menu-icon">
                <uni-icons type="folder-add" size="24" color="#333"></uni-icons>
              </view>
              <text>新建文件夹</text>
            </view>
            <!-- <view class="menu-item">
              <view class="menu-icon">
                <uni-icons type="scan" size="24" color="#333"></uni-icons>
              </view>
              <text>扫码获取模板</text>
            </view> -->
          </view>
        </view>
      </view>
    </view>

    <view class="List">
      <!-- 文件夹列表 -->
      <scroll-view scroll-y="true" class="files">
        <view class="file-card" v-for="folder in folderList" :key="folder.id" @click="goToFolderDetail(folder)">
          <template v-if="folder.templatesCount > 0">
            <view class="left">
              <image class="img" :src="folder.urlCover || defaultFolderCover" mode="aspectFill" />
              <view class="template-state">
                <text class="template-name">{{ folder.name }}</text>
                <text class="template-number">{{ folder.templatesCount }}个模板</text>
              </view>
            </view>
            <view class="right" @click.stop="showFolderMenu(folder)">
              <uni-icons type="more-filled" size="22" color="#333" />
            </view>

          </template>
        </view>
      </scroll-view>

      <!-- 个人模板 -->
      <scroll-view scroll-y="true" class="template-list personal-template-list">
        <view class="grid-container">
          <view class="plan-card" v-for="(item, index) in templateList" :key="index" @click="goToPersonalDetail(item)">
            <image :src="item.urlCover || lostImage" mode="aspectFill" class="card-cover">
            </image>
            <view class="card-info">
              <view class="card-top">
                <text class="card-title">{{ item.name }}</text>
                <view @click.stop="showTemplateMenu(item)">
                  <uni-icons type="more-filled" size="22" color="#fff" />
                </view>
              </view>
              <view class="card-stats">
                <view class="stat-item">
                  <text class="stat-number">{{ item.exerciseCount }}</text>
                  <text class="stat-label">动作</text>
                </view>
                <view class="stat-item">
                  <text class="stat-number">{{ item.totalSets }}</text>
                  <text class="stat-label">组</text>
                </view>
                <view class="stat-item">
                  <text class="stat-number">{{ item.totalWeight }}</text>
                  <text class="stat-label">kg</text>
                </view>
              </view>
              <text class="tags-text" :maxLines="1">
                {{ item.primaryMuscleNames?.join(' ') || '' }}
              </text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 文件夹操作弹窗 -->
    <uni-popup ref="folderMenuPopup" type="bottom" background-color="#fff">
      <view class="folder-menu-popup">
        <view class="popup-title">{{ currentFolder?.name }}</view>
        <view class="menu-item" @click="handleRename">
          <uni-icons type="compose" size="22" color="#333" />
          <text>重命名</text>
        </view>
        <view class="menu-item danger" @click="handleDelete">
          <uni-icons type="trash" size="22" color="#e53935" />
          <text>删除文件夹</text>
        </view>
        <!-- <view class="cancel-btn" @click="closeFolderMenu">取消</view> -->
      </view>
    </uni-popup>

    <!-- 新建文件夹弹窗 -->
    <uni-popup ref="createFolderPopup" type="bottom" background-color="#fff">
      <view class="create-folder-popup">
        <!-- 顶部条 -->
        <view class="popup-header">
          <view class="close-btn" @click="closeCreateFolder">
            <uni-icons type="closeempty" size="24" color="#333" />
          </view>
          <view class="popup-title">文件夹名称</view>
          <view class="save-btn" @click="handleCreateFolder">保存</view>
        </view>
        <!-- 输入框区域 -->
        <view class="input-area">
          <textarea class="text-area" v-model="newFolderName" placeholder="请输入文件夹名称" maxlength="20" auto-height />
        </view>
      </view>
    </uni-popup>

    <TemplateMenuPopup ref="templateMenuRef" @refresh="handleRefreshTemplate" :folder-list="folderList" />

  </view>
</template>

<script setup>
import { onMounted, ref, nextTick } from 'vue';
import TemplatesApi from '@/sheep/api/Template/Templates';
import TemplateMenuPopup from '@/pages4/components/TemplateMenuPopup.vue'

const defaultFolderCover = "https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png";

// 获取模板列表
const templateList = ref([]);
const folderList = ref([])

// 筛选
const activePartId = ref(null);
const activePart = ref('不限');
const activeSceneId = ref(null);
const activeScene = ref('不限');

const showPartDropdown = ref(false);
const showSceneDropdown = ref(false);

const partList = ref([]);
const rawPartData = ref([]);

// 文件夹弹窗相关
const folderMenuPopup = ref(null);
const currentFolder = ref(null);

// 新建文件夹弹窗相关
const createFolderPopup = ref(null);
const newFolderName = ref('');

// 编辑文件夹
const isRenaming = ref(false);
const editingFolderId = ref(null);

// 菜单模板
const templateMenuRef = ref(null)

const lostImage = "https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png";

const sceneList = ref([
  { id: null, title: '不限' },
  { id: '1', title: '健身房' },
  { id: '2', title: '仅哑铃' },
  { id: '3', title: '仅哑铃+杠铃' },
]);

const getFolderList = async () => {
  try {
    const res = await TemplatesApi.getTemplateFileList();
    console.log('✅ 文件夹列表：', res.data);
    folderList.value = res.data || [];
  } catch (err) {
    console.error('获取文件夹失败：', err);
  }
};

// 获取我的模板（复用同一个 templateList）
const getMyTemplates = async () => {
  try {
    const res = await TemplatesApi.individualTemplates();
    console.log('打印个人模板res=', res);
    templateList.value = res.data;
  } catch (err) {
    console.log('我的模板加载失败', err);
  }
};
// 获取部位分类（接口，和首页完全一样）
const getPartCategories = async () => {
  try {
    const res = await TemplatesApi.getPartAllCategories();
    if (res.code === 0) {
      rawPartData.value = res.data;
      partList.value = [
        { title: '不限', id: null },
        ...res.data.map(item => ({
          title: item.name,
          id: String(item.id)
        }))
      ];
    }
  } catch (error) {
    console.log('部位获取失败', error);
  }
};

const handleRefreshTemplate = () => {
  getMyTemplates()    // 刷新个人模板
  getFolderList()    // 刷新文件夹
}



// 打开新建文件夹弹窗
const openCreateFolder = () => {
  console.log('打开前 showAddMenu.value =', showAddMenu.value);

  // 1. 先关闭加号菜单和其他下拉
  showAddMenu.value = false;
  showPartDropdown.value = false;
  showSceneDropdown.value = false;

  nextTick(() => {
    console.log('DOM更新后 showAddMenu.value =', showAddMenu.value);
    isRenaming.value = false;
    newFolderName.value = '';
    createFolderPopup.value?.open();
  });
};

// 关闭新建文件夹弹窗
const closeCreateFolder = () => {
  createFolderPopup.value?.close();
  // 关闭弹窗时，重置模式标记
  newFolderName.value = '';
  isRenaming.value = false;
  editingFolderId.value = null;
};

const handleCreateFolder = async () => {
  const name = newFolderName.value.trim();
  if (!name) {
    uni.showToast({ title: '请输入文件夹名称', icon: 'none' });
    return;
  }
  uni.showLoading({ title: isRenaming.value ? '保存中...' : '创建中...' });
  try {
    if (isRenaming.value) {
      // 重命名，调用更新接口
      await TemplatesApi.updateTemplateGroupName({
        id: editingFolderId.value,
        name: name
      });
      uni.showToast({ title: '重命名成功' });
    } else {
      await TemplatesApi.createGroup(name);
      uni.showToast({ title: '创建成功' });
    }

    // 关闭弹窗并刷新列表
    closeCreateFolder();
    getFolderList();
  } catch (err) {
    uni.hideLoading();
    console.error('操作失败：', err);
    uni.showToast({ title: '操作失败，请重试', icon: 'none' });
  }
};


// 弹出/关闭部位下拉
const togglePartDropdown = () => {
  showPartDropdown.value = !showPartDropdown.value;
  showSceneDropdown.value = false;
};

// 弹出/关闭场景下拉
const toggleSceneDropdown = () => {
  showSceneDropdown.value = !showSceneDropdown.value;
  showPartDropdown.value = false;
};

// 选择部位
const selectPart = (item) => {
  activePart.value = item.title;
  activePartId.value = item.id;
  showPartDropdown.value = false;
  doFilter(); // 筛选
};

// 选择场景
const selectScene = (item) => {
  activeScene.value = item.title;
  activeSceneId.value = item.id;
  showSceneDropdown.value = false;
  doFilter(); // 筛选
};

const doFilter = async () => {
  const muscleId = activePartId.value;
  const sceneId = activeSceneId.value;
  console.log('muscleId=', muscleId);
  console.log('sceneId', sceneId);


  try {
    const res = await TemplatesApi.queryCustTemplate(muscleId, sceneId);
    console.log('筛选之后的自定义模板列表：', res);

    templateList.value = res.data || [];
  } catch (err) {
    console.log('筛选失败', err);
  }
};

// 显示文件夹菜单弹窗
const showFolderMenu = (folder) => {
  currentFolder.value = folder;
  folderMenuPopup.value?.open();
};

// 关闭文件夹菜单弹窗
const closeFolderMenu = () => {
  folderMenuPopup.value?.close();
  currentFolder.value = null;
};

// 重命名
const handleRename = () => {
  isRenaming.value = true;
  editingFolderId.value = currentFolder.value.id;
  newFolderName.value = currentFolder.value.name;
  closeFolderMenu();
  nextTick(() => {
    createFolderPopup.value?.open();
  });
};

// 删除文件夹
const handleDelete = () => {
  uni.showModal({
    title: '确认删除？',
    content: '删除后无法恢复',
    confirmColor: '#e53935',
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({ title: '删除中...' });
          await TemplatesApi.deleteCustTemplateGroup(currentFolder.value.id);
          uni.hideLoading();
          uni.showToast({ title: '删除成功' });
          // 重新拉取最新文件夹列表
          getFolderList();
        } catch (err) {
          uni.hideLoading();
          console.error('删除失败：', err);
          uni.showToast({ title: '删除失败', icon: 'none' });
        }
      }
      closeFolderMenu();
    }
  })
};

const showAddMenu = ref(false);

// 点击加号按钮，显示/隐藏菜单
const toggleAddMenu = () => {
  showAddMenu.value = !showAddMenu.value;
  // 关闭其他下拉菜单
  showPartDropdown.value = false;
  showSceneDropdown.value = false;
};

// 模板图标菜单弹窗

const showTemplateMenu = (item) => {
  templateMenuRef.value.showTemplateMenu(item)
};

// 点击菜单选项后关闭弹窗
const handleAddMenuClick = () => {
  showAddMenu.value = false;
  uni.navigateTo({
    url: '/pages4/pages/xunji/wode-xinjian-moban',
  });
};

// 点击遮罩关闭弹窗
const closeAddMenu = () => {
  showAddMenu.value = false;
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

const goToFolderDetail = (item) => {
  // 传入的是模板大类的id,可以通过模板大类id查询到模板大类包含的模板，这个页面在page4
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban?id=${item.id}&isBigTemOffice=true&foldList=${encodeURIComponent(JSON.stringify(folderList.value))}`,
  });
};


// 个人模板点击跳转（直接进详情）
const goToPersonalDetail = (item) => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban-xiangqing?id=${item.id}&isOffice=false`,
  });
};

// 获取胶囊按钮信息，用于动态适配导航栏高度
const menuButtonInfo = ref({
  top: 44,    // 默认值，避免获取失败时样式异常
  height: 32
});

onMounted(() => {
  // TemplatesList();
  getMyTemplates();
  getPartCategories();
  getFolderList();

  // 获取小程序胶囊位置信息，实现导航栏与胶囊完美对齐
  // #ifdef MP-WEIXIN
  try {
    const rect = uni.getMenuButtonBoundingClientRect();
    if (rect) {
      menuButtonInfo.value = {
        top: rect.top,
        height: rect.height
      };
    }
  } catch (e) {
    console.log('获取胶囊信息失败，使用默认值', e);
  }
  // #endif

  // #ifndef MP-WEIXIN
  // 非微信小程序环境，使用系统状态栏高度 + 标准导航栏高度
  try {
    const systemInfo = uni.getSystemInfoSync();
    const statusBarHeight = systemInfo.statusBarHeight || 20;
    menuButtonInfo.value = {
      top: statusBarHeight,
      height: 44  // 标准导航栏高度
    };
  } catch (e) {
    console.log('获取系统信息失败', e);
  }
  // #endif
});
</script>

<style scoped lang="scss">
.template-select-page {
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
  min-height: 100vh;
  overflow: hidden;
  padding-top: calc(var(--menu-top, 44px) + var(--menu-height, 32px) + 80rpx);
}

.page-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  flex-shrink: 0;
  background-color: #fff;
}

/* 动态导航栏：高度与胶囊完全对齐 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  /* 左右留出安全间距，避免内容贴边 */
  padding-left: 16rpx;
  padding-right: 16rpx;
  /* 高度和顶部内边距由动态 style 控制 */
  box-sizing: content-box;
}

/* 左侧返回按钮区域 - 固定宽度确保居中对齐 */
.nav-left {
  width: 60rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

.back-icon {
  display: block;
}

/* 标题区域 - 自适应居中 */
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;

  line-height: 1;
}

.nav-right {
  width: 60rpx;
  flex-shrink: 0;
}

/* 标签页 */
.tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between; // 关键：左右两边自动分开
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}


.filter-group {
  display: flex;
  align-items: center;
}

.tab-item {
  padding: 12rpx 24rpx;
  border: 1rpx solid #ddd;
  border-radius: 40rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 6rpx;
  transition: all 0.2s;

  &.active {
    border-color: #000;
    color: #000;
    font-weight: 500;
  }
}

.List {
  margin-top: 30rpx;
}

.files {
  background: #fff;
  margin-bottom: 0;

}

// 文件夹
.fileList {
  display: flex;
  flex-direction: column;
  background: #e4b3b3;
  gap: 10rpx;
}

.file-card {
  display: flex;
  padding: 24rpx 30rpx;
  justify-content: space-between;
  background: #fff;
}

.left {
  display: flex;
  gap: 20rpx;
}

.img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
}

.template-state {
  display: flex;
  flex-direction: column;
  margin-top: 45rpx;
  gap: 10rpx;
}

.template-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.template-number {
  font-size: 20rpx;
  // color: #999;
  background: #efefef;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
  display: inline-block;
}

.right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* 模板列表 */
.template-list {
  flex: 1;
  padding: 20rpx 30rpx;
  background-color: #f6f6f6;
  overflow-y: auto;
}

.template-item {
  display: flex;
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.template-item:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.template-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
}

.template-content {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.template-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.template-count {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.template-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

/* 正确的下拉菜单 */
.filter-wrapper {
  position: relative;
  z-index: 9999;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8rpx);
  left: 0;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  padding: 20rpx;
  min-width: 200rpx;
  max-height: 400rpx;
  overflow-y: auto;
}

.dropdown-item {
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  color: #333;
  border-radius: 8rpx;
}

.dropdown-item.selected {
  background: #ffd100;
  color: #000;
  font-weight: bold;
}

/* 个人模板 - 两列网格 */
.personal-template-list {
  background: #f5f5f5;
  padding: 20rpx 0;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 0 20rpx;
}

.plan-card {
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-cover {
  width: 100%;
  height: 300rpx;
}

.card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding: 20rpx;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.card-top {
  display: flex;
  // margin-top: 20rpx;
  justify-content: space-between;
}

.card-title {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.card-stats {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  margin-top: 50rpx;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.stat-number {
  color: #fff;
  font-size: 26rpx;
  font-weight: bold;
}

.stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 22rpx;
}

.tags-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 22rpx;
  margin-top: 6rpx;
}

// 文件夹弹窗
.folder-menu-popup {
  padding: 30rpx;
  border-radius: 24rpx 24rpx 0 0;
  background: #f5f5f5;

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

  .menu-item {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    gap: 20rpx;
    padding: 28rpx 20rpx;
    font-size: 30rpx;
    // border-bottom: 1rpx solid #fff;
    background: #ffffff;
  }

  .menu-item.danger {
    color: #e53935;
  }
}

.more-btn {
  padding: 10rpx;
}

/* 加号按钮：设为相对定位，方便菜单基于它定位 */
.add-btn {
  position: relative; // 关键：让菜单可以基于它定位
  display: flex;
  align-items: center;
  justify-content: center;

  &:active {
    opacity: 0.7;
  }
}

/* 加号菜单遮罩：半透明灰色背景 */
.add-menu-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); // 半透明灰色
  z-index: 998;
}

/* 加号菜单弹窗：直接放在加号下方 */
.add-menu-popup {
  position: absolute;
  top: calc(100% + 20rpx);
  right: 0; // 右对齐加号按钮
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
  padding: 10rpx 0;
  min-width: 300rpx;
  z-index: 999; // 比遮罩高，保证菜单在最上层
}

.add-menu-popup .menu-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 24rpx 30rpx;
  font-size: 30rpx;
  color: #333;
  transition: background-color 0.2s;

  &:active {
    background-color: #f5f5f5;
  }
}

.add-menu-popup .menu-icon {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 新建文件夹弹窗样式
.create-folder-popup {
  border-radius: 10rpx 10rpx 0 0;
  height: 65vh;
  padding: 30rpx 30rpx 60rpx;
  background: #fff; // 弹窗本身加白色背景，防止透明问题
  box-sizing: border-box; // 关键：让整个弹窗的padding不会撑大

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

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

    .popup-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .save-btn {
      background: #ffd100;
      color: #000;
      font-size: 28rpx;
      font-weight: 500;
      padding: 12rpx 30rpx;
      border-radius: 40rpx;
      border: none;
    }
  }

  .input-area {
    width: 100%;
    background: #ececec;
    border-radius: 16rpx;
    padding: 24rpx;
    box-sizing: border-box; // 关键：让父元素的padding算在宽度里
  }

  .text-area {
    width: 100%;
    height: 500rpx; // 用固定高度代替百分比，避免适配问题
    // background: #f7f7f7;
    border-radius: 16rpx;
    padding: 20rpx;
    font-size: 30rpx;
    border: none;
    outline: none;
    box-sizing: border-box;
  }
}

// 模板菜单弹窗样式
:deep(.up-popup__content) {
  border-radius: 10rpx 10rpx 0 0;
  // background: #f5f5f5;
  // padding: 30rpx 20rpx;
}

.templateMenuPopup {
  width: 100%;
  padding: 32rpx 20rpx;
  background: #f5f5f5;
  border-radius: 10rpx 10rpx 0 0;

  .popup-header {
    text-align: center;
    margin-top: 10rpx;
    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;
  }

  .color-dot {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    background-color: #ffd60a;
  }

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

  .delete-item {
    background: #fff;
  }

  .delete-text {
    color: #ff4d4f;
  }
}
</style>