<template>
  <div class="h-full flex">
    <div
      class="navbar h-[100%] flex-col bg-[url('srcDev/assets/images/index-bg-coll.png')] bg-no-repeat bg-[length:100%_100%]"
    >
      <div
        class="
          font-Tih
          text-[28px] text-[#fff]
          ellipsis1
          font-bold
          text-center
          leading-[64px]
        "
      >
            <!-- :class="
          isCollapse ? 'text-cloumn leading-[60px] text-[18px]  h-[90px]' : ''
        " -->
        <span class="el-titleIcon pointer" :class="isCollapse ? '' : 'mr-[6px]'"></span>
        <span v-if="!isCollapse">组件库</span>
      </div>
      <el-menu class="el-menu-vertical-demo" router :collapse="isCollapse">
        <el-menu-item
          v-for="(item, index) in menu"
          :key="index"
          :index="item.path"
          :class="isCollapse ? 'menu-cloumn' : ''"
        >
          <!-- <div class="menu-btn flex w-[140px] h-[50px] leading-[50px]"> -->
          <div
            class="w-[22px] h-[22px] bg-no-repeat bg-center mr-[10px]"
            :style="{ 'background-image': 'url(srcDev/assets/images/icons/icon' + item.icon + '.png)' }"
          ></div>
          <template #title>{{ item.caption }}</template>
          <!-- </div> -->
        </el-menu-item>
      </el-menu>
    </div>
    <div class="w-full bg-[#dbe2ea] overflow-hidden">
      <div>
        <!-- <div @click="toggleCollapse">{{ isCollapse ? '展开' : '收起' }}</div> -->
        <div
          @click="toggleCollapse"
          class="mr-[22px] bg-center cursor-pointer"
          :class="isCollapse ? 'icon-out' : 'icon-in'"
        ></div>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup lang="ts">

import { ref } from 'vue'

const isCollapse = ref(false);
const toggleCollapse = (): void => {
  isCollapse.value = !isCollapse.value;
};

const menu = [
  { icon: '1', caption: '对比工具', path: '/diffCompare' },
  { icon: '2', caption: '大屏转动', path: '/VRotationChart4d' },
  { icon: '3', caption: '评论点赞', path: '/commit' },
  { icon: '4', caption: '知识授权', path: '/' },
  { icon: '5', caption: '标签库', path: '/' },
  { icon: '6', caption: '系统管理', path: '/' }
];

</script>
