<template>
	<uni-nav-bar :backgroundColor="navBgColor" class="nav-bar" :border="false" :title="title" fixed="true" >
		<template v-slot:left>
			<slot name="left">
				<view :class="[type+'LeftTitle']"  v-if="type=='ios'">
					编辑
				</view>
				<view :class="[type+'LeftTitle']"  v-else-if="type=='vivo'">
					拨号
				</view>
				<view :class="[type+'LeftTitle']"  v-else-if="type=='oppo'">
					通话
				</view>
				<view :class="[type+'LeftTitle']"  v-else-if="type=='huawei'">
					电话
				</view>
			</slot>
		</template>
		<view class="nav-bar-title " :class="['nav-bar-title-'+type]">
			<slot>
				<view class="iosBox" v-if="type=='ios'">
					<view class="btn active">
						全部来电
					</view>
					<view class="btn">
						未接来电
					</view>
				</view>
				<view class="title" v-else-if="type=='xiaomi'" :style="{opacity: navOpacity}">
					通话
				</view>
			</slot>
		</view>
		<template v-slot:right>
			<slot name="right">
				<image v-if="type!='ios'" class="rightImg" :class="['rightImg_'+type]" src="/static/image/call/xiaomiNavRightImg.png"></image>
			</slot>
		</template>
	</uni-nav-bar>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		toRefs,
		watch
	} from 'vue'

	const topPopup = ref()

	// 定义组件属性
	const props = defineProps({
		bgColor: {
			type: String,
			default: '#fff'
		},
		textColor: {
			type: String,
			default: '#000'
		},
		title: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'ios'
		},
		scrollTop:{
			type: Number,
			default: 0
		}
	})

	const data = reactive({
		statusBarHeight: 0,
		showTipLayer: true,
		navOpacity: 0, // 导航栏透明度
		navBgColor: props.bgColor // 导航栏背景色
	})

	let {
		showTipLayer,
		navOpacity,
		navBgColor
	} = toRefs(data)

	// 监听 scrollTop 变化
	watch(() => props.scrollTop, (newValue, oldValue) => {
		console.log('scrollTop changed:', newValue);
		// 根据 scrollTop 的值计算导航栏透明度
		if (newValue > 0) {
			// 当 scrollTop 大于 0 时，透明度逐渐增加
			navOpacity.value = Math.min(1, newValue / 100);
			// 可以根据需要调整背景色
			// navBgColor.value = `rgba(255, 255, 255, ${navOpacity.value})`;
		} else {
			// 当 scrollTop 为 0 时，透明度为 1
			navOpacity.value = 0;
			// navBgColor.value = props.bgColor;
		}
	});

	onMounted(() => {
	})
</script>

<style scoped lang="scss">
	.iosLeftTitle {
		font-weight: 400;
		font-size: 16px;
		color: #018AE0;
	}
	.nav-bar-title-xiaomi {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		font-weight: bold;
		font-size: 18px;
		color: #1A1A1A;
	}
	.nav-bar-title-ios {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.iosBox {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 145px;
			height: 30px;
			background: #EEEEEE;
			border-radius: 8px 8px 8px 8px;
			.btn {
				font-size: 12px;
				color: #1A1A1A;
				width: 69px;
				height: 26px;
				text-align: center;
				line-height: 26px;
			}
			.active {
				background: #FFFFFF;
				box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
				border-radius: 6px 6px 6px 6px;
			}
		}
	}
	.rightImg_xiaomi{
		width: 20px;
		height: 20px;
	}
</style>