<template>
	<view>
		<uni-nav-bar :backgroundColor="navBgColor" class="nav-bar" :border="false" :title="title" fixed="true"
			statusBar="true">
			<template v-slot:left>
				<slot name="left">
					<view :class="[type+'LeftTitle']" :style="{opacity:(type!='huawei'&&type!='oppo'?1: navOpacity)}">
						{{LeftTitle}}
					</view>

				</slot>
			</template>
			<view class="nav-bar-title " :class="['nav-bar-title-'+type]">
				<slot>
					<view class="iosBox" v-if="type=='ios'">
						<view class="btn " :class="{'active':active}" @click.stop="setActive(true)">
							全部来电
						</view>
						<view class="btn" :class="{'active':!active}" @click.stop="setActive(false)">
							未接来电
						</view>
					</view>
					<view class="oppoBox" v-if="type=='oppo'" :style="{opacity: navOpacity?1-navOpacity:1}">
						<view class="btn " :class="{'active':active}" @click.stop="setActive(true)">
							全部
						</view>
						<view class="btn" :class="{'active':!active}" @click.stop="setActive(false)">
							未接
						</view>
					</view>
					<view class="title" v-else-if="type=='xiaomi'" :style="{opacity: navOpacity}">
						通话
					</view>
				</slot>
			</view>
			<template v-slot:right>
				<slot name="right">
					<view class="rightImgBox" :class="['rightImgBox'+type]">

						<image v-if="type=='oppo'||type=='vivo'" class="rightImg"
							:src="`/static/image/call/${type}NavRightImg2.png`"></image>
						<image v-if="type!='ios'" class="rightImg" :class="['rightImg_'+type]"
							:src="`/static/image/call/${type}NavRightImg.png`"></image>
					</view>
				</slot>
			</template>
		</uni-nav-bar>

		<view class="tipLayer" :style="{ top: `${45 + data.statusBarHeight}px` }" v-if="isTipLayer&&showTipLayer">
			<view class="tipLayer-content">
				<view class="title">
					<slot name="tipLayer">点击此处<text>[{{ tipLayerText }}]</text></slot>
				</view>
				<image class="close" src="/static/image/common/tipLayer-close.png" mode="" @click="closeTipLayer"></image>
				<image v-if="type=='ios'||type=='oppo'" class="triangleImg" src="/static/image/common/tipLayer-eye2.png"></image>
				<image v-else class="triangleImg" src="/static/image/common/tipLayer-eye.png"></image>
			</view>
		</view>
	</view>
</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
		},
		tipLayerText: {
			type: String,
			default: ''
		},
		isTipLayer: {
			type: Boolean,
			default: false
		},
	})

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

	let {
		active,
		LeftTitle,
		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(() => {
		if (props.type == 'ios') {
			LeftTitle.value = '编辑'
		} else if (props.type == 'vivo') {
			LeftTitle.value = '拨号'
		} else if (props.type == 'oppo') {
			LeftTitle.value = '通话'
		} else if (props.type == 'huawei') {
			LeftTitle.value = '电话'
		} else {
			LeftTitle.value = ''
		}
		// 同步获取系统信息
		const systemInfo = uni.getSystemInfoSync();
		data.statusBarHeight = systemInfo.statusBarHeight || 0;
		if (props.isTipLayer) {
			if (uni.getStorageSync("call_" + props.type) == props.type) {
				showTipLayer.value = false
			}
		}
	})

	function setActive(status) {
		active.value = status
		uni.$emit('setActive', status)
	}

	const closeTipLayer = () => {
		showTipLayer.value = false
		uni.setStorageSync("call_" + props.type, props.type)
		emit("refresh")
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-navbar__header-btns {
		width: 27vw !important;
	}

	.iosLeftTitle {
		font-weight: 400;
		font-size: 16px;
		color: #018AE0;
	}

	.rightImgBox {
		display: flex;
		align-items: center;

		image {
			width: 24px;
			height: 24px;
		}
	}

	.rightImg_oppo {
		margin-left: 26px;
	}

	.rightImg_vivo {
		margin-left: 26px;
		margin-right: 16px;
	}

	.oppoLeftTitle {
		padding-left: 8px;
		font-weight: bold;
		font-size: 32px;
		color: #1A1A1A;
	}

	.huaweiLeftTitle {
		padding-left: 8px;
		font-weight: bold;
		font-size: 30px;
		color: #1A1A1A;
	}

	.vivoLeftTitle {
		padding-left: 34px;
		font-weight: bold;
		font-size: 30px;
		color: #1A1A1A;
	}

	.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-oppo {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.oppoBox {
			padding: 0 2px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 137px;
			height: 34px;
			background: #E9E9E9;
			border-radius: 17px 17px 17px 17px;

			.btn {
				font-size: 12px;
				color: #6B6B6B;
				width: 67px;
				height: 30px;
				text-align: center;
				line-height: 30px;
			}

			.active {
				color: #1A1A1A;
				background: #FFFFFF;
				border-radius: 17px 17px 17px 17px;
			}
		}
	}

	.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;
				margin: 0 2px;
			}
		}
	}

	.rightImg_xiaomi {
		width: 20px !important;
		height: 20px !important;
	}

	.rightImg_huawei {
		width: 38px !important;
		height: 38px !important;
	}

	.tipLayer {
		box-sizing: border-box;
		min-width: 200px !important;
		height: 48px;
		background: #B8EDFE;
		border-radius: 8px 8px 8px 8px;
		position: fixed;
		/* top: 115px; */
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;

		.tipLayer-content {
			position: relative;

			.title {
				font-weight: 450;
				font-size: 14px;
				color: #268FFF;
				line-height: 48px;
				text-align: center;

				text {
					font-size: 14px;
					font-weight: bold;
					color: #006ADD;
				}

				::v-deep text {
					font-size: 14px;
					font-weight: bold;
					color: #006ADD;
				}
			}

			.triangleImg {
				width: 111px;
				height: 52px;
				pointer-events: none;
				position: absolute;
				top: -23px;
				left: calc(50% - 111px);
			}

			.triangle {
				position: absolute;
				top: -57px;
				left: calc(50% - 40px);
				pointer-events: none;
			}

			.close {
				position: absolute;
				top: -5px;
				right: -5px;
				width: 18px;
				height: 18px;
			}
		}




	}
</style>