<script setup lang="ts">
import {useConfigInfo, useMenu} from "~/composables/configState";
import { Search,Message, Fold, Phone } from '@element-plus/icons-vue'
const config = useConfigInfo();
const keyword = ref<string>('');
const i18n = useI18n();
const navigations = useMenu();
const drawer = ref<boolean>(false);

const onSearch = () => {
  window.location.href = `/${i18n.locale.value}/search/${keyword.value}`;
}

const route = useRoute();
watch(
  () => route.params.keywords,
  (text) => {
    if(text){
      keyword.value = String(text);
    }
  },
  { immediate: true }
);
</script>

<template>
  <div class="head-bg bg-blue-50 text-gray-400 px-2">
    <div class=" flex justify-between items-center xl:w-screen-xl m-auto sm:px-0 w-full">
      <span class="text-white text-sm hidden-sm-and-down">{{ config?.topWelcomeInfo }}</span>
      <span class="text-white text-sm hidden-sm-and-up">{{ config?.tel }}</span>
      <div class="lang flex justify-center text-center items-center">
        <el-space size="large">
          <a class="text-sm flex items-center hidden-sm-and-down"><el-icon color="#fff" size="17"><Phone /></el-icon><span class="text-white text-sm px-1">招生与就业办电话：0776-2696638</span></a>
<!--          <a href="mailto:1145119853@qq.com" class="text-sm flex items-center hidden-sm-and-down"><el-icon color="#fff" size="16"><Message /></el-icon><span class="text-white px-1">校长信箱</span></a>-->
<!--          <a href="/search/请输入搜索关键词" class="text-sm flex items-center hidden-sm-and-down"><el-icon color="#fff" size="16"><Search /></el-icon><span class="text-white px-1">站内搜搜</span></a>-->
          <div class="search hidden-sm-and-down ml-5">
            <div class="fl">
              <el-input v-model="keyword" :placeholder="`${$t('searchKeywords')}...`" style="height: 28px;" :suffix-icon="Search" @change="onSearch" />
            </div>
          </div>
          <!-- 移动端 -->
          <div class="hidden-sm-and-up">
            <div class="hidden-sm-and-up mx-5 sm:mx-0">
              <div class="el-dropdown-link flex items-center" @click="drawer = true">
                <el-icon color="white" :size="24"><Fold /></el-icon>
              </div>
              <el-drawer
                v-model="drawer"
                :size="290"
              >
                <div id="menu">
                  <el-menu
                    currentIndex="/product"
                    :unique-opened="true"
                  >
                    <template v-for="(item,index) in navigations" :key="index">
                      <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${index}`">
                        <template #title><span>{{ item.title }}</span></template>
                        <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${subIndex}`">
                          <el-space>
                            <el-avatar v-if="sub.icon" :src="sub.icon" shape="square" size="small"></el-avatar>
                            <a :href="navTo(sub)">{{ sub.title }}</a>
                          </el-space>
                        </el-menu-item>
                      </el-sub-menu>
                      <el-menu-item v-else :index="`${index}`"><a :href="navTo(item)">{{ item.title }}</a></el-menu-item>
                    </template>
                  </el-menu>
                </div>
              </el-drawer>
            </div>
          </div>
        </el-space>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
