<template>
  <van-nav-bar
    safe-area-inset-top
    :style="[{ 'margin-top': allData.barTop }]"
    class="headerpage"
    :title="allData.title"
    left-text=""
    v-if="allData.ifShowHead"
    :left-arrow="allData.ifBack"
    @click-left="backTo"
    @click-right="searchContent"
  >
    <!-- 筛选 -->
    <template #right v-if="allData.ifSearch">
      <van-icon name="search" size="18" />
    </template>
    <!-- 新增 -->
    <template #right v-if="allData.ifAdd">
      <van-icon name="add" size="18" />
    </template>
  </van-nav-bar>
</template>

<script setup name="headerPage">
import { reactive, toRefs, watch, onMounted } from "vue";
import { useRouter } from "vue-router";
import bus from "@/utils/utils";
import { checkUserSystem } from "@/utils/compatible.js";
const allData = reactive({
  title: "",
  ifBack: true, //返回箭头是否显示
  ifShowHead: false, //整个头部bar是否显示
  ifSearch: false, //筛选icon
  ifAdd: false, //新增icon
});
// 动态获取 meta
const router = useRouter();
const useRouterCurrent = reactive(router);
watch(useRouterCurrent, (newValue) => {
  const { title, ifBack, ifShowHead, ifSearch, ifAdd } = newValue.currentRoute.meta;
  allData.title = title;
  allData.ifBack = ifBack == undefined ? true : ifBack; //不设置默认true显示
  allData.ifShowHead = ifShowHead == undefined ? false : ifShowHead; //不设置默认true显示
  allData.ifSearch = ifSearch == undefined ? false : ifSearch; //不设置默认false不显示
  allData.ifAdd = ifAdd == undefined ? false : ifAdd; //不设置默认false不显示
});
// 返回
const backTo = () => {
  router.go(-1);
};
// 点击筛选
const searchContent = () => {
  bus.emit("goSearchRight", true);
};
onMounted(() => {
  // 安卓，ios顶部适配
  let sys = checkUserSystem();
  if (sys == "Android") {
    allData.barTop = "0Px";
  } else {
    allData.barTop = "0Px";
  }
});
</script>
<style lang="less">
.headerpage {
  .van-nav-bar {
    .van-icon {
      color: #333;
    }
    .van-nav-bar__title {
      color: #333;
      font-weight: 400;
      font-size: 32px;
    }
  }
}
</style>