<template>
  <div class="ai-create-page">
    <!-- 左侧侧边栏 -->
    <div class="sidebar-container">
      <ImageCreationSidebar
        @task-update="handleTaskUpdate"
        @mode-change="handleModeChange"
        :remake-prompt="remakePrompt"
        :remake-image-url="remakeImageUrl"
        :remake-aspect-ratio="remakeAspectRatio"
        @remake-done="handleRemakeDone"
      />
    </div>
    
    <!-- 右侧主内容区 -->
    <div class="main-content">
      <ImageCreationContent
        @remake="handleRemake"
        :refresh-trigger="refreshTrigger"
        :task-type="currentTaskType"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../../store'
import ImageCreationSidebar from '../../components/CreateSidebars/ImageCreationSidebar.vue'
import ImageCreationContent from '../../components/CreateContent/ImageCreationContent.vue'

const userStore = useUserStore()
const route = useRoute()
const router = useRouter()

const remakePrompt = ref('')
const remakeImageUrl = ref('')
const remakeAspectRatio = ref('')
const refreshTrigger = ref(0)
const currentTaskType = ref('text_to_image') // 默认文生图模式

const handleRemake = (data) => {
  remakePrompt.value = data.prompt || ''
  remakeImageUrl.value = data.referenceImageUrl || ''
}

const handleRemakeDone = () => {
  remakePrompt.value = ''
  remakeImageUrl.value = ''
  remakeAspectRatio.value = ''
}

const handleModeChange = (mode) => {
  // 当模式切换时，更新任务类型，这会触发内容组件重新加载对应的任务列表
  currentTaskType.value = mode
}

const handleTaskUpdate = () => {
  refreshTrigger.value++
  // 任务更新时刷新用户信息（更新积分）
  if (userStore.fetchUserInfo) {
    userStore.fetchUserInfo().catch(err => {
      console.error('刷新用户信息失败:', err)
    })
  }
}

onMounted(() => {
  console.log('图片创作页面已加载')
  
  // 从URL query参数填充数据
  const { imageUrl, prompt, aspectRatio } = route.query
  
  console.log('接收到的查询参数:', { imageUrl, prompt, aspectRatio })
  
  // 使用 nextTick 确保组件已经渲染完成后再填充数据
  if (imageUrl || prompt || aspectRatio) {
    nextTick(() => {
      // 延迟填充，确保子组件已经挂载并且 watch 已经设置
      setTimeout(() => {
        if (imageUrl) {
          remakeImageUrl.value = imageUrl
          console.log('填充图片URL:', imageUrl)
        }
        if (prompt) {
          remakePrompt.value = prompt
          console.log('填充提示词:', prompt)
        }
        if (aspectRatio) {
          remakeAspectRatio.value = aspectRatio
          console.log('填充尺寸比例:', aspectRatio)
        }
        
        // 提示用户
        ElMessage.success('已自动填充参数，请检查并点击生成按钮')
        
        // 延迟清理URL，给watch足够的时间响应
        setTimeout(() => {
          router.replace({ query: {} })
          console.log('已清理URL参数')
        }, 1000)
      }, 500)
    })
  }
  
  // 进入页面时查询一次用户信息
  if (userStore.fetchUserInfo) {
    userStore.fetchUserInfo().catch(err => {
      console.error('初始化用户信息失败:', err)
    })
  }
})
</script>

<style scoped>
.ai-create-page {
  width: 100%;
  min-height: calc(100vh - 80px);
  background: rgba(21, 21, 21, 1);
  box-sizing: border-box;
  position: relative;
  display: flex;
  overflow: hidden;
}

.sidebar-container {
  width: 480px;
  height: calc(100vh - 80px);
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .sidebar-container {
    width: 400px;
  }
}

@media (max-width: 768px) {
  .ai-create-page {
    min-height: calc(100vh - 70px);
    flex-direction: column;
  }

  .sidebar-container {
    width: 100%;
    height: auto;
    min-height: 300px;
  }

  .main-content {
    padding: 0;
  }
}

@media (max-width: 480px) {
  .ai-create-page {
    min-height: calc(100vh - 60px);
  }
}
</style>
