<template>
   <a-layout-header class="header-mobile" v-if="isMobile" :style="{backgroundColor: headerBgColor}">
      <a-row>
        <a-col :span="6" >
          <search />
        </a-col>
        <a-col :span="6" class="logo" >
          <img :src="logoPng" alt="">
        </a-col>
        <a-col :span="6" class="df-center">
          <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
        </a-col>
        <a-col :span="6" class="df-center"  >
          <user />
        </a-col>
      </a-row>
  </a-layout-header>
  <a-layout-header class="header-pc" v-else :style="{backgroundColor: headerBgColor, height: '54px'}">
      <a-row style="width: 100%;height: 54px;" justify="center" >
        <a-col :span="2" >
          <div class="logo" style="height: 54px;" >
            <img :src="logoPng" alt="">
          </div>
        </a-col>
        <a-col :span="13" style="height: 54px;" >
        <a-menu
          mode="horizontal"
          :style="{ lineHeight: '54px', border: 'none' }"
          :selectedKeys="selectedKeys"
        >
          <a-menu-item
            v-for="route in appRouter.$state.router.navbar.route"
            :key="route.path"
            @click="changeRouter(route)"
          >
            {{route.name}}
          </a-menu-item>
        </a-menu>
        </a-col>
        <a-col :span="9" style="height: 54px;" >
          <a-row :gutter="[8, 8]" justify="end"  style="height: 54px;" >
            <a-col  class="df-center" style="height: 54px;" >
              <search />
            </a-col>
            <a-col class="df-center"  style="height: 54px;">
              <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
            </a-col>
            <a-col class="df-center"  style="height: 54px;">
              <user />
            </a-col>
          </a-row>
        </a-col>
      </a-row>
  </a-layout-header>
</template>

<script lang="ts" setup >
import { computed, ref } from 'vue'
import { useAppRouter } from '@/store/router'
import user from './user.vue'
import { useRoute, useRouter } from 'vue-router'
import { IconTsx } from '@/components/MicroComponents/index'
import { useDesignStore } from '@/store'
import { useDeviceType } from '@/hooks'
import search from './components/search/index.vue'

const logoPng = require('@/assets/logo/logo-blue.png')

const route = useRoute()

const router = useRouter()

const appRouter = useAppRouter()

const selectedKeys = ref<string[]>([route.matched[0].path])

const designStore = useDesignStore()

const iconName = computed(() => designStore.theme ? 'sun' : 'moon')

const headerBgColor = computed(() => designStore.theme ? '#141414' : '#fff')

const isMobile = useDeviceType()

const changeTheme = () => designStore.changeModeltheme()

const changeRouter = (route: ROUTER.RoutesProps) => {
  // if (route.link) {
  //   window.open(route.path)
  // } else {
  //   selectedKeys.value = [route.path]
  //   router.push(route.path)
  // }
  selectedKeys.value = [route.path]
  console.log('route:', route, selectedKeys)

  appRouter.changeNavbarRoute(route)
}

</script>

<style lang="less" scoped >

.header-mobile {
  padding: 0 24px;
}

.header-pc {
  width: 100%;
  position: relative;
  height: 54px;
  z-index: 20;
  box-shadow: 0 1px 4px rgba(0,21,41,.12);
  overflow: hidden;
  padding-left: 20px;
}

.df-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  img {
    width: 50px;
    height: 50px;
    display: block;
  }
}
</style>
