<template>
  <view class="top-nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
    <view class="nav-content">
      <view class="nav-left" @click="goBack">
        <image
          class="back-icon"
          src="@/static/back.png"
          mode="aspectFit"
        ></image>
      </view>
      <view class="nav-center">
        <slot name="title">
          <text class="nav-title">{{ title }}</text>
        </slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

// Props
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  showBack: {
    type: Boolean,
    default: true,
  },
});

// Emits
const emit = defineEmits(["back"]);

// 状态栏高度
const statusBarHeight = ref(0);

// 获取系统信息
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 44;
});

// 返回上一页
const goBack = () => {
  if (props.showBack) {
    emit("back");
    uni.navigateBack({
      delta: 1,
    });
  }
};
</script>

<style scoped>
@import "./styles/index.scss";
</style>