<!--
  组件功能：  自定义导航栏包裹	, 基于：   uni-nav-bar 的封装。 
  1. pages.json : "navigationStyle": "custom"
  2. 页面引入该组件。 
  3. 如果背景透明并且需要下滑变默认背景色。 需要在页面实现： onPageScroll函数（可以空函数）， 否则该组件无法正常监听。 
  
  
  示例： 
  
 背景通铺效果 
  <JeepayCustomNavbar :transparent="true" bgDefaultColor='#b6a3a3' title="背景通铺效果" backCtrl="back" ></JeepayCustomNavbar>
  import { onPageScroll } from '@dcloudio/uni-app'
  onPageScroll(() => {})
  
纯色导航条
<JeepayCustomNavbar :transparent="false" bgDefaultColor='#ffaa7f' title="纯色导航条" backCtrl="back"></JeepayCustomNavbar>
			  
自定义左上角 效果
<JeepayCustomNavbar :transparent="true" bgDefaultColor='#ff557f' title="自定义左上角" backCtrl="back">
		  <view> 选择门店（自定义导航条内容） </view>
</JeepayCustomNavbar>

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/18 14:32
-->
<template>
	<view>
		<uni-nav-bar 
		fixed 
		:statusBar="true" 
		:border="false" 
		:height="props.height" 
		:backgroundColor="vdata.backgroundColor" 
		leftWidth="100%"
		>
		<!-- 使用左侧插槽  100%宽度  -->
		<template #left>
			<view class="left-slot-view">
				<slot>
					<view class="nav-bar-box">
						<view>
							<!-- 左侧按钮 -->
							<uni-icons v-if="props.backCtrl" class="left-back" @click="backFunc" :type="props.backIcon" size="20" :color="props.textColor"></uni-icons>
						</view>
						
						<!-- 标题 -->
						<view class="text" :style="{ color: props.textColor }"> {{props.title}} </view>
					</view>
				</slot>
			 </view>
		</template>
		 </uni-nav-bar>
		 
	</view>
</template>

<script setup>
import { onPageScroll } from '@dcloudio/uni-app'
import { reactive, ref, onMounted } from 'vue'
import ak from '@/commons/utils/ak.js'

// 定义组件参数 
const props = defineProps({
	
  // 标题
  title: { type: String, default: '' },
  
  // 文字颜色
  textColor: { type: String, default: 'black' },
	
  // 返回按钮类型
  backIcon: { type: String, default: 'back' },
	
  // 高度： 默认与uni-nav-bar 保持一致。 
  height: { type: Number, default: 44 },
  
  // 默认背景色： 
  bgDefaultColor: { type: String, default: 'white' },
  
  // 是否默认透明（此时可自定义背景）， 当滑动时将切换为默认背景色。 
  transparent: { type: Boolean, default: false },
  
  // 返回按钮的操作项：  null-无返回按钮， back 返回上一页， pageUrl: '', 也可以是回调函数。 
  backCtrl: [ String, Function ],
  
})

// 只有透明色时 才需要监听
if(props.transparent){
	
	onPageScroll((e) => { // 切换背景颜色 透明 or 主题色。 
		if(e.scrollTop > (props.height / 2.5) ){
			vdata.backgroundColor = props.bgDefaultColor
		}else{
			vdata.backgroundColor = 'transparent'
		}
	})
}

// 颜色 
const vdata = reactive({
	backgroundColor: 'transparent' // 默认透明色
})


onMounted(() => {
	// 当非透明色， 需要改为默认颜色 
	if(!props.transparent){
		vdata.backgroundColor = props.bgDefaultColor + '';
	}
})

// 点击返回按钮， 
function backFunc(){
	
	if(!props.backCtrl){
		return false;
	}
	
	if(typeof props.backCtrl == 'function'){
		return props.backCtrl()
	}
	
	if(props.backCtrl === 'back'){
		return ak.go.back()
	}
}

</script>
<style scoped lang="scss">
	.left-slot-view { 
		display: flex;
		align-items: center;
		width: 100%; 
		height: 100%; 
		line-height: 100%;
		font-size: 33rpx;
		font-weight: 500;
		.nav-bar-box {
			display: flex;
			flex-grow: 1;
			justify-content: space-between;
			.left-back {
				position: absolute;
			}
			&::after {
				content: "";
			}
		}
		
	}
	::v-deep.uni-navbar__header {
		.uni-navbar__header-container,
		.uni-navbar__header-btns-right {
			display: none !important;
		}
	}
</style>