<template>
  <section class="kf-pub-menu" @mousedown="menuClick" ref="kfPubMenu">
    <span class="kf-pub-menu-name">
      <slot></slot>
    </span>
    <div class="kf-pub-menu-dropdown pub-dropdown1" :style="dropdownStyle" :dropdown="isShowMenu" v-show="isShowMenu">
      <span class="menu-item" :title="menu.name" @mousedown="menuChange(menu)" v-for="(menu,index) in props.menus" :key="'pub-' + index" @mouseenter="menuMouseenter(menu)">
        {{menu.name}}
        <div class="kf-pub-menu-dropdown pub-dropdown2" v-show="isShowMenu2 && menu?.children?.length" :style="{width: `${props.width}px`,left:`${props.width}px`}">
          <span class="menu-item" @mousedown.stop="menuChange2(menu,menu2)" v-for="(menu2,index) in menu.children" :key="'pub-menu2' + index">
            {{menu2.name}}
          </span>
        </div>
      </span>
    </div>
  </section>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from "vue";

let isShowMenu = ref(false),
  isShowMenu2 = ref(false),
  kfPubMenu = ref(null);

const emits = defineEmits(["click"]);

const props = defineProps({
  width: { type: [String, Number], default: () => 100 },
  menus: {
    type: Array,
    default: () => [
      { name: "Menu0", value: "" },
      { name: "Menu1", value: "" },
      { name: "Menu2", value: "" },
      { name: "Menu3", value: "" },
    ],
  },
  menuPos: {
    type: Object,
    default: () => ({ left: 0, top: 0 }),
  },
  dropdownBg:{
    type: String,
    default: () => "#0d0d0d"
  },
  value: {
    type: [String,Number,Object]
  }
});

const menuChange = (menu) => {
  emits("click", menu);
};

const menuChange2 = (menu1,menu2) => {
  emits("click", [menu1.value,menu2.value]);
  menuClick();
}

const menuClick = (e) => {
  isShowMenu.value = !isShowMenu.value;
};

const menuMouseenter = (menu) => {
//   console.log(menu);
  if (menu.children && menu.children.length > 0) {
    isShowMenu2.value = true;
  }else{
    isShowMenu2.value = false;
  }
};

const closeMenu = (e) => {
  if (kfPubMenu.value.contains(e.target)) return;
  isShowMenu.value = false;
  isShowMenu2.value = false;
};

const dropdownStyle = computed(() => {
  let style = {width: `${props.width}px`,
    backgroundColor: props.dropdownBg
  };
  return style;
})

watch(() => props.menuPos.left, (newVal) => {
  isShowMenu.value = true;
  kfPubMenu.value.style.left = props.menuPos.left + "px";
  kfPubMenu.value.style.top = props.menuPos.top + "px";
});

onMounted(() => {
  window.addEventListener("mousedown", closeMenu);
});

onUnmounted(() => {
  window.removeEventListener("mousedown", closeMenu);
});
</script>

<style lang="scss" scoped>
.kf-pub-menu {
  position: absolute;
  //   z-index: 1000;
  .kf-pub-menu-name {
    color: rgba(255, 255, 255, 0.5);
    font-family: Alibaba PuHuiTi;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    // padding: 3px 8px;
    &:hover {
      color: #fff;
    }
  }
  .kf-pub-menu-dropdown {
    position: absolute;
    display: flex;
    align-items: center;
    // gap: 5px;
    padding: 5px 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid rgba(55, 55, 55, 0.8);
    margin-top: 5px;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
    transform-origin: top;
    animation: visible-dropdown 0.2s 0s cubic-bezier(0.34, 0.69, 0.1, 1);
    z-index: 1;
    .menu-item {
      display: inline-block;
      width: 100%;
      padding: 4px 0 4px 10px;
      border-radius: 2px;
      position: relative;
      z-index: 0;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      &:hover {
        color: #fff;
      }
      &:hover:after {
        width: 100%;
      }
      &::after {
        content: "";
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
        width: 0;
        background: rgba(1, 133, 255, 0.7);
        border-radius: 2px;
        z-index: -1;
      }
    }
  }
  .kf-pub-menu-dropdown[dropdown=true]{
    animation: visible-dropdown 0.2s 0s cubic-bezier(0.34, 0.69, 0.1, 1);
  }
   .kf-pub-menu-dropdown[dropdown=false]{
    animation: visible-dropdown 0.2s 0s cubic-bezier(0.34, 0.69, 0.1, 1) reverse;
  }
  .pub-dropdown1{
    // position: relative;
  }
  .pub-dropdown2{
    position: absolute;
    bottom: -10px;
    max-height: 300px;
    overflow-y: auto;
  }
}
@keyframes visible-dropdown {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
</style>