<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="address" v-if="bottomBtn" @click="toAddress">
					<view class="addressText">
						{{address}}
					</view>
					<view class="bottomBtn"></view>
				</view>
				<!-- 首页搜索框 -->
				<view class="search" :style="{height: ellipse + 'px'}" v-if="search" @click="toNewPage">
					<image class="searchImg" src="/static/mine/ic_search.png" mode="widthFix"></image>
					<input type="text" :focus="true" placeholder="搜索" placeholder-class="placeholder" />
				</view>
				<!-- 地址搜索框 -->
				<view class="searchTwo" :style="{height: ellipse + 'px'}" v-if="addressSearch" @click="toNewPage">
					<image class="searchImg" src="/static/mine/ic_search.png" mode="widthFix"></image>
					<input class="overdian" type="text" :value="searchContent" :placeholder="placeholder" placeholder-class="placeholderTwo" @input="iptContent"/>
				</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, //自定义返回路径 绝对路径
			// 搜索框
			search: Boolean, //首页搜索框显隐
			addressSearch: Boolean, //普通搜索框显隐
			searchContent: String, // 搜索值
			placeholder: String, //输入框提示信息
			toNewUrl: String, //点击跳转页面路径
			// 地址			
			bottomBtn: Boolean, //显隐
			address: String, //地址信息
			newAddress: String, //地址跳转
			// 定位搜索
			showSearhcInput: Boolean

		},
		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
					})
				}
			},
			// 搜索框点击
			toNewPage() {
				uni.navigateTo({
					url: this.toNewUrl
				})
			},
			//地址跳转
			toAddress() {
				let that = this
				uni.authorize({
				    scope: 'scope.userLocation',
				    success() {
						uni.navigateTo({
							url: that.newAddress
						})
				    },
					fail(err){
						console.log(err)
						that.$emit('alertModel',true)
					}
				})
			},
			//监听输入内容
			iptContent(e){
				// console.log(e)
				this.$emit('getChild',e)
				let val = e.detail.value
				if(/^[\x00-\xff]/.test(val)){
					let v = {
						first:val
					}
					this.$myRequest('/api/index/cit',v).then(res =>{
						this.$emit('getRes',res)
					})
				}else{
					let v = {
						shortname:val
					}
					this.$myRequest('/api/index/keywords',v).then(res =>{
						this.$emit('getRes',res)
					})
				}
			}
		},
	}
</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;
	}

	/* 搜索框 */
	.search {
		width: 400rpx;
		border-radius: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-55%, -50%);
		background: rgba(255, 255, 255, 0.8);
	}

	.searchTwo {
		padding-left: 32rpx;
		width: 448rpx;
		border-radius: 200rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 48%;
		transform: translate(-60%, -50%);
		background: rgba(247, 248, 250, 0.8);
	}

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

	.search>input {
		width: 60rpx;
		color: #323233;
	}

	.searchTwo>input {
		color: #323233;
		margin-left: 8rpx;
	}

	.placeholder {
		color: #969799;
		text-align: center;
		font-size: 28rpx;
	}

	.placeholderTwo {
		font-size: 28rpx;
		color: #C8C9CC;
	}

	.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%);
	}
	
	.overdian{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
</style>