<template>
  <header
    class="flex h-[60px] items-center px-[48px] border-b-[1px] border-b-[#e6e6e6] justify-between"
  >
    <div class="flex items-center">
      <img class="w-[100px] mr-[10px]" src="/imgs/logo.svg" alt="" />
      <el-input
        v-model="keword"
        :input-style="{ boxShadow: 'none' }"
        style="width: 240px"
        placeholder="Please input"
        :prefix-icon="Search"
        @click="show = true"
      />
    </div>
    <div class="flex items-center coursor-pointer">
      <el-dropdown placement="bottom-start" trigger="click" size="large">
        <div class="flex items-center h-[42px] border rounded-[8px] border-[#e6e6e6] px-[10px]">
          <img class="w-[24px] h-[24px] mr-[5px]" src="/imgs/earth.svg" alt="" />
          {{ curLang }}
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(item, index) in langs" :key="index">
              <span @click="locale = item">{{ item }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div class="flex items-center ml-[10px]">
        <div class="w-[42px] h-[42px] overflow-hidden rounded-full">
          <img class="w-full h-full" src="/imgs/avater.svg" alt="" />
        </div>
        <div class="ml-[5px] flex flex-col justify-around h-[42px]">
          <div class="text-[#333] text-[14px] font-bold">周星星</div>
          <div class="text-[#999] text-[10px]">出纳员</div>
        </div>
      </div>
    </div>
  </header>
  <OrderDrawer v-model:show="show" :type="SearchType" />

</template>
<script lang="ts" setup>
  import { computed, ref } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import { messages } from '../../../i18n/index'
  import { useI18n } from 'vue-i18n'
  import OrderDrawer from '../../menu/components/order-drawer.vue'
  const { t, locale } = useI18n()
  const langs = computed(() => Object.keys(messages))
  const curLang = computed(() => locale.value)
  const keword = ref('')
  const show = ref(false)
  const SearchType = ref('Search')
  function changeLanguage(lang) {
    locale.value = lang
  }
</script>
