<template>
  <div class="fr clearfix flex items-center">
    <div v-if="setting.searchBtn" class="fl mr-5">
      <el-input v-model="keywords" :placeholder="`${$t('searchKeywords')}`" :suffix-icon="Search" @change="onSearch"/>
    </div>
    <template v-if="setting.loginBtn">
      <!-- 未登录 -->
      <div v-if="!token" class="lang flex justify-center text-center items-center">
        <el-space>
          <nuxt-link to="/passport/login?type=register" type="text" class="text-sm text-gray-500">注册</nuxt-link>
          <el-divider direction="vertical"/>
          <nuxt-link to="/passport/login" type="text" class="text-sm text-gray-500">登录</nuxt-link>
        </el-space>
      </div>
      <!-- 已登录 -->
      <div v-else>
        <div class="header__right items-center pr-4 xl:pr-0 md:flex hidden">
          <el-space class="sm:flex hidden" size="large">
            <ClientOnly>
              <template v-if="token">
                <el-dropdown @command="handleCommand">
                  <el-space class="flex items-center cursor-pointer">
                    <el-avatar class="cursor-pointer" :src="user?.avatar" :size="30" />
                    <span>{{ user?.nickname }}</span>
                  </el-space>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="user"><nuxt-link to="/user">用户中心</nuxt-link></el-dropdown-item>
                      <el-dropdown-item command="password"><nuxt-link to="/user/password">修改密码</nuxt-link></el-dropdown-item>
                      <el-dropdown-item command="auth"><nuxt-link to="/user/auth">实名认证</nuxt-link></el-dropdown-item>
                      <el-dropdown-item divided command="order"><nuxt-link to="/user/order">已购插件</nuxt-link></el-dropdown-item>
                      <el-dropdown-item divided command="logOut"><nuxt-link to="/user/logout">退出登录</nuxt-link>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
              <template v-else>
                <el-button type="primary"  v-if="!token" @click="navigateTo(`/passport/login`)">登录/注册</el-button>
                <!--                <el-button v-if="config.showLoginButton" circle :icon="ElIconUserFilled" @click="goLogin"></el-button>-->
              </template>
            </ClientOnly>
          </el-space>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import {useConfigInfo, useSetting} from "~/composables/configState";
const token = useToken();
const user = useUser();
const setting = useSetting();
const keywords = ref<string>();

const onSearch = () => {
  navigateTo(`/search/${keywords.value || '关键词不能为空！'}`)
}

function handleCommand(command: string) {
  switch (command) {
    case 'logOut':
      logOut();
      break;
    default:
      navigateTo('/user');
      break;
  }
}

function logOut() {
  token.value = '';
  localStorage.clear();
  navigateTo('/passport/login')
}
</script>
<style scoped lang="scss">

</style>
