<template>
  <view class="NavBar">
   <!-- <u-navbar
        :title="title"
        :autoBack="true"
    >
    </u-navbar> -->
	<uni-nav-bar shadow :left-icon="left" :title="title" color="#fff" :border='border' @clickLeft="handleBack" backgroundColor="#6200ee" :left-width="0" :right-width="160">
    <template slot="right">
      <view class="nav-right-icons">
        <view v-if="extraRight" class="nav-right-icon" @click="$emit('clickExtraRight')">
          <uni-icons :type="extraRight" size="28" color="#fff" />
        </view>
        <view v-if="right" class="nav-right-icon" style="margin-left:12rpx" @click="$emit('clickRight')">
          <uni-icons :type="right" size="28" color="#fff" />
        </view>
      </view>
    </template>
  </uni-nav-bar>
  </view>
</template>

<script>
  export default {
    name:"NavBar",
    data() {
      return {
        
      };
    },
    props: {
      title: {
        type: String,
        default: ''
      },
	  left: {
		 type: String,
		 default: 'left' 
	  },
    right: {
		 type: String,
		 default: '' 
	  },
    extraRight: {
      type: String,
      default: ''
    },
	  border: {
		 type: Boolean,
		 default: false 
	  },
    },
	methods:{
	  handleBack() {
		uni.navigateBack();
	  },
	},
  }
</script>

<style lang="scss">
.NavBar {
  ::v-deep .uni-navbar__header {
    height:60px !important; 
  }
  ::v-deep .uni-navbar__header-container-inner {
    justify-content: flex-start;
  }
  ::v-deep .uni-nav-bar-text {
    font-size: 20px;
  }
  ::v-deep .uni-navbar__header-btns-left {
    display: none;
  }
  .nav-right-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .nav-right-icon {
    padding: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

</style>
