<template>
  <transition name="menu-collapse">
    <el-menu :default-active="activeMenu" class="el-menu-vertical-demo custom-menu" @open="handleOpen"
      @close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true"
      :default-openeds="['1', '2']">
      <div style="height: 100%;padding: 0 0 20px;box-sizing: border-box;">
        <div class="menu-top">
          <span v-show="!isCollapse">
            {{ sliderTitle }}
          </span>
          <GuipToolTip :content="isCollapse ? '展开' : '收起'">
            <img v-if="!isCollapse" class="point" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt="">
            <img v-else class="point" src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt="">
          </GuipToolTip>
        </div>
        <el-submenu v-for="item in menuData" :key="item.index" :index="item.index">
          <template slot="title">
            <SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099" activeColor="#006AFF"
              :isActive="item.index == activeMenu.substr(0, 1) && isCollapse" />
            <span class="title_text" :index="item.index">{{ item.title }}</span>
          </template>
          <el-menu-item style="padding: 0 22px 0 32px;" v-for="subItem in item.children" :key="subItem.index"
            :index="subItem.index">
            {{ subItem.title }}
          </el-menu-item>
        </el-submenu>
      </div>
    </el-menu>
  </transition>

</template>
<script>
import SvgIcon1 from '@/components/SvgIcon1.vue';
import GuipToolTip from '@/components/GuipToolTip.vue';
export default {
  name: 'SliderMenu',
  components: {
    SvgIcon1,
    GuipToolTip
  },
  props: {
    menuData: {
      type: Array,
      default: () => []
    },
    sliderTitle: {
      type: String,
      default:'导航'
    },
  },
  data() {
    return {
      isCollapse: false,
      activeMenu: '',
      routerList: [],
      // menuData: [
      //   {
      //     index: '1',
      //     title: '父级菜单1',
      //     icon: 'el-icon-location',
      //     children: [
      //       { index: '1-1', title: '子级菜单1-1', path: '/' },
      //       { index: '1-2', title: 'ui页面', path: '/ui' }
      //     ]
      //   },
      //   {
      //     index: '2',
      //     title: '父级菜单2',
      //     icon: 'el-icon-menu',
      //     children: [
      //       { index: '2-1', title: '子级菜单2-1', path: '/about' },
      //       { index: '2-2', title: '加盟耶main', path: '/franchise' }
      //     ]
      //   }
      // ]
    };
  },
  methods: {
    changeMenuStatus(flag) {
      this.isCollapse = flag;
    },
    // handleSelect(index) {
    //   this.activeMenu = index;
    // },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(index) {
      this.activeMenu = index;
      console.log(index, '---index');
      // 找到被点击的 menu 项对应的 path
      const allItems = this.menuData.flatMap(menu => menu.children);
      const targetItem = allItems.find(item => item.index === index);

      if (targetItem && this.$route.path !== targetItem.path) {
        this.$router.push(targetItem.path);
      }
    },
    handleMenuItemClick(item) {
      this.$router.push(item.path);
      this.activeMenu = item.index;
    }
  },
  mounted() {

    const allItems = this.menuData.flatMap(menu => menu.children?.map(child => ({ ...child, parentIndex: menu.index })));
    console.log(this.menuData, 'this.menuData');
    const current = allItems.find(item => item.path === this.$route.path);
    this.activeMenu = current ? current.index : '';
    this.defaultOpeneds = current ? [current.parentIndex] : [];
    // this.routerList = this.$router.options.router;//配置路由
    // console.log(this.$route.path, this.$router.options.router, 'this.$route.path===');
    // // 初始化时设置默认激活的菜单项
    // this.activeMenu = this.$route.path;
  }
}
</script>
<style lang="scss" scoped>
.menu-collapse-leave-active,
.menu-collapse-enter-active {
  transition: all 0.7s;
}

.menu-collapse-enter,
.menu-collapse-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.el-menu--vertical {
  .el-menu-item {
    height: 40px;
    line-height: 40px;
  }

  .el-menu-item.is-active {
    font-weight: bold;
  }
}

// .slide-fade-enter-active, .slide-fade-leave-active {
//   transition: all 1.5s ease;
// }
// .slide-fade-enter, .slide-fade-leave-to {
//   opacity: 0;
//   transition: all 1.5s ease;
//   transform: translateX(-10px);
// }

// .slide-enter-active, .slide-leave-active {
//   transition: all 1.5s ease;
//   max-height: 200px;
// }

/* 添加收起时的过渡效果 */
// .el-menu--collapse .el-submenu .el-menu {
//   transition: all 0.3s ease-in-out;
//   overflow: hidden;
// }

// .el-menu--collapse .el-submenu > .el-menu {
//   display: none;
//   opacity: 0;
//   transform: translateY(-10px);
// }

// .el-menu:not(.el-menu--collapse) .el-submenu > .el-menu {
//   transition: all 0.3s ease-in-out;
//   opacity: 1;
//   transform: translateY(0);
// }

// .slide-enter, .slide-leave-to {
//   opacity: 0;
//   max-height: 0;
// }
.title_img {
  width: 16px;
  margin-right: 4px;
}

.title_text {
  margin-left: 4px;
  font-size: 12px;
  font-weight: bold;
  display: block;

}

.el-menu--collapse .title_text {
  display: none;
}

.el-menu--collapse ::v-deep .el-submenu__icon-arrow {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 158px;
  min-width: 158px;
  min-height: calc(100vh - 62px);
  overflow-y: auto;
}

.el-menu-item {
  padding: 0 22px;
  font-size: 12px;
}

.menu-top {
  background: #FFFFFF;
  box-sizing: border-box;
  /* middle/middle_line_1 */
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: #DFE2E6;
  padding: 15px 0px;
  margin: 0 22px;
  display: flex;
  font-size: 14px;
  color: #1E2226;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.08em;
  justify-content: space-between;
  align-items: center;

  img {
    width: 14px;
    height: 14px;

  }
}

::v-deep .el-submenu {
  // width: 16px;
  font-size: 12px;
}

::v-deep .el-submenu .el-menu-item {
  min-width: 138px;
  width: 100%;
}

::v-deep .el-submenu__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

::v-deep .el-submenu__title:hover {
  background-color: transparent;
  // cursor: not-allowed;
}

::v-deep .el-submenu__title .el-submenu__icon-arrow.el-icon-arrow-down {
  // display: none;
}

::v-deep .el-submenu .el-menu-item {
  padding: 0 22px;
  display: flex;
  justify-content: flex-start;
}

::v-deep .el-submenu .el-menu-item {
  height: 36px;
}

::v-deep.el-submenu .el-menu-item {
  height: 36px;
  line-height: 36px;
  color: #8A9099;
  letter-spacing: 0.08em;
}

::v-deep .el-menu-item:hover {
  background: #F6F7FA;
}

::v-deep .el-menu-item.is-active {
  color: #006AFF;
  font-weight: bold;
}

// .el-submenu .el-menu {
//   transition: all 0.3s ease;
// }

// .el-menu--collapse .el-submenu > .el-menu {
//   display: block !important;
//   overflow: hidden;
//   transition: all 0.3s ease;
//   opacity: 0;
//   height: 0;
//   transform: translateY(-10px);
// }

// .el-menu--collapse .el-submenu.is-opened > .el-menu {
//   opacity: 0;
//   height: 0;
// }</style>