<template>
  <view class="template-page">
    <!-- 顶部筛选操作栏（固定不缩放） -->
    <view class="filter-section">
      <!-- 部位筛选胶囊 -->
      <view class="filter-wrapper">
        <view class="filter-btn" :class="{ active: showPartDropdown, selected: activePartId !== '0' }"
          @click.stop="togglePartDropdown">
          <text class="text">{{ activePart }}</text>
          <up-icon :name="showPartDropdown ? 'arrow-up-fill' : 'arrow-down-fill'" size="10"
            :color="showPartDropdown || activePartId !== '0' ? '#10b981' : '#6b7280'"></up-icon>
        </view>

        <!-- 部位下拉菜单 -->
        <view class="dropdown-menu" v-if="showPartDropdown" @click.stop>
          <view v-for="item in partList" :key="item.id" class="dropdown-item"
            :class="{ selected: activePartId === item.id }" @click="selectPart(item)">
            <text>{{ item.title }}</text>
            <up-icon v-if="activePartId === item.id" name="checkbox-mark" size="14" color="#10b981" />
          </view>
        </view>
      </view>

      <!-- 场景筛选胶囊 -->
      <view class="filter-wrapper">
        <view class="filter-btn" :class="{ active: showSceneDropdown, selected: activeSceneId !== '0' }"
          @click.stop="toggleSceneDropdown">
          <text class="text">{{ activeScene }}</text>
          <up-icon :name="showSceneDropdown ? 'arrow-up-fill' : 'arrow-down-fill'" size="10"
            :color="showSceneDropdown || activeSceneId !== '0' ? '#10b981' : '#6b7280'"></up-icon>
        </view>

        <!-- 场景下拉菜单 -->
        <view class="dropdown-menu" v-if="showSceneDropdown" @click.stop>
          <view v-for="item in sceneList" :key="item.id" class="dropdown-item"
            :class="{ selected: activeSceneId === item.id }" @click="selectScene(item)">
            <text>{{ item.title }}</text>
            <up-icon v-if="activeSceneId === item.id" name="checkbox-mark" size="14" color="#10b981" />
          </view>
        </view>
      </view>

      <!-- 下拉全屏遮罩蒙层 -->
      <view class="dropdown-mask" v-if="showPartDropdown || showSceneDropdown" @click="closeAllDropdowns"></view>
    </view>

    <!-- 模板列表展示区（自适应滚动） -->
    <view class="list-container">
      <scroll-view class="template-scroll" scroll-y :show-scrollbar="false">
        <view class="scroll-inner">
          <!-- 模式一：未筛选状态，展示【模板大类列表】 -->
          <template v-if="!isFiltering">
            <view v-for="item in templateList" :key="item.id" class="template-card" @click="gototemplate(item)">
              <image :src="item.urlCover" mode="aspectFill" class="cover-img" lazy-load />
              <view class="card-content">
                <view class="card-header">
                  <text class="title">{{ item.name }}</text>
                  <text class="count-badge">{{ item.templatesCount || 0 }}个模板</text>
                </view>
                <text class="desc" v-if="item.description">{{ item.description }}</text>
              </view>
            </view>
          </template>

          <!-- 模式二：已筛选状态，展示【条件检索后的细分模板列表】 -->
          <template v-else>
            <view v-for="template in filteredTemplateList" :key="template.id" class="template-card"
              @click="goToTemplateDetail(template)">
              <image :src="template.urlCover" mode="aspectFill" class="cover-img" lazy-load />
              <view class="card-content">
                <text class="title">{{ template.name }}</text>

                <!-- 肌群说明 Chips -->
                <view class="muscle-tags">
                  <view class="tag primary" v-if="template.primaryMuscleNames && template.primaryMuscleNames.length">
                    <text class="tag-label">主要：</text>
                    <text class="tag-val">{{ template.primaryMuscleNames.join(', ') }}</text>
                  </view>

                  <view class="tag secondary"
                    v-if="template.secondaryMuscleNames && template.secondaryMuscleNames.length">
                    <text class="tag-label">次要：</text>
                    <text class="tag-val">{{ template.secondaryMuscleNames.join(', ') }}</text>
                  </view>
                </view>
              </view>
            </view>

            <!-- 筛选无结果空状态 -->
            <view v-if="filteredTemplateList.length === 0" class="empty-wrapper">
              <up-empty mode="search" text="暂无符合条件的训练模板"></up-empty>
            </view>
          </template>
        </view>

        <!-- 底部安全区垫高 -->
        <view class="bottom-spacer"></view>
      </scroll-view>
    </view>
  </view>
</template>

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

// 列表响应式数据
const templateList = ref([]);
const filteredTemplateList = ref([]);

// 页面模式标记：false = 显示大类, true = 显示筛选后的细分模板
const isFiltering = ref(false);

// 部位筛选状态
const partList = ref([]);
const rawPartData = ref([]);
const showPartDropdown = ref(false);
const activePart = ref('部位');
const activePartId = ref('0'); // '0' 代表不限

// 场景筛选状态
const sceneList = ref([
  { id: '0', title: '不限' },
  { id: '1', title: '健身房' },
  { id: '2', title: '仅哑铃' },
  { id: '3', title: '仅哑铃+杠铃' },
]);
const showSceneDropdown = ref(false);
const activeScene = ref('场景');
const activeSceneId = ref('0'); // '0' 代表不限

// ====== API 数据加载 ======

/**
 * 获取模板大类列表
 */
const loadCategoryTemplates = async () => {
  try {
    const response = await TemplatesApi.getTemplates();
    templateList.value = response.data || [];
  } catch (error) {
    console.error('模板大类获取失败:', error);
  }
};

/**
 * 获取所有细分锻炼部位
 */
const getPartCategories = async () => {
  try {
    const res = await TemplatesApi.getPartAllCategories();
    if (res.code === 0) {
      rawPartData.value = res.data || [];
      partList.value = [
        { title: '不限', id: '0' },
        ...rawPartData.value.map((item) => ({
          title: item.name,
          id: String(item.id),
        })),
      ];
    }
  } catch (error) {
    console.error('部位列表获取失败:', error);
  }
};

// ====== 交互与筛选逻辑 ======

/**
 * 切换部位下拉框
 */
const togglePartDropdown = () => {
  showPartDropdown.value = !showPartDropdown.value;
  showSceneDropdown.value = false;
};

/**
 * 切换场景下拉框
 */
const toggleSceneDropdown = () => {
  showSceneDropdown.value = !showSceneDropdown.value;
  showPartDropdown.value = false;
};

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

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

/**
 * 关闭所有下拉菜单
 */
const closeAllDropdowns = () => {
  showPartDropdown.value = false;
  showSceneDropdown.value = false;
};

/**
 * 执行筛选逻辑
 */
const doFilter = async () => {
  const musclesId = activePartId.value;
  const scene = activeSceneId.value;

  // 条件判断：若均为"不限"，切回展示【大类列表】
  if (musclesId === '0' && scene === '0') {
    isFiltering.value = false;
    activePart.value = '部位';
    activeScene.value = '场景';
    return;
  }

  // 存在有效条件：发请求获取筛选列表
  try {
    isFiltering.value = true;
    const res = await TemplatesApi.queryTemplatesByCondition({
      musclesId,
      scene,
    });
    if (res.code === 0) {
      filteredTemplateList.value = res.data || [];
    }
  } catch (error) {
    console.error('筛选模板失败:', error);
    filteredTemplateList.value = [];
  }
};

// ====== 路由跳转 ======

/**
 * 跳转至大类包含的模板列表
 */
const gototemplate = (item) => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban?id=${item.id}&isBigTemOffice=true`,
  });
};

/**
 * 跳转至具体模板详情页
 */
const goToTemplateDetail = (template) => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban-xiangqing?id=${template.id}`,
  });
};

onMounted(async () => {
  await Promise.all([loadCategoryTemplates(), getPartCategories()]);
});
</script>

<style lang="scss" scoped>
.template-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 44px);
  // #ifdef MP-WEIXIN
  height: calc(100vh - 110px);
  //  #endif
  width: 100vw;
  background-color: #f8fafc;
  overflow: hidden;

  /* 顶部筛选控制栏 */
  .filter-section {
    flex-shrink: 0;
    position: relative;
    z-index: 50;
    display: flex;
    gap: 20rpx;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    border-bottom: 1rpx solid #f1f5f9;

    .filter-wrapper {
      position: relative;

      .filter-btn {
        display: flex;
        align-items: center;
        gap: 10rpx;
        height: 58rpx;
        padding: 0 24rpx;
        background-color: #f8fafc;
        border: 1rpx solid #e2e8f0;
        border-radius: 30rpx;
        transition: all 0.2s ease;

        .text {
          font-size: 26rpx;
          color: #334155;
          font-weight: 500;
        }

        &.active,
        &.selected {
          background-color: #ecfdf5;
          border-color: #10b981;

          .text {
            color: #10b981;
            font-weight: 600;
          }
        }
      }

      /* 下拉浮层 */
      .dropdown-menu {
        position: absolute;
        top: 72rpx;
        left: 0;
        z-index: 100;
        min-width: 220rpx;
        max-height: 380rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.1);
        border: 1rpx solid #f1f5f9;
        padding: 8rpx 0;
        overflow-y: auto;

        .dropdown-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20rpx 28rpx;
          font-size: 26rpx;
          color: #334155;
          transition: background-color 0.15s;

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

          &.selected {
            background-color: #f0fdf4;
            color: #10b981;
            font-weight: 600;
          }
        }
      }
    }

    /* 遮罩蒙层 */
    .dropdown-mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 40;
      background-color: rgba(0, 0, 0, 0.1);
    }
  }

  /* 列表自适应滚动容器 */
  .list-container {

 padding-bottom: 40rpx;
   

    overflow: hidden;

    .template-scroll {
      width: 100%;
      height: 100%;
  
      .scroll-inner {
        padding: 24rpx 30rpx;
        display: flex;
        flex-direction: column;
        gap: 20rpx;

        /* 模板卡片组件样式 */
        .template-card {
          display: flex;
          align-items: center;
          background-color: #ffffff;
          border-radius: 20rpx;
          padding: 20rpx;
          box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
          border: 1rpx solid #f1f5f9;
          transition: transform 0.15s;

          &:active {
            transform: scale(0.985);
            background-color: #f8fafc;
          }

          .cover-img {
            width: 128rpx;
            height: 128rpx;
            border-radius: 16rpx;
            margin-right: 20rpx;
            background-color: #f1f5f9;
            flex-shrink: 0;
          }

          .card-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;

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

              .title {
                font-size: 30rpx;
                font-weight: 600;
                color: #0f172a;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                flex: 1;
                margin-right: 12rpx;
              }

              .count-badge {
                font-size: 22rpx;
                color: #10b981;
                background-color: #ecfdf5;
                padding: 4rpx 12rpx;
                border-radius: 20rpx;
                font-weight: 500;
                flex-shrink: 0;
              }
            }

            .title {
              font-size: 30rpx;
              font-weight: 600;
              color: #0f172a;
              margin-bottom: 8rpx;
            }

            .desc {
              font-size: 24rpx;
              color: #64748b;
              line-height: 1.4;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }

            /* 肌群 Tag 列表 */
            .muscle-tags {
              display: flex;
              flex-direction: column;
              gap: 6rpx;
              margin-top: 4rpx;

              .tag {
                display: flex;
                align-items: center;
                font-size: 22rpx;
                line-height: 1.3;

                .tag-label {
                  color: #94a3b8;
                  flex-shrink: 0;
                }

                .tag-val {
                  color: #475569;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }

                &.primary .tag-val {
                  color: #059669;
                  font-weight: 500;
                }
              }
            }
          }
        }

        .empty-wrapper {
          padding: 100rpx 0;
        }
      }

      .bottom-spacer {
        height: env(safe-area-inset-bottom);
        padding-bottom: 40rpx;
      }
    }
  }
}
</style>