<template>
  <!-- 组件-顶部导航栏 -->
  <div class="almanac-header">
    <div class="header-content pf600 fs16 fc1F2937">
      <img
        class="left-arrow-image"
        src="../../../assets/icon/index/left-arrow.svg"
        @click="toPath()" />
      {{ headerText }}
      <div class="save pf500 fs14 fcDF384C" v-if="headerRight ? true : false">
        {{ headerRight }}
      </div>
    </div>
  </div>
</template>
<script setup>
  import { useRouter } from "vue-router";

  const router = useRouter();
  const props = defineProps(["headerText", "headerRight", "headerRouter"]);

  const toPath = (path) => {
    if (props.headerRouter) {
      router.push(props.headerRouter);
    } else {
      if (path) {
        router.push(path);
      } else {
        router.go(-1);
      }
    }
  };
</script>
<style lang="less" scoped>
  .almanac-header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 48px;
    background: #ffffff;
    overflow: hidden;

    .header-content {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 100%;
      height: 48px;

      .left-arrow-image {
        position: absolute;
        left: 14px;
        top: 16px;
        width: 9px;
        height: 16px;
      }

      .save {
        position: absolute;
        top: 16px;
        right: 16px;
      }
    }
  }
</style>
