<template>
  <view>
    <!-- 动作排序弹窗 -->
    <up-popup :show="actionSortShow" mode="bottom" bgColor="#242424" round="24rpx">
      <view class="action-sort-popup">
        <view class="sort-header">
          <view class="operate">
            <view class="close" @click="actionSortShow = false">
              <up-icon name="close" color="#fff" size="20"></up-icon>
            </view>
            <view class="title">动作排序</view>
            <view class="add" @click="addActionsPopup">
              <up-icon name="plus" color="#F2DC0B" size="15"></up-icon>
              <text>添加</text>
            </view>
          </view>
        </view>

        <scroll-view scroll-y class="sort-scroll-view" :scroll-with-animation="true">
          <view v-for="(item, index) in sortList" :key="item.unitId || index" class="drag-item-card">
            <view class="item-left">
              <up-icon name="trash" color="#fff" size="22" @click="deleteUnit(item, index)"></up-icon>
              <image class="item-img" :src="item.exercises?.[0]?.url3dAnimation || item.exercises?.[0]?.exerciseCover ||
                item.exercises?.[0]?.urlImage" v-if="item.unitType === 1" mode="aspectFill" />
              <image class="item-img"
                src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260507/超级组_1778117889451.png" v-else
                mode="aspectFill" />
              <view class="item-info">
                <view class="item-name">{{ item.unitName || item.exercises?.[0]?.exerciseName || '未命名动作' }}</view>
                <view class="item-tags" v-if="item.unitType === 2">超级组</view>
                <view class="item-tags" v-if="item.unitType === 1">
                  {{ item.exercises?.[0]?.categoryDescription || '' }}
                  {{ item.exercises?.[0]?.equipmentDescription || '' }}
                </view>
              </view>
            </view>
            <view class="item-right">
              <up-icon name="plus-circle" color="#666" size="22" @click="copyUnit(item, index)"></up-icon>
            </view>
          </view>
        </scroll-view>
      </view>
    </up-popup>
    <!-- 动作新增组件 -->
    <!-- <addActions :show="addActionsShow" @close="addActionsShow = false" /> -->

  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useTrainingStore } from '@/sheep/store/trainingStore'
const emit = defineEmits(['open-add-actions'])
const trainingStore = useTrainingStore()

// --- 动作排序 ---弹窗
const actionSortShow = ref(false);
const sortList = ref([])

// 这里是打开动作排序的方法
const openActionSort = () => {
  sortList.value = trainingStore.actionDetail?.units?.map((unit, index) => ({
    ...unit,
    exercises: unit.exercises || []
  })) || [];
  actionSortShow.value = true;

  console.log('打印排序列表：', sortList.value);
};



// const addActionsPopup = () => {
//   if (actionSortShow.value === true) {
//     actionSortShow.value = false
//   }
//   console.log("==================== 点击了加号！")
//   addActionsShow.value = true  // 打开弹窗
//   console.log("✅ 弹窗打开：", addActionsShow.value)
// }
const addActionsPopup = () => {
  actionSortShow.value = false
  // 不在这里打开，而是通知父页面
  emit('open-add-actions')
}

const deleteUnit = (item, index) => {
  console.log('🗑️ 点击删除：', item)
  console.log('🗑️ 删除索引：', index)
  uni.showModal({
    title: '确认删除',
    content: `确定要删除【${item.unitName}】吗？`,
    success: (res) => {
      if (res.confirm) {
        console.log('✅ 用户确认删除')
        sortList.value.splice(index, 1)
        trainingStore.actionDetail.units.splice(index, 1)
        console.log('✅ 删除后剩余 units：', trainingStore.actionDetail.units)
      } else {
        console.log('❌ 用户取消删除')
      }
    }
  })
}

// 复制当前 unit，并插入到下方
const copyUnit = (item, index) => {
  console.log('📋 点击复制：', item)
  console.log('📋 复制索引：', index)
  const newUnit = JSON.parse(JSON.stringify(item))
  sortList.value.splice(index + 1, 0, newUnit)
  trainingStore.actionDetail.units.splice(index + 1, 0, newUnit)
  console.log('✅ 复制成功！当前列表：', sortList.value)
  uni.showToast({
    title: '已复制到下方',
    icon: 'success'
  })
}

defineExpose({
  openActionSort
})

</script>

<style lang="scss" scoped>
/* ========== 拖拽排序 优化样式 ========== */
.action-sort-popup {
  width: 100%;
  height: 80vh;
  display: flex;
  flex-direction: column;
  background: #242424;
  border-radius: 20rpx 20rpx 0 0;
}

.sort-header {
  padding: 30rpx;
  color: #fff;
  height: 10vh;
  box-sizing: border-box;

  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 32rpx;
      font-weight: bold;
    }

    .add {
      display: flex;
      align-items: center;
      color: #f2dc0b;
      font-size: 26rpx;
      gap: 8rpx;
    }
  }

  // .tip {
  //   font-size: 24rpx;
  //   color: #8e8e93;
  //   margin-top: 16rpx;
  // }
}

.sort-scroll-view {
  height: 70vh;
}

// .drag-area {
//   width: 100%;
//   position: relative;
// }

// .drag-view {
//   width: 100%;
//   position: absolute;
//   transition: transform 0.2s ease;
// }

/* 拖拽项卡片 */
.drag-item-card {
  width: 100%;
  background: #2c2c2e;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  transition: all 0.2s ease;
  border: 2rpx solid transparent;
}

/* 拖拽中高亮效果 */
.drag-item-card.is-active {
  background: #3a3a3c;
  border-color: #fbdf09;
  transform: scale(1.02);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
}

.item-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.item-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  object-fit: cover;
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.item-name {
  font-size: 28rpx;
  color: #fff;
  font-weight: 500;
}

.item-tags {
  font-size: 22rpx;
  color: #8e8e93;
}

.item-right {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

/* 拖拽手柄 */
.drag-handle {
  padding: 20rpx;
  /* 增大点击区域 */
  color: #8e8e93;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 激活状态下的高亮 */
.drag-item-card.is-active .drag-handle {
  color: #fbdf09;
  transform: scale(1.1);
}

/* 提示用户可长按 */
.drag-handle:active {
  opacity: 0.7;
}
</style>