<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="tab-item" :class="{ active: activeTab === 'official' }" @click="switchTab('official')">
          官方
        </view>
        <view class="tab-item" :class="{ active: activeTab === 'mine' }" @click="switchTab('mine')">
          我的
        </view>
        <!-- 部位 -->
        <view class="filter-wrapper">
          <view class="tab-item" :class="{ active: activePartId !== '0' }" @click="togglePartDropdown">
            {{ activePartId === '0' ? '部位' : 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 === '0' ? '场景' : 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>

    <!-- 官方模板大类列表 -->
    <scroll-view scroll-y="true" v-if="activeTab === 'official' && !isFiltering" class="template-list">
      <view v-for="(item, index) in templateList" :key="index" class="template-item" @click="goToTemplate(item)">
        <image class="template-img" :src="item.urlCover" mode="aspectFill"></image>
        <view class="template-content">
          <text class="template-title">{{ item.name }}</text>
          <text class="template-count">{{ item.templatesCount }}个模板</text>
          <text class="template-desc">{{ item.description }}</text>
        </view>
      </view>
    </scroll-view>


    <view v-else>

      <!-- 文件夹 -->
      <!-- 个人模板 -->
      <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">
              <text class="card-title">{{ item.name }}</text>
              <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>




  </view>
</template>

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

// 获取模板列表
const templateList = ref([]);
const activeTab = ref('official'); // official=官方，mine=我的
const part = ref(false); // 部位是否选中
const scene = ref(false); // 场景是否选中
const isFiltering = ref(false);

const activePartId = ref('0');
const activePart = ref('不限');
const activeSceneId = ref('0');
const activeScene = ref('不限');

const showPartDropdown = ref(false);
const showSceneDropdown = ref(false);
// 部位（从接口拿）
const partList = ref([]);
const rawPartData = ref([]);

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

// 获取部位分类（接口，和首页完全一样）
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 switchTab = async (tab) => {
  activeTab.value = tab;
  if (tab === 'official') {
    getTemplatesList();
  } else {
    doFilter();
  }
};

// 弹出/关闭部位下拉
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;

  // 判断是否在筛选
  if (muscleId === '0' && sceneId === '0') {
    isFiltering.value = false;
    // 官方回到模板大类
    if (activeTab.value === 'official') {
      getTemplatesList();
    } else {
      getMyTemplates();
    }
    return;
  }

  isFiltering.value = true;
  try {
    let res;
    if (activeTab.value === 'official') {
      // 官方筛选，返回模板列表
      res = await TemplatesApi.getOfficeTemplates(muscleId, sceneId);
    } else {
      // 个人筛选
      res = await TemplatesApi.queryCustTemplate(0, muscleId, sceneId);
    }
    templateList.value = res.data || [];
    console.log('templateList.value', templateList.value);

  } catch (err) {
    console.log('筛选失败', err);
  }
};

const getTemplatesList = async () => {
  try {
    const response = await TemplatesApi.getTemplates();
    templateList.value = response.data;
    console.log('官方打印模板大类：', templateList.value);
  } catch (error) {
    console.log('模板大类获取失败', error);
  }
};

// 获取我的模板（复用同一个 templateList）
const getMyTemplates = async () => {
  try {
    const res = await TemplatesApi.individualTemplates();
    console.log('打印个人模板res=', res);
    templateList.value = res.data;
  } catch (err) {
    console.log('我的模板加载失败', err);
  }
};

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

const lostImage = "https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png";
// 个人模板点击跳转（直接进详情）
const goToPersonalDetail = (item) => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban-xiangqing?id=${item.id}`
  });
};

// 跳转到模板详情页
const goToTemplate = (item) => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban?id=${item.id}&isBigTemOffice=true`
  });
};

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

onMounted(() => {
  getTemplatesList();
  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
});
</script>

<style scoped lang="scss">
.template-select-page {
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
  height: 100vh;
  overflow: hidden;
}

.page-header {
  width: 100%;
  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;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.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;
  }
}

/* 模板列表 */
.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;
  padding: 20rpx;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

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

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

.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;
}
</style>