<template>
	<view class="placeholder-box" style="width: 100%;" :style="{ height: `calc(${data.statusBarHeight}px + 88rpx)` }">
		<!-- <slot name="statusBar"></slot> -->
	</view>
	<view class="nav-bar-container" :style="{ backgroundColor: bgColor, zIndex: zIndex }">
		<view class="status-placeholder" :style="{ height: `${data.statusBarHeight}px` }">
			<slot name="statusBar"></slot>
		</view>
		<view class="nav-box" style="width: 100%;height: 88rpx;" @click="openPopup">
			<slot>
				<uni-nav-bar backgroundColor="#00000000" class="nav-bar" :border="false" :title="title" v-bind="$attrs"
					v-on="$attrs">
					<template v-slot:left>
						<view class="nav-bar-left" @click.stop="isClickNavBarOpenPopup ? openPopup() : ''">
							<slot name="left">
								<view v-if="isBack" class="left-icon" @click.stop="onBack">
									<image class="nav-icon-back"
										:src="`/static/image/nav-bar/back-${textColor == '#fff' || textColor == '#fffffff' ? 'white' : 'black'}.png`"
										mode="">
									</image>
								</view>
							</slot>
						</view>
					</template>
					<view class="nav-bar-title w100 h100 flex-1" @click="openPopup" :style="{ color: textColor }">
						<slot name="center">
							{{ title }}
						</slot>
					</view>
					<template v-slot:right>
						<view class="nav-bar-right" @click.stop="isClickNavBarOpenPopup ? openPopup() : onRightClick()">
							<slot name="right">
								<view v-if="isRightIcon" class="right-icon">
									<image class="nav-icon-more"
										:src="`/static/image/nav-bar/more-${textColor == '#fff' || textColor == '#fffffff' ? 'white' : 'black'}.png`"
										mode="">
									</image>
								</view>
								<view v-if="isRightButton" class="right-button">
									{{ rightButtonText }}
								</view>
							</slot>
						</view>
					</template>
				</uni-nav-bar>
			</slot>
		</view>


		<popup ref="topPopup">
			<view class="button-group w100 flex-between flex-wrap">
				<view class="button-box" v-for="(button, index) in buttonGroup" :key="index"
					@click="buttonClick(button)">
					<!-- 使用作用域插槽，允许父组件自定义按钮内容 -->

					<!-- 默认渲染 -->
					<view class="button flex-align-center flex-justify-center">
						<slot name="button" :button="button" :index="index">
							{{ button.name }}
							<switch v-if="button.isSwitch" :checked="button.value" @change="buttonClick(button)"
								style="transform: scale(0.7);"></switch>
						</slot>
					</view>

				</view>
			</view>
		</popup>


		<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 class="triangleImg" src="/static/image/common/tipLayer-eye.png"></image>
			</view>

		</view>
	</view>
</template>

<script setup>
	import popup from '../popup/popup.vue'
	import {
		onMounted,
		reactive,
		ref,
		toRefs
	} from 'vue'

	const topPopup = ref()

	// 定义组件属性
	const props = defineProps({
		bgColor: {
			type: String,
			default: '#fff'
		},
		textColor: {
			type: String,
			default: '#000'
		},
		title: {
			type: String,
			default: ''
		},
		buttonGroup: {
			type: Array,
			default: () => []
		},
		isRightIcon: {
			type: Boolean,
			default: false
		},
		isRightButton: {
			type: Boolean,
			default: false
		},
		rightButtonText: {
			type: String,
			default: '确定'
		},
		zIndex: {
			type: Number,
			default: 999
		},
		noBack: {
			type: Boolean,
			default: false
		},
		isBack: {
			type: Boolean,
			default: true
		},
		tipLayerText: {
			type: String,
			default: ''
		},
		isTipLayer: {
			type: Boolean,
			default: false
		},
		tipLayerType: {
			type: String,
			default: ''
		},
		isClickNavBarOpenPopup: {
			type: Boolean,
			default: false
		}
	})

	// 定义事件
	const emit = defineEmits(['back', 'right-click', 'button-click', 'refresh'])

	const data = reactive({
		statusBarHeight: 0,
		showTipLayer: true,
	})

	let {
		showTipLayer
	} = toRefs(data)


	onMounted(() => {
		// 同步获取系统信息
		const systemInfo = uni.getSystemInfoSync();
		data.statusBarHeight = systemInfo.statusBarHeight || 0;

		if (props.isTipLayer) {
			if (uni.getStorageSync(props.tipLayerType) == props.tipLayerType) {
				showTipLayer.value = false
			}
		}

	})

	const closeTipLayer = () => {
		showTipLayer.value = false
		uni.setStorageSync(props.tipLayerType, props.tipLayerType)
		emit("refresh")
	}

	const openPopup = () => {
		if (props.buttonGroup.length > 0) {
			topPopup.value.open()
		}
	}

	// 返回按钮点击事件
	const onBack = () => {
		emit('back')
		// 默认返回上一页
		if (props.noBack) return
		uni.navigateBack()
	}

	// 右侧按钮点击事件
	const onRightClick = () => {
		emit('right-click')
	}

	const closeTopPopup = () => {
		topPopup.value.close()
	}


	const buttonClick = (button) => {
		closeTopPopup()
		emit('button-click', button)
	}

	// 暴露给父组件的方法
	defineExpose({
		openPopup,
		closeTopPopup
	})
</script>

<style scoped>
	@import "/common/main.css";

	.nav-bar-container {
		display: flex;
		flex-direction: column;
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.nav-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 1;
	}

	.status-placeholder {
		width: 100%;
	}

	::v-deep .uni-navbar__content {
		width: 100%;
	}

	.nav-bar-left {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.nav-icon-back {
		width: 24px;
		height: 24px;
	}

	.nav-icon-more {
		width: 26px;
		height: 26px;
	}

	.nav-bar-title {
		flex: 1;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 17px;
		font-weight: 500;
	}

	.nav-bar-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.right-button {
		font-size: 12px;
		border-radius: 16px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		height: 30px;
		min-width: 60px;
		background: linear-gradient(90deg, #187AFF 0%, #3295FC 100%);
	}

	.button-box {
		width: calc(50% - 8rpx);
		text-align: center;
		margin-top: 16rpx;
	}

	.button {
		border: 1px solid #E4E4E4;
		border-radius: 8px;
		height: 42px;
		line-height: 42px;
		font-size: 28rpx;
	}

	.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>