<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"
  >
  </van-nav-bar>
</template>

<script setup name="headerPage">
import { useRouter } from 'vue-router';
import bus from '@/utils/utils';
import { checkUserSystem } from '@/utils/compatible.js';
import MapIcon from '@/assets/images/gisMap/mapIcon.png';

const allData = reactive({
  title: '',
  ifBack: true, //返回箭头是否显示
  ifShowHead: false, //整个头部bar是否显示
  ifSearch: false, //筛选icon
  ifAdd: false, //新增icon
  isMap: false,
  barTop: '30Px',
});
// 动态获取 meta
const router = useRouter();
const useRouterCurrent = reactive(router);
watch(useRouterCurrent, (newValue) => {
  const { title, ifBack, ifShowHead, ifSearch, ifAdd, isMap } = 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不显示
  allData.isMap = isMap == undefined ? false : isMap; //不设置默认false不显示
});
// 返回
const backTo = () => {
  router.go(-1);
};
// 点击筛选
const searchContent = () => {
  bus.emit('goSearchRight', true);
};
onMounted(() => {
  // 安卓，ios顶部适配
  let sys = checkUserSystem();
  if (sys == 'Android') {
    allData.barTop = '30Px';
  } 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>