<template>
  <a-layout-header class="web-header">
    <p class="title-font web-title">{{ title }}</p>
    <!-- logo -->
    <!-- <router-link to="/"
                 custom
                 v-slot="{navigate}">
      <div class="cursor logo-wrap"
           @click="navigate">
        <img src="@/assets/logo.png"
             alt="">
      </div>
    </router-link> -->
    <!-- 站点搜索/添加 -->
    <!-- <app-header-channel v-model:channel="current_site" /> -->
    <!-- 用户操作 -->
    <menu-unfold-outlined
      v-if="collapsed"
      class="trigger"
      @click="changeType"
    />
    <menu-fold-outlined
      v-else
      class="trigger"
      @click="changeType"
    />
    <app-header-user v-if="user" :name="user" />
  </a-layout-header>
</template>

<script lang="ts">
import useApp from "@/hooks/useApp";
import { computed, defineComponent, reactive, ref, toRefs } from "vue";

import AppHeaderChannel from "./AppHeaderChannel.vue";
import AppHeaderUser from "./AppHeaderUser.vue";
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons-vue";
import { MutationType } from "@/store/modules/app/_type";
const AppHeader = defineComponent({
  components: {
    AppHeaderChannel,
    AppHeaderUser,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
  },
  setup() {
    const { store } = useApp();

    const data = reactive({
      user: computed(() => store.getters.user.nickname),
      title: computed(() => store.getters.pageTitle),
      collapsed: false,
    });

    const changeType = () => {
      data.collapsed = !data.collapsed;
      store.commit(MutationType.setCollapsed, data.collapsed);
    };

    return {
      ...toRefs(data),
      changeType,
    };
  },
});

export default AppHeader;
</script>
