<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="searchVal" class="responsive-input" placeholder="搜索产品和文档" :prefix-icon="Search" />

      <el-popover placement="bottom" :width="180" trigger="click" :show-arrow="false">
        <template #reference>
          <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>
        </template>
        <div class="">
          <div v-for="(item, index) in poverMenus" :key="index" class=" py-6 cursor-pointer mt-4 menuhover" @click="router.push(item.path)">{{ item.name }}</div>
        </div>
      </el-popover>

      <!-- <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 searchVal = ref('');
const poverMenus = ref([
  {
    name: '企业组织',
    path: '',
    value: 1
  },
  {
    name: '云身份中心',
    path: '',
    value: 2
  },
  {
    name: '访问控制',
    path: '',
    value: 3
  },
  {
    name: '资源管理',
    path: '',
    value: 4
  },
  {
    name: '操作审计（云审计）',
    path: '',
    value: 5
  }
])
</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;
}
.menuhover {
  &:hover {
    background-color: #F0F2F5;
    border-radius: 4px;
  }
}
</style>
<style lang="scss">
.el-popover {
  &.el-popper {
    padding: 4px 10px !important;
  }
}
</style>
