<script setup>
  import { navigateBack } from '@/utils/router'
  import { useSlots } from 'vue'

  const slots = useSlots()

  const props = defineProps({
    title: { type: String, default: '' },
    /** 是否带背景 */
    isTopBg: { type: Boolean, default: false },
    /** 是否有占位符 */
    isPlaceholder: { type: Boolean, default: false }
  })

  // 判断是否传入了名为 "back" 的插槽
  const hasBackSlot = !!slots.back

  const onBack = () => {
    navigateBack()
  }
</script>

<template>
  <view>
    <view :class="{ 'nav-bar_bg': props.isTopBg }" class="nav-bar">
      <view class="status_bar">
        <!-- 这里是状态栏 -->
      </view>
      <view class="nav-bar-box">
        <!-- 左侧插槽 -->
        <view @click="onBack">
          <image
            v-if="!hasBackSlot"
            src="/static/images/login/back.png"
            mode="heightFix"
            class="top_left-icon"
          ></image>
          <slot name="back"></slot>
        </view>

        <!-- 中间标题 -->
        <view v-if="props.title" class="nav-bar-title">
          <text>{{ props.title }}</text>
        </view>

        <!-- 右侧插槽 -->
        <view>
          <slot name="right"></slot>
        </view>
      </view>
    </view>

    <view v-if="props.isPlaceholder" class="nav-bar-placeholder"></view>
  </view>
</template>

<style lang="scss" scoped>
  .nav-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
  }

  .nav-bar_bg {
    background: #ffffff;
  }

  .top_left-icon {
    height: 36rpx;
  }

  .status_bar {
    height: var(--status-bar-height);
    width: 100%;
  }

  .nav-bar-box {
    padding: 0 36rpx;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .nav-bar-title {
      position: absolute;
      width: calc(100% - 72rpx);
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
      text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }

  .nav-bar-placeholder {
    height: calc(var(--status-bar-height) + 44px);
  }
</style>
