<!--
 * @Author: xiejiang
 * @Date: 2024-11-11 09:38:40
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 21:53:21
 * @Description: 
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <t-head-menu theme="light" class="header !bg-white">
    <template #logo>
      <img
        :src="isCollapse ? iconLogoCollapse : iconLogo"
        alt="logo"
        :width="isCollapse ? 64 : 208"
        :height="isCollapse ? 64 : 64"
        class="!ml-[0px] logo-transition"
        @click="$router.push('/')"
      />
      <Icon
        :name="isCollapse ? 'indent-right' : 'indent-left'"
        size="24"
        class="!cursor-pointer !ml-[15px]"
        @click="changeCollapse"
      ></Icon>
      <Breadcrumb id="breadcrumb" />
    </template>
    <template #operations>
      <ToolBarRight />
    </template>
  </t-head-menu>
</template>
<script setup lang="ts">
import { useGlobalStore } from '@/stores/modules/global'
import { Icon } from 'tdesign-icons-vue-next'
import ToolBarRight from '@/layouts/components/Header/components/ToolBarRight.vue'
import Breadcrumb from './components/Breadcrumb.vue'
import iconLogo from '@/assets/images/logo.png'
import iconLogoCollapse from '@/assets/images/logo-collapse.png'

const globalStore = useGlobalStore()
const isCollapse = computed(() => globalStore.isCollapse)
const changeCollapse = () => globalStore.setGlobalState('isCollapse', !globalStore.isCollapse)
</script>

<style scoped lang="less">
.header {
  position: relative;
  height: 60px;
  color: var(--td-font-gray-1);
}

.logo-transition {
  transition:
    width 0.2s ease,
    height 0.2s ease;
}
</style>
