<script setup lang="ts">
  import NodeFilter from './NodeFilter.vue';
  import CategoryPanel from './CategoryPanel.vue';
  import { computed, CSSProperties, ref, unref } from 'vue';
  import { Icon } from '/@/components/Icon';
  import { Tooltip } from 'ant-design-vue';

  const expand = ref(true);

  const searchText = ref();

  const handleOnFold = () => {
    expand.value = false;
  };

  const getSidebarStyle = computed<CSSProperties>(() => {
    return {
      flex: `0 0 ${unref(expand) ? '320px' : 0}`,
      width: unref(expand) ? '320px' : 0,
      minWidth: unref(expand) ? '320px' : 0,
    };
  });

  const handleSearch = (value: string) => {
    searchText.value = value;
  };
</script>

<template>
  <section
    :style="getSidebarStyle"
    class="h-full shadow shadow-lg relative z-50 shadow-dark-600 overflow-hidden transition-all"
  >
    <NodeFilter @fold="handleOnFold" @search="handleSearch" />
    <CategoryPanel :searchText="searchText" />
  </section>
  <Tooltip title="展开">
    <Icon
      icon="ant-design:menu-unfold-outlined"
      class="cursor-pointer svg:text-2xl absolute top-5 left-5 z-40 !flex justify-center items-center w-10 h-10 rounded-1 bg-blue-200 svg:text-light-50 shadow-lg"
      @click="expand = true"
    />
  </Tooltip>
</template>