<template>
  <!-- 模板菜单弹窗 -->
  <up-popup :show="templateMenuShow" mode="bottom" mask-click @close="closeTemplateMenu" :safe-area-inset-bottom="true">
    <view class="templateMenuPopup">
      <view class="popup-header">
        <text class="popup-title">{{ currentTemplate?.name || '模板' }}</text>
      </view>

      <view class="popup-list">
        <view class="popup-item" @click="handleAddToSchedule">
          <up-icon name="calendar" color="#333" size="20"></up-icon>
          <text class="item-text">添加到训练日程</text>
        </view>

        <view class="popup-item" @click="handleEditTemplate">
          <uni-icons type="compose" color="#333" size="20"></uni-icons>
          <text class="item-text">编辑</text>
        </view>

        <view class="popup-item" @click="handleCopyTemplate">
          <up-icon name="file-text" color="#333" size="20" />
          <text class="item-text">复制</text>
        </view>

        <view class="popup-item" @click="handleMoveTemplate">
          <up-icon name="arrow-right" color="#333" size="20"></up-icon>
          <text class="item-text">移动</text>
        </view>

        <view class="popup-item" @click="openColorPopup">
          <view class="color-dot" :style="{ backgroundColor: currentTemplate?.backgroundcolor || '#ffd60a' }"></view>
          <text class="item-text">设置日历颜色</text>
        </view>
      </view>

      <view class="popup-divider"></view>
      <view class="popup-item delete-item" @click="handleDeleteTemplate">
        <up-icon name="trash" color="#ff4d4f" size="22"></up-icon>
        <text class="item-text delete-text">删除模板</text>
      </view>
    </view>
  </up-popup>
  <!-- 设置日历颜色 -->
  <CalendarColorPicker v-model:visible="showColorPopup" :daily-template-id="selectedTemplateId"
    @success="loaddailytemplate" :is-template="true" :current-color="currentTemplate?.backgroundcolor" />

  <AddToCalendarPopup ref="calendarPopupRef" :template-id="selectedTemplateId" @success="handleCalendarSuccess" />

  <!--移动功能弹窗 -->
  <MoveTemplatePopup ref="movePopupRef" @success="handleMoveSuccess" :template-id="currentTemplate?.id" />

</template>

<script setup>
import { ref, onMounted } from 'vue'
import CalendarColorPicker from '@/pages/xunji/components/rili-components/CalendarColorPicker.vue'
import AddToCalendarPopup from '@/pages/xunji/components/tianjia-dao-rili.vue'
import TemplatesApi from '@/sheep/api/Template/Templates';
import MoveTemplatePopup from '@/pages4/components/MoveTemplatePopup.vue'
import { useTrainingStore } from '@/sheep/store/trainingStore'

const trainingStore = useTrainingStore()

const emit = defineEmits(['refresh'])

const props = defineProps({
  folderList: {
    type: Array,
    default: () => []
  }
})


const templateMenuShow = ref(false)
const currentTemplate = ref(null)
const showColorPopup = ref(false)
const selectedTemplateId = ref(0)
const calendarPopupRef = ref(null)

const movePopupRef = ref(null)

// 打开模板菜单弹窗，父组件调用
const showTemplateMenu = (item) => {
  currentTemplate.value = item
  selectedTemplateId.value = currentTemplate.value.id
  templateMenuShow.value = true
  console.log('现在模板id=', currentTemplate.value.id);
  console.log('现在模板selectedTemplateId=', selectedTemplateId.value);
  console.log('现在模板的详细信息：currentTemplate.value', currentTemplate.value);

}


const closeTemplateMenu = () => {
  templateMenuShow.value = false
  currentTemplate.value = null
}
// 日历弹窗
const handleCalendarSuccess = () => {
  uni.showToast({
    title: '添加成功',
    icon: 'success'
  })
}

// 获取个人模板详情接口函数
// const getCustTemplateDetail = async (id) => {
//   try {
//     const res = await TemplatesApi.getCustTemplateDetail(id);
//     console.log("获取个人模板详情成功：", res);
//     return res;
//   } catch (err) {
//     console.error("获取个人模板详情失败：", err);
//     uni.showToast({ title: "获取模板详情失败", icon: "none" });
//     return null;
//   }
// };

const loaddailytemplate = () => {
  console.log('刷新日历/模板列表')
}

const openColorPopup = () => {
  if (!currentTemplate.value?.id) {
    uni.showToast({ title: '未找到模板ID', icon: 'none' })
    return
  }
  selectedTemplateId.value = currentTemplate.value.id
  closeTemplateMenu()
  showColorPopup.value = true
}

const handleAddToSchedule = () => {
  const templateId = currentTemplate.value?.id
  if (!templateId) {
    uni.showToast({ title: '模板ID不存在', icon: 'none' })
    return
  }
  closeTemplateMenu()
  setTimeout(() => {
    if (calendarPopupRef.value && typeof calendarPopupRef.value.open === 'function') {
      calendarPopupRef.value.open()
    }
  }, 100)
}

const handleEditTemplate = async () => {

  trainingStore.isSystem = 0;

  await trainingStore.loadTrainingDetail(currentTemplate.value.id, 3);

  uni.navigateTo({
    url: '/pages4/pages/xunji/wode-xinjian-moban',
  });

  closeTemplateMenu()
}

// 复制模板功能（最终极简版）
const handleCopyTemplate = async () => {
  const templateId = currentTemplate.value?.id;
  if (!templateId) {
    uni.showToast({ title: "模板ID不存在", icon: "none" });
    return;
  }
  try {
    uni.showLoading({ title: "复制中..." });

    // 1. 获取模板详情
    const res = await TemplatesApi.getCustTemplateDetail(templateId);
    console.log("接口返回的原始数据：", res);
    const detail = res.data
    // 2. 构建参数（只改 4 个必须改的字段，其余全部直接赋值）
    const createData = {
      templateName: detail.templateName,
      scene: detail.scene,
      templateCover: detail.urlCover,
      templateIntroduction: detail.introduction,
      groupId: detail.groupId,

      units: detail.units.map(unit => ({
        id: unit.unitId,       // 必须映射
        name: unit.unitName,   // 必须映射
        unitType: unit.unitType,
        sortOrder: unit.sortOrder,
        exercises: unit.exercises, // 直接整段赋值
      }))
    };
    console.log('复制的参数：', createData);

    // 3. 调用创建接口
    await TemplatesApi.createCustTemplate(createData);
    uni.hideLoading();
    uni.showToast({ title: "复制成功", icon: "success" });
    closeTemplateMenu();
    emit("refresh");

  } catch (err) {
    console.error("复制失败", err);
    uni.hideLoading();
    uni.showToast({ title: "复制失败", icon: "none" });
  }
};

// 处理移动功能
const handleMoveTemplate = async () => {
  const tempTemplateId = currentTemplate.value?.id
  if (!currentTemplate.value?.id) {
    uni.showToast({ title: '模板ID不存在', icon: 'none' })
    return
  }
  // 先关闭当前菜单弹窗
  closeTemplateMenu()

  const folderList = props.folderList || []

  setTimeout(() => {
    if (movePopupRef.value && typeof movePopupRef.value.open === 'function') {
      movePopupRef.value.open(folderList, tempTemplateId)
    }
  }, 150)
}

const handleMoveSuccess = async (targetFolder) => {
  console.log('移动成功，目标文件夹：', targetFolder)
  emit('refresh')
}

const handleDeleteTemplate = async () => {
  if (!currentTemplate.value?.id) {
    uni.showToast({ title: '模板ID不存在', icon: 'none' });
    return;
  }

  uni.showModal({
    title: '确认删除',
    content: '确定要删除这个模板吗？删除后无法恢复',
    confirmColor: '#ff4444',
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({ title: '删除中...' });
          await TemplatesApi.deleteCustTemplate(currentTemplate.value.id);
          uni.hideLoading();
          uni.showToast({ title: '删除成功', icon: 'success' });
          closeTemplateMenu();
          // 通知父组件刷新列表
          emit('refresh');

        } catch (err) {
          uni.hideLoading();
          console.error('删除失败：', err);
          uni.showToast({ title: '删除失败', icon: 'none' });
        }
      }
    }
  });
};


defineExpose({
  showTemplateMenu
})

onMounted(() => {
  console.log('菜单模板挂载成功！！！！');
})
</script>

<style scoped lang="scss">
.templateMenuPopup {
  width: 100%;
  padding: 32rpx 20rpx;
  background: #f5f5f5;
  border-radius: 10rpx 10rpx 0 0;

  .popup-header {
    text-align: center;
    margin-top: 10rpx;
    margin-bottom: 30rpx;
  }

  .popup-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #111;
  }

  .popup-list {
    background: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
  }

  .popup-item {
    display: flex;
    align-items: center;
    padding: 24rpx 20rpx;
    gap: 16rpx;
  }

  .item-text {
    font-size: 30rpx;
    color: #333;
  }

  .color-dot {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    background-color: #ffd60a;
  }

  .popup-divider {
    height: 16rpx;
    background: #f5f5f5;
    margin: 20rpx 0;
  }

  .delete-item {
    background: #fff;
  }

  .delete-text {
    color: #ff4d4f;
  }
}

:deep(.up-popup__content) {
  border-radius: 10rpx 10rpx 0 0;
}
</style>