<template>
  <view class="exercise-page" @click="closeAddMenu">
    <!-- 搜索框 -->
    <view class="search-bar">
      <!-- <view class="search">
        <uni-icons type="search" size="18"></uni-icons>
        <input class="search-input" type="text" placeholder="搜索动作名称" @input="onSearch" />
      </view> -->
      <view class="add-btn" @click.stop="addExercise">
        <uni-icons type="plus" size="35" color="#333"></uni-icons>
        <view class="floating-menu" v-show="addshow" @click.stop>
          <view class="menu-item">
            <uni-icons type="plus" size="24" color="#333"></uni-icons>
            <text class="menu-text" @click="addnewmotion">新增动作</text>
          </view>
          <view class="menu-item">
            <uni-icons type="link" size="24" color="#333"></uni-icons>
            <text class="menu-text" @click="addnewsupersets">新增超级组</text>
          </view>
          <view class="menu-item">
            <uni-icons type="list" size="24" color="#333"></uni-icons>
            <text class="menu-text" @click="actionmanagement">动作目录管理</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 浮动菜单 -->

    <!-- 左右布局 -->
    <view class="layout-container">
      <scroll-view scroll-y class="left-nav" enable-flex>
        <view class="nav-item" @click="handleCollectClick('collect')" :class="{ active: activeNav === 'collect' }">
          收藏
        </view>
        <view v-for="nav in navItems" :key="nav.id" class="nav-item" :class="{ active: activeNav === nav.id }"
          @click="switchNav(nav.id)">
          {{ nav.name }}
        </view>
      </scroll-view>

      <!-- 小动作列表 -->
      <scroll-view scroll-y class="right-content" enable-flex>
        <view class="tip" v-if="motionPart.length > 0">
          <view class="item" @click="handlePartClick('')" :class="{ active: activeMotionPart == '' }">全部</view>
          <view class="item" v-for="item in motionPart" :key="item.id" :class="{ active: activeMotionPart == item.id }"
            @click="handlePartClick(item.id)">
            {{ item.name }}
          </view>
        </view>

        <view class="exercise-grid">
          <view class="content" v-if="exercises.length > 0 || superGroupInfo.length > 0">
            <view class="equipment-list">
              <view class="equipment-item" v-for="item in exercises" :key="item.equipmentId">
                <view class="equipment-name"> {{ item.equipmentName }} </view>
                <view class="action-list">
                  <view class="action-item" v-for="e in item.exercises" :key="e.id">
                    <image :src="e.url3dAnimation" mode="aspectFill" lazy-load class="action-img"
                      @click="goToDetail(e.id, 1)"></image>
                    <view class="action-name">{{ e.name }}</view>
                    <view class="trainingReps" v-if="e.trainingReps">{{ e.trainingReps }}次</view>
                  </view>
                </view>
              </view>

              <view class="supers" v-if="superGroupInfo.length > 0">
                <view class="supers-name"> 超级组 </view>
                <view class="super" v-for="item in superGroupInfo" :key="item.id" @click="goToDetail(item.id, 2)">
                  <image src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260507/超级组_1778117889451.png"
                    mode="aspectFill" lazy-load class="super-img"></image>
                  <view class="right">
                    <view class="super-name">{{ item.name }}</view>
                    <view class="parts">{{ item.primaryMuscles.join() }}</view>
                  </view>
                </view>
              </view>

              <!-- <view class="add-super">
                <view class="header">
                  <up-icon name="plus" color="#000" size="15" bold></up-icon>
                  <text>添加自定义动作</text>
                </view>
                <view class="tip">添加官方库没有的动作</view>
              </view> -->
            </view>
          </view>

          <!-- 空状态 -->
          <view class="empty-state" v-else>
            <text class="empty-text">暂无动作数据</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 详情弹窗 -->
    <dongzuoXianqing ref="actionDetailRef" />

    <!-- 底部安全区占位（关键！解决不同设备适配） -->
    <view class="safe-area-bottom"></view>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import ExercisesApi from '@/sheep/api/motion/exercises';
import SupersetsApi from '@/sheep/api/motion/supersets';
import dongzuoXianqing from '@/pages/xunji/components/dongzuo-xianqing.vue';
import { useActionStore } from '@/sheep/store/action';

const actionStore = useActionStore();

// 响应式数据
const activeNav = ref('');
const navItems = ref([]);
const exercises = ref([]);
const superGroupInfo = ref([]);
const motionPart = ref([]);
const activeMotionPart = ref('');
const currentCategoryId = ref('');

const allExercises = ref([]);

const addshow = ref(false);

const superFavoriteList = ref([]);

const actionDetailRef = ref(null);

// 关闭菜单
const closeAddMenu = () => {
  addshow.value = false;
};

// 部位筛选
const handlePartClick = async (id) => {
  try {
    activeMotionPart.value = id;
    const exerciseRes = await ExercisesApi.getexercises({
      categoriesId: activeNav.value,
      subCategoriesId: id,
    });
    exercises.value = exerciseRes.data || [];
  } catch (e) {
    console.error('加载动作失败:', e);
  }
};

// 收藏
const handleCollectClick = async (id) => {
  activeNav.value = id;
  loadCollectList();
  loadSuperFavoriteList();
};
// 动作收藏
const loadCollectList = async () => {
  try {
    const res = await ExercisesApi.getFavoriteExercises();
    exercises.value = res.data || [];
  } catch (err) {
    console.error('加载动作收藏失败', err);
  }
};
// 超级组收藏
const loadSuperFavoriteList = async () => {
  try {
    const res = await SupersetsApi.getFavoriteSuperset();
    superGroupInfo.value = res.data || [];
  } catch (err) {
    superFavoriteList.value = [];
    console.error('加载超级组收藏失败', err);
  }
};

// 加载分类
const loadCategories = async () => {
  try {
    await actionStore.getloadCategories();
    navItems.value = actionStore.showCategories;

    if (navItems.value.length > 0) {
      switchNav(navItems.value[0].id);
    }
  } catch (error) {
    console.error('获取分类失败:', error);
  }
};

// 加载动作
const loadExercises = async (categoriesId) => {
  try {
    const partRes = await ExercisesApi.getMotionPart(categoriesId);
    motionPart.value = partRes.data || [];
    console.log(motionPart.value, 'motionPart.value');

    const exerciseRes = await ExercisesApi.getexercises({ categoriesId });
    exercises.value = exerciseRes.data;
  } catch (error) {
    console.error('加载动作失败:', error);
  }
};

// 切换导航
const switchNav = (id) => {
  if (activeNav.value === id) return;
  activeNav.value = id;
  activeMotionPart.value = '';
  if (id == 'super') {
    exercises.value = [];
    motionPart.value = [];
    loadsupersetsinfo();
  } else {
    superGroupInfo.value = [];
    loadExercises(id);
  }
};

// 搜索
const onSearch = (e) => {
  const searchText = e.detail.value.trim();
  if (!currentCategoryId.value) return;

  searchText ? searchExercises(searchText) : loadExercises(currentCategoryId.value);
};

const searchExercises = (keyword) => {
  const key = keyword.toLowerCase().trim();
  exercises.value = allExercises.value.filter((item) => {
    return item.name && item.name.toLowerCase().includes(key);
  });
};

const loadsupersetsinfo = async () => {
  try {
    const response = await SupersetsApi.getsupersets();
    superGroupInfo.value = response.data || [];
  } catch (error) {
    console.error('获取超级组失败:', error);
  }
};

// 页面跳转
const goToDetail = (id, type) => {
  console.log('type=', type);
  nextTick(() => {
    actionDetailRef.value.open(id, type);
  });
};

const addExercise = () => {
  addshow.value = !addshow.value;
};

const addnewmotion = () => {
  uni.navigateTo({ url: '/pages4/pages/xunji/xunji-dongzuo-xinzeng' });
};

const addnewsupersets = () => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/dongzuo-xinzengchaojizu?navItems=${encodeURIComponent(
      JSON.stringify(navItems.value),
    )}`,
  });
};

const actionmanagement = () => {
  uni.navigateTo({ url: '/pages4/pages/xunji/dongzuo-muluguanli' });
};

onMounted(() => {
  loadCategories();
});
</script>
<style lang="scss" scoped>
.exercise-page {
  background-color: white;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .search-bar {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20rpx;
    // background-color: #f5f5f5;
    border-radius: 12rpx;
    margin-top: 20rpx;

    /* #ifdef H5 */
    margin-top: 20px;
    /* #endif */

    .search {
      display: flex;
      align-items: center;
      padding: 10rpx 20rpx;
      flex: 1;
      border-radius: 30rpx;
      background-color: #f5f5f5;

      .search-icon {
        width: 30rpx;
        height: 30rpx;
      }

      .search-input {
        flex: 1;
        padding-left: 15rpx;
        font-size: 26rpx;
        color: #333;
        border: none;
        outline: none;
        background: transparent;
      }
    }

    .add-btn {
      width: 60rpx;
      height: 60rpx;
      background-color: transparent;
      border: none;
      margin-left: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 99;
      position: relative;

      .plus-icon {
        width: 40rpx;
        height: 40rpx;
      }

      .floating-menu {
        position: absolute;
        top: 30rpx;
        right: 30rpx;
        width: 300rpx;
        background-color: #fff;
        border-radius: 12rpx;
        box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
        padding: 20rpx;
        z-index: 100;

        .menu-item {
          display: flex;
          align-items: center;
          padding: 20rpx 0;
          border-bottom: 1rpx solid #eee;

          .u-icon {
            margin-right: 16rpx;
          }

          .menu-text {
            font-size: 28rpx;
            color: #333;
          }

          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
  }

  .layout-container {
    box-sizing: border-box;
    display: flex;
    height: calc(82vh + 25rpx);
    background-color: #f5f5f5;

    .left-nav {
      width: 160rpx;
      background-color: white;
      border-right: 1px solid #eee;
      // 添加底部 padding，避免最后一项被底部导航栏遮挡
      padding-bottom: 20rpx;
      // #ifdef MP-WEIXIN
      // 微信小程序端可能需要更多底部空间
      padding-bottom: 200rpx;

      // #endif
      .nav-item {
        padding: 24rpx 0;
        text-align: center;
        font-size: 26rpx;
        color: #333;
      }

      .active {
        color: #16ad40;
        background-color: #e1f6e9;
        border-right: 3px solid #16ad40;
        font-weight: bold;
      }
    }

    .right-content {
      box-sizing: border-box;
      flex: 1;
      padding: 20rpx;
      height: 100%;
      // 添加底部 padding，避免内容被底部导航栏遮挡
      // 底部导航栏高度约 100rpx（50px），加上安全区域
      padding-bottom: 20rpx;
      // #ifdef MP-WEIXIN
      // 微信小程序端可能需要更多底部空间
      padding-bottom: 100rpx;

      // #endif
      .tip {
        display: flex;
        padding-left: 20rpx;
        align-items: center;
        column-gap: 15rpx;
        margin-bottom: 20rpx;

        .item {
          margin: 0;
          padding: 12rpx 20rpx;
          font-size: 22rpx;
          line-height: 1;
          background-color: #fff;
          border-radius: 20rpx;

          &.active {
            background-color: #d8ede0;
            color: #43b05e;
          }
        }
      }

      .exercise-grid {
        display: flex;
        flex-direction: column;
        gap: 24rpx;

        .title {
          font-weight: 600;
          padding-left: 20rpx;
          font-size: 30rpx;
        }

        .content {
          width: 100%;

          // display: grid;
          // grid-template-columns: repeat(2, 1fr);
          // /* 改为3列布局 */
          // gap: 16rpx;

          // .exercise-item {
          //   display: flex;
          //   height: 150rpx;
          //   /* 减小项目高度 */
          //   flex-direction: column;
          //   align-items: center;
          //   justify-content: center;
          //   background-color: white;
          //   padding: 16rpx 8rpx;
          //   box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);

          //   .exercise-img {
          //     width: 90%;
          //     height: 140rpx;
          //     /* 固定图片高度 */
          //     border-radius: 8rpx;
          //     margin-bottom: 12rpx;
          //   }

          //   .exercise-title {
          //     font-size: 24rpx;
          //     color: #333;
          //     text-align: center;
          //     line-height: 1.3;
          //     max-width: 100%;

          //     text-overflow: ellipsis;
          //     display: -webkit-box;
          //     -webkit-box-orient: vertical;
          //   }
          // }
          .equipment-item {
            width: 100%;
            // margin-bottom: 40rpx;

            .equipment-name {
              color: #000;
              font-size: 32rpx;
              margin-bottom: 20rpx;


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

            .action-list {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              grid-gap: 10rpx;

              .action-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 10rpx;
                background: #fff;
                border-radius: 10rpx;
                padding: 20rpx;
                box-sizing: border-box;
                position: relative;

                .action-img {
                  width: 100%;
                  height: 250rpx;
                  border-radius: 10rpx;
                }

                .trainingReps {
                  position: absolute;
                  top: 20rpx;
                  right: 20rpx;
                  z-index: 1;
                  font-size: 22rpx;
                }

                &:last-child {
                  margin-bottom: 50rpx;
                  padding-bottom: env(safe-area-inset-bottom);
                }

              }
            }
          }
        }

        .supers-name {
          color: #000;
          font-size: 32rpx;
          margin-bottom: 20rpx;
        }

        .super {
          display: flex;
          align-items: center;
          background: #fff;
          padding: 20rpx;
          box-sizing: border-box;
          border-radius: 10rpx;
          gap: 20rpx;
          font-size: 26rpx;
          margin-bottom: 20rpx;

          .super-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: 10rpx;
          }

          .super-name {
            margin-bottom: 10rpx;
          }
        }

        .add-super {
          background: #fff;
          padding: 20rpx;
          box-sizing: border-box;
          border-radius: 10rpx;

          .header {
            display: flex;
            gap: 10rpx;
            align-items: center;
            margin-bottom: 20rpx;
          }

          .tip {
            margin: 0rpx;
            padding: 0rpx;
            font-size: 22rpx;
          }
        }
      }

      .nav-item .category-group {
        /* 超级组特殊样式 */
        background-color: #f0f9ff;
        font-weight: bold;
        border-top: 1px solid #eee;
      }

      .empty-state {
        display: flex;
        justify-content: center;
        align-items: center;

        .empty-text {
          font-size: 28rpx;
          color: #999;
        }
      }
    }
  }
}

.safe-area-bottom {
  height: env(safe-area-inset-bottom); // 适配iOS安全区
  // 额外加上 Tabbar 的高度，你的 Tabbar 高度是 85px = 170rpx
  padding-bottom: 170rpx;
  box-sizing: border-box;
}
</style>