<template>
  <header class="layout-header">
    <!-- 顶部工具栏 -->
    <div class="header-top">
      <div class="header-top-content">
        <div class="location"><el-icon><Location /></el-icon> 武汉</div>
        <div class="top-links">
          <span>您好，请登录</span>
          <span class="link highlight">免费注册</span>
          <span class="divider">|</span>
          <span class="link">工作台</span>
          <span class="divider">|</span>
          <span class="link">采购合作 <el-icon><ArrowDown /></el-icon></span>
          <span class="divider">|</span>
          <span class="link">客户服务 <el-icon><ArrowDown /></el-icon></span>
          <span class="divider">|</span>
          <span class="link">帮助中心</span>
          <span class="divider">|</span>
          <span class="link">在线客服</span>
        </div>
      </div>
    </div>
    <!-- 主导航栏 -->
    <div class="header-main">
      <div class="header-main-content">
        <div class="logo">
          <img src="@/assets/logo.png" alt="logo" class="logo-img" />
          <span class="logo-text">优易</span>
        </div>
        <div class="search-box">
          <el-input v-model="searchKeyword" placeholder="搜索商品、品牌、分类..." class="search-input" @keyup.enter="handleSearch">
            <template #append>
              <el-button type="danger" class="search-btn" @click="handleSearch"><el-icon><Search /></el-icon></el-button>
            </template>
          </el-input>
          <div class="hot-keywords">
            <span v-for="(word, index) in hotKeywords" :key="index" class="keyword" @click="handleKeywordClick(word)">{{ word }}</span>
          </div>
        </div>
        <div class="cart-box">
          <el-button class="cart-btn" @click="handleCartClick"><el-icon><ShoppingCart /></el-icon> 我的采购车</el-button>
        </div>
        <div class="qrcode-box">
          <div class="qrcode-placeholder"></div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Location, ArrowDown, Search, ShoppingCart } from '@element-plus/icons-vue'

const searchKeyword = ref('')
const hotKeywords = ['家纺', '打印机', '打印耗材', '空调', '取暖', '开门红', '劳保福利']

const emit = defineEmits<{
  search: [keyword: string]
  cartClick: []
}>()

const handleSearch = () => {
  emit('search', searchKeyword.value)
}

const handleKeywordClick = (word: string) => {
  searchKeyword.value = word
  emit('search', word)
}

const handleCartClick = () => {
  emit('cartClick')
}
</script>

<style scoped lang="scss">
.layout-header {
  background: #fff;
  
  .header-top {
    background: #f5f5f5;
    font-size: 12px;
    color: #666;
    
    .header-top-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 8px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .location {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .top-links {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .link {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 2px;
        &:hover { color: #e60012; }
        &.highlight { color: #e60012; }
      }
      .divider { color: #ddd; }
    }
  }
  
  .header-main {
    border-bottom: 2px solid #e60012;
    
    .header-main-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 0;
      display: flex;
      align-items: center;
      gap: 40px;
    }
    
    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      .logo-img { height: 50px; }
      .logo-text { font-size: 28px; font-weight: bold; color: #e60012; }
    }
    
    .search-box {
      flex: 1;
      .search-input {
        :deep(.el-input__wrapper) { border-radius: 0; }
        :deep(.el-input-group__append) { padding: 0; background: #e60012; border: none; }
      }
      .search-btn { background: #e60012; border: none; color: #fff; height: 40px; width: 60px; border-radius: 0; }
      .hot-keywords {
        margin-top: 8px;
        display: flex;
        gap: 16px;
        .keyword { font-size: 12px; color: #666; cursor: pointer; &:hover { color: #e60012; } }
      }
    }
    
    .cart-box {
      .cart-btn {
        border: 1px solid #e60012;
        color: #e60012;
        background: #fff;
        padding: 10px 20px;
        &:hover { background: #fff5f5; }
      }
    }
    
    .qrcode-box {
      .qrcode-placeholder { width: 80px; height: 80px; background: #f5f5f5; border: 1px solid #eee; }
    }
  }
}
</style>
