<template>
  <header class="header fixed" style="display: none">
    <div class="wrap">
      <div class="header_box fix">
        <div class="header_logo">
          <a href="https://www.algig.cn/" alt="" title="" target="view_window"> <h1 class="logo"></h1> </a>
        </div>
        <div class="header_tools">
          <ul class="fix">
            <li class="mobile_key">
              <a href="https://www.algig.cn/about-us.htm#menu"> <i class="iconfont"></i> </a>
            </li>
            <li class="search"><i class="iconfont"></i></li>
            <li class="quick_a">
              <a href="javascript:;">LANGUAGE<i class="iconfont"></i></a>
              <div class="quick_box">
                <a target="_blank" href="https://www.algig.cn/"><i class="lin">|</i> 中文</a>
                <a target="_blank" href="http://en.algig.cn/"><i class="lin">|</i> English</a>
              </div>
            </li>
          </ul>
        </div>
        <!-- 下拉导航有两种不同的形式 -->
        <div class="header_nav">
          <div id="menu" class="nav_container">
            <ul>
              <li>
                <a href="https://www.algig.cn/about-us.htm" class="cur" target="">关于我们</a>
                <!-- 普通下拉 -->
                <div class="inner_box fix">
                  <div class="box_l">
                    <ul>
                      <li><a href="https://www.algig.cn/company-profile.htm">企业简介</a></li>
                      <li><a href="https://www.algig.cn/corporate-culture.htm">企业文化</a></li>
                      <li><a href="https://www.algig.cn/leader-visits.jsp">领导关怀</a></li>
                      <li><a href="https://www.algig.cn/development-milestones.htm">发展历程</a></li>
                      <li><a href="https://www.algig.cn/company-honors.jsp">企业荣誉</a></li>
                      <li><a href="https://www.algig.cn/global-footprint.jsp">全球布局</a></li>
                      <li><a href="https://www.algig.cn/organizational-structure.htm">组织架构</a></li>
                      <li><a href="https://www.algig.cn/social-responsibility.jsp">社会责任</a></li>
                      <li><a href="https://www.algig.cn/party-construction.jsp">党建品牌</a></li>
                      <li><a href="https://www.algig.cn/employee-activities.jsp">员工风采</a></li>
                    </ul>
                  </div>
                  <div class="box_r">
                    <img
                      src="./关于我们_航空航天交通铝新材料先进制造商_files/a476ff3e324940a98f172b9b2ccc4320.jpg"
                      alt=""
                      class="img"
                    />
                  </div>
                </div>
              </li>
              <li class="pro">
                <a href="https://www.algig.cn/our-businesses/aerospace&amp;aviation.jsp" target="">业务领域</a>
                <!-- 产品下拉 -->
                <div class="inner_box">
                  <div class="box_l">
                    <ul>
                      <!-- 标题 是t -->
                      <li class="t">
                        <a href="https://www.algig.cn/our-businesses/aerospace&amp;aviation.jsp">航空航天领域</a>
                      </li>
                      <li><a href="https://www.algig.cn/our-businesses/aerospace&amp;aviation.jsp">航空</a></li>
                      <li><a href="https://www.algig.cn/our-businesses/aerospace&amp;aviation.jsp">航天</a></li>
                      <li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
                    </ul>
                    <ul>
                      <!-- 标题 是t -->
                      <li class="t">
                        <a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">轨道交通领域</a>
                      </li>
                      <li><a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">动车组</a></li>
                      <li><a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">地铁</a></li>
                      <li><a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">空轨</a></li>
                      <li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
                    </ul>
                    <ul>
                      <!-- 标题 是t -->
                      <li class="t"><a href="https://www.algig.cn/our-businesses/automotive.jsp">汽车领域</a></li>
                      <li><a href="https://www.algig.cn/our-businesses/automotive.jsp">乘用车</a></li>
                      <li><a href="https://www.algig.cn/our-businesses/automotive.jsp">油罐车</a></li>
                      <li><a href="https://www.algig.cn/our-businesses/automotive.jsp">客车</a></li>
                      <li><a href="https://www.algig.cn/our-businesses/automotive.jsp">厢车</a></li>
                      <li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
                    </ul>
                    <ul>
                      <!-- 标题 是t -->
                      <li class="t"><a href="https://www.algig.cn/our-businesses/marine.jsp">船舶领域</a></li>
                      <li><a href="https://www.algig.cn/our-businesses/marine.jsp">船用铝合金</a></li>
                      <li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
                    </ul>
                    <ul>
                      <!-- 标题 是t -->
                      <li class="t"><a href="https://www.algig.cn/our-businesses/3C-electronics.jsp">3C电子领域</a></li>
                      <li><a href="https://www.algig.cn/our-businesses/3C-electronics.jsp">电脑产品</a></li>
                      <li><a href="https://www.algig.cn/our-businesses/3C-electronics.jsp">智能手机</a></li>
                      <li><a href="https://www.algig.cn/our-businesses/3C-electronics.jsp">其他3C及周边</a></li>
                      <li class="more"><a href="https://www.algig.cn/about-us.htm#">READ MORE</a></li>
                    </ul>
                  </div>
                  <div class="box_r">
                    <img
                      src="./关于我们_航空航天交通铝新材料先进制造商_files/1412f7d1f27241f6a2e0ea4db34d5c62.jpg"
                      alt=""
                      class="img"
                    />
                  </div>
                </div>
              </li>
              <li>
                <a href="https://www.algig.cn/our-advantages.htm" target="">核心优势</a>
                <!-- 普通下拉 -->
                <div class="inner_box fix">
                  <div class="box_l">
                    <ul>
                      <li><a href="https://www.algig.cn/scientific-innovation.htm">科技创新</a></li>
                      <li><a href="https://www.algig.cn/technology.htm">技术实力</a></li>
                      <li><a href="https://www.algig.cn/intelligent-manufacturing.htm">智慧互联</a></li>
                      <li><a href="https://www.algig.cn/quality-management.jsp">质量管理</a></li>
                    </ul>
                  </div>
                  <div class="box_r">
                    <img
                      src="./关于我们_航空航天交通铝新材料先进制造商_files/2ce9966e83004469af3036168abded7f.jpg"
                      alt=""
                      class="img"
                    />
                  </div>
                </div>
              </li>
              <li>
                <a href="https://www.algig.cn/news-releases/company-news.jsp" target="">新闻资讯</a>
                <!-- 普通下拉 -->
                <div class="inner_box fix">
                  <div class="box_l">
                    <ul>
                      <li><a href="https://www.algig.cn/news-releases/company-news.jsp">企业动态</a></li>
                      <li><a href="https://www.algig.cn/news-releases/announcement.jsp">企业公告</a></li>
                      <li><a href="https://www.algig.cn/news-releases/media-focus.jsp">媒体视角</a></li>
                    </ul>
                  </div>
                  <div class="box_r">
                    <img
                      src="./关于我们_航空航天交通铝新材料先进制造商_files/43fdf4f688784dc8ad3499b61b92d515.jpg"
                      alt=""
                      class="img"
                    />
                  </div>
                </div>
              </li>
              <li>
                <a href="https://www.algig.cn/talent-policy.htm" target="">职业发展</a>
                <!-- 普通下拉 -->
                <div class="inner_box fix">
                  <div class="box_l">
                    <ul>
                      <li><a href="https://www.algig.cn/talent-policy.htm">人才政策</a></li>
                      <li><a href="https://www.algig.cn/job-opportunities.jsp">社会招聘</a></li>
                      <li><a href="https://www.algig.cn/campus-recruitment.jsp">校园招聘</a></li>
                      <li><a href="https://www.algig.cn/contact-us.jsp">联系我们</a></li>
                    </ul>
                  </div>
                  <div class="box_r">
                    <img
                      src="./关于我们_航空航天交通铝新材料先进制造商_files/1907e129b5154356989bcd130b1c5dce.jpg"
                      alt=""
                      class="img"
                    />
                  </div>
                </div>
              </li>
              <li>
                <a href="https://www.algig.cn/corporate-governance.htm" target="">信访举报</a>
                <!-- 普通下拉 -->
              </li>
              <li>
                <a href="https://www.algig.cn/Information/nnl-informition-disclosure.jsp" target="">信息公开</a>
                <!-- 普通下拉 -->
              </li>
            </ul>
          </div>
        </div>
        <div class="header_search_fix">
          <div class="box">
            <div class="search">请输入您要搜索的关键词...</div>
            <form action="https://www.algig.cn/site/solr.htm">
              <div class="search_box">
                <input type="text" name="keywords" class="input" placeholder="SEARCH HERE" />
                <button type="submit" c-text="点击搜索" class="submit common_btn text_cxw_loaded">
                  <span>点</span><span>击</span><span>搜</span><span>索</span>
                </button>
              </div>
            </form>
          </div>
          <div class="close">
            <i class="iconfont" data-code="xe641;"></i>
          </div>
          <div class="pro_list">
            <div class="t">热门产品搜索</div>
            <a href="https://www.algig.cn/our-businesses/aerospace&amp;aviation.jsp">航空航天领域</a>
            <a href="https://www.algig.cn/our-businesses/automotive.jsp">汽车领域</a>
            <a href="https://www.algig.cn/our-businesses/rail-transportation.jsp">轨道交通领域</a>
          </div>
        </div>
      </div>
    </div>
  </header>
  <header class="header bg-white fixed z-10 w-full">
    <div class="flex between md:w-3/4 m-auto px-2">
      <div class="header__left flex">
        <div class="logo w-[140px] flex items-center" @click="reload">
          <nuxt-link v-if="config?.siteLogo" to="/">
            <el-image
              :src="config.siteLogo"
              shape="square"
              :alt="config.siteName"
              :title="config.siteName"
              class="w-[120px]"
            />
          </nuxt-link>
          <nuxt-link v-else to="/">
            <text>{{ config?.siteName || '网宿软件' }}</text>
          </nuxt-link>
        </div>
        <nav v-if="route.path.indexOf('/user') === -1" class="hidden-sm-and-down">
          <el-menu
            :default-active="currentIndex"
            mode="horizontal"
            :collapse="true"
            :ellipsis="false"
            style="border-bottom: none"
            @select="handleSelect"
          >
            <template v-for="(item, index) in navigations">
              <el-menu-item :index="item.path" v-if="index < visibleNumber">
                <template v-if="item.children.length > 0">
                  <el-sub-menu :index="item.path">
                    <template #title>
                      <text class="text-[17px]">{{ item.title }}</text>
                    </template>
                    <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${sub.path}`" :key="subIndex">{{ sub.title }}</el-menu-item>
                  </el-sub-menu>
                </template>
                <template v-else>
                  <text class="text-[17px]">{{ item.title }}</text>
                </template>
              </el-menu-item>
            </template>

            <!-- 顶部菜单超出数量折叠 -->
            <el-sub-menu index="more" v-if="navigations && navigations.length > visibleNumber">
              <template #title>更多菜单</template>
              <template v-for="(item, index) in navigations">
                <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber">
                  {{ item.title }}</el-menu-item
                >
              </template>
            </el-sub-menu>
          </el-menu>
        </nav>
      </div>
      <div class="header__right items-center">
        <el-input
          class="w-20 mr-4"
          placeholder="站内搜索"
          :suffix-icon="ElIconSearch"
          v-model="searchValue"
          @keyup.enter.native="handleSearch"
        />
        <ClientOnly>
          <template v-if="token">
            <el-dropdown @command="handleCommand">
              <el-button circle :icon="ElIconUserFilled" color="#155FAA"></el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="user">个人中心</el-dropdown-item>
                  <el-dropdown-item divided command="logOut">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <el-button circle :icon="ElIconUserFilled" @click="goLogin"></el-button>
          </template>
        </ClientOnly>
      </div>
    </div>
  </header>

  <!--  <div class="header__height__placeholder"></div>-->
</template>

<script setup lang="ts">
  import type { Config } from '~/types/config';
  import type { ApiResult } from '~/api';
  import type { Navigation } from '~/api/cms/navigation/model';
  import { useServerRequest } from '~/composables/useServerRequest';
  import {useConfigInfo} from "~/composables/configState";
  const route = useRoute();

  const searchValue = ref<string>();
  const token = ref<string | undefined>(undefined);
  const navigations = ref<Navigation[] | any>([]);
  const config = useConfigInfo();
  // 顶部栏初始数
  const visibleNumber = ref<number>(10);
  // 当前激活菜单的 index
  const currentIndex = ref<string>('2');
  const showSubMenu = ref<boolean>(false);

  function handleCommand(command: string) {
    switch (command) {
      case 'logOut':
        logOut();
        break;
      default:
        navigateTo('/user');
        break;
    }
  }

  function logOut() {}

  function goLogin() {}

  const handleSearch = (key: string, keyPath: string) => {
    console.log(key, keyPath);
    navigateTo('/search?keyword=' + searchValue.value);
  };

  function handleSelect(key: string, keyPath: any) {
    console.log(key,'key')
    console.log(keyPath,'keyPath')
    currentIndex.value = key;
    navigateTo(`${key}`);
  }

  function openSubMenu(ee) {
    showSubMenu.value = true;
    console.log('000', showSubMenu.value);
  }

  // 获取数据
  const reload = async () => {
    await nextTick();
    const { data: fields } = await useServerRequest<ApiResult<Config>>('/cms/website-field/config', {});
    config.value = fields.value?.data;
    const { data: navigation } = await useServerRequest<ApiResult<Navigation[]>>('/cms/navigation/tree', {
      query: {
        position: 1
      }
    });
    navigations.value = navigation.value?.data;
  };

  reload();
</script>

<style lang="scss">
  body {
    background-color: #f3f6f8;
  }
</style>
