<template>
  <div class="fr clearfix flex items-center">
    <!-- PC端 -->
    <div v-if="setting.searchBtn" class="fl mr-5 hidden-sm-and-down">
      <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 class="hidden-sm-and-down">
          <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 command="order" divided><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>
      <!-- 移动端 -->
      <div class="hidden-sm-and-up mx-7 sm:mx-0">
        <div class="el-dropdown-link flex items-center" @click="drawer = true">
          <el-avatar v-if="token" class="cursor-pointer" :src="user?.avatar" :size="30"/>
          <el-icon v-else color="black" :size="24"><Fold /></el-icon>
        </div>
        <el-drawer
          v-model="drawer"
          :size="290"
        >
          <div id="menu">
            <el-menu
              currentIndex="/product"
              :unique-opened="true"
            >
              <template v-for="(item,index) in navigations" :key="index">
                <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${index}`">
                  <template #title><span>{{ item.title }}</span></template>
                  <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${subIndex}`">
                    <el-space>
                      <el-avatar v-if="sub.icon" :src="sub.icon" shape="square" size="small"></el-avatar>
                      <a :href="navTo(sub)">{{ sub.title }}</a>
                    </el-space>
                  </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="`${index}`"><a :href="navTo(item)">{{ item.title }}</a></el-menu-item>
              </template>
            </el-menu>
          </div>
        </el-drawer>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { Search, Fold } from '@element-plus/icons-vue'
import {useConfigInfo, useMenu, useSetting} from "~/composables/configState";
import type {CmsLangLog} from "~/api/cms/cmsLangLog/model";
import {listCmsLangLog} from "~/api/cms/cmsLangLog";
const token = useToken();
const user = useUser();
const navigations = useMenu();
const config = useConfigInfo();
const setting = useSetting();
const keywords = ref<string>();
const drawer = ref<boolean>(false);
const langList = ref<CmsLangLog[]>([]);

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

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

// TODO 读取国际化配置
listCmsLangLog({}).then(list => {
  langList.value = list;
})

const onLang = (lang: string) => {
  navigateTo(`?lang=${lang}`)
  drawer.value = false;
}

function logOut() {
  token.value = '';
  localStorage.clear();
  navigateTo('/passport/login')
}
</script>
<style scoped lang="scss">
.el-menu{
  border-right: none;
}
</style>
