<template>
  <div id="app">
    <van-nav-bar
      id="nav-bar"
      v-if="navBar.show"
      :left-arrow="navBar.leftArrow"
      @click-left="leftClick"
      :right-text="navBar.rightText"
      :left-text="navBar.leftText"
      @click-right="rightClick"
      :fixed="navBar.fixed"
      :title="navBar.title">
      <template #right>
        <van-icon style="color:#1989fa" v-if="navBar.rightIcon" name="search" size="18" />
      </template>
      <!-- <img v-if="navBar.rightIcon" :src="navBar.rightIcon" slot="right" class="right-icon"/> -->
    </van-nav-bar>
    <div v-if="navBar.show && navBar.fixed" class="app-nav-space"></div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    navBar() {
      return this.$store.state.navBar
    }
  },
  mounted() {
    this.$store.commit('setNavBar', {
      leftClick: () => {
        this.$router.back()
      }
    })
  },
  methods: {
    leftClick() {
      this.navBar.leftClick()
    },
    rightClick() {
      this.navBar.rightClick()
    }
  }
}
</script>
<style lang="scss">
  html,body{
    width: 100%;
    height: 100%;
    background: $bc2;
  }
  #app{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    #nav-bar{
      background-color: white;
      .van-nav-bar__title{
        color: $txtBlack;
        font-weight: 600;
        font-size: 15px;
      }
      .van-icon{
        // color: $arrowC;
        font-size: 22px;
      }
      .van-nav-bar__text{
        //color: $txtGray;
        //font-size: 12px;
        color: $txtBlack;
        font-weight: 600;
        font-size: 15px;
      }
    }
    .app-nav-space {
      height: 44px;
    }
    .right-icon {
      width: 30px;
      height: 30px;
      vertical-align: middle;
    }
  }
</style>
