<template>
  <div class="workflow-page">
    <div class="content-wrapper">
      <BannerCarousel />
      <WorkflowRecommend :showPagination="true" @showLoginModal="handleShowLoginModal" />
      <Footer />
    </div>
    
    <!-- 登录弹窗 -->
    <LoginModal 
      v-if="showLoginModal" 
      :visible="showLoginModal" 
      mode="login"
      @close="handleCloseLoginModal"
      @login="handleLoginSuccess"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import BannerCarousel from '../../components/BannerCarousel.vue'
import WorkflowRecommend from '../../components/WorkflowRecommend.vue'
import Footer from '../../components/Footer.vue'
import LoginModal from '../../components/LoginModal.vue'
import { ElMessage } from 'element-plus'

// 登录弹窗状态
const showLoginModal = ref(false)

// 处理显示登录弹窗
const handleShowLoginModal = (message) => {
  if (message) {
    ElMessage.warning(message)
  }
  showLoginModal.value = true
}

// 处理关闭登录弹窗
const handleCloseLoginModal = () => {
  showLoginModal.value = false
}

// 处理登录成功
const handleLoginSuccess = (data) => {
  showLoginModal.value = false
  ElMessage.success('登录成功')
}
</script>

<style scoped>
.workflow-page {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  padding-top: 60px; /* 为Header组件留出空间 */
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}
</style> 