<template name="head">
	<!-- 头部内容 -->
	<view class="headBoxBox" :style="{height: headHeight + 'px'}">
		<view class="headBox" :style="{height: headHeight + 'px',background:'#'+ bgColor}">
			<!-- 状态栏 -->
			<view class="state" :style="{height: statusHeight + 'px'}"></view>
			<!-- 导航栏 -->
			<view class="nav" :style="{height: navHeight + 'px'}">
				<!-- 返回按钮 -->
				<view :class="[backBtnColor ? 'backBtnWhite' : 'backBtnBlack']" v-if="backBtn" @click="backDefault">
				</view>
				<!-- 顶部标题 -->
				<view class="title" v-if="showTitle">
					{{title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "head",
		data() {
			return {
				// 头部整体高度
				headHeight: '',
				//状态栏高度
				statusHeight: '',
				//导航栏高度
				navHeight: '',
				// 胶囊高度
				ellipse: '',
			};
		},
		props: {
			//背景色
			bgColor: String,
			// 标题
			title: String, //内容
			showTitle: Boolean, //显隐
			// 返回按钮
			backBtnColor: Boolean, //颜色 默认黑色 true为白色
			backBtn: Boolean, // 按钮显隐
			howBack: Boolean, //返回方式 默认返回上一页 true为自定义返回页面
			customURL: String, //自定义返回路径 绝对路径
		},
		mounted() {
			// 设备信息
			let detail = uni.getSystemInfoSync()
			// 获取设备的系统
			let system = detail.system
			//获取状态栏高度
			this.statusHeight = detail.statusBarHeight
			// 胶囊信息
			let ellipse = uni.getMenuButtonBoundingClientRect()
			//获取胶囊高度
			this.ellipse = ellipse.height
			//获取胶囊距顶部距离
			let absTop = ellipse.top
			//计算导航栏高度 = (胶囊距顶部距离 - 状态栏高度) * 2 + 胶囊高度
			this.navHeight = (absTop - this.statusHeight) * 2 + this.ellipse
			//计算整体高度
			let cheack = /iOS/
			//判断设备型号
			if (cheack.test(system)) {
				// iOS
				this.headHeight = this.statusHeight + this.navHeight + 4
			} else {
				//Android
				this.headHeight = this.statusHeight + this.navHeight
			}
		},
		methods: {
			//返回上一页
			backDefault() {
				if (this.howBack) {
					uni.reLaunch({
						url: this.customURL
					})
					console.log("请填写指定路径");
					console.log(this.customURL);
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			//地址跳转
			toAddress() {
				uni.navigateTo({
					url: this.newAddress
				})
			},

		},
	}
</script>

<style>
	.headBoxBox {
		width: 100%;
	}

	.headBox,
	.state,
	.nav {
		width: 750rpx;
	}

	/* 头部整体内容 */
	.headBox {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}

	/* 状态栏 */
	.state {
		position: relative;
	}

	/* 导航栏 */
	.nav {
		display: flex;
		align-items: center;
		position: relative;
	}

	.searchImg {
		width: 32rpx;
		height: 32rpx;
	}

	.backBtnBlack {
		margin-left: 32rpx;
		right: 50rpx;
		top: 150rpx;
		content: "";
		display: inline-block;
		height: 20rpx;
		width: 20rpx;
		border-width: 0 0 2px 2px;
		border-color: #000;
		border-style: solid;
		transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
		-webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
	}

	.backBtnWhite {
		margin-left: 32rpx;
		right: 50rpx;
		top: 150rpx;
		content: "";
		display: inline-block;
		height: 20rpx;
		width: 20rpx;
		border-width: 0 0 2px 2px;
		border-color: #fff;
		border-style: solid;
		transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
		-webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
	}

	.bottomBtn {
		right: 50rpx;
		top: 150rpx;
		content: "";
		display: inline-block;
		height: 16rpx;
		width: 16rpx;
		border-width: 0 2px 2px 0;
		border-color: #fff;
		border-style: solid;
		transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
		-webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
	}

	.address {
		display: flex;
		align-items: center;
		margin-left: 32rpx;
	}

	.addressText {
		color: #fff;
		font-weight: 600;
		width: 96rpx;
		overflow: hidden;
		white-space: nowrap;
	}

	.title {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
</style>