<template>
  <div class="home-page">
    <div class="content-wrapper page-content">
      <BannerCarousel />
      <WorkflowRecommend @showLoginModal="handleShowLoginModal" />
      <CourseRecommend @showLoginModal="handleShowLoginModal" />
      <CooperationModel />
    </div>
    <Footer />
    
    <!-- 登录弹窗 -->
    <LoginModal 
      v-if="showLoginModal" 
      :visible="showLoginModal" 
      :mode="modalMode"
      :invite-code="inviteCode"
      @close="handleCloseLoginModal"
      @login="handleLoginSuccess"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import BannerCarousel from '../../components/BannerCarousel.vue'
import CourseRecommend from '../../components/CourseRecommend.vue'
import WorkflowRecommend from '../../components/WorkflowRecommend.vue'
import CooperationModel from '../../components/CooperationModel.vue'
import Footer from '../../components/Footer.vue'
import LoginModal from '../../components/LoginModal.vue'
import { ElMessage } from 'element-plus'

const route = useRoute()

// 登录弹窗状态
const showLoginModal = ref(false)
const modalMode = ref('login') // 'login' 或 'register'
const inviteCode = ref('')

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

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

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

// 组件挂载时检查邀请码
onMounted(() => {
  // 检查URL中是否有邀请码参数
  if (route.query.invite_code) {
    inviteCode.value = route.query.invite_code
    modalMode.value = 'register'
    showLoginModal.value = true
  }
})
</script>

<style scoped>
.home-page {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - 60px); /* 确保最小高度，但允许内容超出时滚动 */
  overflow-y: auto; /* 允许垂直滚动 */
}
</style> 