<template>
  <div style="height: 1.5rem">
    <div class="h-navbar">
      <div class="container">
        <div class="left">
          <slot name="left">
            <h-img
              type="local"
              class="back"
              src="base/fanhui.png"
              @click="goBack"
            />
          </slot>
        </div>
        <div class="cetner">
          <slot name="title">{{ title }}</slot>
        </div>
        <div class="right">
          <slot name="right">
            <h-img
              type="local"
              class="home"
              src="base/home.png"
              @click="goHome"
            />
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  title: { type: String, default: "", required: false },
  handleBack: { type: Function, required: false },
  handleGoHome: { type: Function, required: false },
});
const goBack = () => {
  if (props.handleBack && typeof props.handleBack == "function") {
    props.handleBack();
    return;
  }
  router.back();
};
const goHome = () => {
  if (props.handleGoHome && typeof props.handleGoHome == "function") {
    props.handleGoHome();
    return;
  }
  router.replace("/");
};
</script>

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