<!-- 模板大类详情页 就是进入横栏的模板，然后点击列表的模板，进入到的页面 -->
<!-- 第二层某一个模板大类的模板列表 -->
<template>
  <view class="plan-detail-page">
    <!-- 顶部安全区占位 -->
    <!-- <view class="status-bar-placeholder" :style="{ height: statusBarHeight + 'px' }"></view> -->
    <!-- 顶部导航栏 这里是模板大类的名字-->
    <!-- <view class="header">
      <view class="back-btn" @click="navigateBack">
        <uni-icons class="back-icon" type="left" size="28" color="#fff"></uni-icons>
      </view>
      <view class="title">{{ templateList.name }}</view>

      <view class="description">
        <text>{{ templateList?.description }}</text>
      </view>
    </view> -->

    <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" color="#fff"></uni-icons>
        </view>
        <view class="nav-title">{{ templateList.name }}</view>
        <view class="nav-right"></view>
      </view>
      <view class="description">
        {{ templateList?.description }}
      </view>

    </view>

    <scroll-view class="content" scroll-y enable-backdrop-filter="{{false}}">

      <view class="filter-bar">

        <!-- 部位筛选 -->
        <view class="filter-wrapper">
          <view class="filter-item" @click="togglePartDropdown">
            <text>{{ activePart }}</text>
            <uni-icons :type="showPartDropdown ? 'up' : 'down'" size="22" 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="filter-item" @click="toggleSceneDropdown">
            <text>{{ activeScene }}</text>
            <uni-icons :type="showSceneDropdown ? 'up' : 'down'" size="22" 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="grid-container">
        <view class="plan-card" v-for="(items, index) in filteredTemplates" :key="index" @click="godetail(items)">
          <image :src="items.urlCover || lostImage" mode="aspectFill" class="card-cover" @error="handleImageError" />
          <view class="card-info">
            <view class="card-title">
              <text class="name">{{ items.name }}</text>
              <view v-if="isIcon" @click.stop="showTemplateMenu(items)">
                <uni-icons type="more-filled" size="22" color="#fff" />
              </view>
            </view>
            <view class="card-stats">
              <view class="stat-item">
                <text class="stat-number">{{ items.exerciseCount }}</text>
                <text class="stat-label">动作</text>
              </view>
              <view class="stat-item">
                <text class="stat-number">{{ items.totalSets }}</text>
                <text class="stat-label">组</text>
              </view>
              <view class="stat-item">
                <text class="stat-number">{{ items.totalWeight }}</text>
                <text class="stat-label">kg</text>
              </view>
            </view>
            <text class="tags-text" :maxLines="1">
              {{ items.primaryMuscleNames?.join(' ') || '' }}
            </text>
          </view>
        </view>
      </view>
    </scroll-view>

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

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

const lostImage = "https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
const statusBarHeight = ref(0);
const headerHeight = ref(44);
const id = ref();
const templateList = ref({});
const isBigTemOffice = ref(false); // 新增：标记是否官方模板大类

// ================== 筛选功能 ==================
const filteredTemplates = ref([]); // 筛选后列表

// 部位（从接口拿）
const partList = ref([]);
const rawPartData = ref([]);
const activePartId = ref('0');
const activePart = ref('部位');

// 场景（固定）
const activeSceneId = ref('0');
const activeScene = ref('场景');
const sceneList = ref([
  { id: '0', title: '不限' },
  { id: '1', title: '健身房' },
  { id: '2', title: '仅哑铃' },
  { id: '3', title: '仅哑铃+杠铃' },
]);

// 模板右上角的符号
const folderList = ref([])
const templateMenuRef = ref(null)

// 下拉显示控制
const showPartDropdown = ref(false);
const showSceneDropdown = ref(false);
// 返回上一页函数
const goBack = () => {
  uni.navigateBack();
};
// 获取部位分类（接口，和首页完全一样）
const getPartCategories = async () => {
  try {
    const res = await TemplatesApi.getPartAllCategories();
    if (res.code === 0) {
      rawPartData.value = res.data;
      partList.value = [
        { title: '不限', id: '0' },
        ...res.data.map(item => ({
          title: item.name,
          id: String(item.id)
        }))
      ];
    }
  } catch (error) {
    console.log('部位获取失败', error);
  }
};

const togglePartDropdown = () => {
  showPartDropdown.value = !showPartDropdown.value;
  showSceneDropdown.value = false;
};

const toggleSceneDropdown = () => {
  showSceneDropdown.value = !showSceneDropdown.value;
  showPartDropdown.value = false;
};

const handleImageError = (e) => {
  console.error('封面图加载失败，请检查路径:');
  // 可选：设置默认图（需提前准备）
  // plan.value.cover = '/static/images/default-plan.jpg';
};


const loadTemplates = async (id) => {
  let response
  // ======================
  // 官方模板大类
  // ======================
  if (isBigTemOffice.value) {
    response = await TemplatesApi.selecttemplates(id);
  }

  // ======================
  // 个人模板大类
  // ======================
  else {
    // 个人模板大类接口 
    // response = await TemplatesApi.getCustTemplateGroupDetail(id);
    response = { data: { templates: [] } }; // 临时空数据，不报错
  }

  templateList.value = response.data;
  console.log('模板大类列表：', templateList.value);

  filteredTemplates.value = response.data.templates || [];
};

// 前端筛选：部位 + 场景
const doFilter = () => {
  const list = templateList.value.templates || [];
  const partId = activePartId.value;
  const sceneId = activeSceneId.value;

  console.log("👉 当前选中场景id：", sceneId);
  // 全部不限 → 显示全部
  if (partId === '0' && sceneId === '0') {
    filteredTemplates.value = list;
    return;
  }
  // 过滤
  const result = list.filter(item => {
    console.log("👉 单条场景字段：", item.scene, item.fitScene);
    // 1. 部位匹配
    let partMatch = true;
    if (partId !== '0') {
      const targetPart = partList.value.find(p => p.id === partId);
      partMatch = item.primaryMuscleNames?.includes(targetPart.title);
    }
    // 2. 场景匹配
    let sceneMatch = true;
    if (sceneId !== '0') {
      sceneMatch = String(item.scene) === sceneId;
    }
    return partMatch && sceneMatch;
  });
  filteredTemplates.value = result;
};
// 选择部位
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 closeAllDropdowns = () => {
  showPartDropdown.value = false;
  showSceneDropdown.value = false;
};
// 
const showTemplateMenu = (item) => {
  templateMenuRef.value.showTemplateMenu(item)
  console.log('显示当前选中省略号模板详情：', item);

};

//查看模板详情
const godetail = (items) => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban-xiangqing?id=${items.id}&isOffice=true`,
  });
};
let isIcon = false
// 这里收到模板大类传来的id，用它来查询模板大类包含的模板
onLoad((options) => {
  id.value = options.id;
  isBigTemOffice.value = options.isBigTemOffice === 'true';

  console.log("接收的文件夹列表：", options.foldList);
  // 解析回来
  if (options.foldList) {
    folderList.value = JSON.parse(decodeURIComponent(options.foldList));
    isIcon = true
  }
  console.log("模板大类ID：", id.value);
  console.log("是否官方大类：", isBigTemOffice.value);

  loadTemplates(id.value);
});
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight;
  getPartCategories();


  // 获取小程序胶囊位置信息，实现导航栏与胶囊完美对齐
  // #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
});

const menuButtonInfo = ref({
  top: 44,    // 默认值，避免获取失败时样式异常
  height: 32
});

</script>

<style lang="scss" scoped>
/* 样式保持不变 */
.plan-detail-page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

// .status-bar-placeholder {
//   width: 100%;
//   background-color: #1a1a1a;
// }

.page-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(26, 26, 26, 0.9);
  z-index: 999;
  flex-shrink: 0;
  // background-color: #fff;

}

/* 动态导航栏：高度与胶囊完全对齐 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // background-color: #1a1a1a;
  /* 左右留出安全间距，避免内容贴边 */
  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: #fff;

  line-height: 1;
}

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

.description {
  padding: 20rpx 30rpx 20rpx;
  color: #fff;
  // background-color: #1a1a1a;
  font-size: 28rpx;
  line-height: 46rpx;

}


// 

.header {
  width: 100%;
  // position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a1a1a;
  color: #fff;
  font-size: 36rpx;
  font-weight: 600;
  // z-index: 10;
  // z-index: 999;
}

.back-btn {
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
  color: #fff;
}

.back-icon {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
}

.content {
  flex: 1;
  min-height: 0;
  padding-top: 20rpx;
  // margin-top: v-bind(statusBarHeight + headerHeight + 'px');
  margin-top: 236rpx;

  /* #ifdef H5 */
  min-height: 890px;
  margin-top: 100px;
  /* #endif */
}

.grid-container {
  display: grid;
  // 核心：两列等宽布局
  grid-template-columns: repeat(2, 1fr);
  // 列之间的间距（左右两个卡片的空隙）
  column-gap: 20rpx;
  // 行之间的间距（上下两个卡片的空隙）
  row-gap: 20rpx;
  // 适配小程序安全区域，避免贴边
  padding-bottom: 40rpx;
  padding: 0 20rpx 40rpx;
}

/* 调整卡片样式，适配网格布局 */
.plan-card {
  // 移除原来的 margin-top，改用 grid 的 row-gap 控制间距
  margin-top: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.card-cover {
  width: 100%;
  // 保持你原来的高度，和参考图一致
  height: 300rpx;
}

.card-info {
  // 核心优化：增强背景对比度 + 视觉层次
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding: 20rpx 20rpx 24rpx;
  // 渐变遮罩：从下往上由深到浅，完美衬托文字，不遮挡图片主体
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
  // 文字阴影：进一步强化文字辨识度
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
  display: flex; // 新增：开启弹性布局
  flex-direction: column; // 新增：内部元素垂直排列
  justify-content: space-between; // 新增：标题在最上，其他内容挤在最下
}

.card-title {
  font-size: 35rpx; // 字号微增
  font-weight: 700; // 字重加粗
  color: #ffffff; // 纯白保证最高对比度
  margin-top: 0;
  line-height: 1.3;
  display: flex;
  justify-content: space-between;


  .name {
    max-width: 70%;
    white-space: pre-wrap;
    word-wrap: break-word;
    /* 最多显示 2 行，超出省略 */
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.card-stats {
  // 原来的横向布局改成纵向
  display: flex;
  flex-direction: column; // 关键：让三个stat-item从上到下排成一列
  gap: 4rpx; // 调整每个项目之间的间距
  // margin-bottom: 16rpx;
  // 去掉原来的align-items: center，改成左对齐
  align-items: flex-start;
}

.stat-item {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4rpx;
}

.stat-number {
  font-size: 32rpx; // 字号放大
  font-weight: 700; // 加粗
  color: #ffffff;
  line-height: 1.2;
}

.stat-label {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9); // 提高透明度，更清晰
  line-height: 1.2;
}

.card-tags {
  margin-top: 8rpx;
}

.tags-text {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  /* 让文本不换行，超出部分由:maxLines="1"控制省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 筛选栏 */
.filter-bar {
  padding: 20rpx 30rpx;
  display: flex;
  gap: 20rpx;
  background-color: #fff;
}

.filter-item {
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  background-color: #fff;
  border: 1px solid #ddd;
  color: #333;
  font-size: 28rpx;
  font-weight: 400;
  gap: 8rpx;

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

/* 筛选器容器 */
.filter-wrapper {
  position: relative;
  // z-index: 999;
}

/* 下拉菜单 */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8rpx);
  left: 0;
  background: #fff;
  border-radius: 14rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
  padding: 12rpx 0;
  min-width: 160rpx;
  max-height: 320rpx;
  overflow-y: auto;
  z-index: 9999;
}

/* 下拉菜单文字 */
.dropdown-item {
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  line-height: 1.4;
  color: #1a1a1a;
  background-color: #fff;
  white-space: nowrap;

  &.selected {
    background: #f0f9f4;
    color: #2e9d5a;
    font-weight: 500;
  }

  &:active {
    opacity: 0.8;
  }
}
</style>