<template>
    <div class="header-container">
        <div class="logo-section">
            <NuxtLink :to="$localePath('/')" class="logo-link">
                <el-image class="website-logo" src="/jinshen-logo.png" alt="Jinshen Logo" fit="contain" />
            </NuxtLink>
        </div>


        <!-- 导航菜单 -->
        <el-menu default-active="productions" class="header-menu" mode="horizontal" :ellipsis="false" router>
            <el-menu-item :index="$localePath('/productions')">
                <span class="title">{{ $t('navigation.productions') }}</span>
            </el-menu-item>
            <el-menu-item :index="$localePath('/solutions')">
                <span class="title">{{ $t('navigation.solutions') }}</span>
            </el-menu-item>
            <el-menu-item :index="$localePath('/support')">
                <span class="title">{{ $t('navigation.support') }}</span>
            </el-menu-item>
            <el-menu-item :index="$localePath('/about')">
                <span class="title">{{ $t('navigation.about-us') }}</span>
            </el-menu-item>
        </el-menu>

        <!-- 右侧功能区 -->
        <div class="header-actions">
            <el-input
v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')"
                :prefix-icon="Search" clearable @keyup.enter="handleSearch" />
            <el-dropdown @command="setLocale">
                <el-link type="info" :underline="false">
                    <el-icon class="mdi mdi-translate translate-link" />
                </el-link>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="zh">简体中文</el-dropdown-item>
                        <el-dropdown-item command="en">English</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';

const { setLocale } = useI18n();

const searchQuery = ref('')

const handleSearch = () => {
    if (searchQuery.value.trim()) {
        // 这里可以添加搜索逻辑，例如导航到搜索结果页面
        console.log('Searching for:', searchQuery.value);
        // 示例：导航到搜索结果页面
        // router.push({ path: '/search', query: { q: searchQuery.value } });
    }
}
</script>

<style scoped>
.header-container {
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
}

.logo-section {
    display: flex;
    flex: 1;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.website-logo {
    height: 64px;
    width: auto;
}

.header-menu {
    margin-right: 40px;
    border-bottom: none !important;
    width: auto;
}

.header-menu .el-menu-item {
    border-bottom: none !important;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-input {
    width: 200px;
}

.translate-link {
    font-size: 20px;
}
</style>
