<!--
 * @Date: 2024-10-10 10:37:16
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-21 13:37:46
 * @FilePath: /hager/src/components/hagerMenu.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-menu-page">
    <div class="menu-wrapper">
      <div class="menu-title" @click="toggleTop()">产品中心</div>
      <div>
        <i
          v-if="isToggle"
          class="el-icon-arrow-up"
          style="font-size: 1.25rem; color: #F56400;"
          @click="toggleTop()"
        ></i>
        <i @click="toggleTop()" v-else class="el-icon-arrow-down" style="font-size: 1.25rem; color: #F56400;"></i>
      </div>
    </div>
    <div v-if="isToggle" 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; color: #F56400;"
            ></i>
            <i v-else class="el-icon-arrow-down" style="font-size: 1.25rem; color: #F56400;"></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; color: #F56400;"
                ></i>
                <i v-else class="el-icon-arrow-down" style="font-size: 1.25rem; color: #F56400;"></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 class="menu-wrapper" @click="goTo('/solution/index')">
      <div class="menu-title">解决方案</div>
    </div>
    <div class="menu-wrapper" @click="goTo('/news')">
      <div class="menu-title">新闻中心</div>
    </div>
    <div class="menu-wrapper" @click="goTo('/recruit')">
      <div class="menu-title">招聘信息</div>
    </div>
    <div class="menu-wrapper" @click="goTo('/about')">
      <div class="menu-title">关于海格</div>
    </div>
    <div class="menu-wrapper" @click="goTo('/concat')">
      <div class="menu-title">联系我们</div>
    </div>
    <div class="menu-wrapper" @click="goTo('/')">
      <div class="menu-title">首页</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: "接触器及热过载继电器" },
              ],
            },
          ],
        },
      ],
      isToggle: false,
      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,
        },
      });
    },
    //
    toggleTop(v) {
      this.isToggle = !this.isToggle;
    },
    goTo (path) { // 跳转页面
      this.$emit("close");
      if (this.$route.path !== path) { // 不能重复点击当前页面
        this.$router.push({
          path,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.hager-menu-page {
  height: 100%;
  overflow: scroll;
  background-color: #FFF;
  .menu-wrapper {
    display: flex;
    align-items: center;
    padding: 1rem;
    justify-content: space-between;
    // padding-bottom: 0;
    border-bottom: 1px solid #F9F9F9;
    .menu-title {
      color: @secondary-color;
    }
  }
  .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 {
    padding-left: 20px;
    background-color: #F7F7F7;
  }

  .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>