<template>
  <header class="header">
    <!-- 网站 Logo 和标题部分 -->
    <div class="logo-section">
      <router-link to="/" class="logo-link">
        <!-- Logo 图片 -->
        <img src="@/assets/logo.png" alt="Logo" class="logo-img"/>
        <!-- 标题区域：包含中文和英文标题 -->
        <div class="title-section">
          <div class="divider-section">
            <!-- 分隔线 -->
            <div class="divider"></div>
            <!-- 网站标题组 -->
            <div class="titles">
              <h1>珞珈岛</h1>
              <h2>LuoJia-Island</h2>
            </div>
          </div>
        </div>
      </router-link>
    </div>

    <!-- 导航部分：登录/注册按钮,后续可添加更多功能 -->
    <div class="nav-section">
      <button @click="showModal" class="login-btn">登录/注册</button>
    </div>

    <!-- 登录/注册模态框组件，仅在 isModalVisible 为 true 时显示 -->
    <LoginRegisterModal v-if="isModalVisible" @close="hideModal" />
  </header>
</template>

<script>
// 导入登录注册模态框组件
import LoginRegisterModal from './LoginRegisterModal.vue'

export default {
  name: 'AppHeader',
  components: {
    LoginRegisterModal // 注册模态框组件
  },
  data() {
    return {
      isModalVisible: false // 控制模态框显示/隐藏的状态
    }
  },
  methods: {
    // 显示模态框的方法
    showModal() {
      this.isModalVisible = true
    },
    // 隐藏模态框的方法
    hideModal() {
      this.isModalVisible = false
    }
  }
}
</script>

<style scoped>
/* 头部容器样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  border-bottom: 2px solid #e0e0e0;
  background: white;
}

/* Logo 区域样式 */
.logo-section {
  display: flex;
  align-items: center;
}

/* Logo 链接样式 */
.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* Logo 图片样式 */
.logo-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

/* 分隔线容器样式 */
.divider-section {
  display: flex;
  align-items: center;
}

/* logo-标题分隔线样式 */
.divider {
  width: 2px;
  height: 40px;
  background-color: #333;
  margin-right: 15px;
}

/* 标题组样式 */
.titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 中文标题样式 */
.titles h1 {
  font-size: 22px;
  margin: 0;
  color: #333;
}

/* 英文标题样式 */
.titles h2 {
  font-size: 12px;
  margin: 0;
  color: #666;
}

/* 登录按钮样式 */
.login-btn {
  height: 30px;
  padding: 0px 10px;
  border: none;
  background: none;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  transition: color 0.3s;
}

/* 登录按钮悬停效果 */
.login-btn:hover {
  color: #6FBD87;
  background: #f0f0f0;
}
</style>