<template>
  <!-- 折叠菜单栏项 -->
  <div :class="['routerMenuItem']">
    <div :class="[
      'item',
      isHaveChildren ? 'father' : 'son',
      isEnterItem ? 'mouseEnter' : '',
    ]" :style="{ height: props.itemHeight }" @click="itemClick" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
      <header>
        <div class="iconContainer">
          <textIcon :icon="'dropDown'" :class="[
            'icon',
            isHideChildren ? '' : 'unfolded',
            isEnterItem ? 'mouseEnter' : '',
          ]" v-if="isHaveChildren" />

        </div>

        <textIcon :icon-content="props.itemInfo.icon ? props.itemInfo.icon : 'folder'"
          :class="['pathIcon', isEnterItem ? 'mouseEnter' : '']" :is-mat-icon="true" />
        <a :class="['title', isEnterItem ? 'mouseEnter' : '']">{{ props.itemInfo.menuName }}</a>
      </header>
      <main>
        <a :class="[isEnterItem ? 'mouseEnter' : '']">当前路径:{{ props.itemInfo.path }}</a>
      </main>

    </div>
    <div :class="['itemChidren', isHideChildren ? 'hide' : '']">
      <slot></slot>
    </div>
  </div>
</template>
<script setup="context" lang="ts">

import { useMenuStore } from 'src/stores/useMenuStore';
import { ref, useSlots, PropType, onMounted } from 'vue';
import textIcon from '../../textIcon.vue';
import toggleBtn from '../../toggleBtn.vue';
import { iconNames } from '../../icons';
const menuSotre = useMenuStore();
const slots = useSlots();
const props = defineProps({
  itemInfo: {
    type: Object as PropType<menuItemType>,
    required: true,
  },
  itemHeight: {
    type: String,
    default: '5vh',
  },


});


//是否隐藏子菜单
const isHideChildren = ref(true);
const isHaveChildren = ref(false);
const isEnterItem = ref(false);
const toggle = ref();

//获取插槽
const childrenMenu = slots.default?.();
const itemClick = ref<(e: any) => void>();
const itemClickEvent = (e: any) => {
  (menuSotre.menuRouter as any).push({ name: props.itemInfo.path })
}
itemClick.value = itemClickEvent;
const mouseEnter = () => {
  isEnterItem.value = true;
};
const mouseLeave = () => {
  isEnterItem.value = false;
};
//插槽检测
if (childrenMenu) {
  isHaveChildren.value = true;
  itemClick.value = (e: any) => {
    isHideChildren.value = !isHideChildren.value;
  };
} else {
  isHaveChildren.value = false;
}

</script>
<style style lang="scss" scoped>
.routerMenuItem {
  a {
    font-weight: 400;
  }

  .item {
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    position: relative;
    border-radius: 5px;
    transition: all 0.3s;
    padding-right: 5px;

    &.father {
      cursor: pointer;
      font-weight: bolder;

      &.mouseEnter {
        background-color: white;
      }
    }

    &.son {
      &.mouseEnter {
        background-color: white;

      }
    }


    >header {
      margin-left: 5px;
      display: flex;
      height: 100%;
      flex-direction: row;
      align-items: center;
      font-weight: 400;

      >.iconContainer {
        width: 22.5px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        >.icon {
          transition: all 0.3s;
          color: white;
          opacity: 1;

          &.mouseEnter {
            opacity: 1;
            color: $primary;
          }

          &.unfolded {
            transform: rotate(90deg);
          }
        }

        >.sonLine {
          width: 2.3px;
          height: 100%;
          margin-left: 8px;
          background-color: $primary;
          opacity: 0.4;

          &.mouseEnter {
            opacity: 1;
          }
        }
      }

      >.pathIcon {
        width: 32px;
        height: 32px;
        font-size: 25px;
        transition: all 0.3s;
        color: #BDBDBD;
        margin-bottom: 1px;

        &.mouseEnter {
          color: #616161;
        }
      }

      // > .itemIcon {
      //   transition: all 0.3s;
      // }
      >.title {
        margin-left: 4px;
        color: $lightWhiteColor;
        transition: all 0.3s;

        &.mouseEnter {
          color: $primary;
        }
      }
    }

    >main {

      >a {
        color: white;
        transition: all 0.3s;

        &.mouseEnter {
          color: $primary;
        }

      }
    }

    >footer {
      margin-right: 5px;
      display: flex;
      flex-direction: row;
      align-items: center;

      a {
        font-size: 18px;

      }

      >.toggle {
        height: 80%;
        width: 35px;
        margin-right: 15px;
        margin-top: 3px;
        color: #616161;
      }

      >.add {
        margin-right: 15px;
        margin-top: 3px;
        font-size: 21px;
      }

      >.edit {
        margin-right: 15px;

        color: $accent ;
      }
    }
  }

  .itemChidren {

    height: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 15px;

    //展开动画CSS(不推荐,元素过多会出问题)
    // max-height:100vh;
    // overflow: hidden;
    // transition: all 1s;

    //透明动画CSS(能用)
    // transition: all 0.3s;
    // opacity: 1;
    &.hide {
      max-height: 0vh;
      //展开动画CSS(不推荐,元素过多会出问题)
      //  overflow: hidden;
      //  transition: all 0.4s;

      //透明动画CSS(能用)
      //   opacity: 0;
      display: none;
    }
  }
}
</style>
