<!--
 * @Date: 2024-10-10 10:37:16
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-10 13:58:53
 * @FilePath: /hager/src/components/hagerMenu.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-menu-page">
    <div class="menu">
      <div v-for="(item, index) in menuData" :key="item.id" class="menu-item">
        <!-- 一级菜单 -->
        <div @click="toggleMenu(item.id)" :class="['menu-label', activeMenu === item.id ? 'active' : '']">
          <div>
            <i class="el-icon-s-cooperation"></i>
            {{ item.label }}
          </div>
          <div>
            <i v-if="isActive(item.id)" class="el-icon-arrow-up" style="font-size: 1.25rem;"></i>
            <i v-else class="el-icon-arrow-down" style="font-size: 1.25rem;"></i>
          </div>
        </div>

        <!-- 二级菜单 -->
        <div v-if="isActive(item.id)" class="submenu">
          <div v-for="subItem in item.subItems" :key="subItem.id" class="submenu-item">
            <div class="submenu-label">
              <div @click="goToSub(subItem.id)"> {{ subItem.label }} </div>
              <div @click="toggleSubMenu(subItem.id)">
                <i v-if="isSubActive(subItem.id)" class="el-icon-arrow-up" style="font-size: 1.25rem;"></i>
                <i v-else class="el-icon-arrow-down" style="font-size: 1.25rem;"></i>
              </div>
            </div>

            <!-- 三级菜单 -->
            <div v-if="isSubActive(subItem.id)" class="third-menu">
              <div @click="goToThird(thirdItem.id)" v-for="thirdItem in subItem.subItems" :key="thirdItem.id" class="third-item">
                {{ thirdItem.label }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data() {
    return {
      // 模拟的树形菜单数据
      menuData: [
        {
          id: 1,
          label: '配电产品',
          subItems: [
            {
              id: 11,
              label: '空气断路器1',
              subItems: [
                { id: 111, label: 'HW系列空气断路器' },
                { id: 112, label: 'HW+系列空气断路器' },
                { id: 113, label: 'HW系列空气断路器' },
                { id: 114, label: 'HW+系列空气断路器' },
                { id: 115, label: 'HW系列空气断路器' },
                { id: 116, label: 'HW+系列空气断路器' },
                { id: 117, label: 'HW系列空气断路器' },
                { id: 118, label: 'HW+系列空气断路器' },
                { id: 119, label: 'HW系列空气断路器' },
                { id: 1121, label: 'HW+系列空气断路器' },
                { id: 1117, label: 'HW系列空气断路器' },
                { id: 1127, label: 'HW+系列空气断路器' },
                { id: 1137, label: 'HW系列空气断路器' },
                { id: 1147, label: 'HW+系列空气断路器' },
                { id: 1157, label: 'HW系列空气断路器' },
                { id: 1167, label: 'HW+系列空气断路器' },
                { id: 7117, label: 'HW系列空气断路器' },
                { id: 7118, label: 'HW+系列空气断路器' },
                { id: 7119, label: 'HW系列空气断路器' },
                { id: 71121, label: 'HW+系列空气断路器' },
              ],
            },
            {
              id: 12,
              label: '空气断路器2',
              subItems: [
                { id: 111, label: 'HW系列空气断路器' },
                { id: 112, label: 'HW+系列空气断路器' },
                { id: 113, label: 'HW系列空气断路器' },
                { id: 114, label: 'HW+系列空气断路器' },
                { id: 115, label: 'HW系列空气断路器' },
                { id: 116, label: 'HW+系列空气断路器' },
                { id: 117, label: 'HW系列空气断路器' },
                { id: 118, label: 'HW+系列空气断路器' },
                { id: 119, label: 'HW系列空气断路器' },
                { id: 1121, label: 'HW+系列空气断路器' },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '成套产品',
          subItems: [
            {
              id: 21,
              label: '塑壳断路器',
              subItems: [
                { id: 211, label: '自动转换开关' },
                { id: 212, label: '接触器及热过载继电器' },
                // 更多三级菜单项...
              ],
            },
            // 更多二级菜单项...
          ],
        },
        // 更多一级菜单项...
      ],
      activeMenu: null, // 当前展开的一级菜单ID
      activeSubMenu: null, // 当前展开的二级菜单ID
    };
  },
  mounted () {

  },
  methods: {
    // 切换一级菜单展开状态
    toggleMenu(menuId) {
      if (this.activeMenu === menuId) {
        this.activeMenu = null; // 如果已展开，点击后关闭
        this.activeSubMenu = null; // 同时关闭二级菜单
      } else {
        this.activeMenu = menuId; // 展开新的一级菜单
        this.activeSubMenu = null; // 同时重置二级菜单
      }
    },

    // 切换二级菜单展开状态
    toggleSubMenu(subMenuId) {
      if (this.activeSubMenu === subMenuId) {
        this.activeSubMenu = null; // 如果已展开，点击后关闭
      } else {
        this.activeSubMenu = subMenuId; // 展开新的二级菜单
      }
    },

    // 判断一级菜单是否为激活状态
    isActive(menuId) {
      return this.activeMenu === menuId;
    },

    // 判断二级菜单是否为激活状态
    isSubActive(subMenuId) {
      return this.activeSubMenu === subMenuId;
    },

    goToSub(id) {
      console.warn(id);
      this.$emit('close');
      this.$router.push({
        path: '/product/index',
        query: {
          id: id
        }
      })
    },
    goToThird(id) {
      console.warn(id);
      this.$emit('close');
      this.$router.push({
        path: '/product/detail',
        query: {
          id: id
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.hager-menu-page {
  height: 100%;
  overflow: scroll;
  .menu {
    width: 100%;
  }

  .menu-item {
    cursor: pointer;
  }

  .menu-label {
    font-weight: bold;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &.active {
      background-color: #FFF;
    }
  }

  .submenu {
    margin-left: 20px;
  }

  .submenu-item {
    padding: 5px 0;
    cursor: pointer;
    .submenu-label {
      padding: 0.5rem 1rem;
      padding-bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .third-menu {
    margin-left: 20px;
    // color: #555;
  }

  .third-item {
    margin: 0.6rem 1rem 0.3rem;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 1;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    &:hover {
      color: #EE6D10;
      text-decoration: underline;
    }
  }
}
</style>