<template>
  <div class="top-nav" :style="{height: height + 'px'}">
    <van-nav-bar :style="{paddingTop: paddingTop+'px'}"
                 :title="title"
                 :left-text="leftText"
                 @click-left="handleBack"
                 @click-right="handleQuery"
                 fixed>
      <template #left>
        <van-icon :name="leftIcon"
                  size="18" />
      </template>
      <template #right>
        <van-icon v-if="showQuery"
                  name="search"
                  size="18" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  name: 'top-nav',
  props: {
    height: {
      type: String,
      default: ''
    },
    leftText: { // 左边文字
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '列表'
    },
    leftIcon: {
      type: String,
      default: 'arrow-left'
    },
    showQuery: { // 显示搜索图标
      type: Boolean,
      default: true
    },
    backUrl: { // 返回的地址
      type: String,
      default: ''
    },
    backFunc: { // 自定义返回函数
      type: Function,
      default: null
    }
  },
  data () {
    return {
      paddingTop: localStorage.getItem('paddingTop')
    }
  },
  mounted () {
    // let navBar = document.querySelector('.van-nav-bar');
    // let paddingTop = localStorage.getItem('paddingTop');
    // navBar.style.paddingTop = paddingTop ? paddingTop + 'px' : '0px';
  },
  methods: {
    handleBack () {
      if (this.backUrl) {
        this.$router.push(this.backUrl)
      } else if (typeof this.backFunc === 'function') { // 自定义函数返回
        this.backFunc()
      } else {
        window.history.back();
      }
    },
    handleQuery () {
      this.$emit('query') // 触发自定义查询事件
    }
  }
}
</script>

<style type="text/css"  lang="scss">
.top-nav {
  .van-nav-bar {
    line-height: 82px;
    background-color: #008cee;
    .van-nav-bar__content {
      height: 82px;
      color: #fff;
      top: 0px;
      margin-top: 0px;
      .van-nav-bar__title {
        color: #fff;
        font-size: 32px;
      }
    }
    .van-nav-bar__arrow {
      font-size: 36px;
    }
    .van-icon,
    .van-nav-bar__text {
      color: #fff;
    }
  }
}
</style>
