<template>
  <nav class="flex-between-center h-48 px-26 bg-fff navbar">
    <div class="flex-align-center gap-16">
      <el-icon :size="20" color="#888">
        <Operation />
      </el-icon>
      <img src="@/static/imgs/logo.png" class="w-130 h-26 mb-2 cursor-pointer" alt="Logo" @click="router.push('/')">
    </div>
    <div class="flex gap-26">
      <el-input
          v-model="search"
          class="responsive-input"
          placeholder="搜索产品和文档"
          :prefix-icon="Search"
        />
      <el-button type="primary" class="nav-button">
        <span class="pt-2">企业</span><el-icon class="el-icon--right" size="12">
          <ArrowDownBold />
        </el-icon>
      </el-button>
      <el-button type="primary" class="nav-button">
        <span class="pt-2">工具</span><el-icon class="el-icon--right" size="12">
          <ArrowDownBold />
        </el-icon>
      </el-button>
      <el-button type="primary" class="nav-button">
        <span class="pt-2">费用</span><el-icon class="el-icon--right" size="12">
          <ArrowDownBold />
        </el-icon>
      </el-button>
      <el-button type="primary" class="nav-button">
        <span class="pt-2">支持</span><el-icon class="el-icon--right" size="12">
          <ArrowDownBold />
        </el-icon>
      </el-button>
      <el-button type="primary" class="nav-button pt-2">备案</el-button>
      <el-button type="primary" class="nav-button pt-2">文档</el-button>
      <el-badge :value="12" class="mt-6 cursor-pointer">
        <el-icon size="18"><Bell /></el-icon>
      </el-badge>
      <el-button type="primary" link class="nav-button fw-bold color">中文</el-button>
      <div class="w-30 h-30 flex-center rounded-circle headimg fs-12 mt-2">黄</div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { Operation } from '@element-plus/icons-vue'
import { ArrowDownBold, Bell, Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';

const router = useRouter();
const search = ref('');
</script>

<style scoped lang="scss">
.navbar {
  box-shadow: 0 3px 5px #eee;
  z-index: 1;
}
.responsive-input {
  width: 240px;
  height: 36px;
  border-radius: 8px !important;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  :deep(.el-input__wrapper) {
    box-shadow: none !important;
    background-color: #F9FAFB;
  }
}
.headimg {
  background-color: #EFF6FF;
  border: 1px solid #DBEAFE;
  color: #193CB8;
}

.nav-link,
.nav-button {
  color: #333;
  text-decoration: none;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.pt-2 {
  padding-top: 2px;
}
.color {
  color: #155DFC;
}

.nav-button:hover,
.nav-link:hover {
  color: #409eff;
}

.active {
  color: #409eff;
}
</style>
