<template>
   <view :style="{ height: navHeight + 'rpx' }">
     <!-- <u-navbar :bgColor="theme == 'light' ? '#000' : 'transparent'"> -->
		<u-navbar :bgColor="thisBack">
         <view :class="[theme == 'light' ? 'u-nav-slot_dark' : 'u-nav-slot_light']" slot="left">
            <u-icon name="arrow-left" size="19" @click="goBack()"
               :color="theme == 'light' ? '#fff' : '#3D3D3D'"></u-icon>
            <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
            <u-icon name="home-fill" size="20" @click="goSwitch()"
               :color="theme == 'light' ? '#fff' : '#3D3D3D'"></u-icon>
         </view>

         <view :class="[theme == 'light' ? 'text-white' : 'text-black', 'text-bold']" slot="center">{{ title }}</view>

      </u-navbar>
   </view>
</template>

<script>

export default {
   // theme: light || dark
   props: ["bgColor", "title", "theme"],
   data() {
      return {
       
         navHeight: 80,
		 thisBack:'',
		 thisColor:''
      }
   },
   onLoad(options) {
	   
   },
   watch: {
	   
      theme(newValue, oldValue) {
		
         if (newValue !== oldValue) {
           switch(this.theme) {
               case 'light':  
                   this.thisBack = '#000';
                   break;
           	case 'white':
           	    this.thisBack = '#E3E8FE';
           	    break;	
           		
           	default :
           	this.thisBack = 'transparent';
           	
           }
         }
      },
   },


   mounted() {
     //this.setNavigationBarColor()
		
		switch(this.theme) {
		    case 'light':  
		        this.thisBack = '#000';
		        break;
			case 'white':
			    this.thisBack = '#E3E8FE';
			    break;	
				
			default :
			this.thisBack = 'transparent';
			
		}
				
      this.getNavHeight()
   },

   
   methods: {
      setNavigationBarColor() {
         let frontColor = this.theme == 'light' ? '#ffffff' : '#3d3d3d';		
         // uni.setNavigationBarColor({ frontColor, backgroundColor: '#3d3d3d' })
		 
		  uni.setNavigationBarColor({ 
			  frontColor: frontColor,
			  backgroundColor: '#3d3d3d'
		  })
      },
      getNavHeight() {		 
		const info = uni.getSystemInfoSync();
		
        this.$emit('getNavHeight', info.statusBarHeight);
      },
    
      goBack() {   
		  
         uni.navigateBack();
      },
      goSwitch() {
		  uni.switchTab({
		  	url:'/pages/index/index'
		  })        
        
      }
   }
}
</script>

<style lang="scss" scoped>
.u-nav-slot_light {
   background-color: #fff;
   @include flex;
   align-items: center;
   justify-content: space-between;
   border: 2rpx solid $u-border-color;
   border-radius: 64rpx;
   padding: 12rpx 24rpx;
   opacity: 0.8;
}

.u-nav-slot_dark {
   background: rgba(0, 0, 0, 0.15);
   @include flex;
   align-items: center;
   justify-content: space-between;
   border: 2rpx solid rgba(255, 255, 255, 0.254);
   border-radius: 64rpx;
   padding: 12rpx 24rpx;
   opacity: 0.8;
}

</style>