<template>
  <nut-navbar
    ref="mNavBarRef"
    placeholder
    :bordered="false"
    :safe-area-inset-top="true"
    :custom-style="`background:
    ${bgColor}`"
    custom-class="m-navbar"
    v-bind="$attrs"
  >
    <template #left>
      <view v-if="!notBack" class="capsule-container">
        <text class="icon i-ep-arrow-left" @click="goBack" />
        <text class="icon i-ep-home-filled" @click="goHome" />
      </view>
    </template>
    <template #content>
      <view class="m-navbar-title">{{ title }}</view>
    </template>
    <template #right>
      <slot name="right">
        <view v-if="rightMenu && rightMenu.length > 0" class="right-box">
          <view class="flex h-full items-center">
            <view class="i-ep-more-filled wh-24px cursor-pointer" @click="triggerMore" />
          </view>
          <view v-if="showMore" class="overlay" @click="() => (showMore = false)" />
          <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 class="menu-item-text">{{ menu.text }}</view>
            </view>
          </view>
        </view>
      </slot>
    </template>
  </nut-navbar>
</template>

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

  defineOptions({
    name: 'MNavBar',
    // 小程序开启覆盖组件库样式
    options: {
      styleIsolation: 'shared',
      // 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签
      virtualHost: true,
    },
  })

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

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

  const goBack = () => {
    uni.navigateBack()
  }

  const goHome = () => {
    uni.reLaunch({ url: '/pages/index/index' })
  }

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

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

<style scoped lang="scss">
  :deep(.m-navbar) {
    box-shadow: none !important;
    .nut-navbar__left {
      @apply h-full;
    }
    .capsule-container {
      @apply h-32px relative flex items-center;
      &::before {
        @apply rounded-32px top-0px left-0px wh-full absolute;
        content: '';
        box-sizing: border-box;
        border: 0.0625rem solid #e7e7e7;
      }
      &::after {
        @apply left-50% top-50% w-1px absolute block;
        content: '';
        transform: translateY(-50%);
        height: 1.125rem;
        background: #e7e7e7;
      }
      .icon {
        @apply text-18px w-40px text-color-1;
      }
    }
    .m-navbar-title {
      @apply text-14px text-color-1;
    }
    .right-box {
      @apply text-color-1 relative z-1 w-full;
      .overlay {
        @apply inset-0px fixed opacity-100 duration-300;
        background: rgba(0, 0, 0, 0.65);
      }
      .menu-box {
        @apply right-6px gap-6px rounded-6px bg-bg-card fixed z-10 flex w-auto flex-col whitespace-nowrap;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 20%);
        .menu-item {
          @apply gap-8px px-16px py-8px flex h-full flex-1 items-center text-left;
          .menu-item-icon {
            @apply wh-30px text-color-1;
          }
          .menu-item-text {
            @apply text-color-1 w-full text-left;
          }
        }
        .menu-item-hover {
          @apply bg-bg-primary rounded-6px;
        }
      }
    }
  }
</style>
