<template>
	<view class="title-header-box" :style="{height:`${height}px`}">
		<view class="title-header" :style="{paddingTop:`${padHeight}px`,height:`${height}px`}">
			<view class="left" @click="goBack"><uni-icons type="left" size="30"></uni-icons></view>
			<view class="center">
				<view class="title">三个桃子</view>
				<view class="subtitle">时间里的约定</view>
			</view>
			<view class="right"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "SearchHeader",
		props: ['title', 'icon'],
		watch: {
			'title'(newVal, oldVal) {
				this.title = newVal
			}
		},
		data() {
			return {
				keywords: '',
				padHeight: 60,
				height: 88
			}
		},
		created() {
			const systemInfo = uni.getSystemInfoSync();
			const statusBarHeight = systemInfo.statusBarHeight;
			const rect = uni.getMenuButtonBoundingClientRect();
			this.height = statusBarHeight + 55
			uni.setStorageSync('titleHeight', this.height)
			this.padHeight = systemInfo.statusBarHeight - 15
			this.right = (systemInfo.screenWidth - rect.right) + rect.width
		}
	}
</script>

<style scoped>
	.title-header-box {
		background-color: #FFF;
		color: #000000;
	}

	.title-header {
		/* background-color: #FFC825; */
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 88rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1000;
		padding-top: 60rpx;
	}

	.title-header .left {
		padding-left: 30rpx;
		width: 58rpx;
		display: flex;
		position: absolute;
		left: 0;
	}

	.title-header .search-box {
		width: 502rpx;
		height: 58rpx;
		border-radius: 29rpx;
		background: #F0F0F0;
		padding: 0 26rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}

	.title-header .search-box .iconfont {
		flex-shrink: 0;
		color: #999999;
		font-size: 30rpx;
		margin-right: 10;
	}

	.title-header .search-box .input {
		flex: 1;
		border: none;
		outline: none;
		background: none;
		color: #666;
	}
	
	.title{
		font-size: 30rpx;
		text-align: center;
	}
	
	.subtitle{
		font-size: 22rpx;
		text-align: center;
	}
</style>
