<template>
  <view class="container">
    <!-- #ifdef MP-WEIXIN -->
    <up-navbar placeholder bgColor="transparent">
      <template #left>
        <view></view>
      </template>
    </up-navbar>
    <!-- #endif -->
    <view class="status-header">
      <view class="timer-box" @click="show = true">
        <text class="time">{{ formattedTime.substring(3) }}</text>
        <view class="triangle-icon"></view>
      </view>
      <view class="finish-btn">完成</view>
    </view>

    <view class="action-list">
      <view class="header">
        <view class="title-left">
          <up-icon name="edit-pen" color="#8e8e93" size="22"></up-icon>
          <text class="title-name" v-if="type === 1">{{ actionDetail?.categoryDescription }}</text>
          <text class="title-name" v-if="type === 2">自定义训练</text>
        </view>
        <!-- 这里组数和千克数，要从子组件返回（实时） -->
        <text v-if="type === 1" class="title-stats">1个动作 · {{ groupCount }}组 · 0/0kg</text>
        <text v-if="type === 2" class="title-stats">{{ (actionDetail?.exercises || []).length }}个动作 · 6组 · 0/0kg</text>
      </view>
      <!-- 动作列表 -->
      <view class="action-item">
        <dongzuo :id="id" :type="type" :actionDetail="actionDetail" @update:groupCount="getGroupCount" />
      </view>
      <!-- <view v-if="type === 2" class="action-item" v-for="item in 3" :key="item">
        <dongzuo :id="id" :type="type" :actionDetail="actionDetail" />
      </view> -->
    </view>

    <view class="footer-bar">
      <view class="footer-item" @click="openActionSort">
        <text class="count">4</text>
        <text class="label">动作排序</text>
      </view>
      <view class="footer-item">
        <up-icon name="edit-pen" color="#fff" size="24"></up-icon>
        <text class="label">写总结</text>
      </view>
      <view class="add-btn-wrapper">
        <view class="add-btn">
          <up-icon name="plus" color="#000" size="20" bold></up-icon>
        </view>
      </view>
      <view class="footer-item">
        <up-icon name="minus-square-fill" color="#fff" size="24"></up-icon>
        <text class="label">最小化</text>
      </view>
      <view class="footer-item" @click="deleteTraining">
        <up-icon name="trash" color="#fff" size="24"></up-icon>
        <text class="label">删除</text>
      </view>
    </view>

    <!-- 设置训练时间弹窗 -->
    <up-popup :show="show" mode="top" @close="show = false" :safeAreaInsetBottom="false" safeAreaInsetTop
      bgColor="#2c2c2e">
      <view class="time-pop-container">
        <view class="pop-content">
          <view class="pop-title">设置训练时间</view>

          <view class="setting-grid">
            <view class="grid-item flex-2" @click="datePickerShow = true">
              <text class="group-label">训练日期</text>
              <view class="dark-input-card">
                <text>{{ trainingDateText }}</text>
              </view>
            </view>
            <view class="grid-item flex-1" @click="timePickerShow = true">
              <text class="group-label">起始时间</text>
              <view class="dark-input-card">
                <text>{{ trainingTimeText }}</text>
              </view>
            </view>
          </view>

          <view class="sub-tips">可点击输入框修改训练日期和起始时间</view>

          <view class="section-title">训练时长计时</view>

          <view class="dark-input-card timer-card">
            <view class="timer-left" @click="handleTimerClick">
              <text class="timer-num" :class="{ active: !isPause }">{{ formattedTime }}</text>
              <text class="timer-status" :class="{ active: !isPause }">
                {{ isPause ? '已暂停 (点击修改数值)' : '自动计时中' }}
              </text>
            </view>
            <view class="timer-right">
              <view class="action-btn gray-btn" v-if="isPause" @click="resetTimer">重置</view>
              <view class="action-btn green-btn" :class="{ active: !isPause, bgactve: !isPause }" @click="toggleTimer">
                {{ isPause ? '继续计时' : '暂停计时' }}
              </view>
            </view>
          </view>
          <view class="sub-tips">可暂停计时后手动修改实际训练时长</view>

          <view class="pull-handle" @click="show = false"></view>
        </view>
      </view>
    </up-popup>

    <!-- 设置训练日期 -->
    <up-datetime-picker :show="datePickerShow" v-model="dateValue" mode="date" closeOnClickOverlay
      @confirm="confirmDate" @cancel="datePickerShow = false" @close="datePickerShow = false">
    </up-datetime-picker>

    <!-- 设置起始时间 -->
    <up-datetime-picker :show="timePickerShow" v-model="timeValue" mode="time" closeOnClickOverlay
      @confirm="confirmTime" @cancel="timePickerShow = false" @close="timePickerShow = false">
    </up-datetime-picker>

    <!-- 设置训练时长计时 -->
    <up-picker :show="showPicker" :columns="timeColumns" :defaultIndex="defaultTimeIndex" title="修改训练时长"
      @confirm="onTimeConfirm" @cancel="showPicker = false" closeOnClickOverlay>
    </up-picker>

    <!-- 动作排序弹窗 -->
    <up-popup :show="actionSortShow" mode="bottom" @close="actionSortShow = false" 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">
              <up-icon name="plus" color="#F2DC0B" size="15"></up-icon>
              <text>添加</text>
            </view>
          </view>
          <view class="tip">长按并上下拖拽右侧图标即可排序</view>
        </view>

        <scroll-view scroll-y class="sort-scroll-view" :scroll-with-animation="true">
          <movable-area class="drag-area" :style="{ height: areaHeight + 'px' }">
            <movable-view v-for="(item, index) in verticalList" :key="item.id" class="drag-view" direction="vertical"
              :y="item.y" :style="{ zIndex: activeIndex === index ? 99 : 1 }" :disabled="!isDragging"
              @change="onDragMove($event, index)" @touchend="onDragEnd" damping="40" friction="2">
              <view class="drag-item-card" :class="{ 'is-active': activeIndex === index }">
                <view class="item-left">
                  <up-icon name="trash" color="#fff" size="22"></up-icon>
                  <image :src="item.img" class="item-img" mode="aspectFill"></image>
                  <view class="item-info">
                    <view class="item-name">{{ item.label }}</view>
                    <view class="item-tags">{{ item.tag.join(' ') }}</view>
                  </view>
                </view>
                <view class="item-right">
                  <up-icon name="plus-circle" color="#666" size="22"></up-icon>
                  <view class="drag-handle" @longpress="onHandleLongPress(index)">
                    <up-icon name="list" color="#fff" size="24"></up-icon>
                  </view>
                </view>
              </view>
            </movable-view>
          </movable-area>
        </scroll-view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onBeforeUnmount, onMounted } from 'vue';
import dongzuo from '@/pages4/components/dongzuo.vue';
import { onLoad } from "@dcloudio/uni-app"
import TrainingApi from "@/sheep/api/Training/traininghistory"
import ExercisesApi from '@/sheep/api/motion/exercises';
import SupersetsApi from '@/sheep/api/motion/supersets';
// --- 计时核心逻辑 ---
const totalSeconds = ref(46);
const isPause = ref(true);
let timerInterval = null;
const groupCount = ref(0)


// 接收子组件传回的组数
const getGroupCount = (count) => {
  console.log('✅ 父组件收到子组件的组数：', count)
  groupCount.value = count
}

// 格式化时间
const formattedTime = computed(() => {
  const h = Math.floor(totalSeconds.value / 3600)
    .toString()
    .padStart(2, '0');
  const m = Math.floor((totalSeconds.value % 3600) / 60)
    .toString()
    .padStart(2, '0');
  const s = (totalSeconds.value % 60).toString().padStart(2, '0');
  return `${h}:${m}:${s}`;
});
// 继续或者暂停计时
const toggleTimer = () => {
  isPause.value = !isPause.value;
  if (!isPause.value) {
    timerInterval = setInterval(() => {
      totalSeconds.value++;
    }, 1000);
  } else {
    clearInterval(timerInterval);
  }
};
// 重置时间
const resetTimer = () => {
  totalSeconds.value = 0;
};

// --- Picker 修改时间 ---
const showPicker = ref(false);
const defaultTimeIndex = ref([0, 0, 46]);
const timeColumns = reactive([
  Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0') + '时'),
  Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0') + '分'),
  Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0') + '秒'),
]);

const handleTimerClick = () => {
  if (isPause.value) {
    const h = Math.floor(totalSeconds.value / 3600);
    const m = Math.floor((totalSeconds.value % 3600) / 60);
    const s = totalSeconds.value % 60;
    defaultTimeIndex.value = [h, m, s];
    showPicker.value = true;
  }
};

const onTimeConfirm = (e) => {
  const rawValues = e.value.map((val) => parseInt(String(val).replace(/[时分秒]/g, '')));
  totalSeconds.value = rawValues[0] * 3600 + rawValues[1] * 60 + rawValues[2];
  showPicker.value = false;
};

// --- 基础弹窗 ---
const show = ref(false);
const datePickerShow = ref(false);
const timePickerShow = ref(false);

const dateValue = ref(Number(new Date()));
const timeValue = ref('14:13');
const trainingDateText = ref('2026-04-26 周日');
const trainingTimeText = ref('14:13');

const id = ref(0);
const type = ref(0);
const actionDetail = ref({})

// 加载数据
// 加载单个动作详情
const loadexercisedetail = async (id) => {
  if (!id) return;
  const res = await ExercisesApi.getExerciseById(id);
  actionDetail.value = res.data;
  console.log('dongzuo组件加载到actionDetail：', actionDetail.value)
};

// 加载超级组详情
const loadsuperdetail = async (id) => {
  if (!id) return;
  const response = await SupersetsApi.getSupersetsInfo(id);
  actionDetail.value = response.data;
  console.log('显示超级组详情：', actionDetail.value)
};


// 接收传过来的数字，1代表动作，2代表超级组
onLoad((options) => {
  id.value = Number(options.id);
  type.value = Number(options.type);
  console.log('父页面收到 id =', id.value);
  console.log('父页面收到 type =', type.value);
  if (type.value === 1) {
    console.log('当前是【动作】类型，请求动作接口');
    loadexercisedetail(id.value);
  } else if (type.value === 2) {
    console.log('当前是【超级组】类型，请求超级组接口');
    loadsuperdetail(id.value);
  } else {
    console.warn('未知的 type 类型:', type.value);
  }
});

const confirmDate = (e) => {
  const date = new Date(e.value);
  const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()];
  trainingDateText.value = `${date.getFullYear()}-${(date.getMonth() + 1)
    .toString()
    .padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${week}`;
  datePickerShow.value = false;
};

const confirmTime = (e) => {
  trainingTimeText.value = e.value;
  timePickerShow.value = false;
};

// 提交训练历史
const save = () => {



}

onBeforeUnmount(() => {
  if (timerInterval) clearInterval(timerInterval);
});

// --- 动作排序 ---
const actionSortShow = ref(false);
const isDragging = ref(false); // 新增：控制是否允许拖拽
const openActionSort = () => {
  actionSortShow.value = true;
  openSortPopup();
};
// --- 拖拽核心逻辑 ---
const ITEM_HEIGHT = 80; // 这里的单位是 px，对应样式中的 160rpx (假设屏幕宽度750)
const verticalList = ref([
  {
    id: 1,
    label: '滑雪机 1',
    tag: ['有氧', '力量'],
    img: 'https://cdn.uviewui.com/uview/album/1.jpg',
    y: 0,
  },
  {
    id: 2,
    label: '滑雪机 2',
    tag: ['有氧', '力量'],
    img: 'https://cdn.uviewui.com/uview/album/2.jpg',
    y: 80,
  },
  {
    id: 3,
    label: '滑雪机 3',
    tag: ['有氧', '力量'],
    img: 'https://cdn.uviewui.com/uview/album/3.jpg',
    y: 160,
  },
  {
    id: 4,
    label: '滑雪机 4',
    tag: ['有氧', '力量'],
    img: 'https://cdn.uviewui.com/uview/album/4.jpg',
    y: 240,
  },
]);

const activeIndex = ref(-1);
const areaHeight = computed(() => verticalList.value.length * ITEM_HEIGHT);

// 记录拖拽中的实时目标位置
let targetIndex = -1;

const openSortPopup = () => {
  // 初始化坐标，确保布局正确
  verticalList.value.forEach((item, index) => {
    item.y = index * ITEM_HEIGHT;
  });
  actionSortShow.value = true; // 修复原代码笔误: actionSortShow.ref -> actionSortShow.value
  isDragging.value = false; // 打开弹窗时默认不可拖拽
  activeIndex.value = -1;
};

// 新增：长按手柄开始拖拽
const onHandleLongPress = (index) => {
  isDragging.value = true;
  activeIndex.value = index;
  targetIndex = index;
};

const onDragMove = (e, index) => {
  // 仅处理手动拖拽触发的事件
  if (e.detail.source === 'touch') {
    const currentY = e.detail.y;
    // 计算当前拖拽到了哪个索引
    let newIndex = Math.round(currentY / ITEM_HEIGHT);
    newIndex = Math.max(0, Math.min(newIndex, verticalList.value.length - 1));

    if (newIndex !== targetIndex) {
      targetIndex = newIndex;
      // 可以在此处做“挤开”其他元素的动画效果，但为了绝对流畅，建议在End统一处理
    }
  }
};

const onDragEnd = () => {
  if (activeIndex.value !== -1 && targetIndex !== -1 && activeIndex.value !== targetIndex) {
    const list = [...verticalList.value];
    // 重新排序数组
    const movedItem = list.splice(activeIndex.value, 1)[0];
    list.splice(targetIndex, 0, movedItem);

    // 更新坐标并赋值
    list.forEach((item, index) => {
      item.y = index * ITEM_HEIGHT;
    });

    setTimeout(() => {
      verticalList.value = list;
    }, 0);
  } else {
    // 归位
    if (activeIndex.value !== -1) {
      verticalList.value[activeIndex.value].y = activeIndex.value * ITEM_HEIGHT;
    }
  }

  // 重置状态
  isDragging.value = false;
  activeIndex.value = -1;
  targetIndex = -1;
};

// 删除训练
const deleteTraining = () => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除本次训练记录吗？删除后无法恢复',
    confirmText: '确认删除',
    confirmColor: '#FF3B30', // 红色强调删除
    cancelText: '取消',
    success: (res) => {
      // 用户点击确认
      if (res.confirm) {
        // 提示删除成功
        uni.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 1500
        });
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
      // 用户点击取消，不做操作
      else if (res.cancel) {
        console.log('用户取消删除');
      }
    }
  });
};

</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #1c1c1e;
  padding-bottom: 120rpx;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;

  .timer-box {
    display: flex;
    align-items: center;
    background-color: #2c2c2e;
    padding: 10rpx 24rpx;
    width: 120rpx;
    border-radius: 40rpx;
    position: relative;

    .time {
      color: #fff;
      font-weight: bold;
      font-size: 32rpx;
      margin-right: 8rpx;
    }

    .triangle-icon {
      position: absolute;
      right: 20rpx;
      bottom: 15rpx;
      transform: rotate(-50deg);
      width: 0;
      height: 0;
      border-left: 10rpx solid transparent;
      border-right: 10rpx solid transparent;
      border-top: 12rpx solid #fbdf09;
    }
  }

  .finish-btn {
    background-color: #fbdf09;
    color: #000;
    padding: 10rpx 40rpx;
    border-radius: 30rpx;
    font-weight: bold;
    font-size: 28rpx;
  }
}

.action-list {
  padding: 20rpx;

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

    .title-left {
      display: flex;
      align-items: center;

      .title-name {
        color: #fff;
        font-size: 36rpx;
        font-weight: bold;
        margin-left: 10rpx;
      }
    }

    .title-stats {
      color: #8e8e93;
      font-size: 24rpx;
    }
  }
}

.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110rpx;
  background-color: #2c2c2e;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99;

  .footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .count {
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
    }

    .label {
      color: #8e8e93;
      font-size: 20rpx;
      margin-top: 4rpx;
    }
  }

  .add-btn-wrapper {
    margin-top: -60rpx;

    .add-btn {
      width: 100rpx;
      height: 100rpx;
      background-color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
    }
  }
}

.time-pop-container {
  padding: 40rpx 30rpx;
  color: #fff;

  .pop-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
  }

  .setting-grid {
    display: flex;
    gap: 20rpx;

    .flex-2 {
      flex: 2;
    }

    .flex-1 {
      flex: 1;
    }

    .group-label {
      font-size: 24rpx;
      color: #8e8e93;
      margin-bottom: 12rpx;
      display: block;
    }
  }

  .dark-input-card {
    background-color: #1c1c1e;
    padding: 24rpx;
    border-radius: 12rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sub-tips {
    font-size: 22rpx;
    color: #636366;
    margin-top: 16rpx;
    margin-bottom: 40rpx;
  }

  .section-title {
    font-size: 26rpx;
    color: #8e8e93;
    margin-bottom: 12rpx;
  }

  .timer-card {
    justify-content: space-between;
    padding: 20rpx 15rpx;
    height: 80rpx;
    box-sizing: border-box;

    .timer-left {
      display: flex;
      align-items: center;
      gap: 20rpx;
      padding-left: 30rpx;

      .timer-num {
        font-size: 30rpx;
        font-family: monospace;
      }

      .timer-status {
        font-size: 22rpx;
      }
    }

    .timer-right {
      display: flex;
      gap: 16rpx;

      .action-btn {
        height: 60rpx;
        padding: 0 20rpx;
        line-height: 60rpx;
        border-radius: 8rpx;
        font-size: 22rpx;
        font-weight: bold;
      }

      .gray-btn {
        background-color: #454545;
        color: #fff;
      }

      .green-btn {
        background-color: #213929;
        color: #2f9f3f;
      }

      .bgactve {
        background-color: #4c4d3b;
      }

      .active {
        color: #fbdf09;
      }
    }
  }

  .pull-handle {
    width: 80rpx;
    height: 8rpx;
    background-color: #48484a;
    border-radius: 4rpx;
    margin: 40rpx auto 0;
  }
}

/* ========== 拖拽排序 优化样式 ========== */
.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>