<script setup lang="ts">
import {useConfigInfo} from "~/composables/configState";
import { Search } from '@element-plus/icons-vue'
const config = useConfigInfo();
const keyword = ref<string>('');
const i18n = useI18n();
const onSearch = () => {
  window.location.href = `/${i18n.locale.value}/search/${keyword.value}`;
}
</script>

<template>
  <div class=" bg-blue-50 text-gray-400 px-2 py-1" v-if="config.showTopBar == 'true'">
    <div class="w1200 flex justify-between items-center">
      <span>{{ config?.topWelcomeInfo }}</span>
      <div class="lang flex justify-center text-center items-center">
        <el-space>
          <div class="search">
            <div class="fl mr-5">
              <el-input v-model="keyword" :placeholder="`${$t('searchKeywords')}...`" :suffix-icon="Search" @change="onSearch" />
            </div>
          </div>
          <a :href="`/zh?spm=zh_CN`" class="text-sm"><span class="text-gray-500">中文版</span></a>
          <el-divider direction="vertical" />
          <a :href="`/en?spm=en_US`" class="text-sm"><span class="text-gray-500">English</span></a>
        </el-space>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
