<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">
.van-nav-bar {
  .van-icon {
    color: #fff !important;
  }
  .van-nav-bar__title {
    color: #fff !important;
    font-weight: 400;
    font-size: 32px;
  }
}

.headerpage {
  background: linear-gradient(-30deg, #145bf7, #52befe);
}
</style>