<!-- 第一层 模板大类 -->
<template>
  <view class="template-page" @click="closeAllDropdowns">
    <!-- 筛选按钮 -->
    <view class="filter-section" @click.stop>
      <!-- 部位筛选 -->
      <view class="filter-wrapper">
        <view class="filter-btn" :class="{ active: showPartDropdown }" @click="togglePartDropdown">
          <text class="text">{{ activePart }}</text>
          <uni-icons :type="showPartDropdown ? 'up' : 'down'" size="13"></uni-icons>
        </view>
        <!-- 部位下拉菜单 -->
        <view class="dropdown-menu" v-if="showPartDropdown">
          <view v-for="(item, index) in partList" :key="index" class="dropdown-item"
            :class="{ selected: activePart === item.title }" @click="selectPart(item)">
            {{ item.title }}
          </view>
        </view>
      </view>

      <!-- 场景筛选 -->
      <view class="filter-wrapper">
        <view class="filter-btn" :class="{ active: showSceneDropdown }" @click="toggleSceneDropdown">
          <text class="text">{{ activeScene }}</text>
          <uni-icons :type="showSceneDropdown ? 'up' : 'down'" size="13"></uni-icons>
        </view>
        <!-- 场景下拉菜单 -->
        <view class="dropdown-menu" v-if="showSceneDropdown">
          <view v-for="(item, index) in sceneList" :key="index" class="dropdown-item"
            :class="{ selected: activeSceneId === item.id }" @click="selectScene(item)">
            {{ item.title }}
          </view>
        </view>
      </view>
    </view>
    <!-- 模板列表 (根据状态自动切换显示) -->
    <scroll-view class="template-list" enable-flex scroll-y>
      <!-- 用父容器包裹 v-if 分支，解决 key 冲突 -->
      <view v-if="!isFiltering" class="sub-template-list">
        <view v-for="(item, index) in templateList" :key="index" class="template-item" @click="gototemplate(item)">
          <image :src="item.urlCover" mode="aspectFill" class="template-img"></image>
          <view>
            <view class="template-content">
              <view class="template-title">{{ item.name }}</view>
              <view class="template-count">{{ item.templatesCount }}个模板</view>
              <view class="template-desc">{{ item.description }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 用父容器包裹 v-else 分支，解决 key 冲突 -->
      <view v-else>
        <view v-for="(template, index) in filteredTemplateList" :key="index" class="template-item">
          <image :src="template.urlCover" mode="aspectFill" class="template-img"></image>
          <view>
            <view class="template-content" @click="goToTemplateDetail(template)">
              <view class="template-title">{{ template.name }}</view>
              <!-- 空数据判断移到了这里 -->
              <view class="template-count" v-if="template.primaryMuscles">
                主要训练部位：{{ template.primaryMuscleNames.join(', ') || '无' }}
              </view>
              <view class="template-desc" v-if="template.secondaryMuscles">
                次要训练部位：{{ template.secondaryMuscleNames.join(', ') || '无' }}
              </view>
            </view>
          </view>
        </view>

        <!-- 空数据提示：移到 view-else 内部，且作为独立块 -->
        <view v-if="filteredTemplateList.length === 0" class="empty-tip">
          暂无符合条件的训练模板
        </view>
      </view>
    </scroll-view>
  </view>
</template>

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

const templateList = ref([]);
const filteredTemplateList = ref([]);
// 2. 控制页面显示：false=显示大类，true=显示筛选后的模板
const isFiltering = ref(false);
const activeSceneId = ref('0');

// 下拉框部位筛选相关状态
const partList = ref([]);
const rawPartData = ref([]); // 存储接口返回的原始部位数据
const showPartDropdown = ref(false);
const activePart = ref('不限');
const activePartId = ref('0'); // 新增：默认选中"不限"，id=0
// 场景筛选相关状态 
const sceneList = ref([
  { id: '0', title: '不限' },
  { id: '1', title: '健身房' },
  { id: '2', title: '仅哑铃' },
  { id: '3', title: '仅哑铃+杠铃' },
  // { id: 4, title: '办公室' },
]);
const showSceneDropdown = ref(false);
const activeScene = ref('不限');

// 获取模板大类列表
const TemplatesList = async () => {
  try {
    const response = await TemplatesApi.getTemplates();
    templateList.value = response.data;
    console.log('模板大类接口返回数据', templateList.value)
  } catch (error) {
    console.log('模板大类获取失败', error);
  }
};
// 获取所有细分锻炼部位（接口）
const getPartCategories = async () => {
  try {
    const res = await TemplatesApi.getPartAllCategories();
    if (res.code === 0) {
      rawPartData.value = res.data;
      console.log('部位分类接口返回数据rawPartData.value：', rawPartData.value)
      // 下拉列表赋值
      partList.value = [
        { title: '不限', id: '0' }, // 给"不限"加id='0'，方便后续筛选
        ...res.data.map(item => ({
          title: item.name, // 接口返回的name作为显示标题
          id: String(item.id)       // 保存接口的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 selectPart = (item) => {
  activePart.value = item.title;
  activePartId.value = item.id;
  showPartDropdown.value = false;
  // 加这一行：选完部位立刻筛选
  doFilter();
};

// 选择场景
const selectScene = (item) => {
  activeScene.value = item.title;
  // 关键：把选中的场景ID存起来
  activeSceneId.value = item.id;
  showSceneDropdown.value = false;
  // 选择完，立即执行筛选！
  doFilter();
};

// 点击页面其他地方关闭所有下拉菜单
const closeAllDropdowns = () => {
  showPartDropdown.value = false;
  showSceneDropdown.value = false;
};
// 核心：执行筛选逻辑
const doFilter = async () => {
  const musclesId = activePartId.value; // 对应接口 musclesId
  const scene = activeSceneId.value;     // 对应接口 scene
  // 2. 判断：是否是【全部不限】
  if (musclesId === '0' && scene === '0') {
    // 情况A：都不限 -> 恢复显示【模板大类】
    isFiltering.value = false;
    // 大类列表之前已经加载过了，直接显示
    return;
  }
  // 情况B：有筛选条件 -> 请求【筛选接口】
  try {
    isFiltering.value = true; // 切换成模板列表模式
    const res = await TemplatesApi.queryTemplatesByCondition({
      musclesId: musclesId,
      scene: scene
    });
    if (res.code === 0) {
      // 把接口返回的模板数据存起来，页面会自动刷新
      filteredTemplateList.value = res.data;
      console.log('筛选接口返回数据filteredTemplateList.value：', filteredTemplateList.value)
    }
  } catch (error) {
    console.log('筛选失败', error);
    // 失败了也清空数据
    filteredTemplateList.value = [];
  }
};
// 跳转到模板详情页，传入模板id
// 跳转地址是F:\hongxing-app\hongxing-new\pages4\pages\xunji\xunji-moban-xiangqing.vue
const goToTemplateDetail = (template) => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban-xiangqing?id=${template.id}`,
  });
};
const gototemplate = (item) => {
  // 传入的是模板大类的id,可以通过模板大类id查询到模板大类包含的模板，这个页面在page4
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban?id=${item.id}&isBigTemOffice=true`,
  });
};

onMounted(() => {
  TemplatesList();
  getPartCategories();
  console.log('进入模板大类详情');

});
</script>

<style lang="scss" scoped>
.template-page {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;

  .filter-section {
    position: fixed;
    top: 80rpx;
    // #ifdef MP-WEIXIN
    top: 234rpx;
    //  #endif

    left: 0;
    right: 0;
    z-index: 999;

    display: flex;
    gap: 24rpx;
    flex-wrap: wrap;
    padding: 20rpx;
    background-color: white;

    .filter-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: auto;
      min-width: 150rpx;
      height: 50rpx;
      background-color: #fff;
      color: #333;
      font-size: 24rpx;
      border: 2rpx solid #ddd;
      border-radius: 25rpx;

      .text {
        margin-right: 5rpx;
      }
    }
  }

  .template-list {

    margin-top: 120rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 200rpx;
    height: calc(100vh - 274rpx);

    .sub-template-list {
      display: flex;
      flex-direction: column;
      gap: 10rpx;
    }

    .template-item {
      display: flex;
      background-color: white;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      padding: 20rpx;

      .template-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
      }

      .template-content {
        flex: 1;
      }

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

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

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

      &:last-child {
        margin-bottom: 45rpx;
      }
    }

    /* 筛选包装器 */
    .filter-wrapper {
      position: relative;
      z-index: 10;
    }

    /* 筛选按钮激活状态 */
    .filter-btn.active {
      border-color: #43b05e;
      background-color: #e6f7f0;
      color: #43b05e;
    }

    .filter-section {
      display: flex;
      gap: 24rpx;
      padding: 20rpx 30rpx;
      background-color: white;
      flex-wrap: wrap;
    }

    .filter-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: auto;
      min-width: 160rpx;
      height: 50rpx;
      background: #fff;
      color: #333;
      font-size: 24rpx;
      border: 2rpx solid #ddd;
      border-radius: 25rpx;
      padding: 0 20rpx;
      white-space: nowrap;
    }

    .filter-btn .text {
      margin-right: 8rpx;
    }

    .filter-btn.active {
      border-color: #43b05e;
      background: #e6f7f0;
      color: #43b05e;
    }

    .filter-wrapper {
      position: relative;
      z-index: 10;
    }

    .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;
      z-index: 100;
      min-width: 160rpx;
      max-height: 320rpx;
      overflow-y: auto;
    }

    .dropdown-item {
      padding: 16rpx 24rpx;
      font-size: 26rpx;
      color: #333;
      white-space: nowrap;
    }

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

    /* 下拉菜单样式 */
    .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;
      z-index: 100;
      min-width: 150rpx;
      max-height: 320rpx;
      overflow-y: auto;
      border: 1rpx solid #f0f0f0;
    }

    /* 下拉菜单项样式 */
    .dropdown-item {
      padding: 16rpx 24rpx;
      font-size: 26rpx;
      color: #333;
    }

    /* 下拉菜单项悬停样式 */
    .dropdown-item:hover {
      background-color: #43b05e;
    }

    /* 下拉菜单项选中样式 */
    .dropdown-item.selected {
      background-color: #f0f9f4;
      color: #2e9d5a;
      font-weight: 500;
    }
  }
}
</style>