<script setup lang="ts">
import {useConfigInfo} from "~/composables/configState";
import {Search} from '@element-plus/icons-vue'
import Logo from "~/components/AppHeader/Logo/Logo.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 :style="{background: `url(${config.siteLogoBg})`}"
       class="text-gray-400 px-0 h-[100px]">
    <div class="xl:w-screen-xl m-auto flex justify-between items-center h-[100px]">
      <Logo/>
      <div class="flex justify-between w-full text-center items-center">
        <div class="logo"></div>
        <div class="search">
          <div class="fl mr-5">
            <el-input v-model="keyword" :placeholder="`${$t('searchKeywords')}...`" :suffix-icon="Search"
                      @change="onSearch"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
