<template>
  <div class="flex justify-between items-center h-[50px]">
    <t-head-menu v-model="menuValue" theme="light">
      <template #logo>
        <div class="logo flex items-center" @click="toHome">
          <img v-if="menuValue == 'home'" class="rounded-full mr-2" src="@/assets/logo/柚子娘.png" width="35" alt="">
          <img v-else class="rounded-full mr-2" src="@/assets/logo/柚子娘-绿.png" width="28" alt="">
          <img v-if="menuValue == 'home'" src="@/assets/logo/红色字体.png" width="130" alt="">
          <img v-else src="@/assets/logo/绿色字体.png" width="135" alt="">
        </div>
      </template>
      <t-menu-item value="home" to="home"> 首页 </t-menu-item>
      <t-menu-item value="gallery" to="gallery"> 画廊 </t-menu-item>
      <t-menu-item value="widget" to="widget"> 工具 </t-menu-item>
      <t-menu-item value="appshare" to="appshare"> 软件分享 </t-menu-item>
      <t-menu-item value="plink" to="plink"> 友链 </t-menu-item>
      <template #operations>
        <div class="wea">
          <wea />
        </div>
        <t-button variant="text" shape="square">
          <template #icon><t-icon name="search" /></template>
        </t-button>
        <t-button variant="text" shape="square">
          <template #icon><t-icon name="mail" /></template>
        </t-button>

        <t-avatar v-if="ui" size="small" :image="ui.avaUrl" />
        <t-button @click="loginClick" v-else theme="danger" size="small">登录</t-button>

        <t-button variant="text" shape="square">
          <template #icon><t-icon name="ellipsis" /></template>
        </t-button>
      </template>
    </t-head-menu>
  </div>
</template>

<script setup>
//mark import
import wea from '@/components/wea.vue'

//mark data
const route = useRoute()
const router = useRouter()
const menuValue = ref('home')
const ui = ref({
  avaUrl: '#'
})

//mark method

function toHome() {
  router.push('/home')
}
function loginClick() {
  router.push('/login')
}


// 监听路由变化
watchEffect(() => {
  menuValue.value = route.path.split('/')[1]
})

//mark 周期、内置函数等
onMounted(() => {
  // 判断cookie里面有没有userinfo
  // console.log($cookies.get('userinfo'));
  ui.value = $cookies.get('userinfo')
}
)

</script>

<style scoped lang="less">
:deep(.t-is-active) {
  background-color: unset !important;
  color: theme('colors.pp.500') !important;
}

:deep(.t-menu__item) {
  font-size: 20px;
  color: theme('colors.suc.800');

  div {
    display: none !important;
  }
}

:deep(.t-menu__item):hover {
  background-color: unset !important;
  color: theme('colors.pp.500');

  div {
    display: none !important;
  }
}

:deep(.t-menu__item):focus {
  background-color: unset !important;
}
</style>