<!--
 * @Author: wjc
 * @Date: 2024-07-03 10:35:44
 * @LastEditors: wjc
 * @LastEditTime: 2024-07-04 15:24:50
 * @Description: 
-->
<template>
  <up-navbar
    ref="mNavBarRef"
    v-bind="$attrs"
    :title="title"
    placeholder
    :bg-color="bgColor"
    auto-back
  >
    <template #right>
      <slot name="right">
        <view v-if="rightMenu" class="right-box">
          <view class="i-ep-more-filled wh-24px cursor-pointer" @click="triggerMore"></view>
          <view v-if="showMore" class="overlay" @click="() => (showMore = false)"></view>
          <view v-if="showMore" class="menu-box">
            <view
              v-for="menu in rightMenu"
              :key="menu.command"
              class="menu-item"
              hover-class="menu-item-hover"
              @click="handleMenuClick(menu.command)"
            >
              <view v-if="menu.icon" :class="menu.icon" class="menu-item-icon"></view>
              <view class="menu-item-text">{{ menu.text }}</view>
            </view>
          </view>
        </view>
      </slot>
    </template>
  </up-navbar>
</template>

<script setup lang="ts">
  export interface RightMenuItem {
    icon?: string
    text: string
    command: string
  }

  defineOptions({ name: 'MNavBar' })

  withDefaults(
    defineProps<{
      title?: string
      placeholder?: boolean
      bgColor?: string
      rightMenu?: RightMenuItem[]
    }>(),
    { boolean: true, bgColor: 'transparent' }
  )
  const emits = defineEmits<{
    (e: 'right-click', command: string): void
  }>()

  const mNavBarRef = ref()
  const showMore = ref(false)

  const triggerMore = () => {
    showMore.value = !showMore.value
  }

  const handleMenuClick = (command: string) => {
    emits('right-click', command)
    showMore.value = false
  }
</script>

<script lang="ts">
  export default {
    name: 'MNavBar',
  }
</script>

<style scoped lang="scss">
  .right-box {
    @apply relative w-full z-1;
    .overlay {
      @apply fixed inset-0px opacity-100;
      background: rgba(0, 0, 0, 0);
    }
    .menu-box {
      @apply absolute right-0px z-10 flex flex-col gap-6px w-auto whitespace-nowrap rounded-6px bg-white;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 20%);
      .menu-item {
        @apply flex items-center gap-8px h-full flex-1 px-16px py-8px text-left;
        .menu-item-icon {
          @apply wh-30px;
        }
        .menu-item-text {
          @apply w-full text-left;
        }
      }
      .menu-item-hover {
        @apply bg-gray-100;
      }
    }
  }
</style>
