<template>
  <div class="add-menu-container" v-click-outside="closeMenu">
    <button class="add-btn" :class="{ active: isShow }" @click="toggleMenu">
      <span class="plus-icon">+</span>
    </button>

    <Transition name="pop">
      <div v-if="isShow" class="menu-card">
        <div class="arrow"></div>
        
        <div class="menu-list">
          <div class="menu-item" v-for="(item, index) in props.menuList" :key="index" @click="handleAction(item.action)">
            <i class="icon" v-html="item.icon"></i>
            <span>{{item.text}}</span>
        </div>
      </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref, defineProps, onMounted, defineEmits } from 'vue';

const props = defineProps({
    menuList: {
        type: Object,
        required: true
    }
})

const emit = defineEmits(['actionActive'])

const isShow = ref(false);

const toggleMenu = () => {
  isShow.value = !isShow.value;
};

const closeMenu = () => {
  isShow.value = false;
};

const handleAction = (type) => {
    emit('actionActive', type);
    isShow.value = false; // 点击后关闭
  
};

/**
 * 自定义指令：点击外部区域关闭菜单
 * 也可以使用第三方库如 @vueuse/core 的 onClickOutside
 */
const vClickOutside = {
  mounted(el, binding) {
    el.clickOutsideEvent = (event) => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value();
      }
    };
    document.addEventListener('click', el.clickOutsideEvent);
  },
  unmounted(el) {
    document.removeEventListener('click', el.clickOutsideEvent);
  },
};
</script>

<style scoped>
.add-menu-container {
  position: relative;
  display: inline-block;
}

/* 加号按钮样式 */
.add-btn {
  width: 32px;
  height: 32px;
  background: #dbdbdb;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.add-btn:hover {
  background:  #cccbcb;
}
/*
.add-btn.active {
  background: #007aff;
  color: white;
}
  */

.plus-icon {
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
}

/* 弹出卡片容器 */
.menu-card {
  position: absolute;
  top: 45px;
  right: 0;
  width: 100px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 100;
  transform-origin: top right;
}

/* 小三角 */
.arrow {
  position: absolute;
  top: -6px;
  right: 12px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
}

/* 列表样式 */
.menu-list {
  padding: 6px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 5px 5px;
  cursor: pointer;
  transition: background 0.2s;
  color: #333;
}

.menu-item:hover {
  background: #f5f5f5;
}

.menu-item:first-child:hover {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.menu-item:last-child:hover {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.icon {
  margin-right: 5px;
  font-size: 12px;
  display: flex;
  align-items: center;
  /*width: 20px;*/
}

.menu-item span {
  font-size: 12px;
  /*font-weight: 400;*/
}

/* 弹出动画 */
.pop-enter-active, .pop-leave-active {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pop-enter-from, .pop-leave-to {
  opacity: 0;
  transform: scale(0.9) translateY(-10px);
}
</style>