<template>
  <div class="search-component">
    <div style="height: 100%;width: 200px">
      <el-select
        v-model="languageType"
        @change="changeLanguageType"
        :placeholder="$t.value.language"
      >
        <el-option
          label="zh-CN"
          value="zh-CN"
        />
        <el-option
          label="zh-HK"
          value="zh-HK"
        />
        <el-option
          label="zh-TW"
          value="zh-TW"
        />
        <el-option
          label="en"
          value="en"
        />
      </el-select>
    </div>
    <div
      class="gvaIcon gvaIcon-refresh"
      :class="[reload ? 'reloading' : '']"
      @click="handleReload"
    />
    <Screenfull class="search-icon" />
    <div
      class="gvaIcon gvaIcon-customer-service"
      @click="toService"
    />
  </div>
</template>

<script setup>
import Screenfull from '@/view/layout/screenfull/index.vue'
import { emitter } from '@/utils/bus.js'
import { ref } from 'vue'
import { setLang } from '@/lang'
// 导入 i18n 实例
defineOptions({
  name: 'BtnBox',
})

const languageType = ref(localStorage.getItem('lang'))

const changeLanguageType = (val) => {
  setLang(val)
}

const reload = ref(false)
const handleReload = () => {
  reload.value = true
  emitter.emit('reload')
  setTimeout(() => {
    reload.value = false
  }, 500)
}
const toService = () => {
  window.open('https://support.qq.com/product/371961')
}

// onMounted(() => {
//   setLang('zh-CN')
// })
</script>
<style scoped lang="scss">
.search-component {
  @apply inline-flex overflow-hidden text-center gap-5 mr-5;
  div{
    @apply cursor-pointer;
  }
  .el-input__inner {
    @apply border-b border-solid border-gray-300;
  }
  .el-dropdown-link {
    @apply cursor-pointer;
  }
  display: flex;
  align-items: center;
}

.reload {
  font-size: 18px;
}

.reloading{
  animation:turn 0.5s linear infinite;
}

@keyframes turn {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

</style>
