<template>
  <view class="popup-container" v-if="props.show" @click="closeAddMenu">
    <!-- 搜索栏 -->
    <view class="search-bar">

      <view class="add-btn-wrapper" @click.stop="addExercise">
        <uni-icons type="plus" size="35" color="#333"></uni-icons>
        <view class="floating-menu" v-show="addActionshow" @click.stop>
          <view class="menu-item" @click="addnewmotion">
            <uni-icons type="plus" size="24" color="#333"></uni-icons>
            <text class="menu-text">新增动作</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 左右布局 -->
    <view class="layout-container">
      <!-- 左侧分类导航 -->
      <scroll-view scroll-y class="left-nav">
        <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">
        <!-- 部位筛选（可选） -->
        <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"
                    :class="{ selected: selectedList.some(i => i.action.id === e.id) }" @click="selectAction(e)">
                    <image :src="e.url3dAnimation" mode="aspectFill" lazy-load class="action-img"></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"
                  :class="{ selected: selectedList.some(i => i.action.id === item.id) }" @click="selectAction(item, 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>
          </view>

          <!-- 空状态 -->
          <view class="empty-state" v-else>
            <text class="empty-text">暂无动作数据</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 底部已选动作栏 -->
    <scroll-view class="selected-bar" scroll-x="true" show-scrollbar="false">
      <view class="selected-item" v-for="(item, index) in selectedList" :key="index">
        <text class="name">{{ item.action.name }}</text>
        <uni-icons type="close" size="16" color="#fff" @click="selectedList.splice(index, 1)"></uni-icons>
      </view>
    </scroll-view>

    <!-- 底部按钮栏 -->
    <view class="bottom-btn-bar">
      <view class="btn cancel-btn" @click="handleClose">取消</view>
      <view class="btn confirm-btn" :class="{ disabled: selectedList.length === 0 }" @click="handleConfirm">
        确认
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import ExercisesApi from '@/sheep/api/motion/exercises';
import SupersetsApi from '@/sheep/api/motion/supersets';
import { useActionStore } from '@/sheep/store/action';
import { useTrainingStore } from '@/sheep/store/trainingStore'
const trainingStore = useTrainingStore()

const actionStore = useActionStore();

const emit = defineEmits(['close', 'confirm']);

const addActionshow = ref(false);

// 数据
const activeNav = ref('collect'); // 默认选中收藏
const navItems = ref([]);
const exercises = ref([]);
const superGroupInfo = ref([]);
const motionPart = ref([]);
const activeMotionPart = ref('');
const selectedList = ref([]); // 多选列表：每一项都是 { action: 动作对象, type: 1=动作 2=超级组 }
const selectedType = ref(1); // 1=动作 2=超级组
const allExercises = ref([]);

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  unitIndex: Number,
})

// 监听弹窗打开，加载数据
watch(() => props.show, (val) => {
  if (val) {
    selectedList.value = [];
    // 加载收藏列表
    loadCollectList();
    loadSuperFavoriteList();
  }
  console.log('动作替换组件 unitIndex：', props.unitIndex)
});

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

// 切换菜单显示/隐藏
const addExercise = () => {
  addActionshow.value = !addActionshow.value;
};

// 新增动作跳转
const addnewmotion = () => {
  uni.navigateTo({ url: '/pages4/pages/xunji/xunji-dongzuo-xinzeng' });
};

// 加载分类
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 loadCollectList = async () => {
  try {
    const res = await ExercisesApi.getFavoriteExercises();
    exercises.value = res.data || [];
    allExercises.value = [...(res.data || [])];
  } catch (err) {
    console.error('加载动作收藏失败', err);
  }
};

// 加载收藏超级组列表
const loadSuperFavoriteList = async () => {
  try {
    const res = await SupersetsApi.getFavoriteSuperset();
    superGroupInfo.value = res.data || [];
  } catch (err) {
    console.error('加载超级组收藏失败', err);
  }
};

// 切换左侧分类
const switchNav = (id) => {
  if (activeNav.value === id) return;
  activeNav.value = id;
  activeMotionPart.value = '';
  // selectedList.value = []; // 切换分类时重置选中
  if (id === 'super') {
    exercises.value = [];
    motionPart.value = [];
    loadsupersetsinfo();
  } else {
    superGroupInfo.value = [];
    loadExercises(id);
  }
};

// 加载普通动作
const loadExercises = async (categoriesId) => {
  try {
    const partRes = await ExercisesApi.getMotionPart(categoriesId);
    motionPart.value = partRes.data || [];
    const exerciseRes = await ExercisesApi.getexercises({ categoriesId });
    exercises.value = exerciseRes.data;
    allExercises.value = [...(exerciseRes.data || [])];
  } catch (error) {
    console.error('加载动作失败:', error);
  }
};

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

// 部位筛选
const handlePartClick = async (id) => {
  activeMotionPart.value = id;
  const exerciseRes = await ExercisesApi.getexercises({
    categoriesId: activeNav.value,
    subCategoriesId: id
  });
  exercises.value = exerciseRes.data || [];
  selectedList.value = []; // 切换部位时重置选中
};

// 搜索动作
const onSearch = (e) => {
  const keyword = e.detail.value.trim().toLowerCase();
  if (!keyword) {
    exercises.value = [...allExercises.value];
    return;
  }
  exercises.value = allExercises.value.filter(item =>
    item.name?.toLowerCase().includes(keyword)
  );
};

// 选择动作/超级组
const selectAction = (item, type = 1) => {
  // 查找是否已选中
  const index = selectedList.value.findIndex(i => i.action.id === item.id);
  if (index > -1) {
    // 已存在 → 删除
    selectedList.value.splice(index, 1);
  } else {
    // 不存在 → 添加
    selectedList.value.push({
      action: item,
      type: type
    });
  }

  console.log("✅ 当前选中列表：", selectedList.value);
};

// 关闭组件
const handleClose = () => {
  setTimeout(() => {
    emit('close');
  }, 800);
}

// 确认添加（带详情接口）
const handleConfirm = async () => {
  if (selectedList.value.length === 0) {
    uni.showToast({ title: '请选择动作', icon: 'none' });
    return;
  }

  if (!trainingStore.actionDetail.units) {
    trainingStore.actionDetail.units = [];
  }

  // 遍历 selectedList，调用详情接口拿到完整数据，再转成 unit
  for (const item of selectedList.value) {
    let unit = null;

    if (item.type === 1) {
      // 单个动作：调用详情接口
      const res = await ExercisesApi.getExerciseById(item.action.id);
      const detail = res.data;
      console.log('+++接口返回的动作详情++++', detail);
      console.log('detail.exerciseType =', detail.exerciseType);
      unit = {
        unitType: 1,
        unitId: detail.id,
        unitName: detail.name,
        exercises: [
          {
            exerciseId: detail.id,
            exerciseName: detail.name,
            exerciseType: detail.exerciseType,
            urlImage: detail.url3dAnimation || '',
            // urlImage: detail.urlImage || detail.url3dAnimation,
            categoryDescription: detail.categoryDescription,
            equipmentDescription: detail.equipmentDescription,
          }
        ]
      };

    } else if (item.type === 2) {
      // 超级组：调用详情接口
      const res = await SupersetsApi.getSupersetsInfo(item.action.id);
      const detail = res.data;
      console.log('+++接口返回的动作详情++++', detail);
      console.log('detail.exerciseType =', detail.exerciseType);
      unit = {
        unitType: 2,
        supersetId: detail.id,
        unitName: detail.name,
        exercises: detail.exercises.map(e => ({
          exerciseId: e.id,
          exerciseName: e.name,
          exerciseType: e.exerciseType,
          urlImage: e.url3dAnimation || e.exerciseCover,
          // exerciseCover
        }))
      };
    }

    if (unit) {
      trainingStore.actionDetail.units.push(unit);
    }
  }

  console.log("✅ 已添加动作（含完整字段）：", trainingStore.actionDetail.units);
  emit('close');
  selectedList.value = []; // 清空选择
};

onMounted(() => {
  loadCategories();
});
</script>

<style lang="scss" scoped>
.popup-container {
  background-color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  border-radius: 0;

  .search-bar {
    display: flex;
    align-items: center;
    height: calc(var(--status-bar-height) + 88rpx);
    padding: 0 20rpx 0 20rpx;
    padding-top: var(--status-bar-height);
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  // 浮动加号按钮 + 菜单
  .add-btn-wrapper {
    position: relative;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .floating-menu {
    position: absolute;
    top: 90rpx;
    left: 20rpx;
    background: #fff;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
    padding: 20rpx;
    z-index: 9999;
    width: 260rpx;
  }

  .menu-item {
    display: flex;
    align-items: center;
    gap: 16rpx;
    cursor: pointer;
  }

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

  .layout-container {
    flex: 1;
    display: flex;
    background-color: #f5f5f5;
    overflow: hidden;

    .left-nav {
      width: 150rpx;
      background-color: #fafafa;
      border-right: 1px solid #eee;

      .nav-item {
        padding: 28rpx 16rpx;
        text-align: left;
        font-size: 26rpx;
        color: #666;
        position: relative;

        &.active {
          color: #000;
          background-color: #fff;
          border-right: none;
          font-weight: 500;

          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 6rpx;
            height: 36rpx;
            background-color: #f8d714;
          }
        }
      }
    }

    .right-content {
      flex: 1;
      padding: 20rpx;

      .tip {
        display: flex;
        flex-wrap: wrap;
        gap: 15rpx;
        margin-bottom: 20rpx;

        .item {
          padding: 10rpx 18rpx;
          font-size: 24rpx;
          background-color: #fff;
          border-radius: 16rpx;
          color: #666;

          &.active {
            background-color: #f8d714;
            color: #000;
          }
        }
      }

      .exercise-grid {
        .equipment-item {
          margin-bottom: 30rpx;

          .equipment-name {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 16rpx;
          }

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

            .action-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 8rpx;
              background: #fff;
              border-radius: 16rpx;
              padding: 15rpx;
              position: relative;

              &.selected {
                border: 2rpx solid #f8d714;
              }

              .action-img {
                width: 100%;
                height: 220rpx;
                border-radius: 12rpx;
              }

              .action-name {
                font-size: 24rpx;
                color: #333;
              }

              .trainingReps {
                position: absolute;
                top: 15rpx;
                right: 15rpx;
                font-size: 22rpx;
                color: #999;
              }
            }
          }
        }

        .supers-name {
          font-size: 28rpx;
          color: #333;
          margin: 20rpx 0 16rpx;
        }

        .super {
          display: flex;
          align-items: center;
          background: #fff;
          padding: 20rpx;
          border-radius: 16rpx;
          gap: 20rpx;
          margin-bottom: 15rpx;

          &.selected {
            border: 2rpx solid #f8d714;
          }

          .super-img {
            width: 100rpx;
            height: 100rpx;
            border-radius: 12rpx;
          }

          .right {
            flex: 1;

            .super-name {
              font-size: 26rpx;
              color: #333;
              margin-bottom: 8rpx;
            }

            .parts {
              font-size: 22rpx;
              color: #999;
            }
          }
        }

        .empty-state {
          display: flex;
          justify-content: center;
          align-items: center;
          padding-top: 100rpx;

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

  .bottom-btn-bar {
    display: flex;
    gap: 20rpx;
    padding: 20rpx 30rpx 30rpx;
    background-color: #fff;

    .btn {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      font-weight: bold;
    }

    .cancel-btn {
      background-color: #f5f5f5;
      color: #333;
    }

    .confirm-btn {
      background-color: #f8d714;
      color: #000;

      &.disabled {
        background-color: #eeeeee;
        color: #bbbbbb;
      }
    }
  }

  .selected-bar {
    background-color: #2c2c2e;
    padding: 20rpx 30rpx;
    white-space: nowrap;
    display: flex;
    gap: 20rpx;

    .selected-item {
      background-color: #444;
      color: #fff;
      padding: 10rpx 20rpx;
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      gap: 10rpx;

      .name {
        font-size: 26rpx;
      }
    }
  }
}
</style>