<template>
  <!-- menu公共组件 -->
  <div class="zzMenuContainer">
    <!-- 面包屑 -->
    <!-- <div id="breadModel" class="bread">
      <ul class="bread_list" v-if="breadInfo.length > 0">
        <li>
          <a @click="toIndex()">首页</a>
        </li>
        <li>&gt;</li>
        <li>
          <a>
            <slot name="breadTitle">{{ breadTitle }}</slot></a
          >
        </li>
        <li>&gt;</li>
        <li><slot name="breadTitle"></slot>{{ breadSubTitle }}</li>
        <li></li>
      </ul>
      <ul class="bread_list" v-else>
        <li>
          <a @click="toIndex()">首页</a>
        </li>
        <li></li>
      </ul>
    </div> -->
    <!-- 导航 -->
    <div class="nav_left">
      <ul
        v-for="(menu, index) in treelists"
        :key="index"
        class="nav_left_list"
        :class="{ active: ulClass == menu.resKey }"
      >
        <div class="nav_left_list_tit" @click="menuFold($event, menu.resKey)">
          <!-- 菜单图标 -->
          <i :class="['iconfont', menu.icon ? menu.icon : 'icon-xiangmu1']"></i>
          <b
            ><slot name="menuResName">{{ menu.resName }}</slot></b
          >
          <em :class="{ up: ulClass == menu.resKey }"></em>
        </div>
        <div v-for="(childMenu, index) in menu.children" :key="index">
          <li
            v-if="childMenu.children.length == 0"
            :class="{ active: menuClass == childMenu.resKey }"
            v-on:click="menuClick(childMenu, menu)"
          >
            <a :id="childMenu.resKey" class="menu_link"
              ><slot name="childMenuResName">{{ childMenu.resName }}</slot></a
            >
          </li>
          <li v-if="childMenu.children.length > 0" @click="menuFold1($event)">
            <a
              :id="childMenu.resKey"
              class="menu_link menu_label menu_label_min"
              ><slot name="childMenuResNam1">{{ childMenu.resName }}</slot></a
            >
          </li>
          <div class="childMenuContentOpen">
            <div v-for="(childMenu1, index) in childMenu.children" :key="index">
              <li
                :class="{ active: menuClass == childMenu1.resKey }"
                v-on:click="menuClick(childMenu1, menu)"
              >
                <el-tooltip
                  effect="dark"
                  :content="childMenu1.resName"
                  placement="right"
                  v-if="childMenu1.resName.length > 11"
                >
                  <a class="menu_link menu_linkChild"
                    ><slot name="childMenu1ResName0">{{
                      childMenu1.resName
                    }}</slot></a
                  >
                </el-tooltip>
                <a
                  :id="childMenu1.resKey"
                  v-else
                  class="menu_link menu_linkChild"
                  ><slot name="childMenu1ResName">{{
                    childMenu1.resName
                  }}</slot></a
                >
              </li>
            </div>
          </div>
        </div>
      </ul>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { menuProps, menuEmits } from "./menu";
import axiosHttp from "../../../utils/axiosHttp.js";

defineOptions({
  name: "ZMenu",
});

// define 组件参数
const props = defineProps(menuProps);
// define 组件回调事件
const emits = defineEmits(menuEmits);
//面包屑内容
let breadInfo = ref("");
//面包屑父标题
let breadTitle = ref("");
//面包屑子标题
let breadSubTitle = ref("");
//面包屑箭头
let breadArrow = ref("");

let ulClass = ref("");
let menuClass = ref("");
//路由跳转事件
const menuClick = (curMenu: any, parentObj: any): void => {
  menuClass.value = curMenu.resKey;
  //面包屑父标题
  breadTitle.value = parentObj.resName;
  //面包屑子标题
  breadSubTitle.value = curMenu.resName;
  //面包屑内容
  breadInfo.value = parentObj.resName;
  emits("handleMenuClick", curMenu.resUrl);
};
//折叠菜单
const menuFold = (obj: any, key: string) => {
  if (obj) {
    if (obj.currentTarget.parentNode.className == "nav_left_list active") {
      obj.currentTarget.parentNode.className = "nav_left_list";
      ulClass.value = "";
    } else {
      obj.currentTarget.parentNode.className = "nav_left_list active";
      ulClass.value = key;
    }
  }
};
//子菜单折叠
const menuFold1 = (obj: any) => {
  if (obj) {
    if (
      obj.currentTarget.nextElementSibling.className == "childMenuContentOpen"
    ) {
      obj.currentTarget.nextElementSibling.className = "childMenuContentFold";
      obj.currentTarget.childNodes[0].className = "menu_link menu_label";
    } else {
      obj.currentTarget.nextElementSibling.className = "childMenuContentOpen";
      obj.currentTarget.childNodes[0].className =
        "menu_link menu_label menu_label_min";
    }
  }
};
//跳转到首页的事件
const toIndex = (): void => {
  emits("handleToIndex");
};

const resetActiveMenu = (ulClassProp, menuClassPlop): void => {
  console.log(ulClassProp, menuClassPlop);

  // ulClass.value = ulClassProp;
  // menuClass.value = menuClassPlop;
};

defineExpose({
  resetActiveMenu
});
</script>

<style lang="scss" scoped>
@import "../../../public/css/reset.scss";
@import "./css/menu.scss";
@import "../../../public/fonts/css/iconfont.css";
$Color_default_white: #fff;

.nav_left > .nav_left_list .nav_left_list_tit > i {
  float: left;
  font-size: 20px;
  color: v-bind(themeColor);
  margin-right: 10px;
}

.nav_left > .nav_left_list li.active::before {
  content: "";
  position: absolute;
  border-top: 6px solid transparent;
  border-left: 6px solid v-bind(themeColor);
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  right: -11px;
  top: 14px;
}

.nav_left > .nav_left_list li a.menu_label:before,
.nav_left > .nav_left_list li.active a.menu_label:before {
  content: "+";
  width: 13px;
  height: 13px;
  border: 1px solid v-bind(themeColor);
  border-radius: 10px;
  display: inline-block;
  line-height: 12px;
  text-align: center;
  font-size: 14px;
  position: absolute;
  right: 0;
  color: v-bind(themeColor);
  top: 14px;
}
.nav_left > .nav_left_list li a.menu_label_min:before,
.nav_left > .nav_left_list li.active a.menu_label_min:before {
  content: "-";
}
.nav_left > .nav_left_list li.active a {
  color: $Color_default_white;
  background: v-bind(themeColor);
  float: none;
  display: inline-block;
  width: 100%;
  text-align: left;
  height: 33px;
  padding-left: 25%;
  line-height: 33px;
  border-radius: 3px;
  font-size: 12px;
  margin-top: 4px;
  box-sizing: border-box;
}
.nav_left > .nav_left_list .nav_left_list_tit > em {
  position: absolute;
  top: 25px;
  right: 8px;
  width: 0;
  height: 0;
  border-top: 6px solid v-bind(themeColor);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 6px solid transparent;
  transition-duration: 200ms;
}
.nav_left > .nav_left_list .nav_left_list_tit > em.up {
  top: 18px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}
</style>
