<template>
  <view class="action-container" @click="closeDifficulty">
    <view class="action-list">
      <view class="card">
        <view class="card-top" @click.stop="isExpanded = !isExpanded">
          <view>
            <image class="action-image" :src="actionDetail?.urlImage || lostImage" mode="aspectFill"></image>
          </view>
          <view class="action-info">
            <!-- 动作的 -->
            <text class="name">{{ actionDetail?.name }}</text>
            <text class="tags" v-if="type === 1">{{ actionDetail?.categoryDescription }} {{
              actionDetail?.equipmentDescription }}</text>
            <!-- 这里还缺kg/要搞个计算属性 -->
            <text class="tags" v-if="type === 2">超级组</text>
            <view class="dot-list" v-if="!isExpanded">
              <view class="dot" v-for="(item, index) in recordList" :key="'dot-' + index"></view>
            </view>
          </view>
          <view class="more-circle" @click.stop="toggleTips">
            <up-icon name="more-dot-fill" color="#fff" size="15" class="icon"></up-icon>
            <view class="tips" v-if="showTips">
              <view class="tip" @click="openBeizhu">文字备注</view>

              <view class="tip">组间休息</view>
              <view class="tip">动作替换</view>
              <view class="tip">删除动作</view>
            </view>
          </view>
        </view>

        <view class="main" v-if="isExpanded">
          <view class="img-list" v-if="type === 2">
            <!-- 超级组动作的图片 -->
            <image v-for="item in (actionDetail?.exercises || [])" :key="item.id" :src="item?.urlImage || lostImage"
              class="img"></image>
          </view>
          <!-- 当类型为4，5时，显示体重 -->
          <view class="userWeight" v-if="[4, 5].includes(actionDetail.exerciseType)">
            <text class="label">体重</text>
            <view class="userWeight-values">
              <up-input v-model="userWeight" border="none" type="digit" color="#ffffff" :maxlength="3"
                :customStyle="{ height: '40rpx', width: '60rpx', textAlign: 'center' }"></up-input>
              <!-- <up-icon name="eye" size="16" color="#ccc"></up-icon> -->
            </view>
          </view>
          <view class="record-row" v-for="(item, index) in recordList" :key="index" :class="{ active: item.isActive }">
            <view class="left">
              <view class="left-header">
                <view class="index-box">{{ index + 1 }}</view>
                <!-- 超级组动作列表的名字 -->
                <view class="exercise-name-list">
                  <text v-for="name in exerciseNamesWithLabel" :key="name" class="exercise-name">
                    {{ name }}
                  </text>
                </view>
                <!-- 时间 -->
                <view class="input-col" @click.stop="openPicker(index)" v-if="showTime">
                  <view class="label">时长</view>
                  <view class="values">
                    <text class="num">{{ item.h }}</text>
                    <text class="unit">时</text>
                    <text class="num">{{ item.m }}</text>
                    <text class="unit">分</text>
                    <text class="num">{{ item.s }}</text>
                    <text class="unit">秒</text>
                  </view>
                </view>
                <!-- 距离 -->
                <view class="distance" v-if="showDistance">
                  <view class="label">距离</view>
                  <view class="values">
                    <up-input v-model="item.distance" border="none" type="digit" color="#ffffff" :maxlength="3"
                      :customStyle="{ height: '40rpx', width: '60rpx', textAlign: 'center' }"></up-input>
                    <text class="unit">km</text>
                  </view>
                </view>
                <!-- 休息时间 -->
                <view class="timer-selector" v-if="!isEditing" @click.stop="openQuickTimer(index)">
                  <text class="text">{{ item.quickTimeDisplay || '60s' }}</text>
                  <up-icon name="arrow-down" color="#8e8e93" size="10"></up-icon>
                </view>
              </view>
              <!-- kg -->
              <view class="goal-list">
                <view class="goal-item">
                  <view class="serial" v-if="type === 2">1A</view>
                  <view class="goal-input-box" v-if="showWeight">
                    <view class="values">
                      <up-input v-model="item.weight" border="none" type="digit" color="#ffffff" :maxlength="3"
                        :customStyle="{ height: '40rpx', width: '60rpx', textAlign: 'center' }"></up-input>
                      <text class="unit">kg</text>
                    </view>
                  </view>
                  <!-- 次数 -->
                  <view class="goal-input-box" v-if="showReps">
                    <view class="values">
                      <up-input v-model="item.reps" border="none" type="digit" color="#ffffff" :maxlength="3"
                        :customStyle="{ height: '40rpx', width: '60rpx', textAlign: 'center' }"></up-input>
                      <text class="unit">次</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <!-- 右边的更多列表按钮 -->
            <view class="icons">
              <template v-if="!isEditing">
                <view class="icon" @click.stop="toggleActive(index)" :class="{ active: item.isActive }">
                  <up-icon name="checkmark" :color="item.isActive ? '#000' : '#919191'" size="20" bold></up-icon>
                </view>
              </template>
              <template v-else>
                <view class="icon" @click.stop="addRow">
                  <up-icon name="plus-circle" color="#fff" size="20" bold></up-icon>
                </view>
                <view class="icon del" @click.stop="deleteRow(index)">
                  <up-icon name="trash" color="#e63e1e" size="20" bold></up-icon>
                </view>
              </template>
            </view>
          </view>
        </view>

        <view class="button-group" v-if="isExpanded">
          <view class="btn-item" @click.stop="addRow">加一组</view>
          <view class="btn-item" @click="openHistory(props?.id)">历史</view>
          <!-- 历史弹窗 -->
          <actionHistory ref="historyPopupRef" :actionName="actionDetail.name" />
          <!-- 动作难度选择弹窗 -->
          <view class="btn-item" @click.stop="showDifficulty = !showDifficulty">
            <text :style="{ color: currentDifficulty.color }">{{ currentDifficulty.label }}</text>
            <up-icon name="arrow-down" size="8" color="#fff"></up-icon>

            <view class="difficulty-pop" v-if="showDifficulty">
              <view class="difficulty-item" @click.stop="selectDifficulty('轻松', '#b2f055')">
                <text :style="{ color: '#b2f055' }">轻松</text>
                <up-icon v-if="currentDifficulty.label === '轻松'" name="checkmark" color="#b2f055" size="16"
                  bold></up-icon>
              </view>
              <view class="difficulty-item" @click.stop="selectDifficulty('正常', '#ffffff')">
                <text :style="{ color: '#ffffff' }">正常</text>
                <up-icon v-if="currentDifficulty.label === '正常'" name="checkmark" color="#ffffff" size="16"
                  bold></up-icon>
              </view>
              <view class="difficulty-item" @click.stop="selectDifficulty('困难', '#e26c2a')">
                <text :style="{ color: '#e26c2a' }">困难</text>
                <up-icon v-if="currentDifficulty.label === '困难'" name="checkmark" color="#e26c2a" size="16"
                  bold></up-icon>
              </view>
            </view>
          </view>

          <view class="btn-item" @click.stop="isEditing = !isEditing">
            {{ isEditing ? '完成' : '编辑' }}
          </view>
        </view>
      </view>
    </view>

    <up-picker :show="showPicker" :columns="timeColumns" :defaultIndex="defaultTimeIndex" title="请选择运动时长"
      @confirm="onTimeConfirm" @cancel="showPicker = false" closeOnClickOverlay></up-picker>

    <up-picker :show="showQuickPicker" :columns="quickColumns" title="设置休息时长" @confirm="onQuickConfirm"
      @cancel="showQuickPicker = false" closeOnClickOverlay></up-picker>
    <beizhu />
  </view>
</template>

<script setup>
import { ref, reactive, watch, computed } from 'vue';
import beizhu from '@/pages/xunji/components/beizhu.vue';
import actionHistory from '../components/dongzuo-lianxi-history.vue'

const isExpanded = ref(false);
const isEditing = ref(false);
const showPicker = ref(false);
const showQuickPicker = ref(false);
const activeIndex = ref(0);
const emit = defineEmits(['update:groupCount'])
const lostImage = "https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"

const historyPopupRef = ref(null)
const userWeight = ref(70)
// const assistWeight = ref(0)


// 接收父组件的数据
const props = defineProps({
  id: [Number, String],
  type: [Number, String],
  actionDetail: {
    type: Object,
    default: () => ({}) // 对象/数组默认值必须用函数返回
  }
})

watch(() => props.id, () => {
  console.log('dongzuo组件 id/type：', props.id, props.type)
}, { immediate: true })

// 控制显示逻辑
const showTips = ref(false);
const toggleTips = () => {
  showTips.value = !showTips.value;
};

// 难度控制逻辑
const showDifficulty = ref(false);
const initialDifficulty = { label: '难度', color: '#ffffff' };
const currentDifficulty = ref({ ...initialDifficulty });

const selectDifficulty = (label, color) => {
  if (currentDifficulty.value.label === label) {
    currentDifficulty.value = { ...initialDifficulty };
  } else {
    currentDifficulty.value = { label, color };
  }
  showDifficulty.value = false;
};

// 重点：点击背景关闭所有弹窗
const closeDifficulty = () => {
  showDifficulty.value = false;
  showTips.value = false;
};

// 数据记录
const recordList = ref([
  { h: '00', m: '05', s: '00', quickTimeDisplay: '60s', distance: '', weight: '', reps: '', isActive: false },
  { h: '00', m: '05', s: '00', quickTimeDisplay: '60s', distance: '', weight: '', reps: '', isActive: false },
  // { h: '00', m: '05', s: '00', quickTimeDisplay: '60s', distance: '', isActive: false },
]);

watch(recordList, () => {
  console.log('recordList变化，发送长度：', recordList.value.length)
  emit('update:groupCount', recordList.value.length)
}, { deep: true, immediate: true })


const toggleActive = (index) => {
  recordList.value[index].isActive = !recordList.value[index].isActive;
};

// Picker 逻辑
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 defaultTimeIndex = ref([0, 0, 0]);
const quickColumns = reactive([
  Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0') + '分'),
  Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0') + '秒'),
]);
// 
const openPicker = (index) => {
  activeIndex.value = index;
  const item = recordList.value[index];
  const hIdx = timeColumns[0].indexOf(item.h + '时');
  const mIdx = timeColumns[1].indexOf(item.m + '分');
  const sIdx = timeColumns[2].indexOf(item.s + '秒');
  defaultTimeIndex.value = [hIdx, mIdx, sIdx];
  showPicker.value = true;
};

const onTimeConfirm = (e) => {
  const rawValues = e.value.map((val) => String(val).replace(/[时分秒]/g, ''));
  recordList.value[activeIndex.value].h = rawValues[0];
  recordList.value[activeIndex.value].m = rawValues[1];
  recordList.value[activeIndex.value].s = rawValues[2];
  showPicker.value = false;
};

const openQuickTimer = (index) => {
  activeIndex.value = index;
  showQuickPicker.value = true;
};

const onQuickConfirm = (e) => {
  const min = parseInt(e.value[0]) || 0;
  const sec = parseInt(e.value[1]) || 0;
  const totalSeconds = min * 60 + sec;
  recordList.value[activeIndex.value].quickTimeDisplay = totalSeconds + 's';
  showQuickPicker.value = false;
};
// 用计算属性控制动作的计算方式（显示时间？距离？重量？次数的框框）
const showTime = computed(() => {
  return [1, 3].includes(props.actionDetail?.exerciseType)
})

const showDistance = computed(() => {
  return props.actionDetail?.exerciseType === 1
})

const showWeight = computed(() => {
  return [0, 4, 5].includes(props.actionDetail?.exerciseType)
})

const showReps = computed(() => {
  return [0, 2, 4, 5].includes(props.actionDetail?.exerciseType)
})

// 增加动作的组数
const addRow = () => {
  recordList.value.push({
    h: '00',
    m: '05',
    s: '00',
    quickTimeDisplay: '60s',
    distance: '',
    weight: '',
    isActive: false,
  });
};
// 删除组数
const deleteRow = (index) => {
  if (recordList.value.length > 1) {
    recordList.value.splice(index, 1);
  }
};

// 历史
const openHistory = (id) => {
  if (historyPopupRef.value && historyPopupRef.value.openHistoryPopup) {
    historyPopupRef.value.openHistoryPopup(id);
  }
}

// 动作名称渲染
const exerciseNamesWithLabel = computed(() => {
  const exercises = props.actionDetail?.exercises || []
  // 字母编号从 A 开始，A 对应 0，B 对应 1，以此类推
  return exercises.map((item, index) => {
    // 用 String.fromCharCode 生成大写字母：A(65) + index
    const label = String.fromCharCode(65 + index)
    return `${label} ${item?.name || '未知动作'}`
  })
})
// 获得真正的体重
const getRealWeight = (item) => {
  const type = props.actionDetail?.exerciseType
  const userW = Number(userWeight.value) || 0
  const inputW = Number(item.weight) || 0

  if (type === 0) return inputW
  if (type === 4) return userW + inputW
  if (type === 5) return Math.max(0, userW - inputW)
  return 0
}

// 打开备注弹窗
const openBeizhu = () => {
  console.log('传递到备注组件的id', actionId.value)
  showBeizhuRef.value.open(actionId.value)
}
</script>

<style lang="scss" scoped>
$bg-black: #303030;
$card-bg: #1c1c1e;
$item-bg: #2c2c2e;
$text-main: #ffffff;
$text-gray: #8e8e93;
$theme-yellow: #f8d714;

.action-container {
  width: 100%;
  /* 确保容器足够高以接收点击事件 */

  background-color: $bg-black;

  .action-list {
    width: 100%;

    .card {
      border-radius: 24rpx;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;

      .card-top {
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx 0;
        box-sizing: border-box;

        .action-image {
          width: 110rpx;
          height: 110rpx;
          border-radius: 16rpx;
          background-color: #3a3a3c;
        }

        .action-info {
          flex: 1;
          margin-left: 24rpx;

          .name {
            font-size: 34rpx;
            font-weight: 600;
            color: $text-main;
          }

          .tags {
            font-size: 24rpx;
            color: $text-gray;
            margin-top: 6rpx;
            margin-left: 6rpx;
          }

          .dot-list {
            display: flex;
            gap: 10rpx;
            margin-top: 8rpx;

            .dot {
              width: 10rpx;
              height: 10rpx;
              border-radius: 50%;
              background-color: $text-main;
            }
          }
        }

        .more-circle {
          width: 60rpx;
          height: 60rpx;
          background: $item-bg;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1rpx solid #a4a4a4;
          position: relative;

          .icon {
            transform: rotate(90deg);
          }

          .tips {
            position: absolute;
            color: #fff;
            background-color: #3e3e3e;
            z-index: 6;
            right: 10rpx;
            top: 20rpx;
            border-radius: 10rpx;

            .tip {
              width: 120rpx;
              height: 40rpx;
              padding: 20rpx 30rpx;
              text-align: center;
              font-size: 24rpx;
              line-height: 40rpx;
            }
          }
        }
      }

      .main {
        width: 100%;
        margin-top: 20rpx;

        .img-list {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 20rpx;
          padding: 20rpx;
          box-sizing: border-box;

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

        // 体重样式，和其他元素同级
        .userWeight {
          display: flex;
          align-items: center;
          padding: 16rpx 30rpx;
          gap: 16rpx;

          .label {
            font-size: 28rpx;
            color: $text-main;
            font-weight: 500;
          }

          .userWeight-values {
            display: flex;
            align-items: center;
            gap: 8rpx;
            padding: 8rpx 16rpx;
            background: #1f1f1f;
            border-radius: 12rpx;

            .unit {
              font-size: 24rpx;
              color: $text-gray;
            }
          }
        }

        .record-row {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          padding: 10rpx 30rpx;
          box-sizing: border-box;

          &.active {
            background-color: #4c4d3b;
          }

          .left {
            display: flex;
            flex-direction: column;
            gap: 10rpx;

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

              .index-box {
                width: 50rpx;
                height: 70rpx;
                background: #1f1f1f;
                border-radius: 10rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 30rpx;
                color: $text-main;
              }

              .input-col,
              .distance {
                height: 70rpx;
                background: #1f1f1f;
                border-radius: 10rpx;
                padding: 5rpx 10rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .label {
                  font-size: 15rpx;
                  color: $text-gray;
                  margin-bottom: 2rpx;
                }

                .values {
                  display: flex;
                  align-items: baseline;

                  .num {
                    font-size: 32rpx;
                    color: $text-main;
                  }

                  .unit {
                    font-size: 15rpx;
                    color: $text-gray;
                    margin: 0 5rpx;
                  }
                }
              }

              .distance {
                min-width: 100rpx;

                :deep(.u-input) {
                  padding: 0 !important;
                }

                .u-input__content__field {
                  font-size: 32rpx !important;
                  color: $text-main !important;
                }
              }

              .timer-selector {
                width: 75rpx;
                height: 75rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                border: 1rpx solid #a4a4a4;

                .text {
                  font-size: 20rpx;
                  color: $text-gray;
                }
              }
            }

            .exercise-name-list {
              display: flex;
              flex-direction: column;
              gap: 8rpx;
              flex: 1;
            }

            .exercise-name {
              font-size: 26rpx;
              color: $text-main;
              line-height: 1.2;
            }

            .goal-list {
              width: 100%;
              margin-top: 10rpx;

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

                border-radius: 10rpx;

                .serial {
                  width: 50rpx;
                  height: 70rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 30rpx;
                  color: #929292;
                  font-weight: bold;
                }

                .goal-input-box {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  background-color: #1f1f1f;
                  width: 100rpx;
                  height: 70rpx;
                  border-radius: 10rpx;

                  .values {
                    display: flex;
                    align-items: flex-end;
                    padding-left: 10rpx;
                    box-sizing: border-box;

                    :deep(.uni-input-input[type='number']) {
                      text-align: center;
                    }

                    .num {
                      font-size: 32rpx;
                      color: $text-main;
                    }

                    .unit {
                      font-size: 15rpx;
                      color: $text-gray;
                      margin: 0 5rpx;
                    }

                    // 确保 up-input 内部文字样式一致
                  }
                }
              }
            }
          }

          .icons {
            display: flex;
            gap: 20rpx;

            .icon {
              width: 70rpx;
              height: 70rpx;
              background-color: #1f1f1f;
              border-radius: 12rpx;
              display: flex;
              align-items: center;
              justify-content: center;

              &.active {
                background-color: $theme-yellow;
              }
            }

            .del {
              background-color: #58372d;
            }
          }
        }
      }

      .button-group {
        display: flex;
        justify-content: space-between;
        padding: 30rpx;
        box-sizing: border-box;

        .btn-item {
          background-color: #1f1f1f;
          font-size: 26rpx;
          color: #fff;
          padding: 15rpx 35rpx;
          border-radius: 50rpx;
          display: flex;
          align-items: center;
          gap: 10rpx;
          position: relative;

          .difficulty-pop {
            position: absolute;
            bottom: 80rpx;
            left: 50%;
            transform: translateX(-50%);
            background-color: #3e3e3e;
            border-radius: 16rpx;
            overflow: hidden;
            z-index: 99;
            box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.5);

            .difficulty-item {
              width: 180rpx;
              height: 80rpx;
              padding: 0 25rpx;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 26rpx;
              border-bottom: 1rpx solid #4e4e4e;

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

              &:active {
                background-color: #4e4e4e;
              }
            }
          }
        }
      }
    }
  }
}
</style>