<template>
  <!-- 移动模板弹窗 -->
  <up-popup :show="show" mode="bottom" mask-click :safe-area-inset-bottom="true" :close-on-click-mask="true"
    @close="handleClose">
    <view class="move-popup">
      <!-- 关闭按钮 + 标题 -->
      <view class="popup-header">
        <view class="close-btn" @click="handleClose">
          <up-icon name="close" color="#333" size="24"></up-icon>
        </view>
        <text class="popup-title">移动模板到别的文件夹</text>
      </view>

      <!-- 文件夹列表 -->
      <scroll-view class="folder-list" scroll-y>
        <view class="folder-item" v-for="folder in folderList" :key="folder.id" @click="handleSelectFolder(folder)">
          <image class="folder-cover" :src="defaultCover" mode="aspectFill" />
          <view class="folder-info">
            <text class="folder-name">{{ folder.name }}</text>
            <text class="folder-count">{{ folder.templatesCount }}个模板</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </up-popup>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
import TemplatesApi from '@/sheep/api/Template/Templates';

const emit = defineEmits(['success', 'close'])

// 组件状态
const show = ref(false)
const folderList = ref([])
const defaultCover = 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png' // 默认封面，可替换为你的本地图片


const props = defineProps({
  templateId: {
    type: Number,
    default: 0,
  }
})

let currentTemplateId = 0
// 外部调用方法
const open = (list, templateId) => {
  // 传入文件夹列表，格式：[{ id, name, templateCount, cover }, ...]
  folderList.value = list || []
  currentTemplateId = templateId || 0
  show.value = true
  console.log('打印弹开移动弹窗之后，文件夹列表：', folderList.value);
  console.log('收到的模板ID：', currentTemplateId);
}

// 关闭弹窗
const handleClose = () => {
  show.value = false
  emit('close')
}

// 选择文件夹并触发移动
const handleSelectFolder = async (folder) => {
  // 1. 校验参数
  if (!currentTemplateId) {
    uni.showToast({ title: '模板ID不存在', icon: 'none' })
    return
  }
  if (!folder?.id) {
    uni.showToast({ title: '文件夹ID不存在', icon: 'none' })
    return
  }

  try {
    uni.showLoading({ title: '移动中...' })
    await TemplatesApi.updateTemplateGroup(folder.id, currentTemplateId)
    uni.hideLoading()
    uni.showToast({ title: '移动成功', icon: 'success' })
    emit('success', folder)
    handleClose()

  } catch (err) {
    uni.hideLoading()
    console.error('移动失败', err)
    uni.showToast({ title: '移动失败，请重试', icon: 'none' })
  }
}


defineExpose({
  open
})
</script>

<style scoped lang="scss">
.move-popup {
  width: 100%;
  max-height: 75vh;
  background: #f5f5f5;
  border-radius: 15rpx;
  display: flex;
  flex-direction: column;

}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32rpx 20rpx;
  position: relative;
  border-bottom: 1rpx solid #f5f5f5;

  .close-btn {
    position: absolute;
    left: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

.folder-list {
  flex: 1;
  padding: 20rpx 0;
  height: 0;
  background: #f5f5f5;
  gap: 16rpx;
}

.folder-item {
  display: flex;
  align-items: center;
  margin: 16rpx;
  padding: 24rpx 32rpx;
  border-radius: 20rpx;
  gap: 20rpx;
  background: #fff;
  transition: background 0.2s;

  &:active {
    background: #f5f5f5;
  }

  .folder-cover {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    flex-shrink: 0;
  }

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

    .folder-name {
      font-size: 32rpx;
      color: #111;
      font-weight: 500;
    }

    .folder-count {
      font-size: 26rpx;
      // color: #efefef;
    }
  }
}
</style>