<template>
  <el-header height="100px"
             :class="[prefixCls, 'flex', 'justify-between', store.getMenuTheme === 'dark'? 'is-host' : 'is-white']">
    <ApplicationAppLogo/>
    <el-menu
      :default-active="$route.meta.parentPath || $route.path"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      router
    >
      <el-menu-item @click="handleChange(item)" v-for="item in routes" :index="item.path"
                    :key="item.path">{{ item.name }}
      </el-menu-item>
    </el-menu>

    <div v-if="!token" @click="setLoginVisible(true)">登录</div>
    <el-dropdown v-else trigger="click">
    <span class="el-dropdown-link">
      登录
      <el-icon class="el-icon--right"><ElIconCaretBottom/></el-icon>
    </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>OCR识别</el-dropdown-item>
          <el-dropdown-item>优化翻译</el-dropdown-item>
          <el-dropdown-item>翻译文本</el-dropdown-item>
          <el-dropdown-item>翻译文件</el-dropdown-item>
          <el-dropdown-item>推出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-header>
</template>

<script setup>


const {prefixCls} = useDesign('header-wrap')
const route = useRoute()
const router = useRouter();
const routes = ref(router.getRoutes().filter(it => !it.meta.hidden));
routes.value.sort((a, b) => a.meta.order - b.meta.order);
const activeRoute = ref(route.path)
const store = useAppStore()
const { setLoginVisible } = useUserInfo()
const token = computed(()=> useUserInfo().$state.token);

onMounted(()=>{
  console.log('token>>>>>', token)
})
function handleChange(val) {
  activeRoute.value = val.path;
  if (val.meta.hasOwnProperty('headerHost') && val.meta.headerHost) {
    store.setMenuTheme('dark')
  } else {
    store.setMenuTheme('light')
  }
}

watch(() => route, (val) => {
  activeRoute.value = val.path;
  if (val.meta.hasOwnProperty('headerHost') && val.meta.headerHost) {
    store.setMenuTheme('dark')
  } else {
    store.setMenuTheme('light')
  }
}, {deep: true})

watchEffect(() => {
  handleChange(route)
})
</script>

<style scoped lang="scss">
$prefix-cls: '#{$name-prefix}-header-wrap';
.#{$prefix-cls} {
  z-index: 1;
  @apply relative;
  :deep(.el-menu) {
    @apply bg-transparent;
    border-bottom: unset;

    .el-menu-item {
      border-bottom: unset;
      //font-size: 20px;
      transition: font-size .5s;
      background-color: unset;
      @apply relative text-xl;
      &:after {
        content: '';
        width: 50%;
        height: 8px;
        border-radius: 5px;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        @apply bg-transparent absolute;
      }

      &:hover {
        color: unset;
      }

      &.is-active {
        color: #333 !important;
        @apply font-bold text-2xl;
        &:after {
          @apply bg-black;
        }
      }
    }
  }

  &.is-host {
    :deep(.el-menu) {
      .el-menu-item {
        color: $white !important;

        &:hover {
          color: unset;
        }

        &.is-active {
          &:after {
            @apply bg-white;
          }
        }
      }
    }

    :deep(.yangliu-app-logo__title) {
      color: $white;
    }
  }

  //height: 100px;
}
</style>
