<template>
  <view class="nav-bar" :class="{ 'nav-bar--transparent': transparent }">
    <view class="nav-bar__body">
      <view class="nav-bar__left">
        <view v-if="showBack" class="nav-back-btn" hover-class="nav-back-btn--hover" @click="handleBack">
          <AppIcon name="chevron-left" :size="22" color="#333333" />
        </view>
      </view>
      <text class="nav-bar__title">{{ title }}</text>
      <view class="nav-bar__right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  title: { type: String, default: '' },
  showBack: { type: Boolean, default: true },
  transparent: { type: Boolean, default: false }
})

const emit = defineEmits(['back'])

const handleBack = () => {
  // emit._events check for compatibility
  const listeners = emit._events || {}
  if (listeners.back) {
    emit('back')
  } else {
    uni.navigateBack({ fail: () => uni.switchTab({ url: '/pages/index/index' }) })
  }
}
</script>

<style scoped>
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1rpx solid #F0F0F0;
}

.nav-bar--transparent {
  background: transparent;
  border-bottom: none;
}

.nav-bar__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 24rpx;
  padding-top: calc(24rpx + var(--status-bar-height, 0px));
}

.nav-bar__left,
.nav-bar__right {
  width: 100rpx;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-bar__left {
  justify-content: flex-start;
}

.nav-bar__right {
  justify-content: flex-end;
}

.nav-back-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  margin-left: -8rpx;
}

.nav-back-btn--hover {
  background: rgba(0, 0, 0, 0.06);
}

.nav-bar__title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: 600;
  color: #1A1A1A;
  letter-spacing: 1rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
</style>
