<template>
  <div id="systemHeader">
    <div id="systemInformation">
      <img class="logoImg" src="@/assets/thlogo.png" alt="">
      <span>太湖流域河湖管理系统</span>
    </div>
    <div id="systemMenuContainer">
      <systemMenu @addSystemMenuView='menuItemClick'></systemMenu>
    </div>
    <div class="user-area">
      <span class="user-name" @click="loginHzz">{{ name || '登录' }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Cookies from 'js-cookie'
import systemMenu from './systemMenuBar.vue'

const router = useRouter()
const name = ref('')
const loginHzz = () => { if (Cookies.get('isLogin') !== 'true') router.push('/login') }
const emit = defineEmits(['addSystemMenuView'])
const menuItemClick = (menuItem) => { emit('addSystemMenuView', { viewItem: menuItem.viewItem }) }
onMounted(() => { if (Cookies.get('isLogin') === 'true') name.value = Cookies.get('name') })
</script>

<style scoped>
#systemHeader {
  height: 56px; width: 100%;
  background: linear-gradient(135deg, #e8f4fd 0%, #d4ecfb 50%, #c5e5fa 100%);
  display: flex; align-items: center; color: #1a3a5c;
  box-shadow: 0 1px 6px rgba(0,0,0,.06); position: relative; z-index: 500;
  border-bottom: 2px solid #b8d8f0;
}
#systemInformation {
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  min-width: 340px; flex-shrink: 0; font-size: 17px; font-weight: 600; color: #0d4b80;
}
.logoImg { width: 36px; height: 36px; border-radius: 8px; }
#systemMenuContainer { flex: 1; height: 100%; display: flex; align-items: center; }
.user-area { flex-shrink: 0; padding: 0 20px; }
.user-name {
  font-size: 13px; cursor: pointer; color: #4682b4;
  padding: 6px 18px; border-radius: 20px; border: 1px solid #b0d0e8; background: #fff;
}
.user-name:hover { color: #0d4b80; border-color: #6baed6; background: #f0f8ff; }
</style>
